done mobile navbar and users

frontend/src/app/components/navbar/navright/styles.module.css

@@ -30,7 +30,6 @@
 .userName {
   align-self: stretch;
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
   text-align: right;
   leading-trim: both;
   text-edge: cap;
@@ -45,7 +44,6 @@
 .userRole {
   align-self: stretch;
   color: #85869b;
-  color: color(display-p3 0.5216 0.5255 0.6);
   text-align: right;
   leading-trim: both;
   text-edge: cap;
@@ -112,13 +110,14 @@
   color: #acb0ff;
   border-radius: 4px;
 }
-.settingsBtn:hover,
+
+.settingsBtn:hover {
+  background: #3c4159;
+  color: #d2d3e1;
+}
 .logoutBtn:hover {
   background: #3c4159;
-  background: color(display-p3 0.2392 0.2549 0.3412);
-
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
 }
 .btn {
   display: flex;
@@ -127,19 +126,82 @@
   gap: 12px;
 }
 
-.settingsBtn,
-.logoutBtn > p {
-  color: #acb0ff;
-  color: color(display-p3 0.678 0.6895 1);
+.settingsBtn > p {
+  color: inherit;
   font-family: Inter;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
 }
+
+.logoutBtn > p {
+  color: inherit;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
 /* Mobile */
 @media (max-width: 768px) {
+  .dropdownContainer {
+    display: flex;
+    width: 390px;
+    padding: 16px;
+    border-radius: 0;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    background: linear-gradient(0deg, #2d3143 0%, #191a24 100%);
+    position: fixed;
+    top: 90px;
+    left: 0;
+    width: 100%;
+    margin-top: 0;
+    box-shadow: none;
+  }
+  .mobileEllipsis {
+    display: flex;
+    height: 61px;
+    align-items: center;
+    gap: 10px;
+    padding-right: 10px;
+  }
   .profileBadge {
-    display: none;
+    display: flex;
+    padding: 12px 16px;
+    align-items: center;
+    gap: 24px;
+  }
+  .userImgContainer {
+    width: 50px;
+    height: 50px;
+    aspect-ratio: 1/1;
+  }
+  .userPic {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+  }
+
+  .nameRole {
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .userName {
+    text-align: start;
+    font-size: 18px;
+    letter-spacing: -0.18px;
+  }
+  .userRole {
+    font-size: 14px;
+  }
+  .divider {
+    height: 1px;
+    align-self: stretch;
+    background: #393d53;
   }
 }