From ec506592b51be7b9e13b5bd0357b5e5e36643bc4 Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Sat, 31 Jul 2021 16:07:32 +0530
Subject: [PATCH] Refactoring intern update filter logic

---
 components.js    |   1 -
 css/main.css     |  70 ++++++++++++++++++++++++++------
 css/main.min.css |   2 +-
 css/main.scss    |  66 ++++++++++++++++++++++++------
 new.html         | 103 +++++++++++++++++++++++------------------------
 5 files changed, 162 insertions(+), 80 deletions(-)

diff --git a/components.js b/components.js
index 38b7f47..ec49741 100644
--- a/components.js
+++ b/components.js
@@ -231,7 +231,6 @@ smCheckbox.innerHTML = `
 </style>
 <label class="checkbox">
     <svg class="icon" viewBox="0 0 64 64">
-        <title>checkbox</title>
         <path class="checkmark" d="M50.52,19.56,26,44.08,13.48,31.56" />
     </svg>
     <slot></slot>
diff --git a/css/main.css b/css/main.css
index 9fe2992..f78f9c5 100644
--- a/css/main.css
+++ b/css/main.css
@@ -23,8 +23,8 @@ body,
 body * {
   --accent-color: #5D54A4;
   --text-color: 17, 17, 17;
-  --background-color: 246, 246, 246;
-  --foreground-color: white;
+  --background-color: 240, 240, 255;
+  --foreground-color: rgb(248, 248, 255);
   --danger-color: red;
   scrollbar-width: thin;
 }
@@ -974,14 +974,14 @@ ul {
 #admin_page {
   position: relative;
   display: grid;
-  padding: 0;
   gap: 0;
+  padding: 0;
   height: 100%;
 }
 
 #project_editing_panel {
   position: relative;
-  padding: 1rem;
+  padding: 1rem 0;
   height: 100%;
   overflow-y: auto;
 }
@@ -999,6 +999,7 @@ ul {
   margin: 1rem;
   justify-items: end;
   text-align: end;
+  z-index: 5;
 }
 .fab-actions[open] .fab-actions__item {
   transform: translateY(0);
@@ -1010,6 +1011,10 @@ ul {
 .fab-actions[open] .fab .icon:nth-of-type(2) {
   transform: scale(1) rotate(0);
 }
+.fab-actions[open] ~ #fab_backdrop {
+  opacity: 1;
+  clip-path: circle(100%);
+}
 
 .fab-actions__item {
   display: flex;
@@ -1071,6 +1076,19 @@ ul {
   transform: scale(0) rotate(-180deg);
 }
 
+#fab_backdrop {
+  position: fixed;
+  z-index: 3;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  opacity: 0;
+  clip-path: circle(0% at 100% 100%);
+  transition: clip-path 0.5s, opacity 0.5s;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
 #update_of_project {
   color: rgba(var(--text-color), 0.8);
 }
@@ -1185,11 +1203,26 @@ ul {
   width: 1.2rem;
 }
 
+#user_role {
+  justify-self: start;
+  font-size: 0.8rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 0.4rem 0.8rem;
+  border-radius: 0.3rem;
+  border: solid var(--accent-color) thin;
+}
+
 @media only screen and (max-width: 640px) {
   .hide-on-mobile,
 .hide-page-on-mobile {
     display: none;
   }
+
+  #project_editing_panel {
+    padding: 1rem;
+  }
 }
 @media only screen and (min-width: 640px) {
   .hide-on-desktop {
@@ -1235,10 +1268,6 @@ ul {
     background-color: rgba(var(--text-color), 0.1);
   }
 
-  #settings_page {
-    padding: 1rem 2rem;
-  }
-
   #sign_in {
     width: 24rem;
     height: auto;
@@ -1246,7 +1275,7 @@ ul {
   }
 
   #dashboard_page {
-    grid-template-columns: 3fr 24rem;
+    grid-template-columns: 3fr 20rem;
   }
 
   #dashboard_page #status_map_container {
@@ -1254,7 +1283,7 @@ ul {
   }
 
   #admin_page {
-    padding: 1rem;
+    padding: 1rem 0 1rem 1rem;
     gap: 1rem;
     grid-template-columns: 18rem minmax(0, 1fr);
     grid-template-rows: 1fr;
@@ -1267,7 +1296,6 @@ ul {
   #admin_page__left,
 #project_editing_panel {
     border-radius: 0.5rem;
-    box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.3);
   }
 
   #edit_data_fig {
@@ -1335,23 +1363,39 @@ ul {
   }
 
   #all_interns_list {
-    gap: 1.5rem;
+    gap: 1rem;
     grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
   }
   #all_interns_list .intern-card {
-    gap: 1rem 0.5rem;
+    gap: 1.5rem 0.5rem;
     padding: 1.5rem;
     grid-template-columns: 1fr;
     border-radius: 0.5rem;
     background-color: var(--foreground-color);
   }
   #all_interns_list .intern-card__initials {
+    position: relative;
     grid-column: 1/3;
+    z-index: 1;
+  }
+  #all_interns_list .intern-card__initials::after {
+    content: "";
+    position: absolute;
+    background-color: inherit;
+    border-radius: inherit;
+    height: calc(100% + 1rem);
+    width: calc(100% + 1rem);
+    opacity: 0.3;
+    z-index: -1;
   }
 
   #intern_list_popup {
     --height: 80vh;
   }
+
+  #settings_page {
+    padding: 1rem 2rem;
+  }
 }
 @media only screen and (min-width: 1280px) {
   #main_page {
diff --git a/css/main.min.css b/css/main.min.css
index 6187c63..5860abe 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-.hide,.ripple{pointer-events:none}#updates,.task-option{transition:opacity .3s ease}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color),1);background:rgba(var(--background-color),1)}body,body *{--accent-color:#5D54A4;--text-color:17,17,17;--background-color:246,246,246;--foreground-color:white;--danger-color:red;scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color:#9D65C9;--text-color:240,240,240;--text-color-light:170,170,170;--background-color:10,10,10;--foreground-color:rgb(20, 20, 20);--danger-color:rgb(255, 106, 106)}p{max-width:70ch;line-height:1.7;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1.5rem}img{object-fit:cover}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}a{color:var(--accent-color)}.button,button{position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer}.color-0-8,.nav-list__item{color:rgba(var(--text-color),.8)}button:disabled{opacity:.5}a.button{padding:.6rem 1.2rem;border-radius:.3rem;background-color:rgba(var(--text-color),.06)}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color),1)}#edit_data_fig,sm-button[disabled] .icon{fill:rgba(var(--text-color),.6)}.hide{opacity:0}.hide-completely{display:none!important}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable,.task-description,.task__description{word-wrap:break-word;overflow-wrap:break-word}.breakable{-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5,.nav-list__item{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize,.project-card{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}#main_nav,.container-card,.interact{position:relative}#main_header,.container-card,.task .left .circle{background:var(--foreground-color)}#main_nav,#sign_in_page{background-color:var(--foreground-color)}.interact{overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}#intern_list_container,#project_editing_panel{overflow-y:auto;height:100%}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{height:100%;grid-template-rows:auto 1fr auto;grid-template-areas:"main-header" "sub-pages" "main-nav"}#main_header{grid-area:main-header;display:flex;gap:1rem;align-items:center;position:sticky;padding:.5rem 1rem;z-index:1}#main_nav{grid-area:main-nav;display:flex;align-items:center}.nav-list__item{display:flex;flex-direction:column;align-items:center;width:100%;padding:.5rem 0;-webkit-tap-highlight-color:transparent;font-weight:500}.nav-list__item--active,.update__sender{color:var(--accent-color)}.nav-list__item--active .icon{fill:var(--accent-color)}.nav-list__item--active .icon--outlined{display:none}.nav-list__item--active .icon--filled{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--outlined{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--filled{display:none}.nav-list__item .icon{margin-bottom:.3rem}#sub_page_container{grid-area:sub-pages;height:100%;overflow-y:auto}.container-card{border-radius:.5rem}#loading_page,#sign_in_page{position:fixed;top:0;place-content:center;bottom:0;right:0}.medium-top-bottom-margin{margin:.5rem 0}#sign_in_page{display:grid;z-index:5;left:0;gap:1rem}#sign_in_form{width:22rem}.task{display:grid;grid-template-columns:auto 1fr;margin:0 1rem}.task:last-of-type .left .line{transform:scaleY(0)}.task .left{display:flex;position:relative;justify-content:center;padding-top:.5rem}.task .left .circle{display:inline-flex;position:relative;align-self:flex-start;height:1rem;width:1rem;border-radius:50%;border:2px solid;z-index:1}.task .left .line{position:absolute;left:50%;height:100%;width:2px;transform:translateX(-50%) scaleY(1);background-color:rgba(var(--text-color),.4)}.task .right{margin-left:1rem;display:flex;flex-direction:column;width:100%}.task .right .apply-cont{width:100%;display:flex;flex-direction:row}.task .right .apply-cont h4{-webkit-box-flex:1;-ms-flex:1;flex:1}.task h4{margin-top:.4rem;margin-bottom:1rem}.task p{white-space:pre-line;padding-bottom:2rem}.task .assigned-interns .assigned-intern{padding:.4rem}.padding,.page{padding:1rem}.completed-task .left .circle{border:2px solid #00C853!important;background:#00C853!important}.completed-task .left .line{background-color:#00C853!important}.page{gap:1rem;display:grid;position:relative;animation:fadein .3s;grid-template-columns:minmax(0,1fr)}@keyframes fadein{0%{opacity:0}100%{opacity:1}}.title{font-weight:500}#dashboard_page{padding-bottom:5rem;grid-template-columns:auto}.intern-card,.task-list-item{grid-template-columns:auto 1fr auto}.logo{display:flex;align-items:center;font-size:1.2rem;width:100%}.logo .cls-2,.logo .cls-3{fill:rgba(var(--text-color),1);font-size:146.9px;font-family:ArialMT,Arial}.logo svg{height:2.5rem}.logo h4{margin:0}.project-card{padding:1rem;font-weight:500;line-height:1.5;color:rgba(var(--text-color),.8)}.intern-card{user-select:none;padding:.8rem 1rem;gap:.8rem}.intern-card__initials{display:flex;height:2.6rem;width:2.6rem;justify-content:center;align-items:center;border-radius:40%;color:#fff;font-weight:500;font-size:1rem;text-transform:uppercase;background-color:var(--accent-color)}.intern-card__score-wrapper{font-weight:500;font-size:1.2rem}.intern-card .icon{fill:#FF5722!important;height:1rem!important;width:1rem!important;margin-left:.2rem}.request-card{display:grid;position:relative;padding:1rem}.request-card sm-button{--padding:0.5rem 0.8rem}.request-card__description{width:100%;font-size:1rem;margin-bottom:1rem}.reject-app{margin-left:auto;margin-right:.5rem}#updates_page sm-select{--max-height:50vh}#updates_page__project_selector strip-option{font-size:.9rem}.intern-update{display:grid;gap:.5rem;padding:1rem;border-radius:.5rem;background-color:var(--foreground-color)}.update__topic{font-weight:500;font-size:1rem;margin-top:.5rem;text-transform:capitalize;max-width:65ch}.update__sender{font-size:.9rem;font-weight:500}.update__time{font-size:.85rem;color:rgba(var(--text-color),.8)}.update__message{white-space:pre-line}.container-header{display:flex;align-items:center;width:100%;padding:1rem}.container-header h4{flex:1;font-weight:500}#intern_info{flex-direction:column}#intern_info div{display:flex;flex-direction:row;align-items:center;width:100%;margin-bottom:1rem}#intern_info div span{flex:1;word-break:break-all;font-size:.9rem}#intern_info .gold-fill{fill:#FF5722}#intern_info #update_intern_score h4{margin:0;font-size:2rem}#intern_info h3{text-transform:capitalize}#intern_info h4,#intern_info h5{margin-top:.5rem}#project_info{flex-direction:column}.branch-btn{padding:.5rem;border-radius:.2rem;margin:.5rem .5rem .5rem 0;user-select:none;font-size:.85rem;font-weight:500;letter-spacing:.05em}.active-branch{opacity:1;color:var(--accent-color);background:rgba(var(--text-color),.04)}#update_of_project,.task__description,.task__project-title{color:rgba(var(--text-color),.8)}#task_list{padding:1.5rem 0}.task-list-item{display:grid;grid-template-areas:"status title options" "status interns interns" "status description description";align-content:flex-start;padding:1rem;gap:.5rem;border-radius:.5rem;background:rgba(var(--text-color),.02)}#assigned_task_list,.task-card{grid-template-columns:minmax(0,1fr)}#loading_page,#task_context,.fab-actions__item{background-color:var(--foreground-color)}.task-list-item sm-checkbox{grid-area:status;align-self:flex-start;padding:.2rem .5rem .5rem 0}.task-list-item h4{font-weight:500;margin:0}.task-list-item .title{grid-area:title;line-height:1.6}.task-list-item .assigned-interns{grid-area:interns}.task-option{grid-area:options;padding:.5rem}.task-option .icon{height:1.2rem;width:1.2rem}.task-description{grid-area:description;margin:0;white-space:pre-line}.assigned-interns{display:flex;flex-wrap:wrap}.assigned-interns .assigned-intern{user-select:none;display:flex;font-size:.8rem;margin:.2rem .5rem .2rem 0;padding:.2rem 0 .2rem .4rem;border-radius:.2rem;border:1px solid;align-items:center;white-space:nowrap;text-transform:capitalize}.assigned-interns .assigned-intern button{padding:.2rem}.assigned-interns .assigned-intern button .icon{height:1rem;width:1rem}#task_context{position:absolute;top:0;right:0;margin:-1rem 1rem 0;list-style:none;padding:.5rem 0;width:max-content;border-radius:.3rem;transition:.3s opacity ease;box-shadow:0 .5rem 1rem -.3rem rgba(0,0,0,.3)}#task_context li{padding:.8rem 1.5rem;display:flex;align-items:center;font-size:.9rem}#task_context li .icon{height:1.2rem;width:1.2rem;margin-right:.5rem}.temp-task .cancel-task-button{margin-right:.5rem}#branch_container{display:flex;flex-flow:row wrap;margin:1rem 0}#intern_list_popup{flex-direction:column}#best_interns_container,#intern_search_field,#project_list_container{margin-bottom:1rem}#best_interns_container .container-header .icon,#project_list_container .container-header .icon{margin-right:.5rem}#edit_data_fig{width:60vw;margin:2rem 0}#loading_page{display:grid;left:0;z-index:5;text-align:center;justify-items:center}.loading-message{font-size:1.3rem;margin:1.5rem 0 .5rem}#loading_page__footer{position:absolute;bottom:0;width:100%;padding:1.5rem}#loading_page__footer .icon{height:4rem;width:4rem}#status_map_container{position:relative;overflow:hidden}#status_map_container #status_map{position:relative;padding:0 1rem 1rem}#status_map_container #status_map h2{margin:.4rem 0;text-transform:capitalize}.watching{position:relative;display:flex;padding:1rem;align-items:center}.watching h4{flex:1;font-weight:500}.watching button{padding:.5rem;border-radius:.5rem}#project_explorer__right{align-items:flex-start;align-content:flex-start;padding:1rem}#project_explorer__right div:first-of-type h2{flex:1;margin:.4rem 0}#project_explorer__right div:first-of-type button{border:1px solid}#project_explorer{padding:0}#admin_page{position:relative;display:grid;padding:0;gap:0;height:100%}#project_editing_panel{position:relative;padding:1rem}#editing_panel__title{margin-bottom:1rem}.fab-actions{display:grid;gap:1rem;position:absolute;bottom:0;right:0;margin:1rem;justify-items:end;text-align:end}#admin_page__left sm-tab-panels>*,.fab,.fab-actions__item{display:flex}.fab-actions[open] .fab-actions__item{transform:translateY(0);opacity:1}.fab-actions[open] .fab .icon:nth-of-type(1){transform:scale(0) rotate(180deg)}.fab-actions[open] .fab .icon:nth-of-type(2){transform:scale(1) rotate(0)}.fab-actions__item{align-items:center;justify-self:end;padding:.6rem 1rem;border-radius:2rem;transform:translateY(1.5rem);opacity:0;transition:transform .3s cubic-bezier(.175,.885,.32,1.275),opacity .3s;box-shadow:0 .2rem .5rem rgba(0,0,0,.2);user-select:none}.fab-actions__item:active,.fab-actions__item:hover,.fab:active{transform:scale(.9)}.fab-actions__item:nth-of-type(1){transition-delay:.2s}.fab-actions__item:nth-of-type(2){transition-delay:.1s}.fab,.fab .icon{transition:transform .3s}.fab-actions__item .icon{fill:var(--accent-color);margin-left:.5rem}.fab-actions__item-name{font-size:.9rem}.fab{position:relative;justify-content:center;align-items:center;padding:1rem;height:3.2rem;width:3.2rem;border-radius:50%;background-color:var(--accent-color);box-shadow:0 .5rem .8rem rgba(0,0,0,.3);-webkit-tap-highlight-color:transparent}.fab .icon{position:absolute;height:100%;fill:#fff}.fab .icon:nth-of-type(1){transform:scale(1) rotate(0)}.fab .icon:nth-of-type(2){transform:scale(0) rotate(-180deg)}#update_of_task{font-size:1.3rem;margin:.4rem 0 1.8rem}ul{padding:0;list-style:none}#assigned_task_list{display:grid;gap:1rem;margin-top:1rem;align-content:flex-start}.task-card{display:grid;padding:1rem;border-radius:.5rem;background-color:var(--foreground-color)}.task__header{display:grid;gap:0 .5rem;align-items:flex-start;grid-template-columns:1fr auto;grid-template-areas:". send-button" ". send-button"}.task__project-title{font-size:.9rem;font-weight:500;border-radius:.3rem;padding:.3rem .5rem;justify-self:flex-start;margin-bottom:.5rem!important;background-color:rgba(var(--text-color),.06)}.task__title{font-size:1.3rem;margin-bottom:1rem!important}.task__description{white-space:pre-line}.send-update-button{grid-area:send-button;--padding:0.6rem 0.8rem;color:var(--accent-color)}.send-update-button .icon{height:1.2rem;width:1.2rem;fill:var(--accent-color)}#admin_page__left{height:100%;overflow-y:hidden}#admin_page__left sm-tab-header{--gap:0;--justify-content:stretch;background-color:var(--foreground-color);border-bottom:1px solid rgba(var(--text-color),.2)}#admin_page__left sm-tab{justify-content:center}#admin_page__left sm-tab-panels,#admin_page__left sm-tab-panels>*{height:100%;flex-direction:column}#admin_page__left sm-tab-panels{overflow-y:hidden}#admin_page__left .list-container{height:100%;overflow-y:auto}#admin_page__left .empty-state{padding:1rem;text-align:center}#update_filters_wrapper{gap:1.5rem}.search__icon{height:1.2rem;width:1.2rem}@media only screen and (max-width:640px){.hide-on-mobile,.hide-page-on-mobile{display:none}}@media only screen and (min-width:640px){.hide-on-desktop{display:none!important}sm-popup{--width:26rem}.popup__header{padding:1.5rem 1.5rem 0 .75rem}#main_nav{padding:.5rem;flex-direction:column}#main_nav theme-toggle{margin:1rem;margin-top:auto}.nav-list__item{flex-direction:row;align-items:center;border-radius:.5rem;padding:.8rem;margin-bottom:.25rem;font-size:1rem}.nav-list__item--active{background-color:rgba(var(--text-color),.06)}.nav-list__item .icon{margin-bottom:0}.nav-list__item_title{display:none}.project-card--active{background-color:rgba(var(--text-color),.1)}#settings_page{padding:1rem 2rem}#sign_in{width:24rem;height:auto;border-radius:.4rem}#dashboard_page{grid-template-columns:3fr 24rem}#dashboard_page #status_map_container{align-self:flex-start}#admin_page{padding:1rem;gap:1rem;grid-template-columns:18rem minmax(0,1fr);grid-template-rows:1fr}#admin_page__left{background-color:var(--foreground-color)}#admin_page__left,#project_editing_panel{border-radius:.5rem;box-shadow:0 .5rem 1rem -.5rem rgba(0,0,0,.3)}#edit_data_fig{width:16rem;justify-self:center}#project_explorer{display:grid;height:100%;grid-template-columns:16rem 3fr;grid-template-areas:"left right"}#project_explorer #left{grid-area:left;height:100%;overflow-y:auto;padding-bottom:1.5rem;border-right:1px solid rgba(var(--text-color),.06);background-color:rgba(var(--background-color),1)}#all_interns_list .intern-card,#update_filters_wrapper{border-radius:.5rem;background-color:var(--foreground-color)}#project_explorer #left h4{margin-top:0;margin-bottom:.5rem;color:var(--accent-color);font-size:.9rem}#project_explorer #project_explorer__right{grid-area:right;height:100%;overflow-y:auto}#main_page{grid-template-columns:4rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#post_update_popup{--width:28rem}#updates_page{height:100%;gap:1rem;grid-template-areas:"updates update-filters";grid-template-columns:minmax(0,1fr) 20rem}#update_filters_wrapper{padding:1rem;align-content:flex-start;grid-area:update-filters}#updates_wrapper{height:100%;overflow-y:auto;grid-area:updates}#all_interns_list{gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}#all_interns_list .intern-card{gap:1rem .5rem;padding:1.5rem;grid-template-columns:1fr}#all_interns_list .intern-card__initials{grid-column:1/3}#intern_list_popup{--height:80vh}}@media only screen and (min-width:1280px){#main_page{grid-template-columns:12rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#main_nav{align-items:flex-start}.nav-list__item .icon{margin-right:.5rem}.nav-list__item_title{display:inline-block}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.interact:hover{background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),var(--foreground-color)}.apply-button,.send-update-button,.task-option{opacity:0;transition:opacity .3s}.task-card:hover .send-update-button,.task-list-item:hover .task-option,.task-option:focus-within,.task:hover .apply-button{opacity:1}}
\ No newline at end of file
+.hide,.ripple{pointer-events:none}.fab,.interact,.nav-list__item{-webkit-tap-highlight-color:transparent}#updates,.task-option{transition:opacity .3s ease}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color),1);background:rgba(var(--background-color),1)}body,body *{--accent-color:#5D54A4;--text-color:17,17,17;--background-color:240,240,255;--foreground-color:rgb(248, 248, 255);--danger-color:red;scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color:#9D65C9;--text-color:240,240,240;--text-color-light:170,170,170;--background-color:10,10,10;--foreground-color:rgb(20, 20, 20);--danger-color:rgb(255, 106, 106)}p{max-width:70ch;line-height:1.7;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1.5rem}img{object-fit:cover}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}a{color:var(--accent-color)}.button,button{position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer}.color-0-8,.nav-list__item{color:rgba(var(--text-color),.8)}button:disabled{opacity:.5}a.button{padding:.6rem 1.2rem;border-radius:.3rem;background-color:rgba(var(--text-color),.06)}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color),1)}#edit_data_fig,sm-button[disabled] .icon{fill:rgba(var(--text-color),.6)}.hide{opacity:0}.hide-completely{display:none!important}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5,.nav-list__item{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize,.project-card{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}.interact{position:relative;overflow:hidden;cursor:pointer}.task-description,.task__description{word-wrap:break-word;overflow-wrap:break-word;white-space:pre-line}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{height:100%;grid-template-rows:auto 1fr auto;grid-template-areas:"main-header" "sub-pages" "main-nav"}#main_header{grid-area:main-header;display:flex;gap:1rem;align-items:center;position:sticky;padding:.5rem 1rem;background:var(--foreground-color);z-index:1}#main_nav{grid-area:main-nav;position:relative;display:flex;align-items:center;background-color:var(--foreground-color)}.nav-list__item{display:flex;flex-direction:column;align-items:center;width:100%;padding:.5rem 0;font-weight:500}.nav-list__item--active{color:var(--accent-color)}.nav-list__item--active .icon{fill:var(--accent-color)}.nav-list__item--active .icon--outlined{display:none}.nav-list__item--active .icon--filled{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--outlined{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--filled{display:none}#sign_in_page,.page,.task{display:grid}.nav-list__item .icon{margin-bottom:.3rem}#sub_page_container{grid-area:sub-pages;height:100%;overflow-y:auto}.container-card{position:relative;background:var(--foreground-color);border-radius:.5rem}#loading_page,#sign_in_page{position:fixed;place-content:center;z-index:5}.medium-top-bottom-margin{margin:.5rem 0}#sign_in_page{top:0;bottom:0;left:0;right:0;background-color:var(--foreground-color);gap:1rem}#sign_in_form{width:22rem}.task{grid-template-columns:auto 1fr;margin:0 1rem}.task:last-of-type .left .line{transform:scaleY(0)}.task .left{display:flex;position:relative;justify-content:center;padding-top:.5rem}.task .left .circle{display:inline-flex;position:relative;align-self:flex-start;height:1rem;width:1rem;border-radius:50%;background:var(--foreground-color);border:2px solid;z-index:1}.task .left .line{position:absolute;left:50%;height:100%;width:2px;transform:translateX(-50%) scaleY(1);background-color:rgba(var(--text-color),.4)}#admin_page,#project_editing_panel,#status_map_container,#status_map_container #status_map,.fab,.page,.request-card,.watching{position:relative}#fab_backdrop,#loading_page{top:0;bottom:0;left:0;right:0}.task .right{margin-left:1rem;display:flex;flex-direction:column;width:100%}.task .right .apply-cont{width:100%;display:flex;flex-direction:row}.task .right .apply-cont h4{-webkit-box-flex:1;-ms-flex:1;flex:1}.task h4{margin-top:.4rem;margin-bottom:1rem}.task p{white-space:pre-line;padding-bottom:2rem}.task .assigned-interns .assigned-intern{padding:.4rem}.padding,.page{padding:1rem}.completed-task .left .circle{border:2px solid #00C853!important;background:#00C853!important}.completed-task .left .line{background-color:#00C853!important}.page{gap:1rem;animation:fadein .3s;grid-template-columns:minmax(0,1fr)}@keyframes fadein{0%{opacity:0}100%{opacity:1}}.title{font-weight:500}#dashboard_page{padding-bottom:5rem;grid-template-columns:auto}.intern-card,.task-list-item{grid-template-columns:auto 1fr auto}.logo{display:flex;align-items:center;font-size:1.2rem;width:100%}.logo .cls-2,.logo .cls-3{fill:rgba(var(--text-color),1);font-size:146.9px;font-family:ArialMT,Arial}.logo svg{height:2.5rem}.logo h4{margin:0}.project-card{padding:1rem;font-weight:500;line-height:1.5;color:rgba(var(--text-color),.8)}.intern-card{user-select:none;padding:.8rem 1rem;gap:.8rem}.intern-card__initials{display:flex;height:2.6rem;width:2.6rem;justify-content:center;align-items:center;border-radius:40%;color:#fff;font-weight:500;font-size:1rem;text-transform:uppercase;background-color:var(--accent-color)}.intern-update,.request-card,.task-list-item{display:grid;padding:1rem}.intern-card__score-wrapper{font-weight:500;font-size:1.2rem}.intern-card .icon{fill:#FF5722!important;height:1rem!important;width:1rem!important;margin-left:.2rem}.request-card sm-button{--padding:0.5rem 0.8rem}.request-card__description{width:100%;font-size:1rem;margin-bottom:1rem}.reject-app{margin-left:auto;margin-right:.5rem}#updates_page sm-select{--max-height:50vh}#updates_page__project_selector strip-option{font-size:.9rem}.intern-update{gap:.5rem;border-radius:.5rem;background-color:var(--foreground-color)}.update__topic{font-weight:500;font-size:1rem;margin-top:.5rem;text-transform:capitalize;max-width:65ch}.update__sender{color:var(--accent-color);font-size:.9rem;font-weight:500}#update_of_project,.task__description,.task__project-title,.update__time{color:rgba(var(--text-color),.8)}.update__time{font-size:.85rem}.update__message{white-space:pre-line}.container-header{display:flex;align-items:center;width:100%;padding:1rem}.container-header h4{flex:1;font-weight:500}#intern_info{flex-direction:column}#intern_info div{display:flex;flex-direction:row;align-items:center;width:100%;margin-bottom:1rem}#intern_info div span{flex:1;word-break:break-all;font-size:.9rem}#intern_info .gold-fill{fill:#FF5722}#intern_info #update_intern_score h4{margin:0;font-size:2rem}#intern_info h3{text-transform:capitalize}#intern_info h4,#intern_info h5{margin-top:.5rem}#project_info{flex-direction:column}.branch-btn{padding:.5rem;border-radius:.2rem;margin:.5rem .5rem .5rem 0;user-select:none;font-size:.85rem;font-weight:500;letter-spacing:.05em}.active-branch{opacity:1;color:var(--accent-color);background:rgba(var(--text-color),.04)}#task_list{padding:1.5rem 0}.task-list-item{grid-template-areas:"status title options" "status interns interns" "status description description";align-content:flex-start;gap:.5rem;border-radius:.5rem;background:rgba(var(--text-color),.02)}#assigned_task_list,.task-card{grid-template-columns:minmax(0,1fr)}#loading_page,#task_context,.fab-actions__item{background-color:var(--foreground-color)}.task-list-item sm-checkbox{grid-area:status;align-self:flex-start;padding:.2rem .5rem .5rem 0}.task-list-item h4{font-weight:500;margin:0}.task-list-item .title{grid-area:title;line-height:1.6}.task-list-item .assigned-interns{grid-area:interns}.task-option{grid-area:options;padding:.5rem}.task-option .icon{height:1.2rem;width:1.2rem}.task-description{grid-area:description;margin:0}.assigned-interns{display:flex;flex-wrap:wrap}.assigned-interns .assigned-intern{user-select:none;display:flex;font-size:.8rem;margin:.2rem .5rem .2rem 0;padding:.2rem 0 .2rem .4rem;border-radius:.2rem;border:1px solid;align-items:center;white-space:nowrap;text-transform:capitalize}.assigned-interns .assigned-intern button{padding:.2rem}.assigned-interns .assigned-intern button .icon{height:1rem;width:1rem}#task_context{position:absolute;top:0;right:0;margin:-1rem 1rem 0;list-style:none;padding:.5rem 0;width:max-content;border-radius:.3rem;transition:.3s opacity ease;box-shadow:0 .5rem 1rem -.3rem rgba(0,0,0,.3)}#task_context li{padding:.8rem 1.5rem;display:flex;align-items:center;font-size:.9rem}#task_context li .icon{height:1.2rem;width:1.2rem;margin-right:.5rem}.temp-task .cancel-task-button{margin-right:.5rem}#branch_container{display:flex;flex-flow:row wrap;margin:1rem 0}#intern_list_popup{flex-direction:column}#best_interns_container,#intern_search_field,#project_list_container{margin-bottom:1rem}#intern_list_container{height:100%;overflow-y:auto}#best_interns_container .container-header .icon,#project_list_container .container-header .icon{margin-right:.5rem}#edit_data_fig{width:60vw;margin:2rem 0}#loading_page{display:grid;text-align:center;justify-items:center}.loading-message{font-size:1.3rem;margin:1.5rem 0 .5rem}#loading_page__footer{position:absolute;bottom:0;width:100%;padding:1.5rem}#loading_page__footer .icon{height:4rem;width:4rem}#status_map_container{overflow:hidden}#status_map_container #status_map{padding:0 1rem 1rem}#status_map_container #status_map h2{margin:.4rem 0;text-transform:capitalize}.watching{display:flex;padding:1rem;align-items:center}.watching h4{flex:1;font-weight:500}.watching button{padding:.5rem;border-radius:.5rem}#project_explorer__right{align-items:flex-start;align-content:flex-start;padding:1rem}#project_explorer__right div:first-of-type h2{flex:1;margin:.4rem 0}#project_explorer__right div:first-of-type button{border:1px solid}#project_explorer{padding:0}#admin_page{display:grid;gap:0;padding:0;height:100%}#project_editing_panel{padding:1rem 0;height:100%;overflow-y:auto}#editing_panel__title{margin-bottom:1rem}.fab-actions{display:grid;gap:1rem;position:absolute;bottom:0;right:0;margin:1rem;justify-items:end;text-align:end;z-index:5}#admin_page__left sm-tab-panels>*,.fab,.fab-actions__item{display:flex}.fab-actions[open] .fab-actions__item{transform:translateY(0);opacity:1}.fab-actions[open] .fab .icon:nth-of-type(1){transform:scale(0) rotate(180deg)}.fab-actions[open] .fab .icon:nth-of-type(2){transform:scale(1) rotate(0)}.fab-actions[open]~#fab_backdrop{opacity:1;clip-path:circle(100%)}.fab-actions__item{align-items:center;justify-self:end;padding:.6rem 1rem;border-radius:2rem;transform:translateY(1.5rem);opacity:0;transition:transform .3s cubic-bezier(.175,.885,.32,1.275),opacity .3s;box-shadow:0 .2rem .5rem rgba(0,0,0,.2);user-select:none}.fab-actions__item:active,.fab-actions__item:hover,.fab:active{transform:scale(.9)}.fab-actions__item:nth-of-type(1){transition-delay:.2s}.fab-actions__item:nth-of-type(2){transition-delay:.1s}.fab,.fab .icon{transition:transform .3s}.fab-actions__item .icon{fill:var(--accent-color);margin-left:.5rem}.fab-actions__item-name{font-size:.9rem}.fab{justify-content:center;align-items:center;padding:1rem;height:3.2rem;width:3.2rem;border-radius:50%;background-color:var(--accent-color);box-shadow:0 .5rem .8rem rgba(0,0,0,.3)}.fab .icon{position:absolute;height:100%;fill:#fff}.fab .icon:nth-of-type(1){transform:scale(1) rotate(0)}.fab .icon:nth-of-type(2){transform:scale(0) rotate(-180deg)}#fab_backdrop{position:fixed;z-index:3;opacity:0;clip-path:circle(0 at 100% 100%);transition:clip-path .5s,opacity .5s;background-color:rgba(0,0,0,.5)}#update_of_task{font-size:1.3rem;margin:.4rem 0 1.8rem}ul{padding:0;list-style:none}#assigned_task_list{display:grid;gap:1rem;margin-top:1rem;align-content:flex-start}.task-card{display:grid;padding:1rem;border-radius:.5rem;background-color:var(--foreground-color)}#user_role,.task__project-title{font-weight:500;border-radius:.3rem}.task__header{display:grid;gap:0 .5rem;align-items:flex-start;grid-template-columns:1fr auto;grid-template-areas:". send-button" ". send-button"}.task__project-title{font-size:.9rem;padding:.3rem .5rem;justify-self:flex-start;margin-bottom:.5rem!important;background-color:rgba(var(--text-color),.06)}.task__title{font-size:1.3rem;margin-bottom:1rem!important}.send-update-button{grid-area:send-button;--padding:0.6rem 0.8rem;color:var(--accent-color)}.send-update-button .icon{height:1.2rem;width:1.2rem;fill:var(--accent-color)}#admin_page__left{height:100%;overflow-y:hidden}#admin_page__left sm-tab-header{--gap:0;--justify-content:stretch;background-color:var(--foreground-color);border-bottom:1px solid rgba(var(--text-color),.2)}#admin_page__left sm-tab{justify-content:center}#admin_page__left sm-tab-panels,#admin_page__left sm-tab-panels>*{height:100%;flex-direction:column}#admin_page__left sm-tab-panels{overflow-y:hidden}#admin_page__left .list-container{height:100%;overflow-y:auto}#admin_page__left .empty-state{padding:1rem;text-align:center}#update_filters_wrapper{gap:1.5rem}.search__icon{height:1.2rem;width:1.2rem}#user_role{justify-self:start;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;padding:.4rem .8rem;border:var(--accent-color) solid thin}@media only screen and (max-width:640px){.hide-on-mobile,.hide-page-on-mobile{display:none}#project_editing_panel{padding:1rem}}@media only screen and (min-width:640px){#admin_page__left,#project_editing_panel,.nav-list__item{border-radius:.5rem}.hide-on-desktop{display:none!important}sm-popup{--width:26rem}.popup__header{padding:1.5rem 1.5rem 0 .75rem}#main_nav{padding:.5rem;flex-direction:column}#main_nav theme-toggle{margin:1rem;margin-top:auto}.nav-list__item{flex-direction:row;align-items:center;padding:.8rem;margin-bottom:.25rem;font-size:1rem}.nav-list__item--active{background-color:rgba(var(--text-color),.06)}.nav-list__item .icon{margin-bottom:0}.nav-list__item_title{display:none}.project-card--active{background-color:rgba(var(--text-color),.1)}#sign_in{width:24rem;height:auto;border-radius:.4rem}#dashboard_page{grid-template-columns:3fr 20rem}#dashboard_page #status_map_container{align-self:flex-start}#admin_page{padding:1rem 0 1rem 1rem;gap:1rem;grid-template-columns:18rem minmax(0,1fr);grid-template-rows:1fr}#admin_page__left{background-color:var(--foreground-color)}#edit_data_fig{width:16rem;justify-self:center}#project_explorer{display:grid;height:100%;grid-template-columns:16rem 3fr;grid-template-areas:"left right"}#project_explorer #left{grid-area:left;height:100%;overflow-y:auto;padding-bottom:1.5rem;border-right:1px solid rgba(var(--text-color),.06);background-color:rgba(var(--background-color),1)}#all_interns_list .intern-card,#update_filters_wrapper{border-radius:.5rem;background-color:var(--foreground-color)}#project_explorer #left h4{margin-top:0;margin-bottom:.5rem;color:var(--accent-color);font-size:.9rem}#project_explorer #project_explorer__right{grid-area:right;height:100%;overflow-y:auto}#main_page{grid-template-columns:4rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#post_update_popup{--width:28rem}#updates_page{height:100%;gap:1rem;grid-template-areas:"updates update-filters";grid-template-columns:minmax(0,1fr) 20rem}#update_filters_wrapper{padding:1rem;align-content:flex-start;grid-area:update-filters}#updates_wrapper{height:100%;overflow-y:auto;grid-area:updates}#all_interns_list{gap:1rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}#all_interns_list .intern-card{gap:1.5rem .5rem;padding:1.5rem;grid-template-columns:1fr}#all_interns_list .intern-card__initials{position:relative;grid-column:1/3;z-index:1}#all_interns_list .intern-card__initials::after{content:"";position:absolute;background-color:inherit;border-radius:inherit;height:calc(100% + 1rem);width:calc(100% + 1rem);opacity:.3;z-index:-1}#intern_list_popup{--height:80vh}#settings_page{padding:1rem 2rem}}@media only screen and (min-width:1280px){#main_page{grid-template-columns:12rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#main_nav{align-items:flex-start}.nav-list__item .icon{margin-right:.5rem}.nav-list__item_title{display:inline-block}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.interact:hover{background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),var(--foreground-color)}.apply-button,.send-update-button,.task-option{opacity:0;transition:opacity .3s}.task-card:hover .send-update-button,.task-list-item:hover .task-option,.task-option:focus-within,.task:hover .apply-button{opacity:1}}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index 6c972b8..6652a87 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -21,8 +21,8 @@ body {
     * {
         --accent-color: #5D54A4;
         --text-color: 17, 17, 17;
-        --background-color: 246, 246, 246;
-        --foreground-color: white;
+        --background-color: 240, 240, 255;
+        --foreground-color: rgb(248, 248, 255);
         --danger-color: red;
         scrollbar-width: thin;
     }
@@ -999,14 +999,14 @@ ul {
 #admin_page {
     position: relative;
     display: grid;
-    padding: 0;
     gap: 0;
+    padding: 0;
     height: 100%;
 }
 
 #project_editing_panel {
     position: relative;
-    padding: 1rem;
+    padding: 1rem 0;
     height: 100%;
     overflow-y: auto;
 }
@@ -1023,6 +1023,7 @@ ul {
     margin: 1rem;
     justify-items: end;
     text-align: end;
+    z-index: 5;
     &[open]{
         .fab-actions__item{
             transform: translateY(0);
@@ -1038,6 +1039,10 @@ ul {
                 }
             }
         }
+        & ~ #fab_backdrop{
+            opacity: 1;
+            clip-path: circle(100%);
+        }
     }
 }
 .fab-actions__item{
@@ -1099,6 +1104,18 @@ ul {
         }
     }
 }
+#fab_backdrop{
+    position: fixed;
+    z-index: 3;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    opacity: 0;
+    clip-path: circle(0% at 100% 100%);
+    transition: clip-path 0.5s, opacity 0.5s;
+    background-color: rgba(0, 0, 0, 0.5);
+}
 
 #update_of_project {
     color: rgba(var(--text-color), 0.8);
@@ -1214,12 +1231,25 @@ ul {
     height: 1.2rem;
     width: 1.2rem;
 } 
+#user_role{
+    justify-self: start;
+    font-size: 0.8rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: 0.4rem 0.8rem;
+    border-radius: 0.3rem;
+    border: solid var(--accent-color) thin;
+}
 
 @media only screen and (max-width: 640px) {
     .hide-on-mobile,
     .hide-page-on-mobile {
         display: none;
     }
+    #project_editing_panel{
+        padding: 1rem;
+    }
 }
 @media only screen and (min-width: 640px) {
     .hide-on-desktop {
@@ -1270,10 +1300,6 @@ ul {
         }
     }
     
-
-    #settings_page {
-        padding: 1rem 2rem;
-    }
     #sign_in {
         width: 24rem;
         height: auto;
@@ -1281,7 +1307,7 @@ ul {
     }
 
     #dashboard_page {
-        grid-template-columns: 3fr 24rem;
+        grid-template-columns: 3fr 20rem;
     }
 
     #dashboard_page #status_map_container {
@@ -1289,7 +1315,7 @@ ul {
     }
 
     #admin_page {
-        padding: 1rem;
+        padding: 1rem 0 1rem 1rem;
         gap: 1rem;
         grid-template-columns: 18rem minmax(0, 1fr);
         grid-template-rows: 1fr;
@@ -1300,7 +1326,6 @@ ul {
     #admin_page__left,
     #project_editing_panel{
         border-radius: 0.5rem;
-        box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.3);
     }
 
     #edit_data_fig {
@@ -1362,22 +1387,37 @@ ul {
         grid-area: updates;
     }
     #all_interns_list{
-        gap: 1.5rem;
+        gap: 1rem;
         grid-template-columns: repeat(auto-fill, minmax(14rem ,1fr));
         .intern-card{
-            gap: 1rem 0.5rem;
+            gap: 1.5rem 0.5rem;
             padding: 1.5rem;
             grid-template-columns: 1fr;
             border-radius: 0.5rem;
             background-color: var(--foreground-color);
             &__initials{
+                position: relative;
                 grid-column: 1/3;
+                z-index: 1;
+            }
+            &__initials::after{
+                content: '';
+                position: absolute;
+                background-color: inherit;
+                border-radius: inherit;
+                height: calc(100% + 1rem);
+                width: calc(100% + 1rem);
+                opacity: 0.3;
+                z-index: -1;
             }
         }
     }
     #intern_list_popup {
         --height: 80vh;
     }
+    #settings_page {
+        padding: 1rem 2rem;
+    }
 }
 
 @media only screen and (min-width: 1280px) {
diff --git a/new.html b/new.html
index 7131b0e..e669095 100644
--- a/new.html
+++ b/new.html
@@ -40,6 +40,7 @@
             generalVC: {}
         }
     </script>
+    <script src="https://cdn.jsdelivr.net/npm/dompurify@2.3.0/dist/purify.min.js" defer></script>
     <script src="https://cdn.jsdelivr.net/npm/fuse.js@6.4.6" defer></script>
 </head>
 
@@ -152,7 +153,8 @@
                             </svg>
                         </button>
                     </div>
-                    <div id="status_map"></div>
+                    <div id="status_map" class="observe-empty-state"></div>
+                    <h4 class="empty-state">No project added to watch list.</h4>
                 </div>
                 <section id="intern_view" class="hide-completely intern-option">
                     <h2>My tasks</h2>
@@ -190,6 +192,7 @@
             <section id="settings_page" class="page hide-completely">
                 <section class="grid gap-0-5">
                     <h2 id="username" class="capitalize"></h2>
+                    <div id="user_role"></div>
                     <sm-copy id="user_flo_id"></sm-copy>
                     <sm-button id="logout" variant="primary" class="justify-self-start"
                         onclick="logout()">
@@ -294,6 +297,7 @@
                         <svg class="icon" 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 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
                     </button>
                 </section>
+                <div id="fab_backdrop" onclick="toggleFab()"></div>
             </section>
             <section id="updates_page" class="page hide-completely">
                 <sm-button class="hide-on-desktop justify-self-end" onclick="toggleFilter()">Filter</sm-button>
@@ -339,7 +343,7 @@
                             Watch
                         </sm-button>
                     </header>
-                    <p class="project_explorer__project_description"></p>
+                    <p id="project_explorer__project_description"></p>
                     <div id="explorer_branch_container"></div>
                     <h4></h4>
                     <div id="explorer_task_list"></div>
@@ -589,7 +593,7 @@
     </template>
     <template id="task_list_item_template">
         <li class="task-list-item">
-            <sm-checkbox></sm-checkbox>
+            <sm-checkbox title="Mark this task as completed"></sm-checkbox>
             <h4 class="title capitalize"></h4>
             <button class="task-option">
                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
@@ -9979,7 +9983,7 @@
             if (textContent)
                 elem.textContent = textContent
             if (innerHTML)
-                elem.innerHTML = innerHTML
+                elem.innerHTML = DOMPurify.sanitize(innerHTML)
             return elem
         }
 
@@ -10298,7 +10302,6 @@
 
     </script>
     <script id="UI_functions">
-
         // Method object for creating various UI elements
         const render = {
             projectCard(projectName, projectCode, isAdmin = false) { // creates cards containing project information
@@ -10392,9 +10395,9 @@
                 return thisIntern;
             },
             taskListItem(taskNo) {
-                let card = getRef('task_list_item_template').content.cloneNode(true),
-                    assignedInterns = RIBC.getAssignedInterns(currentProject, currentBranch, taskNo),
-                    frag = document.createDocumentFragment()
+                const assignedInterns = RIBC.getAssignedInterns(currentProject, currentBranch, taskNo)
+                const card = getRef('task_list_item_template').content.cloneNode(true)
+                const frag = document.createDocumentFragment()
                 const { taskTitle, taskDescription } = RIBC.getTaskDetails(currentProject, currentBranch, taskNo)
                 if (RIBC.getTaskStatus(currentProject, currentBranch, taskNo) !== 'incomplete') {
                     card.querySelector('sm-checkbox').setAttribute('checked', '')
@@ -10429,10 +10432,10 @@
                 timeline.textContent = 'Timeline';
                 mapBody.id = `${projectCode}_map_body`
                 RIBC.getProjectBranches(projectCode).forEach((branch) => {
-                    frag.appendChild(render.branchBtn(projectCode, branch))
+                    frag.append(render.branchBtn(projectCode, branch))
                 })
-                branchContainer.appendChild(frag);
-                header.appendChild(title)
+                branchContainer.append(frag);
+                header.append(title)
                 card.append(header, para, branchContainer, timeline, mapBody)
                 mapItems.push(card, card.id, branchContainer.id, mapBody.id)
                 return mapItems;
@@ -10466,21 +10469,21 @@
             internTaskCard(taskObj) {
                 const { uniqueId, projectId, projectName, projectBranch, task } = taskObj
                 const { taskTitle, taskDescription } = RIBC.getTaskDetails(projectId, projectBranch, task)
-                const card = document.createElement('li')
-                card.className = "task-card"
-                card.dataset.uniqueId = uniqueId
-                card.innerHTML = `
-                    <div class="task__header">
-                        <h5 class="task__project-title">${projectName}</h5>
-                        <h5 class="task__title">${taskTitle}</h5>
-                        <sm-button class="send-update-button">
-                            <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"/></svg>    
-                            Post
-                        </sm-button>
-                    </div>
-                    <p class="task__description">${taskDescription}</p>
-                `
-                return card
+                return createElement('li', {
+                    className: "task-card",
+                    attributes: {uniqueId},
+                    innerHTML: `
+                        <div class="task__header">
+                            <h5 class="task__project-title">${projectName}</h5>
+                            <h5 class="task__title">${taskTitle}</h5>
+                            <sm-button class="send-update-button">
+                                <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"/></svg>    
+                                Post
+                            </sm-button>
+                        </div>
+                        <p class="task__description">${taskDescription}</p>
+                    `
+                })
             },
         }
 
@@ -10518,7 +10521,7 @@
         }
 
         let allInternsList = [], highPerformingInterns = [],
-            frag = document.createDocumentFragment(), watchList = [], currentIntern, dashboardProject, currentTaskId,
+            watchList = [], currentIntern, dashboardProject, currentTaskId,
             typeOfUser = 'general';
 
         // Adds interns to the database **Only SubAdmins can add interns
@@ -10563,6 +10566,7 @@
 
         // opens a popup containing various project information
         function showProjectInfo(projectId) {
+            const frag = document.createDocumentFragment();
             const allProjects = getRef('left').querySelectorAll('.project-card');
             Array.from(allProjects).find(project => project.classList.contains('project-card--active'))?.classList.remove('project-card--active')
             Array.from(allProjects).find(project => project.getAttribute('href').includes(projectId))?.classList.add('project-card--active')
@@ -10577,7 +10581,7 @@
             getRef('project_explorer__project_description').textContent = projectDescription;
             getRef('explorer_branch_container').innerHTML = ``;
             RIBC.getProjectBranches(projectId).forEach((branch) => {
-                frag.appendChild(render.branchBtn(projectId, branch))
+                frag.append(render.branchBtn(projectId, branch))
             })
             getRef('explorer_branch_container').append(frag);
             getRef('explorer_branch_container').children[0].click()
@@ -10611,26 +10615,25 @@
         function showTasksOfBranch(btn, destination, taskListContainer) {
             currentProject = btn.dataset.projectCode;
             currentBranch = btn.textContent;
+            const frag = document.createDocumentFragment();
             let content = RIBC.getProjectMap(currentProject)[currentBranch],
                 taskList = document.getElementById(taskListContainer),
-                frag = document.createDocumentFragment(),
                 allbranches = document.getElementById(destination).querySelectorAll('.branch-btn');
+            console.log(content)
             taskList.innerHTML = '';
             allbranches.forEach((branchBtn) => {
                 branchBtn.classList.remove('active-branch')
             })
             btn.classList.add('active-branch')
             if (!content[1] && !taskListContainer === 'task_list') {
-                taskList.textContent = "No tasks added yet, Please explore other projects :)"
-            }
-            else {
+                taskList.textContent = "No tasks added yet, Please explore other projects"
+            }else {
                 if (taskListContainer === 'task_list') {
                     showInnerPage('project_editing_panel')
                     content.slice(4).forEach((taskNo) => {
                         frag.appendChild(render.taskListItem(taskNo))
                     })
-                }
-                else {
+                }else {
                     content.slice(4).forEach((taskNo) => {
                         frag.appendChild(render.taskCard(currentProject, currentBranch, taskNo))
                     })
@@ -10820,6 +10823,7 @@
         
         function renderProjectSelectorOptions() {
             // Render All the projects inside updates page
+            const frag = document.createDocumentFragment();
             getRef('updates_page__project_selector').innerHTML = ``;
             const stripOption = createElement('sm-option', {
                 textContent: 'All',
@@ -10837,6 +10841,7 @@
         }
         function renderInternSelectorOptions() {
             // Render All the projects inside updates page
+            const frag = document.createDocumentFragment();
             getRef('updates_page__intern_selector').innerHTML = ``;
             const stripOption = createElement('sm-option', {
                 textContent: 'All',
@@ -10892,6 +10897,7 @@
         })
         function renderInternUpdates(options = {}) {
             let {updates, lazyLoad = false} = options
+            const frag = document.createDocumentFragment();
             if(!updates){
                 updates = RIBC.getInternUpdates();
             }
@@ -10925,21 +10931,15 @@
             const {lazyLoad = false} = options
             const selectedProject = getRef('updates_page__project_selector').value
             const selectedintern = getRef('updates_page__intern_selector').value
-            if(selectedProject === 'all' && selectedintern === 'all'){
-                renderInternUpdates({lazyLoad})
-            }else if(selectedProject !== 'all' && selectedintern === 'all'){
+            let matchedUpdates
+            if(selectedProject !== 'all'){
                 const projectName = RIBC.getProjectDetails(selectedProject).projectName
-                const matchedUpdates = await getUpdatesByProject(projectName)
-                renderInternUpdates({updates: matchedUpdates, lazyLoad})
-            }else if(selectedProject === 'all' && selectedintern !== 'all'){
-                const matchedUpdates = await getUpdatesByIntern(selectedintern)
-                renderInternUpdates({updates: matchedUpdates, lazyLoad})
-            }else{
-                const projectName = RIBC.getProjectDetails(selectedProject).projectName
-                let matchedUpdates = await getUpdatesByProject(projectName)
-                matchedUpdates = await getUpdatesByIntern(selectedintern, matchedUpdates)
-                renderInternUpdates({updates: matchedUpdates, lazyLoad})
+                matchedUpdates = await getUpdatesByProject(projectName)
             }
+            if(selectedintern !== 'all'){
+                matchedUpdates = await getUpdatesByIntern(selectedintern, matchedUpdates)
+            }
+            renderInternUpdates({updates: matchedUpdates, lazyLoad})
         }, 100)
 
         function clearFilter(){
@@ -10962,9 +10962,6 @@
             else {
                 watchList.splice(watchList.indexOf(currentProject), 1)
                 thisBtn.textContent = 'Watch'
-                if (watchList.length === 0) {
-                    document.getElementById('status_map').innerHTML = '<h3>No project added to watch list.</h3>'
-                }
                 localStorage.setItem('watchList', JSON.stringify(watchList))
                 notify(`${RIBC.getProjectDetails(currentProject).projectName} removed from your watch list.`)
             }
@@ -11123,8 +11120,8 @@
 
         function renderAllElements() {
 
-            let frag = document.createDocumentFragment(),
-                allProjectsList = RIBC.getProjectList();
+            const frag = document.createDocumentFragment()
+            let allProjectsList = RIBC.getProjectList();
             //creates cards for highest performing interns
             //sort interns earned points
 
@@ -11375,11 +11372,13 @@
             let greetings = getInternDetails(myFloID)[0] !== undefined ? `Hi, ${getInternDetails(myFloID)[0].split(':')[1]}` : `Hi, there!`
             getRef('username').textContent = greetings;
             getRef('user_flo_id').value = myFloID;
+            getRef('user_role').textContent = typeOfUser;
 
             console.log(typeOfUser)
         }
         function filterInterns(searchKey, options = {}){
             const {sortByRating = false} = options
+            const frag = document.createDocumentFragment();
             const allInterns = RIBC.getInternList()
             const arrayOfInterns = []
             for (const intern in allInterns) {