CHANGE: refractor + refined user routes, added change pw form and function

Backend/static/css/styles.css

@@ -565,6 +565,9 @@
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
   .block {
     display: block;
   }
@@ -606,21 +609,24 @@
   .h-full {
     height: 100%;
   }
-  .w-1 {
-    width: calc(var(--spacing) * 1);
-  }
-  .w-1\/2 {
-    width: calc(1/2 * 100%);
-  }
   .w-2 {
     width: calc(var(--spacing) * 2);
   }
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
+  .w-9 {
+    width: calc(var(--spacing) * 9);
+  }
+  .w-9\/10 {
+    width: calc(9/10 * 100%);
+  }
   .w-\[2px\] {
     width: 2px;
   }
+  .w-\[90\%\] {
+    width: 90%;
+  }
   .w-full {
     width: 100%;
   }
@@ -697,9 +703,6 @@
       border-color: var(--color-neutral-400);
     }
   }
-  .self-end {
-    align-self: flex-end;
-  }
   .justify-self-end {
     justify-self: flex-end;
   }
@@ -726,15 +729,9 @@
   .border-neutral-300 {
     border-color: var(--color-neutral-300);
   }
-  .border-neutral-400 {
-    border-color: var(--color-neutral-400);
-  }
   .border-neutral-900 {
     border-color: var(--color-neutral-900);
   }
-  .border-red-600 {
-    border-color: var(--color-red-600);
-  }
   .bg-accent {
     background-color: var(--color-accent);
   }
@@ -753,9 +750,6 @@
   .bg-purple-600 {
     background-color: var(--color-purple-600);
   }
-  .bg-red-200 {
-    background-color: var(--color-red-200);
-  }
   .bg-red-600 {
     background-color: var(--color-red-600);
   }
@@ -775,9 +769,9 @@
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
-  .text-xs {
-    font-size: var(--text-xs);
-    line-height: var(--tw-leading, var(--text-xs--line-height));
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
   }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
@@ -786,12 +780,12 @@
   .text-accent {
     color: var(--color-accent);
   }
+  .text-accent-600 {
+    color: var(--color-accent-600);
+  }
   .text-neutral-500 {
     color: var(--color-neutral-500);
   }
-  .text-neutral-600 {
-    color: var(--color-neutral-600);
-  }
   .text-neutral-700 {
     color: var(--color-neutral-700);
   }
@@ -953,6 +947,11 @@
       display: inline;
     }
   }
+  .md\:w-1\/2 {
+    @media (width >= 48rem) {
+      width: calc(1/2 * 100%);
+    }
+  }
   .md\:grid-cols-5 {
     @media (width >= 48rem) {
       grid-template-columns: repeat(5, minmax(0, 1fr));