header update

frontend/src/app/components/header/styles.module.css

@@ -1,5 +1,4 @@
-.headerContainer {
-  background-color: #ff0000;
+.mainContainer {
   display: flex;
   height: 84px;
   padding: 12px 24px;
@@ -9,8 +8,11 @@
   border-bottom: 1px solid #2c2d3d;
   border-bottom: 1px solid color(display-p3 0.1725 0.1765 0.2353);
 }
-.logoContainer {
-  background-color: orange;
+.organizationContainer {
+  display: flex;
+  align-items: center;
+}
+.orgContainer {
   display: flex;
   padding: 6px;
   align-items: center;
@@ -36,7 +38,7 @@
   align-items: flex-start;
   gap: 4px;
 }
-.orgName p {
+.orgName > p {
   color: #eeeffd;
   color: color(display-p3 0.9333 0.9373 0.9882);
   font-family: Inter;
@@ -46,13 +48,18 @@
   line-height: normal;
 }
 
-.dropdown {
+.dropdownContainer {
+  width: 201px;
+  height: 28px;
+  cursor: pointer;
+  position: relative;
+}
+.dropdownBtn {
   display: inline-flex;
   align-items: center;
   gap: 16px;
 }
-
-.dropdown > p {
+.dropdownBtn > p {
   color: #85869b;
   color: color(display-p3 0.5216 0.5255 0.6);
   font-family: Inter;
@@ -61,19 +68,48 @@
   font-weight: 500;
   line-height: normal;
 }
-
-.dropdown > div {
+.dropdownBtn > div {
   display: flex;
   padding: 8px;
   justify-content: center;
   align-items: center;
   gap: 10px;
+  border-radius: 100px;
 }
-
-.dropdown > div > button > svg {
-  width: 9.922px;
-  height: 4.961px;
-  stroke: #959aff;
-  stroke-width: 1px;
-  stroke: color(display-p3 0.5892 0.6031 0.9766);
+.dropdownBtn > div:hover {
+  border-radius: 100px;
+  border: 1px solid #b8badc;
+  border: 1px solid color(display-p3 0.7238 0.7303 0.8531);
+  background: linear-gradient(
+    180deg,
+    rgba(149, 154, 255, 0.25) 0%,
+    rgba(88, 91, 151, 0.25) 100%
+  );
+  background: linear-gradient(
+    180deg,
+    color(display-p3 0.5892 0.6031 0.9766 / 0.25) 0%,
+    color(display-p3 0.3479 0.3561 0.5766 / 0.25) 100%
+  );
+}
+/* Dropdown */
+.dropdown {
+  display: inline-flex;
+  padding: 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  border-radius: 6px;
+  background: #2d3143;
+  background: color(display-p3 0.1804 0.1922 0.2588);
+  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
+  box-shadow: 0 2px 15px 0 color(display-p3 0 0 0 / 0.25);
+  position: absolute;
+  top: 100%;
+  left: 0;
+}
+.profileContainer {
+  display: flex;
+  height: 44px;
+  flex-direction: column;
+  align-items: flex-end;
 }