fix: alignItems to center instead of various margins

labeleven-dev · Aug 3, 2022 · 68bb696 · 68bb696
1 parent dedb835
commit 68bb696
Show file tree

Hide file tree

Showing 20 changed files with 68 additions and 77 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -89,7 +89,7 @@ export const App: React.FC = () => {
               </Box>
 
               <Flex mt="55px">
-                <Box flex="10" h="93vh" overflow="scroll">
+                <Box flex="2" h="93vh" overflow="scroll">
                   {/* TODO it's Solana wallet button's fault, we need to replace it */}
                   <Show below="md">
                     <Alert status="warning" variant="left-accent">
@@ -103,8 +103,9 @@ export const App: React.FC = () => {
                   <Transaction />
                 </Box>
                 {paletteOpen && (
+                  // TODO overlaps with main pane on smaller width
                   <Hide below="md">
-                    <Box flex="5" h="93vh" overflow="scroll">
+                    <Box flex="1" h="93vh" overflow="scroll">
                       <Palette />
                     </Box>
                   </Hide>

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -16,10 +16,11 @@ export const Footer: React.FC = () => (
     p="3"
     templateColumns="repeat(3,1fr)"
     backgroundColor={useColorModeValue("gray.100", "gray.900")}
+    alignItems="center"
   >
-    <Flex>
+    <Flex alignItems="center">
       <Text fontSize="xs">© {new Date().getFullYear()}</Text>
-      <Link ml="2" mt="-1.5" href="https://labeleven.dev" isExternal>
+      <Link ml="2" mt="-1" href="https://labeleven.dev" isExternal>
         <LabElevenIcon />
       </Link>
     </Flex>

diff --git a/src/components/client/InstructionHeader.tsx b/src/components/client/InstructionHeader.tsx
@@ -31,8 +31,8 @@ export const InstructionHeader: React.FC<{ index: number }> = ({ index }) => {
   const set = useSessionStoreWithUndo((state) => state.set);
 
   return (
-    <Flex h={!instruction.expanded ? "30px" : undefined}>
-      <DragHandleIcon mt="1.5" mr="2" {...attributes} {...listeners} />
+    <Flex mb={instruction.expanded ? "4" : undefined} alignItems="center">
+      <DragHandleIcon mr="2" {...attributes} {...listeners} />
 
       <IconButton
         h="8"
@@ -65,7 +65,6 @@ export const InstructionHeader: React.FC<{ index: number }> = ({ index }) => {
 
       <Heading flex="1" size="md">
         <EditableName
-          mb="5"
           tooltip="Click to edit"
           placeholder="Unnamed Instruction"
           value={instruction.name}
@@ -79,8 +78,6 @@ export const InstructionHeader: React.FC<{ index: number }> = ({ index }) => {
 
       <Tooltip label={instruction.disabled ? "Enable" : "Disable"}>
         <IconButton
-          mt="-2"
-          ml="2"
           aria-label={instruction.disabled ? "Enable" : "Disable"}
           variant="ghost"
           icon={
@@ -100,7 +97,6 @@ export const InstructionHeader: React.FC<{ index: number }> = ({ index }) => {
 
       <Menu>
         <MenuButton
-          mt="-2"
           as={IconButton}
           aria-label="Options"
           icon={<Icon as={FaEllipsisV} />}

diff --git a/src/components/client/Transaction.tsx b/src/components/client/Transaction.tsx
@@ -40,7 +40,9 @@ export const Transaction: React.FC = () => {
 
         <Instructions instructions={transaction.instructions} />
       </Box>
+
       <Divider />
+
       <Box mt="5">
         <Results />
       </Box>

diff --git a/src/components/client/TransactionHeader.tsx b/src/components/client/TransactionHeader.tsx
@@ -68,7 +68,7 @@ export const TransactionHeader: React.FC<{ transaction: ITransaction }> = ({
   };
 
   return (
-    <Flex mb="5">
+    <Flex mb="5" alignItems="center">
       <Heading flex="1" size="lg">
         <EditableName
           tooltip="Click to edit"

diff --git a/src/components/client/accounts/Account.tsx b/src/components/client/accounts/Account.tsx
@@ -82,14 +82,13 @@ export const Account: React.FC<{ data: IAccount; index: number }> = ({
   };
 
   return (
-    <Flex mb="2">
-      <DragHandleIcon h="2.5" w="2.5" mt="3" {...attributes} {...listeners} />
+    <Flex mb="2" alignItems="center">
+      <DragHandleIcon h="2.5" w="2.5" {...attributes} {...listeners} />
 
       <Numbering index={index} ml="2" pt="2" minW="30px" fontSize="sm" />
 
       <EditableName
         ml="2"
-        mt="1"
         w={useBreakpointValue({
           base: "50px",
           md: "100px",
@@ -195,7 +194,6 @@ export const Account: React.FC<{ data: IAccount; index: number }> = ({
 
       <Tooltip label="Remove">
         <IconButton
-          mt="1"
           ml="3"
           size="xs"
           aria-label="Remove"

diff --git a/src/components/client/accounts/Accounts.tsx b/src/components/client/accounts/Accounts.tsx
@@ -27,11 +27,11 @@ export const Accounts: React.FC<{ accounts: SortableCollection<IAccount> }> = ({
 
   return (
     <Grid>
-      <Flex mb="3">
-        <Heading mt="2" mb="3" mr="3" size="sm">
+      <Flex mt="2" mb="4" alignItems="center">
+        <Heading mr="3" size="sm">
           Accounts
         </Heading>
-        <Divider flex="1" ml="3" mt="3.5" />
+        <Divider flex="1" />
       </Flex>
       <Box>
         <Sortable

diff --git a/src/components/client/data/Data.tsx b/src/components/client/data/Data.tsx
@@ -38,11 +38,11 @@ export const Data: React.FC<{ data: IInstructionData }> = ({
 
   return (
     <>
-      <Flex>
-        <Heading mt="5" mb="3" size="sm">
+      <Flex mt="2" mb="4" alignItems="center">
+        <Heading mr="3" size="sm">
           Data
         </Heading>
-        <Divider flex="1" ml="5" mt="7" />
+        <Divider flex="1" />
       </Flex>
 
       <Tabs

diff --git a/src/components/client/data/editor/DataField.tsx b/src/components/client/data/editor/DataField.tsx
@@ -49,14 +49,13 @@ export const DataField: React.FC<{
   };
 
   return (
-    <Flex mb="2">
-      <DragHandleIcon h="2.5" w="2.5" mt="3" {...attributes} {...listeners} />
+    <Flex mb="2" alignItems="center">
+      <DragHandleIcon h="2.5" w="2.5" {...attributes} {...listeners} />
 
       <Numbering index={index} ml="2" pt="2" minW="30px" fontSize="sm" />
 
       <EditableName
         ml="2"
-        mt="1"
         w={useBreakpointValue({
           base: "50px",
           md: "100px",
@@ -114,7 +113,6 @@ export const DataField: React.FC<{
       ) : type === "bool" ? (
         <Switch
           ml="2"
-          mt="0.5"
           size="sm"
           value={value}
           onChange={() => {
@@ -141,7 +139,6 @@ export const DataField: React.FC<{
 
       <Tooltip label="Remove">
         <IconButton
-          mt="1"
           ml="3"
           size="xs"
           aria-label="Remove"

diff --git a/src/components/client/results/Results.tsx b/src/components/client/results/Results.tsx
@@ -17,6 +17,7 @@ import {
   TabPanels,
   Tabs,
   Tag,
+  Text,
   Tooltip,
 } from "@chakra-ui/react";
 import { TransactionConfirmationStatus } from "@solana/web3.js";
@@ -118,27 +119,36 @@ export const Results: React.FC = () => {
   };
 
   return (
-    <Grid p="5">
-      <Flex>
-        <Heading mb="6" mr="3" size="md">
+    <Grid pt="2" pl="5" pr="5">
+      <Flex alignItems="center" mb="4">
+        <Heading mr="3" size="md">
           Results
         </Heading>
         {results.confirmationStatus === "finalized" ? (
           results.error ? (
-            <Tooltip label="Failed Transaction">
-              <WarningIcon mt="0.5" mr="1" color="red.400" />
-            </Tooltip>
+            <>
+              <WarningIcon mr="1" color="red.400" />
+              <Text color="red.400" fontSize="sm">
+                Fail
+              </Text>
+            </>
           ) : (
-            <Tooltip label="Successful Transction">
-              <CheckCircleIcon mt="1" mr="1" color="green.400" />
-            </Tooltip>
+            <>
+              <CheckCircleIcon mr="1" color="green.400" />
+              <Text color="green.400" fontSize="sm">
+                Success
+              </Text>
+            </>
           )
         ) : (
           signature &&
           !inProgress && (
-            <Tooltip label="Unknown Transaction Status">
-              <QuestionIcon mt="1" mr="1" color="yellow.400" />
-            </Tooltip>
+            <>
+              <QuestionIcon mr="1" color="yellow.400" />
+              <Text color="yellow.400" fontSize="sm">
+                Unknown
+              </Text>
+            </>
           )
         )}
 
@@ -180,7 +190,6 @@ export const Results: React.FC = () => {
           <Tooltip label="Refresh">
             <IconButton
               ml="1"
-              mt="-1"
               aria-label="Refresh"
               icon={<RepeatIcon />}
               variant="ghost"

diff --git a/src/components/client/results/Signature.tsx b/src/components/client/results/Signature.tsx
@@ -22,14 +22,8 @@ export const Signature: React.FC<{
 
   return (
     <>
-      <Flex>
-        <FormLabel
-          pt="2"
-          mb="3"
-          htmlFor="signature"
-          textAlign="right"
-          fontSize="sm"
-        >
+      <Flex alignItems="center" mb="1">
+        <FormLabel pt="2" htmlFor="signature" textAlign="right" fontSize="sm">
           Signature
         </FormLabel>
 
@@ -54,7 +48,7 @@ export const Signature: React.FC<{
         </InputGroup>
       </Flex>
 
-      <Flex mb="4">
+      <Flex mb="4" alignItems="center">
         <Box width="70px" />
         {slot && (
           <Tag mr="1">

diff --git a/src/components/header/ColorModeSwitcher.tsx b/src/components/header/ColorModeSwitcher.tsx
@@ -21,7 +21,7 @@ export const ColorModeSwitcher: React.FC<ColorModeSwitcherProps> = (props) => {
         size="md"
         fontSize="lg"
         variant="ghost"
-        marginLeft="2"
+        ml="2"
         onClick={toggleColorMode}
         // maintain the colorMode for the element itself since the title bar is always in dark mode
         color="white"

diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
@@ -24,15 +24,14 @@ export const Header: React.FC = () => {
   const set = useSessionStoreWithoutUndo((state) => state.set);
 
   return (
-    <Flex p="2" bgColor="main.800">
+    <Flex p="2" bgColor="main.800" alignItems="center">
       <DarkMode>
         <Image w="40px" h="40px" src="/logo128.png" alt="Logo" />
 
         <Hide below="md">
           <Text
             ml="3"
             mr="9"
-            mt={funTitle ? "1.5" : "2"}
             color="white"
             fontFamily={funTitle ? "'Dancing Script', cursive;" : ""}
             fontWeight="bold"

diff --git a/src/components/options/fields/ChoiceOption.tsx b/src/components/options/fields/ChoiceOption.tsx
@@ -17,7 +17,7 @@ export const ChoiceOption: React.FC<{
   set: (id: string) => void;
 }> = ({ id, name, get, getChoices, set }) => (
   <>
-    <FormLabel htmlFor={id} mt="2" textAlign="right">
+    <FormLabel htmlFor={id} textAlign="right">
       {name}
     </FormLabel>
     <Menu id={id}>

diff --git a/src/components/options/fields/NumberOption.tsx b/src/components/options/fields/NumberOption.tsx
@@ -16,7 +16,7 @@ export const NumberOption: React.FC<{
   format?: (x: number) => any;
 }> = ({ id, name, get, set, format }) => (
   <>
-    <FormLabel htmlFor={id} mt="2" textAlign="right">
+    <FormLabel htmlFor={id} textAlign="right">
       {name}
     </FormLabel>
     <NumberInput

diff --git a/src/components/options/fields/RpcEndpointOption.tsx b/src/components/options/fields/RpcEndpointOption.tsx
@@ -52,15 +52,8 @@ export const RpcEndpointOption: React.FC<IRpcEndpoint> = ({
   };
 
   return (
-    <Flex>
-      <DragHandleIcon
-        h="3"
-        w="3"
-        mt="12"
-        mr="1"
-        {...attributes}
-        {...listeners}
-      />
+    <Flex alignItems="center">
+      <DragHandleIcon h="3" w="3" mr="1" {...attributes} {...listeners} />
 
       <Grid
         p="4"

diff --git a/src/components/options/fields/ToggleOption.tsx b/src/components/options/fields/ToggleOption.tsx
@@ -8,7 +8,7 @@ export const ToggleOption: React.FC<{
   set: (x: boolean) => void;
 }> = ({ id, name, get, set }) => (
   <>
-    <FormLabel htmlFor={id} mb="0" textAlign="right">
+    <FormLabel htmlFor={id} textAlign="right">
       {name}
     </FormLabel>
     <Switch

diff --git a/src/components/palette/preview/AccountSummary.tsx b/src/components/palette/preview/AccountSummary.tsx
@@ -48,7 +48,7 @@ export const AccountSummary: React.FC<{
   ].filter(({ count }) => count > 0);
 
   return (
-    <Flex>
+    <Flex alignItems="center">
       <Tooltip label="Accounts">
         <Flex>
           <AccountIcon />
@@ -60,7 +60,7 @@ export const AccountSummary: React.FC<{
 
       {tags.map(({ label, tooltip, count, colourScheme }, index) => (
         <Tooltip key={index} label={tooltip}>
-          <Tag mr="1" mt="-0.5" size="sm" colorScheme={colourScheme}>
+          <Tag mr="1" size="sm" colorScheme={colourScheme}>
             {label}: {count}
           </Tag>
         </Tooltip>

diff --git a/src/components/palette/preview/InstructionPreview.tsx b/src/components/palette/preview/InstructionPreview.tsx
@@ -35,9 +35,9 @@ export const InstructionPreview: React.FC<{
       rounded="md"
       borderColor={useColorModeValue("gray.300", "gray.600")}
     >
-      <Flex mb="1">
+      <Flex mb="2" alignItems="center">
         {/* TODO implement drag-and-drop */}
-        {/* <DragHandleIcon h="2.5" mt="1" mr="1" /> */}
+        {/* <DragHandleIcon h="2.5" mr="1" /> */}
         <InstructionIcon />
         <Text
           ml="2"
@@ -47,7 +47,7 @@ export const InstructionPreview: React.FC<{
           #{index + 1}
         </Text>
         <Tooltip label={programId}>
-          <Text ml="1" mr="1" mb="2" as="kbd" fontSize="sm">
+          <Text ml="1" mr="1" as="kbd" fontSize="sm">
             {short(programId)}
           </Text>
         </Tooltip>