diff options
author | Kristóf Marussy <kristof@marussy.com> | 2022-03-09 00:52:00 +0100 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2022-03-15 03:00:04 +0100 |
commit | b737db8109a48c4812a197b9e0e46abef23ef0a7 (patch) | |
tree | 01f8189f9dc69c0f5be85fa29670b8eee1dfcea7 /packages | |
parent | refactor(renderer): Location bar security label (diff) | |
download | sophie-b737db8109a48c4812a197b9e0e46abef23ef0a7.tar.gz sophie-b737db8109a48c4812a197b9e0e46abef23ef0a7.tar.zst sophie-b737db8109a48c4812a197b9e0e46abef23ef0a7.zip |
design: Inset sidebar
Signed-off-by: Kristóf Marussy <kristof@marussy.com>
Diffstat (limited to 'packages')
6 files changed, 19 insertions, 8 deletions
diff --git a/packages/renderer/src/components/App.tsx b/packages/renderer/src/components/App.tsx index cf97074..8fab77d 100644 --- a/packages/renderer/src/components/App.tsx +++ b/packages/renderer/src/components/App.tsx | |||
@@ -44,6 +44,7 @@ export default function App(): JSX.Element { | |||
44 | flexDirection: 'column', | 44 | flexDirection: 'column', |
45 | alignItems: 'stretch', | 45 | alignItems: 'stretch', |
46 | height: '100%', | 46 | height: '100%', |
47 | zIndex: 100, | ||
47 | }} | 48 | }} |
48 | > | 49 | > |
49 | <LocationBar /> | 50 | <LocationBar /> |
diff --git a/packages/renderer/src/components/locationBar/GoButton.tsx b/packages/renderer/src/components/locationBar/GoButton.tsx index 32f715e..471f25e 100644 --- a/packages/renderer/src/components/locationBar/GoButton.tsx +++ b/packages/renderer/src/components/locationBar/GoButton.tsx | |||
@@ -38,6 +38,7 @@ export default function GoButton({ | |||
38 | color="inherit" | 38 | color="inherit" |
39 | onClick={onClick} | 39 | onClick={onClick} |
40 | sx={{ | 40 | sx={{ |
41 | color: 'text.primary', | ||
41 | minWidth: '32px', | 42 | minWidth: '32px', |
42 | height: '32px', | 43 | height: '32px', |
43 | paddingX: '6px', | 44 | paddingX: '6px', |
diff --git a/packages/renderer/src/components/locationBar/LocationBar.tsx b/packages/renderer/src/components/locationBar/LocationBar.tsx index 8b079f0..0debaab 100644 --- a/packages/renderer/src/components/locationBar/LocationBar.tsx +++ b/packages/renderer/src/components/locationBar/LocationBar.tsx | |||
@@ -36,8 +36,6 @@ const LocationBarRoot = styled('header', { | |||
36 | display: hidden ? 'none' : 'flex', | 36 | display: hidden ? 'none' : 'flex', |
37 | flexDirection: 'row', | 37 | flexDirection: 'row', |
38 | padding: theme.spacing(1), | 38 | padding: theme.spacing(1), |
39 | // Align the bottom border with the service switcher in the sidebar. | ||
40 | paddingBottom: `calc(${theme.spacing(1)} - 1px)`, | ||
41 | gap: theme.spacing(1), | 39 | gap: theme.spacing(1), |
42 | borderBottom: `1px solid ${theme.palette.divider}`, | 40 | borderBottom: `1px solid ${theme.palette.divider}`, |
43 | })); | 41 | })); |
diff --git a/packages/renderer/src/components/sidebar/ServiceIcon.tsx b/packages/renderer/src/components/sidebar/ServiceIcon.tsx index 5db8a0c..fe047cf 100644 --- a/packages/renderer/src/components/sidebar/ServiceIcon.tsx +++ b/packages/renderer/src/components/sidebar/ServiceIcon.tsx | |||
@@ -52,6 +52,10 @@ const ServiceIconBadge = styled(Badge, { | |||
52 | name: 'ServiceIcon', | 52 | name: 'ServiceIcon', |
53 | slot: 'Badge', | 53 | slot: 'Badge', |
54 | })(({ theme }) => ({ | 54 | })(({ theme }) => ({ |
55 | '.MuiBadge-badge': { | ||
56 | // Place badge above the sidebar inner shadow. | ||
57 | zIndex: 200, | ||
58 | }, | ||
55 | '.MuiBadge-dot': { | 59 | '.MuiBadge-dot': { |
56 | background: | 60 | background: |
57 | theme.palette.mode === 'dark' | 61 | theme.palette.mode === 'dark' |
diff --git a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx index eba21b5..404149b 100644 --- a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx +++ b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx | |||
@@ -51,8 +51,7 @@ const ServiceSwitcherTab = styled(Tab, { | |||
51 | slot: 'Tab', | 51 | slot: 'Tab', |
52 | })(({ theme }) => ({ | 52 | })(({ theme }) => ({ |
53 | minWidth: 0, | 53 | minWidth: 0, |
54 | paddingInlineStart: theme.spacing(2), | 54 | paddingInline: theme.spacing(2), |
55 | paddingInlineEnd: `calc(${theme.spacing(2)} - 1px)`, | ||
56 | transition: theme.transitions.create('background-color', { | 55 | transition: theme.transitions.create('background-color', { |
57 | duration: theme.transitions.duration.shortest, | 56 | duration: theme.transitions.duration.shortest, |
58 | }), | 57 | }), |
diff --git a/packages/renderer/src/components/sidebar/Sidebar.tsx b/packages/renderer/src/components/sidebar/Sidebar.tsx index 4f27d68..6c2f219 100644 --- a/packages/renderer/src/components/sidebar/Sidebar.tsx +++ b/packages/renderer/src/components/sidebar/Sidebar.tsx | |||
@@ -32,18 +32,27 @@ export default function Sidebar(): JSX.Element { | |||
32 | sx={(theme) => ({ | 32 | sx={(theme) => ({ |
33 | flex: 0, | 33 | flex: 0, |
34 | display: 'flex', | 34 | display: 'flex', |
35 | position: 'relative', | ||
36 | overflow: 'hidden', | ||
35 | flexDirection: 'column', | 37 | flexDirection: 'column', |
36 | alignItems: 'center', | 38 | alignItems: 'center', |
37 | paddingY: 1, | 39 | paddingY: 1, |
38 | paddingInlineStart: '1px', | ||
39 | gap: 1, | 40 | gap: 1, |
40 | backgroundColor: | 41 | backgroundColor: |
41 | theme.palette.mode === 'dark' | 42 | theme.palette.mode === 'dark' |
42 | ? 'rgba(255, 255, 255, 0.09)' | 43 | ? 'rgba(255, 255, 255, 0.09)' |
43 | : 'rgba(0, 0, 0, 0.06)', | 44 | : 'rgba(0, 0, 0, 0.06)', |
44 | backgroundClip: 'padding-box', | ||
45 | borderInlineEnd: `1px solid ${theme.palette.divider}`, | ||
46 | minWidth: `calc(${theme.spacing(4)} + 36px)`, | 45 | minWidth: `calc(${theme.spacing(4)} + 36px)`, |
46 | '::after': { | ||
47 | content: '" "', | ||
48 | position: 'absolute', | ||
49 | top: '-20px', | ||
50 | bottom: '-20px', | ||
51 | [theme.direction === 'ltr' ? 'right' : 'left']: '-20px', | ||
52 | zIndex: 100, | ||
53 | width: '20px', | ||
54 | boxShadow: theme.shadows[4], | ||
55 | }, | ||
47 | })} | 56 | })} |
48 | > | 57 | > |
49 | <ToggleLocationBarButton /> | 58 | <ToggleLocationBarButton /> |
@@ -53,7 +62,6 @@ export default function Sidebar(): JSX.Element { | |||
53 | display: 'flex', | 62 | display: 'flex', |
54 | flexDirection: 'column', | 63 | flexDirection: 'column', |
55 | justifyContent: 'flex-start', | 64 | justifyContent: 'flex-start', |
56 | marginInlineStart: '-1px', | ||
57 | }} | 65 | }} |
58 | > | 66 | > |
59 | <ServiceSwitcher /> | 67 | <ServiceSwitcher /> |