diff options
| -rw-r--r-- | gui/src/renderer/components/HeaderBar.tsx | 6 | ||||
| -rw-r--r-- | gui/src/renderer/components/NotificationBanner.tsx | 6 |
2 files changed, 7 insertions, 5 deletions
diff --git a/gui/src/renderer/components/HeaderBar.tsx b/gui/src/renderer/components/HeaderBar.tsx index db8734f1c3..2d09759be3 100644 --- a/gui/src/renderer/components/HeaderBar.tsx +++ b/gui/src/renderer/components/HeaderBar.tsx @@ -20,7 +20,7 @@ const headerBarStyleColorMap = { }; const HeaderBarContainer = styled.div({}, (props: { barStyle?: HeaderBarStyle }) => ({ - padding: '12px', + padding: '12px 16px', paddingTop: process.platform === 'darwin' ? '24px' : '12px', backgroundColor: headerBarStyleColorMap[props.barStyle ?? HeaderBarStyle.default], })); @@ -29,6 +29,8 @@ const HeaderBarContent = styled.div({ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', + // In views without the brand components we still want the Header to have the same height. + minHeight: '51px', }); interface IHeaderBarProps { @@ -61,7 +63,7 @@ const Title = styled.span({ }); const Logo = styled(ImageView)({ - margin: '4px 0 3px 6px', + margin: '4px 0 3px', }); export function Brand() { diff --git a/gui/src/renderer/components/NotificationBanner.tsx b/gui/src/renderer/components/NotificationBanner.tsx index a4ee59f9ce..5a9948b8bd 100644 --- a/gui/src/renderer/components/NotificationBanner.tsx +++ b/gui/src/renderer/components/NotificationBanner.tsx @@ -33,7 +33,7 @@ export const NotificationOpenLinkActionButton = styled.button({ flex: 1, justifyContent: 'center', cursor: 'default', - padding: '0 5px', + padding: '4px', background: 'transparent', border: 'none', }); @@ -68,6 +68,7 @@ export const NotificationContent = styled.div({ display: 'flex', flexDirection: 'column', flex: 1, + paddingRight: '4px', }); export const NotificationActions = styled.div({ @@ -75,7 +76,6 @@ export const NotificationActions = styled.div({ flex: 0, flexDirection: 'column', justifyContent: 'center', - marginLeft: 5, }); interface INotificationIndicatorProps { @@ -128,7 +128,7 @@ const Collapsible = styled.div({}, (props: ICollapsibleProps) => { const Content = styled.div({ display: 'flex', flexDirection: 'row', - padding: '8px 10px 8px 20px', + padding: '8px 12px 8px 16px', height: 'fit-content', }); |
