Skip to content

Commit e9ab9a5

Browse files
setchysetchy
committed
fix account view formatting
Signed-off-by: Adam Setch <[email protected]>
1 parent 49c230a commit e9ab9a5

File tree

2 files changed

+804
-753
lines changed

2 files changed

+804
-753
lines changed

‎src/renderer/routes/Accounts.tsx‎

Lines changed: 97 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -86,85 +86,112 @@ export const AccountsRoute: FC = () => {
8686
key={getAccountUUID(account)}
8787
className="rounded-md bg-gray-100 p-2 pb-0 dark:bg-gray-sidebar"
8888
>
89-
<Stack direction="vertical" gap="none">
90-
<Button
91-
title="Open account profile"
92-
onClick={() => openAccountProfile(account)}
93-
data-testid="account-profile"
94-
sx={{ width: 'fit-content' }}
95-
>
96-
<Stack
97-
direction="horizontal"
98-
gap="condensed"
99-
align="center"
100-
>
101-
<Avatar src={account.user.avatar} size={Size.XLARGE} />
102-
<Text>@{account.user.login}</Text>
103-
<span className="text-xs italic">
104-
({account.user?.name})
105-
</span>
106-
</Stack>
107-
</Button>
108-
109-
<Stack
110-
direction="horizontal"
111-
gap="condensed"
112-
align="start"
113-
justify="space-between"
114-
>
115-
<Stack direction="vertical" gap="none">
116-
<ActionList variant="inset">
117-
<ActionList.Item
89+
<Stack
90+
direction="horizontal"
91+
gap="condensed"
92+
align="center"
93+
justify="space-between"
94+
>
95+
<Stack direction="vertical" gap="none">
96+
<div className="pb-2">
97+
<Button
98+
title="Open account profile"
99+
onClick={() => openAccountProfile(account)}
100+
data-testid="account-profile"
101+
>
102+
<Stack
103+
direction="horizontal"
104+
gap="condensed"
105+
align="center"
106+
>
107+
<Avatar
108+
src={account.user.avatar}
109+
size={Size.XLARGE}
110+
/>
111+
<Text>@{account.user.login}</Text>
112+
</Stack>
113+
</Button>
114+
</div>
115+
116+
<div className="pb-2 pl-4">
117+
<Stack direction="vertical" gap="condensed">
118+
<div hidden={!account.user.name}>
119+
<Stack
120+
direction="horizontal"
121+
gap="condensed"
122+
align="center"
123+
>
124+
<PersonIcon />
125+
<span className="text-xs">
126+
{account.user?.name}
127+
</span>
128+
</Stack>
129+
</div>
130+
131+
<button
118132
title="Open host"
119-
onSelect={() => openHost(account.hostname)}
133+
type="button"
134+
onClick={() => openHost(account.hostname)}
120135
data-testid="account-host"
121136
>
122-
<ActionList.LeadingVisual>
137+
<Stack
138+
direction="horizontal"
139+
gap="condensed"
140+
align="center"
141+
>
123142
<PlatformIcon />
124-
</ActionList.LeadingVisual>
125-
<span className="text-xs">{account.hostname}</span>
126-
</ActionList.Item>
143+
<span className="text-xs">{account.hostname}</span>
144+
</Stack>
145+
</button>
127146

128-
<ActionList.Item
147+
<button
129148
title="Open developer settings"
130-
onSelect={() => openDeveloperSettings(account)}
149+
type="button"
150+
onClick={() => openDeveloperSettings(account)}
131151
data-testid="account-developer-settings"
132152
>
133-
<ActionList.LeadingVisual>
153+
<Stack
154+
direction="horizontal"
155+
gap="condensed"
156+
align="center"
157+
>
134158
<AuthMethodIcon />
135-
</ActionList.LeadingVisual>
136-
<span className="text-xs">{account.method}</span>
137-
</ActionList.Item>
138-
</ActionList>
139-
</Stack>
140-
141-
<Stack direction="horizontal" gap="condensed">
142-
<IconButton
143-
icon={i === 0 ? StarFillIcon : StarIcon}
144-
aria-label={
145-
i === 0 ? 'Primary account' : 'Set as primary account'
146-
}
147-
variant={i === 0 ? 'primary' : 'default'}
148-
onClick={() => setAsPrimaryAccount(account)}
149-
data-testid="account-set-primary"
150-
/>
151-
<IconButton
152-
icon={SyncIcon}
153-
aria-label={`Refresh ${account.user.login}`}
154-
onClick={async () => {
155-
await refreshAccount(account);
156-
navigate('/accounts', { replace: true });
157-
}}
158-
data-testid="account-refresh"
159-
/>
160-
<IconButton
161-
icon={SignOutIcon}
162-
aria-label={`Logout ${account.user.login}`}
163-
variant="danger"
164-
onClick={() => logoutAccount(account)}
165-
data-testid="account-logout"
166-
/>
167-
</Stack>
159+
<span className="text-xs">{account.method}</span>
160+
</Stack>
161+
</button>
162+
</Stack>
163+
</div>
164+
</Stack>
165+
166+
<Stack direction="horizontal" gap="condensed">
167+
<IconButton
168+
icon={i === 0 ? StarFillIcon : StarIcon}
169+
aria-label={
170+
i === 0 ? 'Primary account' : 'Set as primary account'
171+
}
172+
variant={i === 0 ? 'primary' : 'default'}
173+
onClick={() => setAsPrimaryAccount(account)}
174+
size="small"
175+
data-testid="account-set-primary"
176+
/>
177+
<IconButton
178+
icon={SyncIcon}
179+
aria-label={`Refresh ${account.user.login}`}
180+
onClick={async () => {
181+
await refreshAccount(account);
182+
navigate('/accounts', { replace: true });
183+
}}
184+
size="small"
185+
data-testid="account-refresh"
186+
/>
187+
<IconButton
188+
icon={SignOutIcon}
189+
aria-label={`Logout ${account.user.login}`}
190+
variant="danger"
191+
onClick={() => logoutAccount(account)}
192+
size="small"
193+
data-testid="account-logout"
194+
/>
168195
</Stack>
169196
</Stack>
170197
</div>

0 commit comments

Comments
 (0)