From 0ef6fe050a9a790af1a73d082ea3e2dfb59c8902 Mon Sep 17 00:00:00 2001
From: Chai Landau <clandau@octoml.ai>
Date: Wed, 28 Feb 2024 11:44:05 -0500
Subject: [PATCH] feat: add full logo to header

---
 public/images/octo_logo.svg      | 10 ++++++++++
 src/components/Header/Header.tsx |  6 +++---
 src/components/Select/Select.tsx |  7 +++++--
 src/styles/components/header.css | 19 ++++++++++++++-----
 tailwind.config.ts               |  3 +++
 5 files changed, 35 insertions(+), 10 deletions(-)
 create mode 100644 public/images/octo_logo.svg

diff --git a/public/images/octo_logo.svg b/public/images/octo_logo.svg
new file mode 100644
index 0000000..a40f219
--- /dev/null
+++ b/public/images/octo_logo.svg
@@ -0,0 +1,10 @@
+<svg width="958" height="247" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M83.069 232.578a48.2 48.2 0 0 1-15.735 10.701A47.571 47.571 0 0 1 48.757 247a48.203 48.203 0 0 1-27.077-8.343c-8.015-5.439-14.264-13.17-17.958-22.217A50.289 50.289 0 0 1 .93 187.83c1.873-9.607 6.506-18.435 13.313-25.369l14.396 14.628a29.024 29.024 0 0 0-7.676 14.776 29.301 29.301 0 0 0 1.665 16.622 28.78 28.78 0 0 0 10.448 12.903 28.104 28.104 0 0 0 15.732 4.86 27.587 27.587 0 0 0 10.785-2.16 27.948 27.948 0 0 0 9.132-6.217l14.345 14.705ZM103.06.172a90.077 90.077 0 0 0-36.52 5.316 90.373 90.373 0 0 0-31.367 19.525 91.95 91.95 0 0 0-21.076 30.316 92.283 92.283 0 0 0-7.48 36.2c0 1.844 0 3.66.178 5.425 1.48 20.948 10.584 40.617 25.575 55.259l47.688 47.994 20.378 20.467 11.998 12.05a48.685 48.685 0 0 0 15.866 10.602A48.521 48.521 0 0 0 147.002 247a49.104 49.104 0 0 0 27.371-8.322 49.4 49.4 0 0 0 18.151-22.194 49.649 49.649 0 0 0 2.808-28.581 49.525 49.525 0 0 0-13.481-25.329l-14.469 14.686a28.87 28.87 0 0 1 7.756 14.756 28.944 28.944 0 0 1-1.682 16.6 28.799 28.799 0 0 1-10.557 12.884 28.614 28.614 0 0 1-15.897 4.853 28.087 28.087 0 0 1-10.898-2.153 28.182 28.182 0 0 1-9.226-6.212l-6.776-6.78-39.637-39.782-33.676-33.821a65.126 65.126 0 0 1-19.513-41.829v-4.22c.013-18.776 7.437-36.78 20.644-50.068C61.128 28.2 79.041 20.71 97.736 20.664h4.153a71.357 71.357 0 0 1 46.917 22.304 71.952 71.952 0 0 1 19.518 48.306v3.76a65.2 65.2 0 0 1-19.538 42.597l-36.434 36.7 14.546 14.608 36.332-36.7c15.176-14.919 24.26-34.991 25.473-56.283V91.12c-.106-23.247-9.016-45.583-24.922-62.474-15.905-16.89-37.614-27.07-60.721-28.474Z"
+        fill="#6C707A" />
+    <path
+        d="M277.568 123.387c0-41.59 27.876-62.722 57.551-62.722 29.676 0 57.553 21.132 57.553 62.722 0 41.591-27.877 62.948-57.553 62.948-29.675 0-57.551-21.357-57.551-62.948Zm-22.482 0c0 53.281 40.017 83.181 80.033 83.181 40.017 0 80.034-29.9 80.034-83.181 0-53.28-40.017-82.956-80.034-82.956-40.016 0-80.033 29.675-80.033 82.956Zm233.527-12.14c18.435 0 26.303 12.365 29 22.931l19.11-8.093c-4.497-16.412-19.335-34.396-48.11-34.396-30.8 0-54.405 23.605-54.405 57.327 0 32.823 23.156 57.552 54.629 57.552 28.102 0 43.614-18.21 48.785-33.722l-18.66-8.093c-2.473 8.543-9.891 22.256-30.125 22.256-17.535 0-33.047-13.264-33.047-37.993 0-25.179 15.737-37.769 32.823-37.769Zm102.126-50.358h-19.334v17.535c0 9.443-4.946 16.637-16.636 16.637h-5.845v19.109h20.683v59.351c0 19.558 11.69 30.799 30.125 30.799 7.194 0 12.589-1.349 14.388-2.024v-17.984c-1.799.449-5.621.899-8.318.899-11.016 0-15.063-4.946-15.063-14.838V114.17h23.381V95.06h-23.381V60.89Zm96.802 126.795c-17.985 0-33.723-13.489-33.723-38.668 0-24.954 15.738-38.443 33.723-38.443s33.722 13.489 33.722 38.443c0 25.179-15.737 38.668-33.722 38.668Zm0-95.995c-32.374 0-55.304 24.504-55.304 57.327 0 33.048 22.93 57.552 55.304 57.552 32.373 0 55.304-24.504 55.304-57.552 0-32.823-22.931-57.327-55.304-57.327ZM882.51 203.196h23.833L842.946 43.803h-25.405l-63.397 159.393h23.605l16.863-44.513h70.594l17.304 44.513ZM829.685 66.734l27.648 71.491h-54.855l27.207-71.49Zm121.684 136.462V43.803h-22.487v159.393h22.487Z"
+        fill="#6C707A" />
+
+
+</svg>
\ No newline at end of file
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index ad9ec28..7917538 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -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>
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 42fc056..9a76485 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.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>
diff --git a/src/styles/components/header.css b/src/styles/components/header.css
index 91aac04..38e3511 100644
--- a/src/styles/components/header.css
+++ b/src/styles/components/header.css
@@ -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;
       }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 55eb6a4..40d657e 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -96,6 +96,9 @@ const theme: Config = {
         "84": "84",
         "86": ".86",
       },
+      gridTemplateColumns: {
+        select: "1fr 12px",
+      },
     },
     colors: {
       transparent: "transparent",