feat: add full logo to header

Author: Chai Landau

public/images/octo_logo.svg

@@ -14,10 +14,10 @@ const Header = () => {
             >
               <span>by</span>
               <Image
-                src="/icons/octo.svg"
+                src="/images/octo_logo.svg"
                 alt="OctoAI Icon"
-                width="22"
-                height="24"
+                fill
+                objectFit="contain"
               />
             </a>
           </div>

src/components/Header/Header.tsx

@@ -27,9 +27,12 @@ interface SelectProps {
 const Select: FC<SelectProps> = ({ label, listItems }) => (
   <ReactAriaSelect className="select" defaultSelectedKey={"2024"}>
     {label && <Label>{label}</Label>}
-    
+
     <Button>
-      <SelectValue />
+      <span>
+        <span className="mobile-text">Year:</span>
+        <SelectValue />
+      </span>
       <span aria-hidden="true" className="icon">
         <img src="/icons/chevron.svg" />
       </span>

src/components/Select/Select.tsx

@@ -34,27 +34,36 @@ header {
   }
   &.dropdown {
     .left {
-      @apply gap-2 md:gap-3;
+      @apply gap-2 md:gap-3 justify-between w-full xs:w-auto xs:justify-start;
+    }
+    .right {
+      @apply w-full xs:w-auto;
     }
     & > div {
-      @apply pb-1 flex-row;
+      @apply pb-1 flex-col gap-2 xs:flex-row;
     }
     a {
-      @apply text-[1.125rem] xs:text-2xs sm:text-xs md:text-lg;
+      @apply text-[1.125rem] xs:text-2xs sm:text-xs md:text-md;
     }
     .by-octo {
-      @apply hidden xs:flex;
       a {
         @apply gap-[6px] md:gap-2 dark:text-gray-400;
       }
       img {
-        @apply max-h-6 dark:brightness-84 dark:contrast-84 dark:hue-rotate-145 dark:invert-77 dark:saturate-194 dark:sepia-4 dark:filter;
+        @apply !relative max-h-[18px] dark:brightness-84 dark:contrast-84 dark:hue-rotate-145 dark:invert-77 dark:saturate-194 dark:sepia-4 dark:filter m-auto;
       }
       span {
         @apply text-body-sm md:text-body transition-font-size;
       }
     }
     .select {
+      &,
+      button {
+        @apply w-full text-center grid grid-cols-select xs:flex xs:w-[100px];
+        .mobile-text {
+          @apply inline-block mr-1 text-gray-500 xs:hidden dark:text-gray-300;
+        }
+      }
       .react-aria-Label {
         @apply hidden text-body-sm xs:block;
       }

src/styles/components/header.css

@@ -96,6 +96,9 @@ const theme: Config = {
         "84": "84",
         "86": ".86",
       },
+      gridTemplateColumns: {
+        select: "1fr 12px",
+      },
     },
     colors: {
       transparent: "transparent",