setting the collection.styles.jsx

Author: rigole

src/components/custom-button/custom-button.component.jsx

@@ -1,13 +1,11 @@
 import React from "react";
-import './custom-button.styles.scss'
 
-const CustomButtonComponent = ({ children, isGoogleSignIn, inverted ,...otherProps }) => (
-    <button
-        className={`${inverted ? 'inverted' : '' }${isGoogleSignIn ? 'google-sign-in' : ''} custom-button`}
-        {...otherProps}
-    >
+import { CustomButtonContainer } from "./custom-button.styles";
+
+const CustomButtonComponent = ({ children, ...props }) => (
+    <CustomButtonContainer {...props} >
         {children}
-    </button>
+    </CustomButtonContainer>
 )
 
 export default CustomButtonComponent

src/components/custom-button/custom-button.styles.jsx

@@ -0,0 +1,63 @@
+import styled, { css } from "styled-components"
+
+const buttonStyles = css`
+  background-color: black;
+  color:white;
+  border: none;
+  
+  &:hover {
+    background-color: white;
+    color: black;
+    border: 1px solid black;
+  }
+`
+
+const invertedButtonStyles = css`
+  background-color: white;
+  color: black;
+  border: 1px solid black;
+
+  &:hover {
+    background-color: black;
+    color: white;
+    border: none;
+  }
+`
+const googleSignInStyles = css `
+    background-color: #4285f4;
+    color: white;
+    
+    &:hover {
+        background-color: #357ae8;
+        border: none;
+    }
+`
+
+const getButtonStyles = props => {
+    if (props.isGoogleSignIn){
+        return googleSignInStyles;
+    }
+
+    return props.inverted ? invertedButtonStyles : buttonStyles
+}
+
+export const CustomButtonContainer = styled.button`
+  min-width: 165px;
+  width: auto;
+  height: 50px;
+  letter-spacing: 0.5px;
+  line-height: 50px;
+  padding: 0 35px 0 35px;
+  font-size: 15px;
+  background-color: black;
+  color: white;
+  text-transform: uppercase;
+  font-family: 'Open Sans Condensed', sans-serif;
+  font-weight: bolder;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+
+
+ ${getButtonStyles}
+`

src/components/custom-button/custom-button.styles.scss

@@ -1,47 +0,0 @@
-.custom-button {
-  min-width: 165px;
-  width: auto;
-  height: 50px;
-  letter-spacing: 0.5px;
-  line-height: 50px;
-  padding: 0 35px 0 35px;
-  font-size: 15px;
-  background-color: black;
-  color: white;
-  text-transform: uppercase;
-  font-family: 'Open Sans Condensed', sans-serif;
-  font-weight: bolder;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-
-
-  &:hover {
-    background-color: white;
-    color: black;
-    border: 1px solid black;
-  }
-  &.google-sign-in{
-    background-color: #4285f4;
-    color: white;
-
-
-    &:hover{
-      background-color: #357ae8;
-      border: none;
-    }
-  }
-
-  &.inverted {
-    background-color: white;
-    color: black;
-    border: 1px solid black;
-
-    &:hover {
-      background-color: black;
-      color: white;
-      border: none;
-    }
-  }
-}

src/components/header/header.styles.jsx

@@ -3,8 +3,8 @@ import { Link } from "react-router-dom";
 
 
 const OptionConstainerStyles = css`
-    padding: 10px 15px;
-  cursor: pointer;
+    padding: 15px 15px;
+    cursor: pointer;
     
 `;
 

src/pages/collection/collection.component.jsx

@@ -5,20 +5,24 @@ import CollectionItem from '../../components/collection-item/collection-item.com
 
 import { selectCollection } from '../../redux/shop/shop.selectors';
 
-import './collection.styles.scss';
+import {
+    CollectionTitle,
+    CollectionPageContainer,
+    CollectionItemsContainer
+} from "./collection.styles";
 
 const CollectionPage = ({ collection }) => {
     const { title, items } = collection
 
     return (
-        <div className='collection-page'>
-            <h2 className='title'>{title}</h2>
-            <div className='items'>
+        <CollectionPageContainer>
+            <CollectionTitle>{title}</CollectionTitle>
+            <CollectionItemsContainer>
                 {items.map(item => (
                     <CollectionItem key={item.id} item={item} />
                 ))}
-            </div>
-        </div>
+            </CollectionItemsContainer>
+        </CollectionPageContainer>
     );
 };
 

src/pages/collection/collection.styles.jsx

@@ -0,0 +1,22 @@
+import styled from 'styled-components'
+
+export const CollectionPageContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+`
+
+export const CollectionTitle = styled.h2`
+  font-size: 38px;
+  margin: 0 auto 30px;
+`
+
+export const CollectionItemsContainer = styled.div`
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-gap: 10px;
+  
+    & > div {
+      margin-bottom: 30px;
+    }
+`
+