From db7ea9a74c952f4026ca3a1a938ff4584f58bdc2 Mon Sep 17 00:00:00 2001
From: Shoaib Ahmed <shahmed@twilio.com>
Date: Fri, 20 Sep 2024 11:35:21 +0530
Subject: [PATCH 1/4] fix(mobile-nav): horizontal scroll issue on header

---
 .../site-header/SiteHeaderSearch.tsx           | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderSearch.tsx b/packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderSearch.tsx
index a9022fba50..1f0aa41fb9 100644
--- a/packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderSearch.tsx
+++ b/packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderSearch.tsx
@@ -4,6 +4,7 @@ import { SearchIcon } from "@twilio-paste/icons/esm/SearchIcon";
 import { InlineCode } from "@twilio-paste/inline-code";
 import { ScreenReaderOnly } from "@twilio-paste/screen-reader-only";
 import { Text } from "@twilio-paste/text";
+import { useWindowSize } from "@twilio-paste/utils";
 import * as React from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 
@@ -11,6 +12,7 @@ import { SiteSearch } from "../../site-search";
 
 const SiteHeaderSearch: React.FC = () => {
   const [isOpen, setIsOpen] = React.useState(false);
+  const { breakpointIndex } = useWindowSize();
 
   const onOpen = (): void => {
     setIsOpen(true);
@@ -35,7 +37,7 @@ const SiteHeaderSearch: React.FC = () => {
         paddingTop="space20"
         borderStyle="solid"
         boxShadow="shadowBorder"
-        minWidth="200px"
+        minWidth={breakpointIndex === 0 ? "150px" : "200px"}
         color="colorTextIcon"
         variant="reset"
         size="reset"
@@ -59,11 +61,15 @@ const SiteHeaderSearch: React.FC = () => {
               Search
             </Text>
           </Box>
-          <Box as="span" aria-hidden="true">
-            <InlineCode>⌘</InlineCode>
-            <InlineCode>K</InlineCode>
-          </Box>
-          <ScreenReaderOnly>Keyboard shortcut: Command / Control K</ScreenReaderOnly>
+          {breakpointIndex === 0 ? null : (
+            <>
+              <Box as="span" aria-hidden="true">
+                <InlineCode>⌘</InlineCode>
+                <InlineCode>K</InlineCode>
+              </Box>
+              <ScreenReaderOnly>Keyboard shortcut: Command / Control K</ScreenReaderOnly>
+            </>
+          )}
         </Box>
       </Button>
       <SiteSearch isOpen={isOpen} onDismiss={onClose} />

From d64b5959982929d6ad8effcd0352491243a32eb3 Mon Sep 17 00:00:00 2001
From: Shoaib Ahmed <shahmed@twilio.com>
Date: Fri, 20 Sep 2024 11:35:34 +0530
Subject: [PATCH 2/4] feat(mobile-nav): update mobile paste logo

---
 .../site-wrapper/site-header/SiteHeaderLogo.tsx   | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderLogo.tsx b/packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderLogo.tsx
index cc5df23ff1..98ffdbd30c 100644
--- a/packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderLogo.tsx
+++ b/packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderLogo.tsx
@@ -1,4 +1,5 @@
 import { Box } from "@twilio-paste/box";
+import { LogoPasteIcon } from "@twilio-paste/icons/esm/LogoPasteIcon";
 import { MediaBody, MediaFigure, MediaObject } from "@twilio-paste/media-object";
 import { styled, themeGet } from "@twilio-paste/styling-library";
 import { Text } from "@twilio-paste/text";
@@ -7,8 +8,6 @@ import Link from "next/link";
 import * as React from "react";
 
 import { event } from "../../../lib/gtag";
-import { PasteIcon } from "../../icons/PasteIcon";
-import { PasteIconPride } from "../../icons/PasteIconPride";
 
 const LogoLink = styled(Link)`
   position: relative;
@@ -63,17 +62,7 @@ const SiteHeaderLogo: React.FC<React.PropsWithChildren<SiteHeaderLogoProps>> = (
       >
         <MediaObject verticalAlign="center">
           <MediaFigure spacing="space40">
-            <PasteIconPride display="block" size={42} transition={logoTransition} opacity={logoOpacity} />
-            <PasteIcon
-              color={theme.textColors.colorTextBrandHighlight}
-              opacity={hoverOpacity}
-              transition={logoTransition}
-              display="block"
-              position="absolute"
-              top="0"
-              left="0"
-              size={42}
-            />
+            <LogoPasteIcon decorative={false} size="sizeIcon70" title="Twilio Paste" />
           </MediaFigure>
           <MediaBody>
             <Text as="div" fontSize="fontSize40" lineHeight="lineHeight30" color="colorText">

From 59af1d32d6ad08c2a485afa39534d20f3116ee7e Mon Sep 17 00:00:00 2001
From: Shoaib Ahmed <shahmed@twilio.com>
Date: Fri, 20 Sep 2024 12:42:12 +0530
Subject: [PATCH 3/4] feat(mobile-nav): fix build issue

---
 .../site-wrapper/site-header/SiteHeaderLogo.tsx    | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderLogo.tsx b/packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderLogo.tsx
index 98ffdbd30c..0a02916ab5 100644
--- a/packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderLogo.tsx
+++ b/packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderLogo.tsx
@@ -3,7 +3,6 @@ import { LogoPasteIcon } from "@twilio-paste/icons/esm/LogoPasteIcon";
 import { MediaBody, MediaFigure, MediaObject } from "@twilio-paste/media-object";
 import { styled, themeGet } from "@twilio-paste/styling-library";
 import { Text } from "@twilio-paste/text";
-import { useTheme } from "@twilio-paste/theme";
 import Link from "next/link";
 import * as React from "react";
 
@@ -35,11 +34,6 @@ interface SiteHeaderLogoProps {
  * to render different sizes and spacing in mobile
  */
 const SiteHeaderLogo: React.FC<React.PropsWithChildren<SiteHeaderLogoProps>> = ({ title, subtitle }) => {
-  const theme = useTheme();
-  const [logoOpacity, setLogoOpacity] = React.useState(1);
-  const [hoverOpacity, setHoverOpacity] = React.useState(0);
-  const logoTransition = "ease-out 350ms";
-
   return (
     <Box display="flex" alignItems="center" minWidth={subtitle ? "sizeSidebar" : "size0"}>
       <LogoLink
@@ -51,14 +45,6 @@ const SiteHeaderLogo: React.FC<React.PropsWithChildren<SiteHeaderLogoProps>> = (
             label: "Paste logo",
           })
         }
-        onMouseEnter={() => {
-          setLogoOpacity(0);
-          setHoverOpacity(1);
-        }}
-        onMouseLeave={() => {
-          setLogoOpacity(1);
-          setHoverOpacity(0);
-        }}
       >
         <MediaObject verticalAlign="center">
           <MediaFigure spacing="space40">

From 576155386cb1fbaa97e6aa3936be0a67edc5b1c3 Mon Sep 17 00:00:00 2001
From: Shoaib Ahmed <shahmed@twilio.com>
Date: Thu, 26 Sep 2024 15:06:29 +0530
Subject: [PATCH 4/4] feat(mobile-nav): update search bar height

---
 .../components/site-wrapper/site-header/SiteHeaderLogo.tsx  | 6 ++++--
 .../site-wrapper/site-header/SiteHeaderSearch.tsx           | 1 +
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderLogo.tsx b/packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderLogo.tsx
index 0a02916ab5..2361fbcf0a 100644
--- a/packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderLogo.tsx
+++ b/packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderLogo.tsx
@@ -1,12 +1,13 @@
 import { Box } from "@twilio-paste/box";
-import { LogoPasteIcon } from "@twilio-paste/icons/esm/LogoPasteIcon";
 import { MediaBody, MediaFigure, MediaObject } from "@twilio-paste/media-object";
 import { styled, themeGet } from "@twilio-paste/styling-library";
 import { Text } from "@twilio-paste/text";
+import { useTheme } from "@twilio-paste/theme";
 import Link from "next/link";
 import * as React from "react";
 
 import { event } from "../../../lib/gtag";
+import { PasteIcon } from "../../icons/PasteIcon";
 
 const LogoLink = styled(Link)`
   position: relative;
@@ -34,6 +35,7 @@ interface SiteHeaderLogoProps {
  * to render different sizes and spacing in mobile
  */
 const SiteHeaderLogo: React.FC<React.PropsWithChildren<SiteHeaderLogoProps>> = ({ title, subtitle }) => {
+  const theme = useTheme();
   return (
     <Box display="flex" alignItems="center" minWidth={subtitle ? "sizeSidebar" : "size0"}>
       <LogoLink
@@ -48,7 +50,7 @@ const SiteHeaderLogo: React.FC<React.PropsWithChildren<SiteHeaderLogoProps>> = (
       >
         <MediaObject verticalAlign="center">
           <MediaFigure spacing="space40">
-            <LogoPasteIcon decorative={false} size="sizeIcon70" title="Twilio Paste" />
+            <PasteIcon color={theme.textColors.colorTextBrandHighlight} display="block" size={38} />
           </MediaFigure>
           <MediaBody>
             <Text as="div" fontSize="fontSize40" lineHeight="lineHeight30" color="colorText">
diff --git a/packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderSearch.tsx b/packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderSearch.tsx
index 1f0aa41fb9..f7307dfe3b 100644
--- a/packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderSearch.tsx
+++ b/packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderSearch.tsx
@@ -38,6 +38,7 @@ const SiteHeaderSearch: React.FC = () => {
         borderStyle="solid"
         boxShadow="shadowBorder"
         minWidth={breakpointIndex === 0 ? "150px" : "200px"}
+        minHeight="36px"
         color="colorTextIcon"
         variant="reset"
         size="reset"