Admin UX improvement

-- shifted save changes button so it can be accessed from any page

css/main.css

@@ -921,6 +921,10 @@ ul {
   padding: 0.6rem 0.8rem;
 }
 
+#commit_wrapper {
+  grid-area: 2/1/3/-1;
+}
+
 #main_nav {
   grid-area: main-nav;
   position: relative;
@@ -972,7 +976,7 @@ ul {
   border-radius: 0.5rem;
   background-color: rgba(var(--foreground-color), 1);
   width: 100%;
-  border: solid thin rgba(var(--text-color), 0.1);
+  border: solid 1px rgba(var(--text-color), 0.2);
   font-size: 0.9rem;
 }
 .display-task__category {
@@ -1239,6 +1243,7 @@ ul {
   padding: 1rem;
   border-radius: 0.5rem;
   background-color: rgba(var(--foreground-color), 1);
+  border: solid rgba(var(--text-color), 0.1) 1px;
 }
 
 .update__topic {
@@ -1424,6 +1429,7 @@ ul {
   padding: 1rem;
   border-radius: 0.5rem;
   background-color: rgba(var(--foreground-color), 1);
+  border: solid 1px rgba(var(--text-color), 0.1);
 }
 .intern_profile__task p {
   font-weight: 500;
@@ -1510,7 +1516,7 @@ ul {
   gap: 0.5rem;
   border-radius: 0.5rem;
   background: rgba(var(--foreground-color), 1);
-  border: solid thin rgba(var(--text-color), 0.3);
+  border: solid thin rgba(var(--text-color), 0.2);
 }
 .admin-task .task-title {
   line-height: 1.6;

css/main.scss

@@ -878,6 +878,9 @@ ul {
   font-size: 0.8rem;
   padding: 0.6rem 0.8rem;
 }
+#commit_wrapper {
+  grid-area: 2/1/3/-1;
+}
 
 #main_nav {
   grid-area: main-nav;
@@ -935,7 +938,7 @@ ul {
   border-radius: 0.5rem;
   background-color: rgba(var(--foreground-color), 1);
   width: 100%;
-  border: solid thin rgba(var(--text-color), 0.1);
+  border: solid 1px rgba(var(--text-color), 0.2);
   font-size: 0.9rem;
   &__category {
     display: inline-flex;
@@ -1205,6 +1208,7 @@ ul {
   padding: 1rem;
   border-radius: 0.5rem;
   background-color: rgba(var(--foreground-color), 1);
+  border: solid rgba(var(--text-color), 0.1) 1px;
 }
 
 .update__topic {
@@ -1384,6 +1388,7 @@ ul {
   padding: 1rem;
   border-radius: 0.5rem;
   background-color: rgba(var(--foreground-color), 1);
+  border: solid 1px rgba(var(--text-color), 0.1);
   p {
     font-weight: 500;
   }
@@ -1459,7 +1464,7 @@ ul {
   gap: 0.5rem;
   border-radius: 0.5rem;
   background: rgba(var(--foreground-color), 1);
-  border: solid thin rgba(var(--text-color), 0.3);
+  border: solid thin rgba(var(--text-color), 0.2);
   .task-title {
     line-height: 1.6;
     font-size: 1.1rem;

index.html

@@ -227,6 +227,19 @@
                 </svg>
                 <div id="user_profile_id" class="overflow-ellipsis"></div>
             </button>
+            <div id="commit_wrapper" class="flex align-center space-between gap-1 hidden">
+                <strong>Don't forget to save changes!</strong>
+                <button id="commit_changes_button" class="button button--small button--primary admin-option"
+                    onclick="commitToChanges()">
+                    <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
+                        height="24">
+                        <path fill="none" d="M0 0h24v24H0z" />
+                        <path
+                            d="M7 19v-6h10v6h2V7.828L16.172 5H5v14h2zM4 3h13l4 4v13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm5 12v4h6v-4H9z" />
+                    </svg>
+                    Save
+                </button>
+            </div>
         </header>
         <nav id="main_nav">
             <a id="dashboard_btn" href="#/dashboard_page" class="nav-list__item nav-list__item--active interactive"
@@ -340,16 +353,6 @@
                         <sm-chip value="task_display">Task display</sm-chip>
                         <sm-chip value="requests">Requests</sm-chip>
                     </sm-chips>
-                    <button id="commit_changes_button" class="button button--small button--primary admin-option"
-                        onclick="commitToChanges()">
-                        <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
-                            width="24" height="24">
-                            <path fill="none" d="M0 0h24v24H0z" />
-                            <path
-                                d="M7 19v-6h10v6h2V7.828L16.172 5H5v14h2zM4 3h13l4 4v13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm5 12v4h6v-4H9z" />
-                        </svg>
-                        Save changes
-                    </button>
                 </div>
                 <div id="admin_views">
                     <section id="projects_container">
@@ -2671,6 +2674,7 @@
             getRef('commit_changes_button').setAttribute('data-badge', floGlobals.adminChanges)
             if (floGlobals.adminChanges === 1) {
                 addEventListener("beforeunload", beforeUnloadListener, { capture: true });
+                getRef('commit_wrapper').classList.remove('hidden')
             }
         }
         function getTaskDeadline(taskId, internId = floGlobals.myFloID) {
@@ -3262,6 +3266,7 @@
                         floGlobals.adminChanges = 0
                         getRef('commit_changes_button').removeAttribute('data-badge')
                         removeEventListener("beforeunload", beforeUnloadListener, { capture: true });
+                        getRef('commit_wrapper').classList.add('hidden')
                     }).catch(err => {
                         console.error(err)
                     })