🐛 Bug fixes of risk detection

💄 Optimized UI

pkg/views/partials/header.gohtml

@@ -83,6 +83,7 @@
         html, body {
             padding: 0;
             margin: 0;
+            background-color: var(--md-sys-color-surface-container);
         }
     </style>
 </head>

pkg/views/users/personalize.gohtml

@@ -8,9 +8,13 @@
 <div class="right-part">
     <div class="responsive-title-gap"></div>
 
-    <div class="action-form">
-        <div class="input-label">Avatar</div>
+    <div class="personalize-actions">
+        <md-filled-tonal-button class="personalize-action" data-target="avatar">
+            Edit Avatar
+            <span slot="icon" class="material-symbols-outlined">account_circle</span>
+        </md-filled-tonal-button>
         <input
+                hidden
                 id="avatar-input"
                 class="block-field"
                 name="avatar"
@@ -19,8 +23,12 @@
                 placeholder="Avatar"
         >
 
-        <div class="input-label">Banner</div>
+        <md-filled-tonal-button class="personalize-action" data-target="banner">
+           Edit Banner
+            <span slot="icon" class="material-symbols-outlined">background_replace</span>
+        </md-filled-tonal-button>
         <input
+                hidden
                 id="banner-input"
                 class="block-field"
                 name="banner"
@@ -30,8 +38,6 @@
         >
     </div>
 
-    <md-divider style="margin: 1rem 0"></md-divider>
-
     <form class="action-form" action="/users/me/personalize" method="POST">
         <div class="columns-two">
             <md-outlined-text-field
@@ -110,9 +116,32 @@
         font-size: 14px;
         text-align: left;
     }
+
+    .personalize-actions {
+        display: flex;
+        gap: 0.5rem;
+        margin-bottom: 1.5rem;
+        margin-left: -0.2rem;
+        margin-right: -0.2rem;
+    }
+
+    .personalize-actions .personalize-action {
+        width: fit-content;
+    }
+
+    .personalize-action .material-symbols-outlined {
+        font-size: 20px;
+        margin-bottom: 2px;
+    }
 </style>
 
 <script>
+    document.querySelectorAll(".personalize-action").forEach((element) => {
+        element.addEventListener("click", (_) => {
+            document.getElementById(`${element.getAttribute("data-target")}-input`).click();
+        })
+    })
+
     document.getElementById("avatar-input").addEventListener("input", (evt) => {
         if (!evt.target.files) return
         const data = new FormData();