Update shelf spacings

alisson-suzigan · May 17, 2020 · f842cee · f842cee
1 parent 30137c0
commit f842cee
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/src/components/shelf/shelf-item.tsx b/src/components/shelf/shelf-item.tsx
@@ -43,7 +43,7 @@ const imageSize = 250;
 
 const StyledCard = styled(Card)`
   width: ${imageSize}px;
-  margin: ${theme.spacing(2)}px ${theme.spacing()}px;
+  margin: ${theme.spacing()}px;
 `;
 
 const StyledCardMedia = styled(CardMedia)`

diff --git a/src/components/shelf/shelf-list.tsx b/src/components/shelf/shelf-list.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import ShelfItem from './shelf-item';
 import { ShelfProduct } from './type';
+import theme from '../../theme';
 
 interface Props {
   data: ShelfProduct[];
@@ -18,7 +19,7 @@ const ShelfList = ({ data }: Props): JSX.Element => (
 const StyledShelfList = styled.ul`
   display: flex;
   margin: 0;
-  padding: 0;
+  padding: ${theme.spacing()}px;
   list-style: none;
   overflow-x: auto;
 `;

diff --git a/src/components/shelf/shelf.tsx b/src/components/shelf/shelf.tsx
@@ -3,8 +3,8 @@ import styled from 'styled-components';
 import Typography from '@material-ui/core/Typography';
 import Icon from '@material-ui/core/Icon';
 import ShelfList from './shelf-list';
-import theme from '../../theme';
 import { ShelfData } from './type';
+import theme from '../../theme';
 
 interface Props {
   data: ShelfData;
@@ -23,17 +23,18 @@ const Shelf = ({ data }: Props): JSX.Element => (
 );
 
 const StyledSection = styled.section`
-  margin-bottom: ${theme.spacing(2)}px;
+  margin-bottom: ${theme.spacing(3)}px;
 `;
 
 const StyledTitle = styled(Typography)`
   display: flex;
   align-items: center;
+  margin: 0 ${theme.spacing(2)}px;
 `;
 
 const StyledIcon = styled(Icon)`
   &.material-icons {
-    margin-right: ${theme.spacing(0.5)}px;
+    margin-right: ${theme.spacing()}px;
     font-size: 1.8rem;
   }
 `;