Fix misaligned header items

mrseanbaines · May 19, 2020 · b553e5a · b553e5a
1 parent 214cea2
commit b553e5a
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 12 deletions.
diff --git a/src/components/header/header.stories.tsx b/src/components/header/header.stories.tsx
@@ -9,3 +9,9 @@ export default {
 export const Default = () => <Header title='Transactions' />
 
 export const WithSubtitle = () => <Header title='Transactions' subtitle='April 2020' />
+
+export const WithFilters = () => <Header title='Transactions' withFilters />
+
+export const WithDateSelect = () => <Header title='Transactions' withDateSelect />
+
+export const WithFiltersAndDateSelect = () => <Header title='Transactions' withFilters withDateSelect />
diff --git a/src/components/header/header.styles.ts b/src/components/header/header.styles.ts
@@ -3,10 +3,18 @@ import styled, { css } from 'styled-components'
 export const Wrapper = styled.header(({ theme }) => {
   return css`
     background: ${theme.colors.background.muted};
-    display: flex;
-    justify-content: space-between;
     align-items: center;
     padding: ${theme.space[3]} ${theme.space[4]};
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+
+    *:nth-child(2) {
+      justify-self: center;
+    }
+
+    *:nth-child(3) {
+      justify-self: end;
+    }
   `
 })
 

diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
@@ -23,22 +23,26 @@ const Header: React.FC<Props> = ({
   onDateSelectClick,
 }) => (
   <s.Wrapper>
-    {withFilters && (
-      <s.Button onClick={onFiltersClick}>
-        <FiltersIcon />
-      </s.Button>
-    )}
+    <div>
+      {withFilters && (
+        <s.Button onClick={onFiltersClick}>
+          <FiltersIcon />
+        </s.Button>
+      )}
+    </div>
 
     <s.CenterSection>
       <s.Title>{title}</s.Title>
       {subtitle && <s.Subtitle>{subtitle}</s.Subtitle>}
     </s.CenterSection>
 
-    {withDateSelect && (
-      <s.Button onClick={onDateSelectClick}>
-        <CalendarIcon />
-      </s.Button>
-    )}
+    <div>
+      {withDateSelect && (
+        <s.Button onClick={onDateSelectClick}>
+          <CalendarIcon />
+        </s.Button>
+      )}
+    </div>
   </s.Wrapper>
 )