UI fixes

css/main.css

@@ -137,12 +137,13 @@ button,
   color: inherit;
   -webkit-tap-highlight-color: transparent;
   align-items: center;
-  font-size: 0.9rem;
+  font-size: inherit;
   font-weight: 500;
   white-space: nowrap;
   padding: 0.8rem;
   border-radius: 0.3rem;
   justify-content: center;
+  text-transform: capitalize;
 }
 button:focus-visible,
 .button:focus-visible {
@@ -1144,6 +1145,18 @@ ul {
   color: rgba(var(--text-color), 0.8);
 }
 
+#all_interns_list,
+#admin_page__intern_list {
+  gap: 0.5rem;
+  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+}
+#all_interns_list .intern-card,
+#admin_page__intern_list .intern-card {
+  margin: 0;
+  gap: 1rem;
+  background-color: rgba(var(--foreground-color), 1);
+}
+
 .intern-card {
   display: flex;
   padding: 1rem;
@@ -1154,7 +1167,6 @@ ul {
           user-select: none;
   padding: 0.8rem 1rem;
   gap: 0.8rem;
-  cursor: pointer;
 }
 .intern-card input {
   height: 1.3em;
@@ -1335,7 +1347,6 @@ ul {
   stroke-dasharray: 400;
   stroke-dashoffset: var(--progress, 400);
   transform: rotate(-90deg);
-  stroke-linecap: round;
   transition: stroke-dashoffset 1s;
 }
 .stat__count {
@@ -1687,6 +1698,23 @@ ul {
   flex: 1;
 }
 
+#admin_page__intern_list {
+  display: grid;
+  padding: 0 1rem;
+}
+#admin_page__intern_list .button {
+  justify-content: flex-start;
+  border-radius: 0.5rem;
+}
+#admin_page__intern_list .button .icon {
+  padding: 0.6rem;
+  height: 2.6rem;
+  width: 2.6rem;
+  background-color: rgba(var(--text-color), 0.04);
+  border-radius: 3rem;
+  margin-right: 1rem;
+}
+
 #update_of_project {
   color: rgba(var(--text-color), 0.8);
 }
@@ -2088,16 +2116,6 @@ input[type=date]:focus {
     overflow-y: auto;
     grid-area: updates;
   }
-  #all_interns_list {
-    gap: 0.5rem;
-    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
-  }
-  #all_interns_list .intern-card {
-    margin: 0;
-    gap: 1rem;
-    border-radius: 0.5rem;
-    background-color: rgba(var(--foreground-color), 1);
-  }
   #intern_list_popup {
     --height: 80vh;
   }

css/main.scss

@@ -125,12 +125,13 @@ button,
   color: inherit;
   -webkit-tap-highlight-color: transparent;
   align-items: center;
-  font-size: 0.9rem;
+  font-size: inherit;
   font-weight: 500;
   white-space: nowrap;
   padding: 0.8rem;
   border-radius: 0.3rem;
   justify-content: center;
+  text-transform: capitalize;
 
   &:focus-visible {
     outline: var(--accent-color) solid medium;
@@ -1136,6 +1137,17 @@ ul {
   color: rgba(var(--text-color), 0.8);
 }
 
+#all_interns_list,
+#admin_page__intern_list {
+  gap: 0.5rem;
+  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+  .intern-card {
+    margin: 0;
+    gap: 1rem;
+    background-color: rgba(var(--foreground-color), 1);
+  }
+}
+
 .intern-card {
   display: flex;
   padding: 1rem;
@@ -1144,7 +1156,6 @@ ul {
   user-select: none;
   padding: 0.8rem 1rem;
   gap: 0.8rem;
-  cursor: pointer;
   input {
     height: 1.3em;
     width: 1.3em;
@@ -1271,9 +1282,6 @@ ul {
 .container-header h4 {
   flex: 1;
 }
-
-#intern_info_popup {
-}
 #intern_info__initials {
   position: relative;
   height: 4rem;
@@ -1318,7 +1326,6 @@ ul {
     stroke-dasharray: 400;
     stroke-dashoffset: var(--progress, 400);
     transform: rotate(-90deg);
-    stroke-linecap: round;
     transition: stroke-dashoffset 1s;
   }
   &__count {
@@ -1656,6 +1663,22 @@ ul {
   padding-bottom: 2rem;
   flex: 1;
 }
+#admin_page__intern_list {
+  display: grid;
+  padding: 0 1rem;
+  .button {
+    justify-content: flex-start;
+    border-radius: 0.5rem;
+    .icon {
+      padding: 0.6rem;
+      height: 2.6rem;
+      width: 2.6rem;
+      background-color: rgba(var(--text-color), 0.04);
+      border-radius: 3rem;
+      margin-right: 1rem;
+    }
+  }
+}
 
 #update_of_project {
   color: rgba(var(--text-color), 0.8);
@@ -2069,16 +2092,6 @@ input[type="date"] {
     overflow-y: auto;
     grid-area: updates;
   }
-  #all_interns_list {
-    gap: 0.5rem;
-    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
-    .intern-card {
-      margin: 0;
-      gap: 1rem;
-      border-radius: 0.5rem;
-      background-color: rgba(var(--foreground-color), 1);
-    }
-  }
   #intern_list_popup {
     --height: 80vh;
   }

index.html

@@ -426,17 +426,7 @@
                         </section>
                     </section>
                     <section id="interns_container" class="flex flex-direction-column hidden">
-                        <button class="button justify-content-start margin-block-0-5"
+                        <ul id="admin_page__intern_list" class="grid observe-empty-state"></ul>
-                            onclick="openPopup('add_intern_popup')">
-                            <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="M14 14.252v2.09A6 6 0 0 0 6 22l-2-.001a8 8 0 0 1 10-7.748zM12 13c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm0-2c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm6 6v-3h2v3h3v2h-3v3h-2v-3h-3v-2h3z" />
-                            </svg>
-                            Add intern
-                        </button>
-                        <ul id="admin_page__intern_list" class="list-container observe-empty-state"></ul>
                         <h4 class="empty-state">No interns added</h4>
                     </section>
                     <section id="task_display_container" class="flex hidden">
@@ -1255,7 +1245,7 @@
                                 break;
                             case 'interns':
                                 //show interns
-                                renderElem(getRef('admin_page__intern_list'), filterInterns(''))
+                                render.adminInterns()
                                 break;
                             case 'requests':
                                 function removeRequest(requestCard) {
@@ -1866,11 +1856,18 @@
                         <div class="intern-card__initials" style=${`--color: var(${getInternColor(internFloId)})`}>${initials}</div>
                         <div class="intern-card__name capitalize">${internName}</div>
                         <div class="intern-card__score-wrapper flex align-center">
-                            <h4 class="intern-card__score">${internPoints}</h4>
+                            <b class="intern-card__score">${internPoints}</b>
                             <svg class="icon icon--star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path fill="none" d="M0 0h24v24H0z" /> <path d="M12 18.26l-7.053 3.948 1.575-7.928L.587 8.792l8.027-.952L12 .5l3.386 7.34 8.027.952-5.935 5.488 1.575 7.928z" /> </svg>
                         </div>
                     </label>`;
             },
+            adminInterns() {
+                const addInternButton = html`<button class="button button--colored" onclick="openPopup('add_intern_popup')">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>
+                    Add intern
+                </button>`
+                renderElem(getRef('admin_page__intern_list'), html`${[addInternButton, filterInterns('')]}`)
+            },
             internUpdateCard(update) {
                 const { floID, time, note, update: { projectCode, branch, task, description, link } } = update
                 let topic = `${RIBC.getProjectDetails(projectCode).projectName} / ${RIBC.getTaskDetails(projectCode, branch, task).title}`
@@ -2461,8 +2458,8 @@
             let internName = getRef('intern_name_field').value.trim(),
                 internFloId = getRef('intern_flo_id_field').value.trim();
             if (RIBC.admin.addIntern(internFloId, internName)) {
-                renderElem(getRef('admin_page__intern_list'), filterInterns(''))
                 closePopup();
+                render.adminInterns();
                 notify(`${internName} added as an intern.`, 'success')
             }
         }