From 68bb696c7803e2dc60b4e639e3e5319a4d4c4cad Mon Sep 17 00:00:00 2001
From: sohrab <4444588+sohrab-@users.noreply.github.com>
Date: Wed, 3 Aug 2022 10:37:22 +1000
Subject: [PATCH] fix: alignItems to center instead of various margins

---
 src/App.tsx                                   |  5 +--
 src/components/Footer.tsx                     |  5 +--
 src/components/client/InstructionHeader.tsx   |  8 ++---
 src/components/client/Transaction.tsx         |  2 ++
 src/components/client/TransactionHeader.tsx   |  2 +-
 src/components/client/accounts/Account.tsx    |  6 ++--
 src/components/client/accounts/Accounts.tsx   |  6 ++--
 src/components/client/data/Data.tsx           |  6 ++--
 .../client/data/editor/DataField.tsx          |  7 ++--
 src/components/client/results/Results.tsx     | 35 ++++++++++++-------
 src/components/client/results/Signature.tsx   | 12 ++-----
 src/components/header/ColorModeSwitcher.tsx   |  2 +-
 src/components/header/Header.tsx              |  3 +-
 .../options/fields/ChoiceOption.tsx           |  2 +-
 .../options/fields/NumberOption.tsx           |  2 +-
 .../options/fields/RpcEndpointOption.tsx      | 11 ++----
 .../options/fields/ToggleOption.tsx           |  2 +-
 .../palette/preview/AccountSummary.tsx        |  4 +--
 .../palette/preview/InstructionPreview.tsx    |  6 ++--
 .../palette/preview/TransactionPreview.tsx    | 19 +++++-----
 20 files changed, 68 insertions(+), 77 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 8a0a6eb..8a126d9 100644
--- 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
index 14c3634..06685e5 100644
--- 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
index 191c272..bdfcf37 100644
--- 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
index 600fb60..927d597 100644
--- 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
index 5385045..cd777be 100644
--- 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
index be17e0f..23a9c56 100644
--- 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
index 3e76d81..327a0aa 100644
--- 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
index 9dfc7a8..3e0f98d 100644
--- 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
index 927dd9c..80fd176 100644
--- 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
index 5265b59..0f3bb67 100644
--- 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
index a106e68..ce90000 100644
--- 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
index 007493e..02cbf55 100644
--- 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
index 0c9ed31..df1d582 100644
--- a/src/components/header/Header.tsx
+++ b/src/components/header/Header.tsx
@@ -24,7 +24,7 @@ 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" />
 
@@ -32,7 +32,6 @@ export const Header: React.FC = () => {
           <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
index bc35a49..1c4a359 100644
--- 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
index f7ef1b8..1ac962d 100644
--- 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
index 2191b6a..fc8a47c 100644
--- 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
index fff3eb0..f7ed671 100644
--- 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
index 09d94c7..26ef4aa 100644
--- 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
index 7db28c5..7c1e34a 100644
--- 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>
diff --git a/src/components/palette/preview/TransactionPreview.tsx b/src/components/palette/preview/TransactionPreview.tsx
index ed221f4..a8be9d0 100644
--- a/src/components/palette/preview/TransactionPreview.tsx
+++ b/src/components/palette/preview/TransactionPreview.tsx
@@ -45,7 +45,7 @@ export const TransactionPreview: React.FC<{
       boxShadow={useColorModeValue("base", "")}
       borderColor={useColorModeValue("gray.200", "gray.600")}
     >
-      <Flex mb="2">
+      <Flex mb="3" alignItems="center">
         {/* TODO implement drag-and-drop */}
         {/* <DragHandleIcon h="2.5" mt="1" mr="1" /> */}
         <TransactionIcon />
@@ -54,25 +54,27 @@ export const TransactionPreview: React.FC<{
             {short(signature)}
           </Text>
         </Tooltip>
-        <Box mt="-1" mr="1">
+        <Box mr="1">
           <CopyButton size="xs" value={signature} />
         </Box>
         {error ? (
           <Tooltip label={`Transaction failed: ${error}`}>
-            <WarningIcon mt="0.5" color="red.400" />
+            <WarningIcon color="red.400" />
           </Tooltip>
         ) : (
           <Tooltip label="Transaction succeeded">
-            <CheckCircleIcon mt="0.5" color="green.400" />
+            <CheckCircleIcon color="green.400" />
           </Tooltip>
         )}
-        <Tag ml="1" size="sm" colorScheme="yellow">
-          {rpcEndpoint.network}
-        </Tag>
+        <Tooltip label={rpcEndpoint.network}>
+          <Tag ml="1" size="sm" colorScheme="yellow">
+            {rpcEndpoint.network[0].toUpperCase()}
+          </Tag>
+        </Tooltip>
 
         <Spacer />
 
-        <Box mt="-1.5" ml="-2">
+        <Box ml="-2">
           <ExplorerButton
             size="xs"
             valueType="tx"
@@ -82,7 +84,6 @@ export const TransactionPreview: React.FC<{
         </Box>
         <Tooltip label="Add all instructions to transaction">
           <IconButton
-            mt="-1"
             size="xs"
             variant="ghost"
             aria-label="Add all instructions to transaction"