Skip to content

Commit ebdffda

Browse files
lenasmayorlenasmayor
authored
Facelift: Header and Sidebar UI review (#6946)
* Changes to sidebar style * Sidebar padding adjusment * Update sidebar styles and paddings * Adjust team switcher height and marginTop
1 parent 0718ac7 commit ebdffda

File tree

8 files changed

+71
-30
lines changed

8 files changed

+71
-30
lines changed

‎packages/app/src/app/components/TeamAvatar/TeamAvatar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const TeamAvatar = ({
3939
// consistent color
4040
const index = name.length % (backgrounds.length - 1);
4141
const backgroundColor = backgrounds[index];
42-
const avatarSize = size === 'bigger' ? '55px' : '26px';
42+
const avatarSize = size === 'bigger' ? '55px' : '24px';
4343

4444
return avatar ? (
4545
<img

‎packages/app/src/app/components/WorkspaceSelect/WorkspaceSelect.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,7 @@ export const WorkspaceSelect: React.FC<WorkspaceSelectProps> = React.memo(
5757
css={css({
5858
width: '100%',
5959
height: '100%',
60-
paddingLeft: 2,
61-
borderRadius: 0,
60+
marginLeft: 0,
6261
'&:hover': {
6362
backgroundColor: 'grays.600',
6463
},
@@ -73,12 +72,12 @@ export const WorkspaceSelect: React.FC<WorkspaceSelectProps> = React.memo(
7372
name={activeAccount.name}
7473
/>
7574
</Stack>
76-
<Text size={4} weight="normal" maxWidth={140}>
75+
<Text size={14} weight="normal" maxWidth={140}>
7776
{activeAccount.name}
7877
</Text>
7978
</Stack>
8079

81-
<Icon name="caret" size={8} />
80+
<Icon name="chevronDown" size={8} />
8281
</Stack>
8382

8483
<Menu.List

‎packages/app/src/app/pages/Dashboard/Components/Selection/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -624,7 +624,7 @@ export const SelectionProvider: React.FC<SelectionProviderProps> = ({
624624
id="selection-container"
625625
onContextMenu={onContainerContextMenu}
626626
css={css({
627-
paddingTop: 10,
627+
paddingTop: 8,
628628
paddingBottom: 8,
629629
width: '100%',
630630
height: '100%',

‎packages/app/src/app/pages/Dashboard/Content/routes/Settings/index.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import { Header } from '../../../Components/Header';
88
import { TeamSettings } from './TeamSettings';
99
import { UserSettings } from './UserSettings';
1010

11+
import { GRID_MAX_WIDTH } from '../../../Components/VariableGrid';
12+
1113
export const Settings = () => {
1214
const {
1315
activeTeam,
@@ -26,7 +28,7 @@ export const Settings = () => {
2628

2729
if (!user || !activeTeamInfo) {
2830
return (
29-
<Element css={css({ width: '100%', maxWidth: 1280 })} marginY={10}>
31+
<Element css={css({ width: '100%', maxWidth: GRID_MAX_WIDTH })}>
3032
<Header title="Team Settings" activeTeam={activeTeam} />
3133
</Element>
3234
);
@@ -36,7 +38,7 @@ export const Settings = () => {
3638
activeTeam === personalWorkspaceId ? UserSettings : TeamSettings;
3739

3840
return (
39-
<Element css={css({ width: '100%', maxWidth: 1280 })} marginY={10}>
41+
<Element css={css({ width: '100%', maxWidth: GRID_MAX_WIDTH })} marginY={7}>
4042
<Component />
4143
</Element>
4244
);

‎packages/app/src/app/pages/Dashboard/Header/index.tsx

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export const Header: React.FC<HeaderProps> = React.memo(
6060
>
6161
<LogoIcon
6262
style={{
63-
marginLeft: -6,
63+
marginLeft: 0,
6464
marginTop: 2, // Logo positioning tweak
6565
}}
6666
height={18}
@@ -79,14 +79,19 @@ export const Header: React.FC<HeaderProps> = React.memo(
7979
<Stack align="center" gap={2}>
8080
<Button
8181
variant="primary"
82-
css={css({ width: 'auto', paddingX: 3, marginLeft: 4 })}
82+
css={css({ width: 'auto', paddingX: 3 })}
8383
disabled={activeWorkspaceAuthorization === 'READ'}
8484
onClick={() => {
8585
openCreateSandboxModal({});
8686
}}
8787
>
88-
<Icon name="plus" size={20} title="Create new" css={css({ paddingRight: 2})}/>
89-
New
88+
<Icon
89+
name="plus"
90+
size={20}
91+
title="Create new"
92+
css={css({ paddingRight: 2 })}
93+
/>
94+
New
9095
</Button>
9196

9297
{user && <Notifications />}
@@ -150,9 +155,12 @@ const SearchInputGroup = () => {
150155
<Stack
151156
css={css({
152157
flexGrow: 1,
153-
maxWidth: 280,
158+
minWidth: 280,
159+
width: 320,
154160
display: ['none', 'none', 'block'],
155-
position: 'relative',
161+
position: 'absolute',
162+
left: '50%',
163+
transform: 'translateX(-50%)',
156164
})}
157165
>
158166
<Combobox
@@ -172,6 +180,10 @@ const SearchInputGroup = () => {
172180
onChange={onChange}
173181
onKeyPress={handleEnter}
174182
placeholder="Search"
183+
icon="search"
184+
css={css({
185+
background: 'transparent',
186+
})}
175187
/>
176188
{SHOW_COMMUNITY_SEARCH && query.length >= 2 && (
177189
<ComboboxPopover

‎packages/app/src/app/pages/Dashboard/Sidebar/index.tsx

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ import { SkeletonTextBlock } from 'app/pages/Sandbox/Editor/Skeleton/elements';
1313
import {
1414
Element,
1515
List,
16-
ListAction,
17-
ListItem,
16+
SidebarListAction,
17+
SidebarListItem,
1818
Link,
1919
Text,
2020
Stack,
@@ -133,17 +133,17 @@ export const Sidebar: React.FC<SidebarProps> = ({
133133
display: 'flex',
134134
flexDirection: 'column',
135135
height: '100%',
136-
paddingBottom: 4,
136+
paddingBottom: 6,
137137
})}
138138
>
139-
<ListItem
139+
<SidebarListItem
140140
css={css({
141141
marginTop: 6,
142142
paddingLeft: 2,
143143
paddingRight: 0,
144144
borderRadius: 2,
145-
minHeight: 10,
146-
backgroundColor: 'sideBar.hoverBackground',
145+
marginLeft: 2,
146+
minHeight: 8,
147147
})}
148148
>
149149
{activeAccount ? (
@@ -181,16 +181,16 @@ export const Sidebar: React.FC<SidebarProps> = ({
181181
})}
182182
/>
183183
</Link>
184-
</ListItem>
184+
</SidebarListItem>
185185
<RowItem
186186
name="Recent"
187187
page="recent"
188188
path={dashboardUrls.recent(activeTeam)}
189189
icon="clock"
190-
style={{ marginTop: 1 }}
190+
style={{ marginTop: 8 }}
191191
/>
192192
<Element marginTop={4} />
193-
<Element paddingX={5} paddingY={1}>
193+
<Element paddingX={7} paddingY={2}>
194194
<Text
195195
variant="muted"
196196
size={2}
@@ -212,7 +212,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
212212
icon="repository"
213213
/>
214214
<Element marginTop={4} />
215-
<Element paddingX={5} paddingY={1}>
215+
<Element paddingX={7} paddingY={2}>
216216
<Text
217217
variant="muted"
218218
size={2}
@@ -266,7 +266,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
266266
icon="archive"
267267
/>
268268
<Element
269-
marginTop={4}
269+
marginTop={8}
270270
css={css({
271271
flex: 1, // This pushes the bottom links all the way down
272272
})}
@@ -490,14 +490,14 @@ const RowItem: React.FC<RowItemProps> = ({
490490
}, [isOver, setFoldersVisibility, HOVER_THRESHOLD]);
491491

492492
return (
493-
<ListAction
493+
<SidebarListAction
494494
ref={dropRef}
495495
align="center"
496496
onClick={onSidebarToggle}
497497
css={css(
498498
merge(
499499
{
500-
minHeight: nestingLevel ? 8 : 10,
500+
minHeight: nestingLevel ? 8 : 9,
501501
paddingX: 0,
502502
opacity: isDragging && !canDrop ? 0.25 : 1,
503503
color:
@@ -510,7 +510,7 @@ const RowItem: React.FC<RowItemProps> = ({
510510
transitionDuration: theme => theme.speeds[1],
511511
a: {
512512
':focus': {
513-
// focus state is handled by ListAction:focus-within
513+
// focus state is handled by SidebarListAction:focus-within
514514
outline: 'none',
515515
},
516516
},
@@ -565,7 +565,7 @@ const RowItem: React.FC<RowItemProps> = ({
565565
)}
566566
</Link>
567567
)}
568-
</ListAction>
568+
</SidebarListAction>
569569
);
570570
};
571571

‎packages/app/src/app/pages/Dashboard/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ export const Dashboard: FunctionComponent = () => {
112112
css={css({
113113
width: '100%',
114114
height: 'calc(100vh - 48px)',
115-
paddingLeft: [0, 0, SIDEBAR_WIDTH],
115+
paddingLeft: [0, 0, SIDEBAR_WIDTH + 24],
116116
})}
117117
>
118118
<Content />

‎packages/components/src/components/List/index.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,3 +41,31 @@ export const ListAction = styled(ListItem)<ListActionProps>(({ disabled }) =>
4141
},
4242
})
4343
);
44+
45+
export const SidebarListItem = styled(Stack).attrs({
46+
as: 'li',
47+
align: 'center',
48+
})(
49+
css({
50+
minHeight: 8,
51+
marginLeft: 2,
52+
color: 'list.foreground',
53+
borderRadius: 2,
54+
fontSize: 14,
55+
})
56+
);
57+
58+
export const SidebarListAction = styled(SidebarListItem)<ListActionProps>(
59+
({ disabled }) =>
60+
css({
61+
':hover, &[aria-selected="true"]': {
62+
cursor: !disabled ? 'pointer' : 'not-allowed',
63+
color: !disabled ? 'list.hoverForeground' : 'inherit',
64+
backgroundColor: !disabled ? 'list.hoverBackground' : 'inherit',
65+
},
66+
':focus-within': {
67+
color: !disabled ? 'list.hoverForeground' : 'inherit',
68+
backgroundColor: !disabled ? 'list.hoverBackground' : 'inherit',
69+
},
70+
})
71+
);

0 commit comments

Comments
 (0)