style: adapt header and pools table for mobile

cryptoalgebra · Apr 22, 2024 · 2f0d047 · 2f0d047
1 parent 60b8022
commit 2f0d047
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx
@@ -57,7 +57,7 @@ const Account = () => {
     </div>
 
     return <div className="flex h-full justify-end gap-4 whitespace-nowrap">
-        <div className="hidden lg:block">
+        <div className="max-xl:hidden">
             <w3m-network-button />
         </div>
             <div className="hidden md:block">

diff --git a/src/components/common/Table/poolsTable.tsx b/src/components/common/Table/poolsTable.tsx
@@ -74,15 +74,15 @@ const PoolsTable = <TData, TValue>({
                             placeholder="Search pool"
                             value={(table.getColumn(searchID)?.getFilterValue() as string) ?? ""}
                             onChange={(event) => table.getColumn(searchID)?.setFilterValue(event.target.value)}
-                            className="border border-border border-opacity-60 pl-12 h-12 w-80 focus:border-opacity-100 rounded-xl"
+                            className="border border-border border-opacity-60 pl-12 h-12 max-w-80 md:w-64 lg:w-80 focus:border-opacity-100 rounded-xl"
                         />
                         <Search className="absolute left-4 text-border" size={20} />
                     </div>
-                    <ul className="flex gap-1 p-1 border rounded-xl border-border/60 w-fit h-12">
+                    <ul className="flex gap-1 p-1 border rounded-xl border-border/60 w-fit h-12 max-xs:hidden">
                         <li>
                             <Button
                                 onClick={() => table.setGlobalFilter(undefined)}
-                                className="rounded-lg h-full p-4 w-fit"
+                                className="rounded-lg h-full p-4 w-fit flex-nowrap"
                                 size="md"
                                 variant={!isMyPools ? "iconActive" : "ghost"}
                             >
@@ -92,18 +92,18 @@ const PoolsTable = <TData, TValue>({
                         <li>
                             <Button
                                 onClick={() => table.setGlobalFilter(true)}
-                                className="rounded-lg h-full p-4 w-fit"
+                                className="rounded-lg h-full p-4 w-fit whitespace-nowrap"
                                 size="md"
                                 variant={isMyPools ? "iconActive" : "ghost"}
                             >
                                 My pools
                             </Button>
                         </li>
                     </ul>
-                    <div className="flex gap-2 items-center w-fit ml-auto">
+                    <div className="flex gap-2 max-md:gap-4 items-center w-fit ml-auto max-sm:hidden">
                         <label className="flex gap-2 items-center" htmlFor="farmingAvailable">
-                            <Tractor size={20} color="#d84eff" />
-                            Farming Available
+                            <Tractor className="w-5 h-5 max-md:w-6 max-md:h-6" color="#d84eff" />
+                            <span className="max-md:hidden">Farming Available</span>
                         </label>
                         <Switch
                             id="farmingAvailable"