some minor frontend work

crates/frontend/public/assets/style.css

@@ -12,24 +12,33 @@ body {
 }
 
 header {
-  background: #EEE;
+  background: var(--background-darker);
-  height: 80px;
+  height: 60px;
   font-weight: bold;
   display: flex;
   align-items: center;
   padding: 12px;
-  font-size: 2em;
+
+  border: 2px solid black;
+  border-radius: 12px;
+  margin: 12px;
+  box-shadow: 4px 2px 12px -5px black;
 
   a {
+    font-size: 2em;
     text-decoration: none;
     color: black;
   }
 
 
   .logout_form {
+    display: contents;
+
+    button {
       margin-left: auto;
     }
   }
+}
 
 .login_window {
   display: flex;
@@ -37,3 +46,141 @@ header {
   justify-content: center;
   align-items: center;
 }
+
+:root {
+  --background-color: #FFF;
+  --background-darker: #EEE;
+  --primary-color: #2F2FE1;
+  --primary-color-dark: color-mix(in srgb, var(--primary-color), #000000 80%);
+  --text-on-primary-color: #FFF;
+  /* --color-red: #FE2060; */
+  --color-red: #EE1D59;
+}
+
+html {
+  background-color: var(--background-color);
+}
+
+button {
+  border: none;
+  background: var(--primary-color);
+  padding: 8px 12px;
+  border-radius: 8px;
+  color: var(--text-on-primary-color);
+  font-size: 0.9em;
+
+  &:hover {
+    filter: brightness(90%);
+  }
+
+  &.delete {
+    background: var(--color-red);
+  }
+}
+
+input[type="text"] {
+  border: 1px solid black;
+  border-radius: 8px;
+  padding: 4px 8px;
+}
+
+
+.font_bold {
+  font-weight: bold;
+}
+
+section {
+  border: 2px solid black;
+  border-radius: 12px;
+  box-shadow: 4px 2px 12px -5px black;
+  border-collapse: collapse;
+  padding: 8px 24px 12px;
+  margin: 18px 12px;
+}
+
+table {
+  border: 2px solid black;
+  border-radius: 12px;
+  box-shadow: 4px 2px 12px -5px black;
+  border-collapse: collapse;
+
+  td,
+  th {
+    padding: 8px;
+    border: 1px solid black;
+  }
+
+  th {
+    height: 40px;
+  }
+
+  tr:nth-of-type(2n+1) {
+    background: var(--background-darker);
+  }
+
+  tr:hover {
+    background: #DDD;
+  }
+}
+
+
+#page-user {
+  ul {
+    padding-left: 0;
+
+    li.collection-list-item {
+      list-style: none;
+      display: contents;
+
+      a {
+        background: #EEE;
+        display: grid;
+        min-height: 80px;
+        grid-template-areas:
+          ". color-chip"
+          "title color-chip"
+          "description color-chip"
+          "subscription-url color-chip"
+          "restore color-chip"
+          ". color-chip";
+        grid-template-rows: 12px auto auto auto 12px;
+        grid-template-columns: auto 50px;
+        color: inherit;
+        text-decoration: none;
+        padding-left: 12px;
+
+        border: 2px solid black;
+        border-radius: 12px;
+        margin: 12px;
+        box-shadow: 4px 2px 12px -5px black;
+
+        .title {
+          font-weight: bold;
+          grid-area: title;
+        }
+
+        .description {
+          grid-area: description;
+        }
+
+        .subscription-url {
+          grid-area: subscription-url;
+        }
+
+        .color-chip {
+          background: var(--color);
+          grid-area: color-chip;
+          border-radius: 0 12px 12px 0;
+        }
+
+        .restore-form {
+          grid-area: restore;
+        }
+
+        &:hover {
+          background: #DDD;
+        }
+      }
+    }
+  }
+}

crates/frontend/public/templates/pages/user.html

@@ -1,60 +1,11 @@
 {% extends "layouts/default.html" %}
 
 {% block content %}
-<style>
+<div id="page-user">
-li.collection-list-item {
-  list-style: none;
-  display: contents;
 
-  a {
-    background: #EEE;
-    display: grid;
-    margin: 12px;
-    min-height: 80px;
-    border-radius: 12px;
-    grid-template-areas:
-      ". color-chip"
-      "title color-chip"
-      "description color-chip"
-      "subscription-url color-chip"
-      "restore color-chip"
-      ". color-chip";
-    grid-template-rows: 12px auto auto auto 12px;
-    grid-template-columns: auto 50px;
-    color: inherit;
-    text-decoration: none;
-    padding-left: 12px;
-
-    .title {
-      grid-area: title;
-    }
-
-    .description {
-      grid-area: description;
-    }
-
-    .subscription-url {
-      grid-area: subscription-url;
-    }
-
-    .color-chip {
-      background: var(--color);
-      grid-area: color-chip;
-      border-radius: 0 12px 12px 0;
-    }
-
-    .restore-form {
-      grid-area: restore;
-    }
-
-    &:hover {
-      background: #DDD;
-    }
-  }
-}
-</style>
 <h1>Welcome {{ user.id }}!</h1>
 
+<section>
   <h2>Profile</h2>
 
   <form>
@@ -88,7 +39,7 @@ li.collection-list-item {
       </td>
       <td>
         <form action="/frontend/user/{{ user.id }}/app_token/{{ app_token.id }}/delete" method="POST">
-        <button type="submit">Delete</button>
+          <button type="submit" class="delete">Delete</button>
         </form>
       </td>
     </tr>
@@ -96,7 +47,7 @@ li.collection-list-item {
     <tr>
         <td>
           <form action="/frontend/user/{{ user.id }}/app_token" method="POST" id="form_generate_app_token">
-          <label for="generate_app_token_name">App name</label>
+            <label class="font_bold" for="generate_app_token_name">App name</label>
             <input type="text" name="name" id="generate_app_token_name" />
           </form>
         </td>
@@ -106,7 +57,9 @@ li.collection-list-item {
         </td>
     </tr>
   </table>
+</section>
 
+<section>
 <h2>Calendars</h2>
 <ul>
   {% for calendar in calendars %}
@@ -147,7 +100,9 @@ li.collection-list-item {
   {% endfor %}
 </ul>
 {% endif %}
+</section>
 
+<section>
 <h2>Addressbooks</h2>
 <ul>
   {% for addressbook in addressbooks %}
@@ -181,5 +136,6 @@ li.collection-list-item {
   {% endfor %}
 </ul>
 {% endif %}
+</section>
 {% endblock %}