From b24c7ca52a2ee5fd79ba9f16e4a5ada2cd66121c Mon Sep 17 00:00:00 2001
From: Lennart <18233294+lennart-k@users.noreply.github.com>
Date: Wed, 16 Apr 2025 20:52:56 +0200
Subject: [PATCH] some minor frontend work

---
 crates/frontend/public/assets/style.css       | 155 +++++++++++++++++-
 .../frontend/public/templates/pages/user.html | 144 ++++++----------
 2 files changed, 201 insertions(+), 98 deletions(-)

diff --git a/crates/frontend/public/assets/style.css b/crates/frontend/public/assets/style.css
index c4dd3f8..439a046 100644
--- a/crates/frontend/public/assets/style.css
+++ b/crates/frontend/public/assets/style.css
@@ -12,22 +12,31 @@ body {
 }
 
 header {
-  background: #EEE;
-  height: 80px;
+  background: var(--background-darker);
+  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 {
-    margin-left: auto;
+    display: contents;
+
+    button {
+      margin-left: auto;
+    }
   }
 }
 
@@ -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;
+        }
+      }
+    }
+  }
+}
diff --git a/crates/frontend/public/templates/pages/user.html b/crates/frontend/public/templates/pages/user.html
index d336b6d..3f2ec3f 100644
--- a/crates/frontend/public/templates/pages/user.html
+++ b/crates/frontend/public/templates/pages/user.html
@@ -1,112 +1,65 @@
 {% extends "layouts/default.html" %}
 
 {% block content %}
-<style>
-li.collection-list-item {
-  list-style: none;
-  display: contents;
+<div id="page-user">
 
-  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>
 
-<h2>Profile</h2>
+<section>
+  <h2>Profile</h2>
 
-<form>
-  <label for="user_displayname">Displayname</label>
-  <input type="text" value="{{ user.displayname.clone().unwrap_or(String::new()) }}" id="user_displayname" />
-</form>
+  <form>
+    <label for="user_displayname">Displayname</label>
+    <input type="text" value="{{ user.displayname.clone().unwrap_or(String::new()) }}" id="user_displayname" />
+  </form>
 
-<h3>Groups</h3>
+  <h3>Groups</h3>
 
-<ul>
-  {% for group in user.memberships %}
-    <li>{{ group }}</li>
-  {% endfor %}
-</ul>
+  <ul>
+    {% for group in user.memberships %}
+      <li>{{ group }}</li>
+    {% endfor %}
+  </ul>
 
-<h3>App tokens</h3>
+  <h3>App tokens</h3>
 
-<table>
-  <tr>
-    <th>Name</th>
-    <th>Created at</th>
-    <th></th>
-  </tr>
-  {% for app_token in user.app_tokens %}
-  <tr>
-    <td>{{ app_token.name }}</td>
-    <td>
-      {% if let Some(created_at) = app_token.created_at %}
-        {{ created_at.to_rfc3339() }}
-      {% endif %}
-    </td>
-    <td>
-      <form action="/frontend/user/{{ user.id }}/app_token/{{ app_token.id }}/delete" method="POST">
-        <button type="submit">Delete</button>
-      </form>
-    </td>
-  </tr>
-  {% endfor %}
-  <tr>
+  <table>
+    <tr>
+      <th>Name</th>
+      <th>Created at</th>
+      <th></th>
+    </tr>
+    {% for app_token in user.app_tokens %}
+    <tr>
+      <td>{{ app_token.name }}</td>
       <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>
-          <input type="text" name="name" id="generate_app_token_name" />
+        {% if let Some(created_at) = app_token.created_at %}
+          {{ created_at.to_rfc3339() }}
+        {% endif %}
+      </td>
+      <td>
+        <form action="/frontend/user/{{ user.id }}/app_token/{{ app_token.id }}/delete" method="POST">
+          <button type="submit" class="delete">Delete</button>
         </form>
       </td>
-      <td></td>
-      <td>
-        <button type="submit" form="form_generate_app_token">Generate</button>
-      </td>
-  </tr>
-</table>
+    </tr>
+    {% endfor %}
+    <tr>
+        <td>
+          <form action="/frontend/user/{{ user.id }}/app_token" method="POST" id="form_generate_app_token">
+            <label class="font_bold" for="generate_app_token_name">App name</label>
+            <input type="text" name="name" id="generate_app_token_name" />
+          </form>
+        </td>
+        <td></td>
+        <td>
+          <button type="submit" form="form_generate_app_token">Generate</button>
+        </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 %}