Buttons/modals

src/components/element/SwitchMode.tsx

@@ -5,6 +5,7 @@ import { useMemo } from "react";
 export default function SwitchMode() {
   const { mode, toggleMode } = useTheme();
   const canSwitchModes = useMemo(() => !(!config.modes || config.modes?.length === 1), []);
+
   return (
     canSwitchModes && (
       <Button look="base" onClick={toggleMode}>

src/components/element/Tag.tsx

@@ -233,7 +233,8 @@ export default function Tag<T extends keyof TagTypes>({ type, value, ...props }:
               <Divider className="border-main-6" horizontal />
               {/* <Text size="xs">{token?.description}</Text> */}
               <Group className="flex-col" size="md">
-                <Button to={`/protocols/${protocol?.name}`} size="sm" look="bold">
+                <Button to={`/protocols/${protocol?.name}`} size="xs" look="soft">
+                  <Icon remix="RiArrowRightLine" />
                   {protocol?.name} on Merkl
                 </Button>
                 <Button size="xs" look="soft">

src/components/element/functions/SearchBar.tsx

@@ -1,6 +1,6 @@
 import type { Opportunity } from "@merkl/api";
 import { Form, useLocation } from "@remix-run/react";
-import { Group, Icon, Icons, Input, Modal, Title, useShortcut } from "dappkit";
+import { Divider, Group, Icon, Icons, Input, Modal, Title, useShortcut } from "dappkit";
 import { Button } from "dappkit";
 import Scroll from "packages/dappkit/src/components/primitives/Scroll";
 import { type ReactNode, useEffect, useMemo, useState } from "react";
@@ -18,9 +18,12 @@ function OpportunityResult({ opportunity }: { opportunity: Opportunity }) {
   const { link, icons } = useOpportunity(opportunity);
 
   return (
-    <Button to={link} size="lg" look="bold">
-      <Icons>{icons}</Icons> {opportunity.name}
-    </Button>
+    <>
+      <Button to={link} look="soft">
+        <Icons>{icons}</Icons> {opportunity.name} <Icon remix="RiArrowRightLine" />
+      </Button>
+      <Divider look="bold" />
+    </>
   );
 }
 
@@ -50,34 +53,45 @@ export default function SearchBar({ icon = false }: SearchBarProps) {
 
     return (
       <Group className="flex-col flex-nowrap overflow-hidden">
-        <Scroll className="min-h-[70vh] w-full gap-xl z-10" vertical>
+        <Scroll className="min-h-[70vh] w-full [&>*]:flex [&>*]:flex-col [&>*]:gap-xl*2 z-10" vertical>
           {entries
             .filter(([_, res]) => res?.length)
             .map(([category, results]) => (
-              <Group key={category} className="flex-col">
+              <Group key={category} className="flex-col" size="xl">
                 <Title h={4}>{titles[category]}</Title>
-                <Group size="sm" className="flex-col">
+                <Group className="flex-col">
                   {results.map((_, i) => {
                     switch (category) {
                       case "chain":
                         return (
-                          <Button to={`/chains/${results[i].name}`} size="lg" look="bold">
-                            <Icon src={results[i].icon} /> {results[i].name}
-                          </Button>
+                          <>
+                            <Button to={`/chain/${results[i].name}`} look="soft" className="gap-lg">
+                              <Icon src={results[i].icon} /> {results[i].name}
+                              <Icon remix="RiArrowRightLine" />
+                            </Button>
+                            <Divider look="bold" />
+                          </>
                         );
                       case "opportunity":
                         return <OpportunityResult opportunity={results[i]} />;
                       case "token":
                         return (
-                          <Button to={`/token/${results[i].symbol}`} size="lg" look="bold">
-                            <Icon src={results[i].icon} /> {results[i].symbol}
-                          </Button>
+                          <>
+                            <Button to={`/token/${results[i].symbol}`} look="soft">
+                              <Icon src={results[i].icon} /> {results[i].symbol} <Icon remix="RiArrowRightLine" />
+                            </Button>
+                            <Divider look="bold" />
+                          </>
                         );
                       case "protocol":
                         return (
-                          <Button to={`/protocols/${results[i].name}`} size="lg" look="bold">
-                            <Icon src={results[i].icon} /> {results[i].name}
-                          </Button>
+                          <>
+                            <Button to={`/protocol/${results[i].name}`} look="soft">
+                              <Icon src={results[i].icon} /> {results[i].name}
+                              <Icon remix="RiArrowRightLine" />
+                            </Button>
+                            <Divider look="bold" />
+                          </>
                         );
                       default:
                         break;
@@ -93,11 +107,17 @@ export default function SearchBar({ icon = false }: SearchBarProps) {
 
   return (
     <Modal
-      className="h-full py-xl*2 w-[90vw] md:w-[70vw] lg:w-[50vw] xl:w-[500px] z-20 [&>*]:max-h-full [&>*]:animate-drop [&>*]:origin-top"
+      size="xl"
+      className="h-full p-xl*2 w-[90vw] md:w-[70vw] lg:w-[50vw] xl:w-[500px] z-20 [&>*]:max-h-full [&>*]:animate-drop [&>*]:origin-top"
       state={[opened, setOpened]}
       modal={
         <>
-          <Input look="bold" size="md" state={[searchInput, setSearchInput]} placeholder="Search Merkl..." />
+          <Input
+            look="base"
+            state={[searchInput, setSearchInput]}
+            placeholder="Search"
+            suffix={<Icon className="text-main-12" remix="RiSearchLine" />}
+          />
           {Results}
         </>
       }>

src/components/element/opportunity/OpportunityFilters.tsx

@@ -95,14 +95,14 @@ export default function OpportunityFilters({ only, exclude, chains }: Opportunit
   }
 
   return (
-    <Group>
+    <Group className="items-center">
       {fields.includes("search") && (
         <Form>
           <Input
             name="search"
             value={innerSearch}
             state={[innerSearch, setInnerSearch]}
-            suffix={<Icon size="sm" remix="RiSearchLine" />}
+            suffix={<Icon remix="RiSearchLine" />}
             onClick={onSearchSubmit}
             placeholder="Search"
           />
@@ -114,7 +114,6 @@ export default function OpportunityFilters({ only, exclude, chains }: Opportunit
           allOption={"All actions"}
           multiple
           options={actionOptions}
-          size="sm"
           look="bold"
           placeholder="Actions"
         />
@@ -125,7 +124,6 @@ export default function OpportunityFilters({ only, exclude, chains }: Opportunit
           allOption={"All status"}
           multiple
           options={statusOptions}
-          size="sm"
           look="bold"
           placeholder="Status"
         />
@@ -137,7 +135,6 @@ export default function OpportunityFilters({ only, exclude, chains }: Opportunit
           multiple
           search
           options={chainOptions}
-          size="sm"
           look="bold"
           placeholder="Chains"
         />

src/components/layout/Header.tsx

@@ -7,8 +7,8 @@ import { motion } from "framer-motion";
 import config from "merkl.config";
 import { useWalletContext } from "packages/dappkit/src/context/Wallet.context";
 import { useMemo, useState } from "react";
-import { useMediaQuery } from "react-responsive";
-import SCREENS from "../../../packages/dappkit/src/constants/SCREENS.json";
+import SwitchMode from "../element/SwitchMode";
+import SearchBar from "../element/functions/SearchBar";
 import { LayerMenu } from "./LayerMenu";
 
 const container = {
@@ -30,13 +30,9 @@ const item = {
 };
 
 export default function Header() {
-  const { mode, toggleMode } = useTheme();
+  const { mode } = useTheme();
   const { address: user } = useWalletContext();
   const [open, setOpen] = useState<boolean>(false);
-  const mdScreens = useMediaQuery({ maxWidth: SCREENS.lg });
-
-  const smScreens = useMediaQuery({ maxWidth: SCREENS.md });
-  const canSwitchModes = useMemo(() => !(!config.modes || config.modes?.length === 1), []);
 
   const routes = useMemo(() => {
     const { homepage, ...rest } = config.routes;
@@ -63,49 +59,51 @@ export default function Header() {
       <Container className="py-xl">
         <Group className="justify-between items-center">
           <motion.div variants={item}>
-            {mdScreens ? (
-              <Dropdown
-                size="lg"
-                padding="xs"
-                open={open}
-                content={<LayerMenu nav={routes} setOpen={setOpen} />}
-                className="flex gap-sm md:gap-lg items-center">
-                <Image
-                  className="w-[140px] md:w-[200px]"
-                  alt={`${config.appName} logo`}
-                  src={mode !== "dark" ? customerDarkLogo : customerLogo}
-                />
-                <Icon className="text-main-12" remix="RiArrowDownSLine" />
-              </Dropdown>
-            ) : (
-              <Button size="lg" to={routes.homepage.route} look="soft">
-                <Image
-                  className="w-[200px]"
-                  alt={`${config.appName} logo`}
-                  src={mode !== "dark" ? customerDarkLogo : customerLogo}
-                />
-              </Button>
-            )}
+            <Dropdown
+              size="lg"
+              padding="xs"
+              open={open}
+              content={<LayerMenu nav={routes} setOpen={setOpen} />}
+              className="lg:hidden flex gap-sm md:gap-lg items-center">
+              <Image
+                className="w-[140px] md:w-[200px]"
+                alt={`${config.appName} logo`}
+                src={mode !== "dark" ? customerDarkLogo : customerLogo}
+              />
+              <Icon className="text-main-12" remix="RiArrowDownSLine" />
+            </Dropdown>
+
+            <Button className="hidden lg:flex" size="lg" to={routes.homepage.route} look="soft">
+              <Image
+                className="w-[200px]"
+                alt={`${config.appName} logo`}
+                src={mode !== "dark" ? customerDarkLogo : customerLogo}
+              />
+            </Button>
           </motion.div>
 
           <motion.div variants={item}>
-            <Group className="gap-xl items-center">
-              {!mdScreens &&
-                Object.entries(routes)
+            <Group className="items-center" size="xl">
+              <Group className="hidden lg:flex items-center" size="xl">
+                {Object.entries(config.routes)
                   .filter(([key]) => !["homepage", "privacy", "terms"].includes(key))
                   .map(([key, { route }]) => {
                     return (
-                      <Button className="capitalize" look="soft" size="lg" key={`${key}-link`} to={route}>
+                      <Button look="soft" size="lg" key={`${key}-link`} to={route}>
                         {key}
                       </Button>
                     );
                   })}
-              {canSwitchModes && (
-                <Button size="lg" look="base" onClick={toggleMode}>
-                  <Icon size="sm" remix={mode === "dark" ? "RiMoonClearLine" : "RiSunLine"} />
-                </Button>
-              )}
-              {!smScreens && <WalletButton />}
+                <Group className="items-center">
+                  <SwitchMode />
+
+                  <SearchBar icon={true} />
+                </Group>
+              </Group>
+
+              <Group className="hidden md:flex">
+                <WalletButton />
+              </Group>
             </Group>
           </motion.div>
         </Group>

src/components/layout/LayerMenu.tsx

@@ -2,17 +2,14 @@ import { NavLink } from "@remix-run/react";
 import { Divider, Group, Text, WalletButton } from "dappkit";
 import { Icon } from "packages/dappkit/src";
 import type { FC } from "react";
-import { useMediaQuery } from "react-responsive";
 import type { routesType } from "src/config/type";
-import SCREENS from "../../../packages/dappkit/src/constants/SCREENS.json";
 import SwitchMode from "../element/SwitchMode";
 import SearchBar from "../element/functions/SearchBar";
 
 export const LayerMenu: FC<{
   nav: routesType;
   setOpen: (open: boolean) => void;
 }> = ({ nav, setOpen }) => {
-  const smScreens = useMediaQuery({ maxWidth: SCREENS.md });
   return (
     <div className="layermenu z-50 min-w-64 bg-main-2 flex flex-col">
       <main className="flex-1 overflow-y-scroll w-full">
@@ -37,15 +34,16 @@ export const LayerMenu: FC<{
       <footer className="mt-lg">
         <Group className="flex-col items-stretch">
           <Group className="items-center">
-            <SearchBar />
+            <div className="flex-1">
+              <SearchBar />
+            </div>
             <SwitchMode />
           </Group>
-          {!!smScreens && (
-            <>
-              <Divider look="soft" />
-              <WalletButton />
-            </>
-          )}
+
+          <Group className="md:hidden">
+            <Divider look="soft" />
+            <WalletButton />
+          </Group>
         </Group>
       </footer>
     </div>

src/customer/assets/style/shorthands.css

@@ -12,13 +12,13 @@
     @apply opacity-100;
   }
   .dim:hover {
-    @apply opacity-70;
+    @apply opacity-60;
   }
 }
 
 :disabled,
 .disabled {
-  @apply opacity-40 pointer-events-none;
+  @apply opacity-60 pointer-events-none;
 }
 
 .faq-item__trigger[data-state="open"] > * {