fix: replace flex with grid

Author: amliu-jumptrading

src/colors.ts

@@ -164,14 +164,15 @@ export const circularProgressPathColor = slotStatusBlue;
 
 // slot details
 export const slotDetailsMySlotsColor = "#0080e6";
-export const slotDetailsQuickSearchTextColor = "#7B7B7B";
-export const slotDetailsEarliestSlotColor = "#12A594";
-export const slotDetailsRecentSlotColor = "#00A2C7";
-export const slotDetailsSkippedSlotColor = "#B54548";
-export const slotDetailsFeesSlotColor = "#197CAE";
-export const slotDetailsTipsSlotColor = "#30A46C";
-export const slotDetailsRewardsSlotColor = "#5472E4";
-export const slotDetailsClickableSlotColor = "#0090FF";
+export const slotDetailsSearchLabelColor = "#FFF";
+export const slotDetailsQuickSearchTextColor = "var(--gray-10)";
+export const slotDetailsEarliestSlotColor = "var(--teal-9)";
+export const slotDetailsRecentSlotColor = "var(--cyan-9)";
+export const slotDetailsSkippedSlotColor = "var(--red-8)";
+export const slotDetailsFeesSlotColor = "var(--sky-8)";
+export const slotDetailsTipsSlotColor = "var(--green-9)";
+export const slotDetailsRewardsSlotColor = "var(--indigo-10)";
+export const slotDetailsClickableSlotColor = "var(--blue-9)";
 export const slotDetailsBackgroundColor = "#15181e";
 export const slotDetailsColor = "#9aabc3";
 export const slotDetailsSkippedBackgroundColor = "#250f0f";

src/consts.ts

@@ -80,5 +80,9 @@ export const maxZIndex = 110;
 
 export const numQuickSearchSlots = 3;
 export const quickSearchCardWidth = 226;
-export const quickSearchSpacing = 40;
+export const slotSearchGap = 40;
 export const slotSearchPadding = 20;
+export const slotSearchMaxWidth =
+  2 * slotSearchPadding +
+  numQuickSearchSlots * quickSearchCardWidth +
+  (numQuickSearchSlots - 1) * slotSearchGap;

src/features/SlotDetails/SlotSearch.tsx

@@ -12,13 +12,13 @@ import {
   baseSelectedSlotAtom,
   SelectedSlotValidityState,
 } from "../Overview/SlotPerformance/atoms";
-import { useQuickSearchWidth } from "../../hooks/useQuickSearchWidth";
 import { Label } from "radix-ui";
-import { Flex, IconButton, TextField, Text } from "@radix-ui/themes";
+import { Flex, IconButton, TextField, Text, Grid } from "@radix-ui/themes";
 import {
   numQuickSearchSlots,
   quickSearchCardWidth,
-  quickSearchSpacing,
+  slotSearchGap,
+  slotSearchMaxWidth,
   slotSearchPadding,
 } from "../../consts";
 import styles from "./slotSearch.module.css";
@@ -50,7 +50,6 @@ export function SlotSearch() {
   const [searchSlot, setSearchSlot] = useState<string>("");
   const epoch = useAtomValue(epochAtom);
   const { isValid } = useAtomValue(baseSelectedSlotAtom);
-  const quickSearchWidth = useQuickSearchWidth();
 
   const submitSearch = useCallback(() => {
     if (searchSlot === "") setSelectedSlot(undefined);
@@ -63,14 +62,14 @@ export function SlotSearch() {
   }, [selectedSlot]);
 
   return (
-    <Flex
-      direction="column"
-      width={`${quickSearchWidth}px`}
-      height="100%"
+    <Grid
+      width="100%"
+      maxWidth={`${slotSearchMaxWidth}px`}
       justify="center"
-      align="center"
-      gap="40px"
+      m="auto"
+      gap={`${slotSearchGap}px`}
       p={`${slotSearchPadding}px`}
+      columns={`repeat(auto-fit, ${quickSearchCardWidth}px)`}
     >
       <form
         onSubmit={(e) => {
@@ -92,6 +91,7 @@ export function SlotSearch() {
           onChange={(e) => setSearchSlot(e.target.value)}
           size="3"
           color={isValid ? "teal" : "red"}
+          autoFocus
         >
           <TextField.Slot side="right">
             <IconButton variant="ghost" color="gray" onClick={submitSearch}>
@@ -102,7 +102,7 @@ export function SlotSearch() {
         {!isValid && <Errors />}
       </form>
       <QuickSearch />
-    </Flex>
+    </Grid>
   );
 }
 
@@ -121,12 +121,7 @@ function QuickSearch() {
   }, [processedLeaderSlots]);
 
   return (
-    <Flex
-      gap={`${quickSearchSpacing}px`}
-      justify="center"
-      align="center"
-      wrap="wrap"
-    >
+    <>
       <QuickSearchCard
         icon={<CounterClockwiseClockIcon />}
         label="Earliest Slots"
@@ -172,7 +167,7 @@ function QuickSearch() {
         metricsFmt={getSolStringWithFourDecimals}
         unit="SOL"
       />
-    </Flex>
+    </>
   );
 }
 

src/features/SlotDetails/index.tsx

@@ -36,7 +36,7 @@ export default function SlotDetails() {
   const selectedSlot = useAtomValue(selectedSlotAtom);
 
   return (
-    <Flex direction="column" height="100%" align="center">
+    <Flex direction="column" height="100%">
       <Setup />
       {selectedSlot === undefined ? <SlotSearch /> : <SlotContent />}
     </Flex>

src/features/SlotDetails/slotSearch.module.css

@@ -1,14 +1,14 @@
 .searchForm {
   display: flex;
   flex-direction: column;
-  width: 100%;
-  align-items: flex-start;
   gap: 8px;
+  grid-column: 1 / -1;
 }
 
 .search-label {
   font-size: 16px;
   font-weight: 510;
+  color: var(--slot-details-search-label-color);
 }
 
 .search-field {
@@ -34,7 +34,6 @@
   svg {
     width: 32px;
     height: 32px;
-
     fill: var(--quick-search-color);
   }
 }