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..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 @@ -8,7 +8,6 @@ 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; @@ -37,10 +36,6 @@ interface SiteHeaderLogoProps { */ const SiteHeaderLogo: React.FC> = ({ title, subtitle }) => { const theme = useTheme(); - const [logoOpacity, setLogoOpacity] = React.useState(1); - const [hoverOpacity, setHoverOpacity] = React.useState(0); - const logoTransition = "ease-out 350ms"; - return ( > = ( label: "Paste logo", }) } - onMouseEnter={() => { - setLogoOpacity(0); - setHoverOpacity(1); - }} - onMouseLeave={() => { - setLogoOpacity(1); - setHoverOpacity(0); - }} > - - + 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..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 @@ -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,8 @@ const SiteHeaderSearch: React.FC = () => { paddingTop="space20" borderStyle="solid" boxShadow="shadowBorder" - minWidth="200px" + minWidth={breakpointIndex === 0 ? "150px" : "200px"} + minHeight="36px" color="colorTextIcon" variant="reset" size="reset" @@ -59,11 +62,15 @@ const SiteHeaderSearch: React.FC = () => { Search - - Keyboard shortcut: Command / Control K + {breakpointIndex === 0 ? null : ( + <> + + Keyboard shortcut: Command / Control K + + )}