Improve alignment in HeaderBar and NotificationArea

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',
 });