style: header visual changes

globalfund · Oct 30, 2024 · b20476d · b20476d
1 parent 455feaa
commit b20476d
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 22 deletions.
diff --git a/src/app/components/header-menu/index.tsx b/src/app/components/header-menu/index.tsx
@@ -34,6 +34,9 @@ const HeaderMenuButton = styled(Button)({
   "&:hover": {
     background: "transparent",
   },
+  "@media (max-width: 920px)": {
+    minWidth: "120px",
+  },
 });
 
 export const HeaderMenu: React.FC<HeaderMenuProps> = (

diff --git a/src/app/components/header/index.tsx b/src/app/components/header/index.tsx
@@ -57,11 +57,17 @@ export const Header: React.FC = () => {
           {searchOpen && (
             <Box
               sx={{
-                width: "500px",
+                maxWidth: "500px",
+                borderRadius: "23px",
+                width: "calc(100% - 48px)",
                 "#search-container": {
                   width: "100%",
+                  height: "24px",
+                  borderRadius: "23px",
                   input: {
                     fontSize: "12px",
+                    borderRadius: "23px",
+                    background: colors.primary.white,
                   },
                 },
                 "#search-icon": {
@@ -72,6 +78,7 @@ export const Header: React.FC = () => {
                 },
                 "#search-results-container": {
                   top: "35px",
+                  width: "500px",
                 },
                 "> div": {
                   width: "100%",
@@ -85,10 +92,18 @@ export const Header: React.FC = () => {
             onClick={onSearchBtnClick}
             sx={{
               padding: 0,
-              marginLeft: "10px",
+              marginLeft: "-24px",
+              background: colors.primary.black,
               "> svg": {
-                transform: "scale(0.9)",
-                color: colors.primary.black,
+                transform: "scale(0.7)",
+                color: colors.primary.white,
+              },
+              "&:hover": {
+                opacity: 0.8,
+                background: colors.primary.black,
+                "> svg": {
+                  color: colors.primary.white,
+                },
               },
             }}
           >
@@ -108,13 +123,16 @@ export const Header: React.FC = () => {
     return (
       <Box
         sx={{
+          top: "16px",
+          right: "0px",
           display: "flex",
           flexDirection: "row",
+          position: "absolute",
           alignItems: "center",
           justifyContent: "flex-end",
-          position: "absolute",
-          right: "0",
-          top: "16px",
+          "@media (max-width: 1216px)": {
+            right: "16px",
+          },
         }}
       >
         {searchOpen && (
@@ -202,16 +220,17 @@ export const Header: React.FC = () => {
           <Toolbar
             sx={{
               background: "#F8F8F8",
+              "@media (max-width: 1279px)": {
+                width: "100%",
+              },
               "@media (max-width: 767px)": {
                 padding: "0 16px",
               },
             }}
           >
-            {((mobile && !searchOpen) || !mobile) && (
-              <NavLink to="/" style={{ display: "flex" }}>
-                <HeaderToolbarLogo />
-              </NavLink>
-            )}
+            <NavLink to="/" style={{ display: "flex" }}>
+              <HeaderToolbarLogo />
+            </NavLink>
             <HeaderMenu
               mobileMenuOpen={mobileMenuOpen}
               setMobileMenuOpen={setMobileMenuOpen}

diff --git a/src/app/components/search/data.tsx b/src/app/components/search/data.tsx
@@ -12,7 +12,7 @@ export const categories = [
   {
     value: "All Categories",
     label: "All Categories",
-    icon: <AllCategoriesIcon />,
+    // icon: <AllCategoriesIcon />,
   },
   { value: "Locations", label: "Locations", icon: <LocationsIcon /> },
   { value: "Grants", label: "Grants", icon: <GrantsIcon /> },

diff --git a/src/app/components/search/layout.tsx b/src/app/components/search/layout.tsx
@@ -81,7 +81,7 @@ export function SearchLayout(props: SearchLayoutProps) {
     props.results.forEach((tab: SearchResultsTabModel) => {
       allData = [...allData, ...tab.results];
     });
-    if (!isMobile && props.category && props.category !== categories[0].label) {
+    if (props.category && props.category !== categories[0].label) {
       const fIndex = findIndex(categories, { label: props.category }) - 1;
       if (props.results[fIndex]) {
         setData(props.results[fIndex].results);
@@ -93,7 +93,7 @@ export function SearchLayout(props: SearchLayoutProps) {
 
   return (
     <MobileContainer>
-      {!isMobile && props.category && props.setCategory && (
+      {props.category && props.setCategory && (
         <Box id="search-category-dropdown" marginRight="16px">
           <Dropdown
             height={40}
@@ -107,8 +107,7 @@ export function SearchLayout(props: SearchLayoutProps) {
         id="search-container"
         theme={{
           focused: open,
-          withCatMenu:
-            !isMobile && Boolean(props.category) && Boolean(props.setCategory),
+          withCatMenu: Boolean(props.category) && Boolean(props.setCategory),
         }}
       >
         <Input
@@ -162,6 +161,9 @@ export function SearchLayout(props: SearchLayoutProps) {
             alignItems: "center",
             justifyContent: "center",
             background: appColors.COMMON.BLACK,
+            "@media (max-width: 767px)": {
+              height: "35px",
+            },
           }}
         >
           <SearchIcon htmlColor={appColors.COMMON.WHITE} />

diff --git a/src/app/components/search/styles.ts b/src/app/components/search/styles.ts
@@ -11,17 +11,18 @@ export const Container = styled(Box)`
   border: 1px solid ${appColors.SEARCH.DROPDOWN_BUTTON_BORDER_COLOR};
   width: ${(props) =>
     props.theme.withCatMenu ? "calc(100% - 200px)" : "100%"};
+
+  @media (max-width: 767px) {
+    width: 100%;
+  }
 `;
 
 export const MobileContainer = styled(Box)`
   width: 100%;
+  display: flex;
   position: relative;
+  flex-direction: row;
   background: transparent;
-
-  @media (min-width: 768px) {
-    display: flex;
-    flex-direction: row;
-  }
 `;
 
 export const Input = styled.input`