Work on project

VinnieVoet · Jan 13, 2021 · 2d35711 · 2d35711
1 parent 26603e9
commit 2d35711
Show file tree

Hide file tree

Showing 11 changed files with 18 additions and 15 deletions.
diff --git a/.eslintcache b/.eslintcache
diff --git a/src/components/App/App.js b/src/components/App/App.js
@@ -7,7 +7,6 @@ import ShoeIndex from '../ShoeIndex';
 const App = () => {
   const [sortId, setSortId] = React.useState('newest');
 
-  console.log(sortId);
   return (
     <>
       <Header />

diff --git a/src/components/Breadcrumbs/Breadcrumbs.js b/src/components/Breadcrumbs/Breadcrumbs.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 import { COLORS } from '../../constants';
 

diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 import { COLORS, WEIGHTS } from '../../constants';
 import SearchInput from '../SearchInput';
@@ -75,15 +75,19 @@ const MainHeader = styled.div`
 `;
 
 const Side = styled.div`
-  flex-grow: 1;
-  flex-shrink: 1;
-  flex-basis: 0;
+  flex: 1;
+
+  &:first-of-type {
+    margin-right: 48px;
+  }
 `;
 
 const Nav = styled.nav`
   display: flex;
   margin: 0 48px;
   gap: 48px;
+  /* TODO: Use this, maybe with clamp? */
+  gap: max(calc(10vw - 60px), 32px);
 `;
 
 const NavLink = styled.a`

diff --git a/src/components/Logo/Logo.js b/src/components/Logo/Logo.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 import { WEIGHTS } from '../../constants';
 

diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 import { COLORS, WEIGHTS } from '../../constants';
 import Icon from '../Icon';

diff --git a/src/components/ShoeCard/ShoeCard.js b/src/components/ShoeCard/ShoeCard.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 import { COLORS, WEIGHTS } from '../../constants';
 import { formatPrice, pluralize, isNewShoe } from '../../utils';

diff --git a/src/components/ShoeGrid/ShoeGrid.js b/src/components/ShoeGrid/ShoeGrid.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 import SHOES from '../../data';
 import ShoeCard from '../ShoeCard';

diff --git a/src/components/ShoeIndex/ShoeIndex.js b/src/components/ShoeIndex/ShoeIndex.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
-import { WEIGHTS, COLORS } from '../../constants';
+import { WEIGHTS } from '../../constants';
 
 import Breadcrumbs from '../Breadcrumbs';
 import Select from '../Select';

diff --git a/src/components/ShoeSidebar/ShoeSidebar.js b/src/components/ShoeSidebar/ShoeSidebar.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 import { COLORS, WEIGHTS } from '../../constants';
 

diff --git a/src/components/Spacer/Spacer.js b/src/components/Spacer/Spacer.js
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 function getHeight({ axis, size }) {
   return axis === 'horizontal' ? 1 : size;