fix: use uiKit responsive preset and improve layouts (#2660)

iotaledger · Sep 19, 2024 · 6e31dbe · 6e31dbe
1 parent 0aa8def
commit 6e31dbe
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 17 deletions.
diff --git a/apps/explorer/src/components/activity/Activity.tsx b/apps/explorer/src/components/activity/Activity.tsx
@@ -95,7 +95,7 @@ export function Activity({ initialLimit, disablePagination }: ActivityProps): JS
                         />
                     ))}
                 </SegmentedButton>
-                <div className="absolute inset-y-0 -top-1 right-0 flex items-center gap-3 text-2xl">
+                <div className="absolute inset-y-0 -top-1 right-sm flex items-center gap-sm text-2xl">
                     {/* TODO re-enable this when index is stable */}
                     {/*activeTab === 'transactions' && isTransactionKindFilterEnabled ? (
                             <DropdownMenu

diff --git a/apps/explorer/src/components/owned-coins/OwnedCoins.tsx b/apps/explorer/src/components/owned-coins/OwnedCoins.tsx
@@ -147,16 +147,16 @@ export function OwnedCoins({ id }: OwnerCoinsProps): JSX.Element {
                     {hasCoinsBalance ? (
                         <>
                             <div className="relative overflow-y-auto p-sm--rs pt-0">
-                                <div className="sticky top-0 z-[1] bg-neutral-100 p-sm dark:bg-neutral-10">
-                                    {filterValue === CoinFilter.Unrecognized && (
+                                {filterValue === CoinFilter.Unrecognized && (
+                                    <div className="sticky top-0 z-[1] bg-neutral-100 p-sm dark:bg-neutral-10">
                                         <InfoBox
                                             icon={<Warning />}
                                             supportingText="These coins have not been recognized by the Iota Foundation."
                                             type={InfoBoxType.Default}
                                             style={InfoBoxStyle.Default}
                                         />
-                                    )}
-                                </div>
+                                    </div>
+                                )}
                                 <CoinList coins={visibleCoins} id={id} />
                             </div>
 

diff --git a/apps/explorer/src/index.css b/apps/explorer/src/index.css
@@ -83,7 +83,7 @@ body,
         }
     }
 
-    @screen xl {
+    @screen lg {
         .home-page-grid-container-top {
             @apply grid-cols-[315px,1fr,1fr];
             grid-template-areas:
@@ -108,13 +108,13 @@ body,
             'node-map';
     }
 
-    @screen lg {
+    @screen md {
         .home-page-grid-container-bottom {
             @apply gap-10;
         }
     }
 
-    @screen xl {
+    @screen lg {
         .home-page-grid-container-bottom {
             @apply grid grid-cols-2 gap-x-20 gap-y-10;
             grid-template-areas:

diff --git a/apps/explorer/tailwind.config.ts b/apps/explorer/tailwind.config.ts
@@ -5,18 +5,18 @@
 import preset from '@iota/core/tailwind.config';
 import colors from 'tailwindcss/colors';
 import { type Config } from 'tailwindcss';
-import { uiKitStaticPreset } from '@iota/apps-ui-kit';
+import { uiKitResponsivePreset } from '@iota/apps-ui-kit';
 
 export default {
-    presets: [preset, uiKitStaticPreset],
+    presets: [preset, uiKitResponsivePreset],
     content: [
         './src/**/*.{js,jsx,ts,tsx}',
         './node_modules/@iota/ui/src/**/*.{js,jsx,ts,tsx}',
         './node_modules/@iota/apps-ui-kit/dist/**/*.js',
     ],
     theme: {
         // This COLOR are duplicated from @iota/core tailwind.config.ts!!!
-        // They are repeated here cause uiKitStaticPreset overwrites the colors, and they are still used throughout Explorer
+        // They are repeated here cause uiKitResponsivePreset overwrites the colors, and they are still used throughout Explorer
         // REMOVE THIS COLORS ONCE @iota/core TAILWIND IS NOT NEEDED ANYMORE
         extend: {
             colors: {
@@ -89,11 +89,5 @@ export default {
                 },
             },
         },
-        screens: {
-            sm: '600px',
-            md: '905px',
-            lg: '1240px',
-            xl: '1440px',
-        },
     },
 } satisfies Partial<Config>;