@campxdev/shared 1.8.43 → 1.8.44

package/src/components/Layout/Header/assets/pay_small.svg

@@ -1,16 +1,16 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.634" height="35" viewBox="0 0 24.634 35">
-  <defs>
-    <linearGradient id="linear-gradient" x1="0.222" y1="1" x2="0.787" gradientUnits="objectBoundingBox">
-      <stop offset="0" stop-color="#88b053"/>
-      <stop offset="1" stop-color="#50840b"/>
-    </linearGradient>
-  </defs>
-  <g id="Group_4350" data-name="Group 4350" transform="translate(-1597.6 -781.549)">
-    <g id="Group_4461" data-name="Group 4461" transform="translate(1597.6 781.55)">
-      <g id="Group_4460" data-name="Group 4460" transform="translate(0 0)">
-        <path id="Subtraction_8" data-name="Subtraction 8" d="M8.75,17.991,21.775.063,21.688,0H13.1L4.389,11.988l0,0-4.361,6,0,0H8.75Z" transform="translate(2.859 17.009)" fill="url(#linear-gradient)"/>
-        <path id="Subtraction_8-2" data-name="Subtraction 8" d="M13.051,0,.026,17.927l.087.063H8.7L17.412,6l0,0,4.361-6,0,0H13.051Z" transform="translate(-0.026 0)" fill="url(#linear-gradient)"/>
-      </g>
-    </g>
-  </g>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.634" height="35" viewBox="0 0 24.634 35">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.222" y1="1" x2="0.787" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#88b053"/>
+      <stop offset="1" stop-color="#50840b"/>
+    </linearGradient>
+  </defs>
+  <g id="Group_4350" data-name="Group 4350" transform="translate(-1597.6 -781.549)">
+    <g id="Group_4461" data-name="Group 4461" transform="translate(1597.6 781.55)">
+      <g id="Group_4460" data-name="Group 4460" transform="translate(0 0)">
+        <path id="Subtraction_8" data-name="Subtraction 8" d="M8.75,17.991,21.775.063,21.688,0H13.1L4.389,11.988l0,0-4.361,6,0,0H8.75Z" transform="translate(2.859 17.009)" fill="url(#linear-gradient)"/>
+        <path id="Subtraction_8-2" data-name="Subtraction 8" d="M13.051,0,.026,17.927l.087.063H8.7L17.412,6l0,0,4.361-6,0,0H13.051Z" transform="translate(-0.026 0)" fill="url(#linear-gradient)"/>
+      </g>
+    </g>
+  </g>
 </svg>

package/src/components/Layout/Header/assets/payx.svg

@@ -1,19 +1,19 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="93.064" height="30" viewBox="0 0 93.064 30">
-  <defs>
-    <linearGradient id="linear-gradient" x1="0.222" y1="1" x2="0.787" gradientUnits="objectBoundingBox">
-      <stop offset="0" stop-color="#88b053"/>
-      <stop offset="1" stop-color="#50840b"/>
-    </linearGradient>
-  </defs>
-  <g id="Group_4626" data-name="Group 4626" transform="translate(-157.064 -25)">
-    <text id="PAYX" transform="translate(190.127 47.5)" font-size="22" font-family="Nexa-XBold, Nexa" font-weight="700"><tspan x="0" y="0">PAYX</tspan></text>
-    <g id="Group_4464" data-name="Group 4464" transform="translate(-1440.537 -756.55)">
-      <g id="Group_4461" data-name="Group 4461" transform="translate(1597.6 781.55)">
-        <g id="Group_4460" data-name="Group 4460" transform="translate(0 0)">
-          <path id="Subtraction_8" data-name="Subtraction 8" d="M7.5,15.42,18.668.054,18.593,0H11.232L3.766,10.275v0L.026,15.418v0H7.5Z" transform="translate(2.447 14.58)" fill="url(#linear-gradient)"/>
-          <path id="Subtraction_8-2" data-name="Subtraction 8" d="M11.19,0,.026,15.366.1,15.42H7.462L14.928,5.145v0L18.668,0V0H11.19Z" transform="translate(-0.026 0)" fill="url(#linear-gradient)"/>
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="93.064" height="30" viewBox="0 0 93.064 30">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.222" y1="1" x2="0.787" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#88b053"/>
+      <stop offset="1" stop-color="#50840b"/>
+    </linearGradient>
+  </defs>
+  <g id="Group_4626" data-name="Group 4626" transform="translate(-157.064 -25)">
+    <text id="PAYX" transform="translate(190.127 47.5)" font-size="22" font-family="Nexa-XBold, Nexa" font-weight="700"><tspan x="0" y="0">PAYX</tspan></text>
+    <g id="Group_4464" data-name="Group 4464" transform="translate(-1440.537 -756.55)">
+      <g id="Group_4461" data-name="Group 4461" transform="translate(1597.6 781.55)">
+        <g id="Group_4460" data-name="Group 4460" transform="translate(0 0)">
+          <path id="Subtraction_8" data-name="Subtraction 8" d="M7.5,15.42,18.668.054,18.593,0H11.232L3.766,10.275v0L.026,15.418v0H7.5Z" transform="translate(2.447 14.58)" fill="url(#linear-gradient)"/>
+          <path id="Subtraction_8-2" data-name="Subtraction 8" d="M11.19,0,.026,15.366.1,15.42H7.462L14.928,5.145v0L18.668,0V0H11.19Z" transform="translate(-0.026 0)" fill="url(#linear-gradient)"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/components/Layout/Header/assets/people_small.svg

@@ -1,9 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="46.624" height="35.002" viewBox="0 0 46.624 35.002">
-  <defs>
-    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
-      <stop offset="0" stop-color="#d0002b"/>
-      <stop offset="1" stop-color="#ea4a6b"/>
-    </linearGradient>
-  </defs>
-  <path id="Union_1" data-name="Union 1" d="M-1718.525-7459l-5.5-7.575-1.032,1.42,4.429,6.071-.113.083h-20l0,0,4.479-6.165-1.023-1.408-5.5,7.574H-1754l0,0,5.6-7.715,0,0,11.076-15.242.085.116,6.578,9.018,6.616-9.017.065-.089,16.6,22.845-.111.083Zm-10.1-30.589a4.412,4.412,0,0,1,4.41-4.412,4.413,4.413,0,0,1,4.412,4.412,4.413,4.413,0,0,1-4.412,4.413A4.413,4.413,0,0,1-1728.62-7489.589Zm-13.114,0a4.412,4.412,0,0,1,4.412-4.412,4.412,4.412,0,0,1,4.41,4.412,4.412,4.412,0,0,1-4.41,4.413A4.413,4.413,0,0,1-1741.735-7489.589Z" transform="translate(1753.999 7494.002)" fill="url(#linear-gradient)"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="46.624" height="35.002" viewBox="0 0 46.624 35.002">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#d0002b"/>
+      <stop offset="1" stop-color="#ea4a6b"/>
+    </linearGradient>
+  </defs>
+  <path id="Union_1" data-name="Union 1" d="M-1718.525-7459l-5.5-7.575-1.032,1.42,4.429,6.071-.113.083h-20l0,0,4.479-6.165-1.023-1.408-5.5,7.574H-1754l0,0,5.6-7.715,0,0,11.076-15.242.085.116,6.578,9.018,6.616-9.017.065-.089,16.6,22.845-.111.083Zm-10.1-30.589a4.412,4.412,0,0,1,4.41-4.412,4.413,4.413,0,0,1,4.412,4.412,4.413,4.413,0,0,1-4.412,4.413A4.413,4.413,0,0,1-1728.62-7489.589Zm-13.114,0a4.412,4.412,0,0,1,4.412-4.412,4.412,4.412,0,0,1,4.41,4.412,4.412,4.412,0,0,1-4.41,4.413A4.413,4.413,0,0,1-1741.735-7489.589Z" transform="translate(1753.999 7494.002)" fill="url(#linear-gradient)"/>
+</svg>

package/src/components/Layout/Header/assets/peoplex.svg

@@ -1,12 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="155.964" height="30.002" viewBox="0 0 155.964 30.002">
-  <defs>
-    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
-      <stop offset="0" stop-color="#d0002b"/>
-      <stop offset="1" stop-color="#ea4a6b"/>
-    </linearGradient>
-  </defs>
-  <g id="Group_4626" data-name="Group 4626" transform="translate(-136.164 -24.999)">
-    <text id="PEOPLEX" transform="translate(186.127 47.5)" font-size="22" font-family="Nexa-XBold, Nexa" font-weight="700"><tspan x="0" y="0">PEOPLEX</tspan></text>
-    <path id="Union_42" data-name="Union 42" d="M-1723.591-7464l-4.718-6.494-.884,1.217,3.8,5.2-.1.072h-17.139l0,0,3.84-5.284-.875-1.206-4.717,6.494H-1754l0,0,4.8-6.611,0,0,9.494-13.066.047.064h0l5.664,7.765,5.7-7.765h0l.029-.04,14.226,19.582-.1.072Zm-8.653-26.22a3.782,3.782,0,0,1,3.78-3.782,3.784,3.784,0,0,1,3.782,3.782,3.784,3.784,0,0,1-3.782,3.782A3.782,3.782,0,0,1-1732.245-7490.219Zm-11.241,0a3.782,3.782,0,0,1,3.78-3.782,3.783,3.783,0,0,1,3.782,3.782,3.783,3.783,0,0,1-3.782,3.782A3.782,3.782,0,0,1-1743.486-7490.219Z" transform="translate(1890.163 7519)" fill="url(#linear-gradient)"/>
-  </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="155.964" height="30.002" viewBox="0 0 155.964 30.002">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#d0002b"/>
+      <stop offset="1" stop-color="#ea4a6b"/>
+    </linearGradient>
+  </defs>
+  <g id="Group_4626" data-name="Group 4626" transform="translate(-136.164 -24.999)">
+    <text id="PEOPLEX" transform="translate(186.127 47.5)" font-size="22" font-family="Nexa-XBold, Nexa" font-weight="700"><tspan x="0" y="0">PEOPLEX</tspan></text>
+    <path id="Union_42" data-name="Union 42" d="M-1723.591-7464l-4.718-6.494-.884,1.217,3.8,5.2-.1.072h-17.139l0,0,3.84-5.284-.875-1.206-4.717,6.494H-1754l0,0,4.8-6.611,0,0,9.494-13.066.047.064h0l5.664,7.765,5.7-7.765h0l.029-.04,14.226,19.582-.1.072Zm-8.653-26.22a3.782,3.782,0,0,1,3.78-3.782,3.784,3.784,0,0,1,3.782,3.782,3.784,3.784,0,0,1-3.782,3.782A3.782,3.782,0,0,1-1732.245-7490.219Zm-11.241,0a3.782,3.782,0,0,1,3.78-3.782,3.783,3.783,0,0,1,3.782,3.782,3.783,3.783,0,0,1-3.782,3.782A3.782,3.782,0,0,1-1743.486-7490.219Z" transform="translate(1890.163 7519)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

package/src/components/Layout/Header/assets/squarex.svg

@@ -1,12 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="226.128" height="30" viewBox="0 0 226.128 30">
-  <defs>
-    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
-      <stop offset="0" stop-color="#596e79"/>
-      <stop offset="1" stop-color="#7c909b"/>
-    </linearGradient>
-  </defs>
-  <g id="Group_4626" data-name="Group 4626" transform="translate(-148 -25)">
-    <text id="CAMPX_SQUARE" data-name="CAMPX SQUARE" transform="translate(190.127 47.5)" font-size="22" font-family="Nexa-XBold, Nexa" font-weight="700"><tspan x="0" y="0">CAMPX SQUARE</tspan></text>
-    <path id="Subtraction_57" data-name="Subtraction 57" d="M-5680.2,8259.99h-11.3v-11.343h5.625v5.718h5.672v5.625Zm18.7,0h-11.3v-5.625h5.671v-5.718h5.625v11.343Zm0-18.749h-5.625v-5.626h-5.671v-5.625h11.3v11.251Zm-24.375,0h-5.625V8229.99h11.3v5.625h-5.672v5.626Z" transform="translate(5839.5 -8204.99)" fill="url(#linear-gradient)"/>
-  </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="226.128" height="30" viewBox="0 0 226.128 30">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#596e79"/>
+      <stop offset="1" stop-color="#7c909b"/>
+    </linearGradient>
+  </defs>
+  <g id="Group_4626" data-name="Group 4626" transform="translate(-148 -25)">
+    <text id="CAMPX_SQUARE" data-name="CAMPX SQUARE" transform="translate(190.127 47.5)" font-size="22" font-family="Nexa-XBold, Nexa" font-weight="700"><tspan x="0" y="0">CAMPX SQUARE</tspan></text>
+    <path id="Subtraction_57" data-name="Subtraction 57" d="M-5680.2,8259.99h-11.3v-11.343h5.625v5.718h5.672v5.625Zm18.7,0h-11.3v-5.625h5.671v-5.718h5.625v11.343Zm0-18.749h-5.625v-5.626h-5.671v-5.625h11.3v11.251Zm-24.375,0h-5.625V8229.99h11.3v5.625h-5.672v5.626Z" transform="translate(5839.5 -8204.99)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

package/src/components/Layout/Header/icons.tsx

@@ -1,57 +1,57 @@
-export const AppsIcon = () => {
-  return (
-    <svg
-      id="apps"
-      xmlns="http://www.w3.org/2000/svg"
-      width="22"
-      height="22"
-      viewBox="0 0 24 24"
-    >
-      <path
-        id="Path_15109"
-        data-name="Path 15109"
-        d="M7,0H4A4,4,0,0,0,0,4V7a4,4,0,0,0,4,4H7a4,4,0,0,0,4-4V4A4,4,0,0,0,7,0ZM9,7A2,2,0,0,1,7,9H4A2,2,0,0,1,2,7V4A2,2,0,0,1,4,2H7A2,2,0,0,1,9,4Z"
-        fill="#d4483e"
-      />
-      <path
-        id="Path_15110"
-        data-name="Path 15110"
-        d="M20,0H17a4,4,0,0,0-4,4V7a4,4,0,0,0,4,4h3a4,4,0,0,0,4-4V4A4,4,0,0,0,20,0Zm2,7a2,2,0,0,1-2,2H17a2,2,0,0,1-2-2V4a2,2,0,0,1,2-2h3a2,2,0,0,1,2,2Z"
-        fill="#f8d759"
-      />
-      <path
-        id="Path_15111"
-        data-name="Path 15111"
-        d="M7,13H4a4,4,0,0,0-4,4v3a4,4,0,0,0,4,4H7a4,4,0,0,0,4-4V17A4,4,0,0,0,7,13Zm2,7a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2V17a2,2,0,0,1,2-2H7a2,2,0,0,1,2,2Z"
-        fill="#88b053"
-      />
-      <path
-        id="Path_15112"
-        data-name="Path 15112"
-        d="M20,13H17a4,4,0,0,0-4,4v3a4,4,0,0,0,4,4h3a4,4,0,0,0,4-4V17A4,4,0,0,0,20,13Zm2,7a2,2,0,0,1-2,2H17a2,2,0,0,1-2-2V17a2,2,0,0,1,2-2h3a2,2,0,0,1,2,2Z"
-        fill="#4baabe"
-      />
-    </svg>
-  )
-}
-
-export const NotificationIcon = () => {
-  return (
-    <>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="18.125"
-        height="20"
-        viewBox="0 0 18.125 20"
-      >
-        <path
-          id="bell_10_"
-          data-name="bell (10)"
-          d="M18.958,11.384l-1.583-5.7a7.767,7.767,0,0,0-15.064.395L1.085,11.595a4.166,4.166,0,0,0,4.067,5.07H6.08a4.166,4.166,0,0,0,8.166,0h.7a4.166,4.166,0,0,0,4.015-5.281Zm-8.795,6.948a2.5,2.5,0,0,1-2.346-1.666H12.51A2.5,2.5,0,0,1,10.163,18.332Zm6.771-4.32A2.481,2.481,0,0,1,14.944,15H5.152a2.5,2.5,0,0,1-2.44-3.042L3.937,6.444a6.1,6.1,0,0,1,11.832-.31l1.583,5.7a2.481,2.481,0,0,1-.418,2.181Z"
-          transform="translate(-0.986 -0.002)"
-          fill="#121212"
-        />
-      </svg>
-    </>
-  )
-}
+export const AppsIcon = () => {
+  return (
+    <svg
+      id="apps"
+      xmlns="http://www.w3.org/2000/svg"
+      width="22"
+      height="22"
+      viewBox="0 0 24 24"
+    >
+      <path
+        id="Path_15109"
+        data-name="Path 15109"
+        d="M7,0H4A4,4,0,0,0,0,4V7a4,4,0,0,0,4,4H7a4,4,0,0,0,4-4V4A4,4,0,0,0,7,0ZM9,7A2,2,0,0,1,7,9H4A2,2,0,0,1,2,7V4A2,2,0,0,1,4,2H7A2,2,0,0,1,9,4Z"
+        fill="#d4483e"
+      />
+      <path
+        id="Path_15110"
+        data-name="Path 15110"
+        d="M20,0H17a4,4,0,0,0-4,4V7a4,4,0,0,0,4,4h3a4,4,0,0,0,4-4V4A4,4,0,0,0,20,0Zm2,7a2,2,0,0,1-2,2H17a2,2,0,0,1-2-2V4a2,2,0,0,1,2-2h3a2,2,0,0,1,2,2Z"
+        fill="#f8d759"
+      />
+      <path
+        id="Path_15111"
+        data-name="Path 15111"
+        d="M7,13H4a4,4,0,0,0-4,4v3a4,4,0,0,0,4,4H7a4,4,0,0,0,4-4V17A4,4,0,0,0,7,13Zm2,7a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2V17a2,2,0,0,1,2-2H7a2,2,0,0,1,2,2Z"
+        fill="#88b053"
+      />
+      <path
+        id="Path_15112"
+        data-name="Path 15112"
+        d="M20,13H17a4,4,0,0,0-4,4v3a4,4,0,0,0,4,4h3a4,4,0,0,0,4-4V17A4,4,0,0,0,20,13Zm2,7a2,2,0,0,1-2,2H17a2,2,0,0,1-2-2V17a2,2,0,0,1,2-2h3a2,2,0,0,1,2,2Z"
+        fill="#4baabe"
+      />
+    </svg>
+  )
+}
+
+export const NotificationIcon = () => {
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="18.125"
+        height="20"
+        viewBox="0 0 18.125 20"
+      >
+        <path
+          id="bell_10_"
+          data-name="bell (10)"
+          d="M18.958,11.384l-1.583-5.7a7.767,7.767,0,0,0-15.064.395L1.085,11.595a4.166,4.166,0,0,0,4.067,5.07H6.08a4.166,4.166,0,0,0,8.166,0h.7a4.166,4.166,0,0,0,4.015-5.281Zm-8.795,6.948a2.5,2.5,0,0,1-2.346-1.666H12.51A2.5,2.5,0,0,1,10.163,18.332Zm6.771-4.32A2.481,2.481,0,0,1,14.944,15H5.152a2.5,2.5,0,0,1-2.44-3.042L3.937,6.444a6.1,6.1,0,0,1,11.832-.31l1.583,5.7a2.481,2.481,0,0,1-.418,2.181Z"
+          transform="translate(-0.986 -0.002)"
+          fill="#121212"
+        />
+      </svg>
+    </>
+  )
+}

package/src/components/Layout/Header/index.tsx

@@ -1 +1 @@
-export { default } from './AppHeader'
+export { default } from './AppHeader'

package/src/components/Layout/Header/styles.tsx

@@ -1,133 +1,133 @@
-import {
-  alpha,
-  AppBar,
-  Box,
-  IconButton,
-  ListItemText,
-  styled,
-  Typography,
-  Link,
-  Avatar,
-} from '@mui/material'
-import { Link as RouterLink } from 'react-router-dom'
-
-export const StyledImageWrapper = styled('div')`
-  width: auto;
-  height: 24px;
-  & img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
-`
-
-export const StyledItemText = styled(ListItemText)(({ theme }) => ({
-  color: theme.palette.text.primary,
-  transition: '0.2s ease',
-}))
-
-export const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  backgroundColor: 'white',
-  boxShadow: '0px 8px 28px rgb(136,136,136, 0.3)',
-}))
-
-export const StyledHeader = styled(Box)(({ theme }) => ({
-  boxShadow: '0px 2px 10px #0000001a',
-  backgroundColor: 'white',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  '& .actions': {
-    marginRight: '20px',
-    display: 'flex',
-    alignItems: 'center',
-    gap: '14px',
-  },
-}))
-
-export const StyledUser = styled(Box)(({ theme }) => ({
-  cursor: 'pointer',
-  borderRadius: '5px',
-  transition: 'background 0.2s ease',
-  padding: '5px 16px',
-  display: 'flex',
-  alignItems: 'center',
-  gap: '8px',
-  '&:hover': {
-    background: theme.palette.secondary.light,
-  },
-}))
-
-export const StyledIconButton = styled(IconButton)({
-  padding: '20px',
-  backgroundColor: 'black',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: '0px',
-  border: '1px solid white',
-})
-
-export const StyledLink = styled(Link)({
-  textDecoration: 'none',
-})
-
-export const StyledDescription = styled(Typography)(({ theme }) => ({
-  fontSize: '12px',
-  fontWeight: 600,
-  color: alpha(theme?.palette?.secondary?.lighter, 0.5),
-}))
-
-export const StyledMenuItem = styled(Box)({
-  height: '68px',
-  width: '380px',
-  padding: '40px 20px',
-  transition: 'background ease 0.3s',
-  '&:hover': {
-    background: 'rgba(0, 0, 0, 0.03)',
-  },
-  display: 'flex',
-  alignItems: 'center',
-  gap: '20px',
-})
-
-export const StyledMenuItemContainer = styled(Box)(({ theme }) => ({
-  cursor: 'pointer',
-
-  padding: '8px 0px',
-
-  borderBottom: `1px solid ${theme?.palette?.secondary?.lighter}`,
-}))
-
-export const StyledAvatar = styled(Avatar)(({ theme }) => ({
-  background: theme.palette.secondary.main,
-  cursor: 'pointer',
-  height: '45px',
-  width: '45px',
-}))
-
-export const StyledLogosWrapper = styled(Box)(() => ({
-  display: 'flex',
-  alignItems: 'center',
-  gap: '10px',
-  padding: '10px',
-  transition: 'background ease 0.3s',
-  borderRadius: '5px',
-  '&:hover': {
-    background: 'rgba(0, 0, 0, 0.05)',
-  },
-}))
-
-export const StyledImageBox = styled(Box)(() => ({
-  height: '40px',
-  width: '40px',
-  boxShadow: '0px 5px 5px 0px rgba(48, 62, 99,0.1) ',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: '5px',
-}))
-
-export const StyledRouterLink = styled(RouterLink)(() => ({
-  textDecoration: 'none',
-}))
+import {
+  alpha,
+  AppBar,
+  Box,
+  IconButton,
+  ListItemText,
+  styled,
+  Typography,
+  Link,
+  Avatar,
+} from '@mui/material'
+import { Link as RouterLink } from 'react-router-dom'
+
+export const StyledImageWrapper = styled('div')`
+  width: auto;
+  height: 24px;
+  & img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+`
+
+export const StyledItemText = styled(ListItemText)(({ theme }) => ({
+  color: theme.palette.text.primary,
+  transition: '0.2s ease',
+}))
+
+export const StyledAppBar = styled(AppBar)(({ theme }) => ({
+  backgroundColor: 'white',
+  boxShadow: '0px 8px 28px rgb(136,136,136, 0.3)',
+}))
+
+export const StyledHeader = styled(Box)(({ theme }) => ({
+  boxShadow: '0px 2px 10px #0000001a',
+  backgroundColor: 'white',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  '& .actions': {
+    marginRight: '20px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '14px',
+  },
+}))
+
+export const StyledUser = styled(Box)(({ theme }) => ({
+  cursor: 'pointer',
+  borderRadius: '5px',
+  transition: 'background 0.2s ease',
+  padding: '5px 16px',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  '&:hover': {
+    background: theme.palette.secondary.light,
+  },
+}))
+
+export const StyledIconButton = styled(IconButton)({
+  padding: '20px',
+  backgroundColor: 'black',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '0px',
+  border: '1px solid white',
+})
+
+export const StyledLink = styled(Link)({
+  textDecoration: 'none',
+})
+
+export const StyledDescription = styled(Typography)(({ theme }) => ({
+  fontSize: '12px',
+  fontWeight: 600,
+  color: alpha(theme?.palette?.secondary?.lighter, 0.5),
+}))
+
+export const StyledMenuItem = styled(Box)({
+  height: '68px',
+  width: '380px',
+  padding: '40px 20px',
+  transition: 'background ease 0.3s',
+  '&:hover': {
+    background: 'rgba(0, 0, 0, 0.03)',
+  },
+  display: 'flex',
+  alignItems: 'center',
+  gap: '20px',
+})
+
+export const StyledMenuItemContainer = styled(Box)(({ theme }) => ({
+  cursor: 'pointer',
+
+  padding: '8px 0px',
+
+  borderBottom: `1px solid ${theme?.palette?.secondary?.lighter}`,
+}))
+
+export const StyledAvatar = styled(Avatar)(({ theme }) => ({
+  background: theme.palette.secondary.main,
+  cursor: 'pointer',
+  height: '45px',
+  width: '45px',
+}))
+
+export const StyledLogosWrapper = styled(Box)(() => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '10px',
+  padding: '10px',
+  transition: 'background ease 0.3s',
+  borderRadius: '5px',
+  '&:hover': {
+    background: 'rgba(0, 0, 0, 0.05)',
+  },
+}))
+
+export const StyledImageBox = styled(Box)(() => ({
+  height: '40px',
+  width: '40px',
+  boxShadow: '0px 5px 5px 0px rgba(48, 62, 99,0.1) ',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '5px',
+}))
+
+export const StyledRouterLink = styled(RouterLink)(() => ({
+  textDecoration: 'none',
+}))