Skip to content
This repository was archived by the owner on Feb 12, 2026. It is now read-only.

Commit 68bb696

Browse files
sohrab-sohrab-
committed
fix: alignItems to center instead of various margins
1 parent dedb835 commit 68bb696

20 files changed

Lines changed: 68 additions & 77 deletions

‎src/App.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export const App: React.FC = () => {
8989
</Box>
9090

9191
<Flex mt="55px">
92-
<Box flex="10" h="93vh" overflow="scroll">
92+
<Box flex="2" h="93vh" overflow="scroll">
9393
{/* TODO it's Solana wallet button's fault, we need to replace it */}
9494
<Show below="md">
9595
<Alert status="warning" variant="left-accent">
@@ -103,8 +103,9 @@ export const App: React.FC = () => {
103103
<Transaction />
104104
</Box>
105105
{paletteOpen && (
106+
// TODO overlaps with main pane on smaller width
106107
<Hide below="md">
107-
<Box flex="5" h="93vh" overflow="scroll">
108+
<Box flex="1" h="93vh" overflow="scroll">
108109
<Palette />
109110
</Box>
110111
</Hide>

‎src/components/Footer.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,11 @@ export const Footer: React.FC = () => (
1616
p="3"
1717
templateColumns="repeat(3,1fr)"
1818
backgroundColor={useColorModeValue("gray.100", "gray.900")}
19+
alignItems="center"
1920
>
20-
<Flex>
21+
<Flex alignItems="center">
2122
<Text fontSize="xs">© {new Date().getFullYear()}</Text>
22-
<Link ml="2" mt="-1.5" href="https://labeleven.dev" isExternal>
23+
<Link ml="2" mt="-1" href="https://labeleven.dev" isExternal>
2324
<LabElevenIcon />
2425
</Link>
2526
</Flex>

‎src/components/client/InstructionHeader.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@ export const InstructionHeader: React.FC<{ index: number }> = ({ index }) => {
3131
const set = useSessionStoreWithUndo((state) => state.set);
3232

3333
return (
34-
<Flex h={!instruction.expanded ? "30px" : undefined}>
35-
<DragHandleIcon mt="1.5" mr="2" {...attributes} {...listeners} />
34+
<Flex mb={instruction.expanded ? "4" : undefined} alignItems="center">
35+
<DragHandleIcon mr="2" {...attributes} {...listeners} />
3636

3737
<IconButton
3838
h="8"
@@ -65,7 +65,6 @@ export const InstructionHeader: React.FC<{ index: number }> = ({ index }) => {
6565

6666
<Heading flex="1" size="md">
6767
<EditableName
68-
mb="5"
6968
tooltip="Click to edit"
7069
placeholder="Unnamed Instruction"
7170
value={instruction.name}
@@ -79,8 +78,6 @@ export const InstructionHeader: React.FC<{ index: number }> = ({ index }) => {
7978

8079
<Tooltip label={instruction.disabled ? "Enable" : "Disable"}>
8180
<IconButton
82-
mt="-2"
83-
ml="2"
8481
aria-label={instruction.disabled ? "Enable" : "Disable"}
8582
variant="ghost"
8683
icon={
@@ -100,7 +97,6 @@ export const InstructionHeader: React.FC<{ index: number }> = ({ index }) => {
10097

10198
<Menu>
10299
<MenuButton
103-
mt="-2"
104100
as={IconButton}
105101
aria-label="Options"
106102
icon={<Icon as={FaEllipsisV} />}

‎src/components/client/Transaction.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,9 @@ export const Transaction: React.FC = () => {
4040

4141
<Instructions instructions={transaction.instructions} />
4242
</Box>
43+
4344
<Divider />
45+
4446
<Box mt="5">
4547
<Results />
4648
</Box>

‎src/components/client/TransactionHeader.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export const TransactionHeader: React.FC<{ transaction: ITransaction }> = ({
6868
};
6969

7070
return (
71-
<Flex mb="5">
71+
<Flex mb="5" alignItems="center">
7272
<Heading flex="1" size="lg">
7373
<EditableName
7474
tooltip="Click to edit"

‎src/components/client/accounts/Account.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -82,14 +82,13 @@ export const Account: React.FC<{ data: IAccount; index: number }> = ({
8282
};
8383

8484
return (
85-
<Flex mb="2">
86-
<DragHandleIcon h="2.5" w="2.5" mt="3" {...attributes} {...listeners} />
85+
<Flex mb="2" alignItems="center">
86+
<DragHandleIcon h="2.5" w="2.5" {...attributes} {...listeners} />
8787

8888
<Numbering index={index} ml="2" pt="2" minW="30px" fontSize="sm" />
8989

9090
<EditableName
9191
ml="2"
92-
mt="1"
9392
w={useBreakpointValue({
9493
base: "50px",
9594
md: "100px",
@@ -195,7 +194,6 @@ export const Account: React.FC<{ data: IAccount; index: number }> = ({
195194

196195
<Tooltip label="Remove">
197196
<IconButton
198-
mt="1"
199197
ml="3"
200198
size="xs"
201199
aria-label="Remove"

‎src/components/client/accounts/Accounts.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,11 @@ export const Accounts: React.FC<{ accounts: SortableCollection<IAccount> }> = ({
2727

2828
return (
2929
<Grid>
30-
<Flex mb="3">
31-
<Heading mt="2" mb="3" mr="3" size="sm">
30+
<Flex mt="2" mb="4" alignItems="center">
31+
<Heading mr="3" size="sm">
3232
Accounts
3333
</Heading>
34-
<Divider flex="1" ml="3" mt="3.5" />
34+
<Divider flex="1" />
3535
</Flex>
3636
<Box>
3737
<Sortable

‎src/components/client/data/Data.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,11 @@ export const Data: React.FC<{ data: IInstructionData }> = ({
3838

3939
return (
4040
<>
41-
<Flex>
42-
<Heading mt="5" mb="3" size="sm">
41+
<Flex mt="2" mb="4" alignItems="center">
42+
<Heading mr="3" size="sm">
4343
Data
4444
</Heading>
45-
<Divider flex="1" ml="5" mt="7" />
45+
<Divider flex="1" />
4646
</Flex>
4747

4848
<Tabs

‎src/components/client/data/editor/DataField.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -49,14 +49,13 @@ export const DataField: React.FC<{
4949
};
5050

5151
return (
52-
<Flex mb="2">
53-
<DragHandleIcon h="2.5" w="2.5" mt="3" {...attributes} {...listeners} />
52+
<Flex mb="2" alignItems="center">
53+
<DragHandleIcon h="2.5" w="2.5" {...attributes} {...listeners} />
5454

5555
<Numbering index={index} ml="2" pt="2" minW="30px" fontSize="sm" />
5656

5757
<EditableName
5858
ml="2"
59-
mt="1"
6059
w={useBreakpointValue({
6160
base: "50px",
6261
md: "100px",
@@ -114,7 +113,6 @@ export const DataField: React.FC<{
114113
) : type === "bool" ? (
115114
<Switch
116115
ml="2"
117-
mt="0.5"
118116
size="sm"
119117
value={value}
120118
onChange={() => {
@@ -141,7 +139,6 @@ export const DataField: React.FC<{
141139

142140
<Tooltip label="Remove">
143141
<IconButton
144-
mt="1"
145142
ml="3"
146143
size="xs"
147144
aria-label="Remove"

‎src/components/client/results/Results.tsx‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
TabPanels,
1818
Tabs,
1919
Tag,
20+
Text,
2021
Tooltip,
2122
} from "@chakra-ui/react";
2223
import { TransactionConfirmationStatus } from "@solana/web3.js";
@@ -118,27 +119,36 @@ export const Results: React.FC = () => {
118119
};
119120

120121
return (
121-
<Grid p="5">
122-
<Flex>
123-
<Heading mb="6" mr="3" size="md">
122+
<Grid pt="2" pl="5" pr="5">
123+
<Flex alignItems="center" mb="4">
124+
<Heading mr="3" size="md">
124125
Results
125126
</Heading>
126127
{results.confirmationStatus === "finalized" ? (
127128
results.error ? (
128-
<Tooltip label="Failed Transaction">
129-
<WarningIcon mt="0.5" mr="1" color="red.400" />
130-
</Tooltip>
129+
<>
130+
<WarningIcon mr="1" color="red.400" />
131+
<Text color="red.400" fontSize="sm">
132+
Fail
133+
</Text>
134+
</>
131135
) : (
132-
<Tooltip label="Successful Transction">
133-
<CheckCircleIcon mt="1" mr="1" color="green.400" />
134-
</Tooltip>
136+
<>
137+
<CheckCircleIcon mr="1" color="green.400" />
138+
<Text color="green.400" fontSize="sm">
139+
Success
140+
</Text>
141+
</>
135142
)
136143
) : (
137144
signature &&
138145
!inProgress && (
139-
<Tooltip label="Unknown Transaction Status">
140-
<QuestionIcon mt="1" mr="1" color="yellow.400" />
141-
</Tooltip>
146+
<>
147+
<QuestionIcon mr="1" color="yellow.400" />
148+
<Text color="yellow.400" fontSize="sm">
149+
Unknown
150+
</Text>
151+
</>
142152
)
143153
)}
144154

@@ -180,7 +190,6 @@ export const Results: React.FC = () => {
180190
<Tooltip label="Refresh">
181191
<IconButton
182192
ml="1"
183-
mt="-1"
184193
aria-label="Refresh"
185194
icon={<RepeatIcon />}
186195
variant="ghost"

0 commit comments

Comments
 (0)