ui/ux improvements

assets/css/styles.css

@@ -191,6 +191,30 @@ svg {
   }
 }
 /* FORMS */
+input[type=checkbox]:focus,
+input[type=color]:focus,
+input[type=date]:focus,
+input[type=datetime-local]:focus,
+input[type=datetime]:focus,
+input[type=email]:focus,
+input[type=month]:focus,
+input[type=number]:focus,
+input[type=password]:focus,
+input[type=radio]:focus,
+input[type=search]:focus,
+input[type=tel]:focus,
+input[type=text]:focus,
+input[type=textarea]:focus,
+input[type=time]:focus,
+input[type=url]:focus,
+input[type=week]:focus,
+select:focus,
+textarea:focus {
+  border-color: var(--primary-500) !important;
+  box-shadow: 0 0 0 1px var(--gray-500) !important;
+  outline: 2px solid transparent !important;
+}
+
 [type=text],
 [type=email],
 [type=url],
@@ -1465,6 +1489,14 @@ select {
   inset: 0px;
 }
 
+.-top-0 {
+  top: 0px;
+}
+
+.-top-0\.5 {
+  top: -0.125rem;
+}
+
 .bottom-0 {
   bottom: 0px;
 }
@@ -1485,20 +1517,8 @@ select {
   top: 0px;
 }
 
-.left-0 {
-  left: 0px;
-}
-
-.-top-0 {
-  top: 0px;
-}
-
-.-top-0\.5 {
-  top: -0.125rem;
-}
-
-.-top-1 {
-  top: -0.25rem;
+.right-2 {
+  right: 0.5rem;
 }
 
 .z-20 {
@@ -1556,6 +1576,10 @@ select {
   margin-top: 2rem;
 }
 
+.ml-4 {
+  margin-left: 1rem;
+}
+
 .inline {
   display: inline;
 }
@@ -1656,14 +1680,14 @@ select {
   max-width: 80rem;
 }
 
-.max-w-xl {
-  max-width: 36rem;
-}
-
 .max-w-none {
   max-width: none;
 }
 
+.max-w-xl {
+  max-width: 36rem;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1794,32 +1818,23 @@ select {
   overflow-y: scroll;
 }
 
-.rounded-md {
-  border-radius: 0.375rem;
-}
-
 .rounded-full {
   border-radius: 9999px;
 }
 
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
 .border {
   border-width: 1px;
 }
 
-.border-2 {
-  border-width: 2px;
-}
-
 .border-blue-500 {
   --tw-border-opacity: 1;
   border-color: rgb(10 28 50/var(--tw-border-opacity));
 }
 
-.border-white {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 255 255/var(--tw-border-opacity));
-}
-
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0/var(--tw-bg-opacity));
@@ -1932,6 +1947,10 @@ select {
   object-position: top;
 }
 
+.p-1 {
+  padding: 0.25rem;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
@@ -1944,14 +1963,6 @@ select {
   padding: 2rem;
 }
 
-.p-1 {
-  padding: 0.25rem;
-}
-
-.p-6 {
-  padding: 1.5rem;
-}
-
 .px-12 {
   padding-left: 3rem;
   padding-right: 3rem;
@@ -2044,6 +2055,10 @@ select {
   padding-top: 1rem;
 }
 
+.pr-2 {
+  padding-right: 0.5rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -2159,10 +2174,6 @@ select {
   text-decoration-line: underline;
 }
 
-.opacity-60 {
-  opacity: 0.6;
-}
-
 .opacity-70 {
   opacity: 0.7;
 }