fix: options field spacing and hide some header items on mobile

labeleven-dev · Aug 2, 2022 · 5cbc630 · 5cbc630
1 parent 1af5882
commit 5cbc630
Show file tree

Hide file tree

Showing 5 changed files with 181 additions and 186 deletions.
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
@@ -28,56 +28,59 @@ export const Header: React.FC = () => {
       <DarkMode>
         <Image w="40px" h="40px" src="/logo128.png" alt="Logo" />
 
-        <Text
-          ml="3"
-          mr="9"
-          mt={funTitle ? "1.5" : "2"}
-          color="white"
-          fontFamily={funTitle ? "'Dancing Script', cursive;" : ""}
-          fontWeight="bold"
-          fontSize={funTitle ? "xl" : "lg"}
-          onClick={() => {
-            toast({
-              title: funTitle
-                ? "Serious Business Mode™️ enabled!"
-                : "Serious Business Mode™️ disabled!",
-              status: funTitle ? "warning" : "success",
-              duration: 1000,
-              isClosable: true,
-            });
-            setFunTitle(!funTitle);
-          }}
-        >
-          <Hide below="md">Better Call SOL</Hide>
-        </Text>
-
-        <Example />
+        <Hide below="md">
+          <Text
+            ml="3"
+            mr="9"
+            mt={funTitle ? "1.5" : "2"}
+            color="white"
+            fontFamily={funTitle ? "'Dancing Script', cursive;" : ""}
+            fontWeight="bold"
+            fontSize={funTitle ? "xl" : "lg"}
+            onClick={() => {
+              toast({
+                title: funTitle
+                  ? "Serious Business Mode™️ enabled!"
+                  : "Serious Business Mode™️ disabled!",
+                status: funTitle ? "warning" : "success",
+                duration: 1000,
+                isClosable: true,
+              });
+              setFunTitle(!funTitle);
+            }}
+          >
+            Better Call SOL
+          </Text>
+          <Example />
+        </Hide>
 
         <Spacer />
 
-        {/* TODO implement */}
-        <Tooltip label="Undo">
-          <IconButton
-            mr="0.5"
-            aria-label="Undo"
-            icon={<Icon as={FaUndo} />}
-            variant="ghost"
-            color="white"
-            isDisabled
-          />
-        </Tooltip>
+        <Hide below="md">
+          {/* TODO implement */}
+          <Tooltip label="Undo">
+            <IconButton
+              mr="0.5"
+              aria-label="Undo"
+              icon={<Icon as={FaUndo} />}
+              variant="ghost"
+              color="white"
+              isDisabled
+            />
+          </Tooltip>
 
-        {/* TODO implement */}
-        <Tooltip label="Redo">
-          <IconButton
-            mr="4"
-            aria-label="Redo"
-            icon={<Icon as={FaRedo} />}
-            variant="ghost"
-            color="white"
-            isDisabled
-          />
-        </Tooltip>
+          {/* TODO implement */}
+          <Tooltip label="Redo">
+            <IconButton
+              mr="4"
+              aria-label="Redo"
+              icon={<Icon as={FaRedo} />}
+              variant="ghost"
+              color="white"
+              isDisabled
+            />
+          </Tooltip>
+        </Hide>
       </DarkMode>
 
       <ColorModeSwitcher justifySelf="flex-end" />

diff --git a/src/components/options/GeneralOptions.tsx b/src/components/options/GeneralOptions.tsx
@@ -1,4 +1,4 @@
-import { FormControl, Grid } from "@chakra-ui/react";
+import { Grid } from "@chakra-ui/react";
 import React from "react";
 import { usePersistentStore } from "../../hooks/usePersistentStore";
 import { Explorer } from "../../models/state-types";
@@ -13,42 +13,40 @@ export const GeneralOptions: React.FC = () => {
   ]);
 
   return (
-    <FormControl display="flex" alignItems="center">
-      <Grid templateColumns="270px 1fr" gap="15px 5px">
-        <ChoiceOption
-          id="explorer"
-          name="Explorer"
-          get={() => EXPLORERS.find((x) => x.id === appOptions.explorer)!}
-          getChoices={() => EXPLORERS}
-          set={(x) => {
-            set((state) => {
-              state.appOptions.explorer = x as Explorer;
-            });
-          }}
-        />
+    <Grid templateColumns="1fr 1fr" gap="15px 5px" alignItems="center">
+      <ChoiceOption
+        id="explorer"
+        name="Explorer"
+        get={() => EXPLORERS.find((x) => x.id === appOptions.explorer)!}
+        getChoices={() => EXPLORERS}
+        set={(x) => {
+          set((state) => {
+            state.appOptions.explorer = x as Explorer;
+          });
+        }}
+      />
 
-        <ToggleOption
-          id="autoconnect-wallet"
-          name="Auto-connect wallet"
-          get={() => appOptions.autoConnectWallet}
-          set={(x) => {
-            set((state) => {
-              state.appOptions.autoConnectWallet = x;
-            });
-          }}
-        />
+      <ToggleOption
+        id="autoconnect-wallet"
+        name="Auto-connect wallet"
+        get={() => appOptions.autoConnectWallet}
+        set={(x) => {
+          set((state) => {
+            state.appOptions.autoConnectWallet = x;
+          });
+        }}
+      />
 
-        <ToggleOption
-          id="enable-numbering"
-          name="Enable numbering"
-          get={() => appOptions.enableNumbering}
-          set={(x) => {
-            set((state) => {
-              state.appOptions.enableNumbering = x;
-            });
-          }}
-        />
-      </Grid>
-    </FormControl>
+      <ToggleOption
+        id="enable-numbering"
+        name="Enable numbering"
+        get={() => appOptions.enableNumbering}
+        set={(x) => {
+          set((state) => {
+            state.appOptions.enableNumbering = x;
+          });
+        }}
+      />
+    </Grid>
   );
 };
diff --git a/src/components/options/Options.tsx b/src/components/options/Options.tsx
@@ -34,7 +34,7 @@ export const Options: React.FC = () => {
 
   return (
     <Modal
-      size="xl"
+      size="lg"
       isOpen={isOpen}
       onClose={() => {
         setSession((state) => {

diff --git a/src/components/options/RpcEndpointOptions.tsx b/src/components/options/RpcEndpointOptions.tsx
@@ -14,7 +14,7 @@ export const RpcEndpointOptions: React.FC = () => {
 
   return (
     <Grid>
-      <Text mb="2">Add or remove custom RPC points, or re-order the list:</Text>
+      <Text mb="2">Re-order RPC endpoints or manage custom endpoints.</Text>
       <Sortable
         itemOrder={rpcEndpoints.order}
         setItemOrder={(itemOrder) => {