From 6978b4d4bbb2884ee6ed6aa47ce1803b65230a61 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 13 Oct 2020 14:34:24 -0300
Subject: [PATCH] Design Tweaks

---
 assets/global.css                                        | 6 ++++--
 components/cart/CartItem/CartItem.module.css             | 2 +-
 components/cart/CartItem/CartItem.tsx                    | 6 +++---
 components/cart/CartSidebarView/CartSidebarView.tsx      | 2 +-
 components/icon/Minus.tsx                                | 2 +-
 components/icon/Plus.tsx                                 | 4 ++--
 components/product/Swatch/Swatch.module.css              | 2 +-
 components/ui/Hero/Hero.tsx                              | 2 +-
 components/ui/Logo/Logo.tsx                              | 4 ++--
 components/wishlist/WishlistCard/WishlistCard.module.css | 2 +-
 components/wishlist/WishlistCard/WishlistCard.tsx        | 2 +-
 tailwind.config.js                                       | 2 ++
 12 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/assets/global.css b/assets/global.css
index 6f4a9297f..ea77c765c 100644
--- a/assets/global.css
+++ b/assets/global.css
@@ -2,8 +2,9 @@
 
 :root {
   --bg-primary: white;
+  --bg-primary-hover: rgba(0, 0, 0, 0.075);
+  --bg-primary-accent: #ddd;
   --bg-secondary: black;
-  --bg-primary-accent: rgba(0, 0, 0, 0.075);
 
   --text-primary: black;
   --text-secondary: white;
@@ -14,7 +15,8 @@
 [data-theme='dark'] {
   --bg-primary: black;
   --bg-secondary: white;
-  --bg-primary-accent: rgba(255, 255, 255, 0.075);
+  --bg-primary-hover: rgba(255, 255, 255, 0.075);
+  --bg-primary-accent: #111;
 
   --text-primary: white;
   --text-secondary: black;
diff --git a/components/cart/CartItem/CartItem.module.css b/components/cart/CartItem/CartItem.module.css
index 17715c7dc..6165b05ed 100644
--- a/components/cart/CartItem/CartItem.module.css
+++ b/components/cart/CartItem/CartItem.module.css
@@ -1,6 +1,6 @@
 .quantity {
   appearance: textfield;
-  @apply w-8 border-gray-300 border mx-3 rounded text-center text-sm;
+  @apply w-8 border-gray-300 border mx-3 rounded text-center text-sm text-black;
 }
 
 .quantity::-webkit-outer-spin-button,
diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx
index 05a19c50b..77f3d719e 100644
--- a/components/cart/CartItem/CartItem.tsx
+++ b/components/cart/CartItem/CartItem.tsx
@@ -56,8 +56,8 @@ const CartItem = ({
   return (
     <li className="flex flex-row space-x-6 py-6">
       <div className="h-12 w-12 bg-violet"></div>
-      <div className="flex-1 flex flex-col justify-between">
-        <span>{item.name}</span>
+      <div className="flex-1 flex flex-col justify-between text-primary">
+        <span className="font-bold mb-3">{item.name}</span>
         <div className="flex items-center">
           <button type="button" onClick={() => increaseQuantity(-1)}>
             <Minus width={18} height={18} />
@@ -76,7 +76,7 @@ const CartItem = ({
           </button>
         </div>
       </div>
-      <div className="flex flex-col justify-between space-y-2">
+      <div className="flex flex-col justify-between space-y-2 text-primary">
         <span>{price}</span>
         <button
           className="flex justify-end"
diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx
index 3927a08a1..0212209d2 100644
--- a/components/cart/CartSidebarView/CartSidebarView.tsx
+++ b/components/cart/CartSidebarView/CartSidebarView.tsx
@@ -38,7 +38,7 @@ const CartSidebarView: FC = () => {
   return (
     <div
       className={cn('h-full flex flex-col', {
-        'bg-black text-white': isEmpty,
+        'bg-white text-black': isEmpty,
         'bg-red text-white': error,
         'bg-green text-white': success,
       })}
diff --git a/components/icon/Minus.tsx b/components/icon/Minus.tsx
index 48614cf2d..f41aa3cf0 100644
--- a/components/icon/Minus.tsx
+++ b/components/icon/Minus.tsx
@@ -3,7 +3,7 @@ const Minus = ({ ...props }) => {
     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
       <path
         d="M5 12H19"
-        stroke="black"
+        stroke="currentColor"
         stroke-width="1.5"
         stroke-linecap="round"
         stroke-linejoin="round"
diff --git a/components/icon/Plus.tsx b/components/icon/Plus.tsx
index bb0da6b1f..1fca1ac9d 100644
--- a/components/icon/Plus.tsx
+++ b/components/icon/Plus.tsx
@@ -3,14 +3,14 @@ const Plus = ({ ...props }) => {
     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
       <path
         d="M12 5V19"
-        stroke="black"
+        stroke="currentColor"
         stroke-width="1.5"
         stroke-linecap="round"
         stroke-linejoin="round"
       />
       <path
         d="M5 12H19"
-        stroke="black"
+        stroke="currentColor"
         stroke-width="1.5"
         stroke-linecap="round"
         stroke-linejoin="round"
diff --git a/components/product/Swatch/Swatch.module.css b/components/product/Swatch/Swatch.module.css
index 4a8803446..19c107197 100644
--- a/components/product/Swatch/Swatch.module.css
+++ b/components/product/Swatch/Swatch.module.css
@@ -9,7 +9,7 @@
 }
 
 .root:hover {
-  @apply transform scale-110 bg-primary-accent;
+  @apply transform scale-110 bg-primary-hover;
 }
 
 .colorViolet {
diff --git a/components/ui/Hero/Hero.tsx b/components/ui/Hero/Hero.tsx
index 534270063..5d75cee84 100644
--- a/components/ui/Hero/Hero.tsx
+++ b/components/ui/Hero/Hero.tsx
@@ -9,7 +9,7 @@ interface Props {
 }
 
 const Hero: FC<Props> = ({ headline, description, className }) => {
-  const rootClassName = cn('bg-black py-12 px-4 md:px-6', className)
+  const rootClassName = cn('bg-black py-12', className)
   return (
     <div className={rootClassName}>
       <Container>
diff --git a/components/ui/Logo/Logo.tsx b/components/ui/Logo/Logo.tsx
index a864185b1..dfe62e01a 100644
--- a/components/ui/Logo/Logo.tsx
+++ b/components/ui/Logo/Logo.tsx
@@ -6,12 +6,12 @@ const Logo = () => (
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <rect width="32" height="32" rx="16" fill="black" />
+    <rect width="32" height="32" rx="16" fill="var(--bg-secondary)" />
     <path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
-      fill="white"
+      fill="var(--bg-primary)"
     />
   </svg>
 )
diff --git a/components/wishlist/WishlistCard/WishlistCard.module.css b/components/wishlist/WishlistCard/WishlistCard.module.css
index cfdade97c..6c1311952 100644
--- a/components/wishlist/WishlistCard/WishlistCard.module.css
+++ b/components/wishlist/WishlistCard/WishlistCard.module.css
@@ -1,5 +1,5 @@
 .root {
-  @apply grid grid-cols-12 w-full gap-6 px-3 py-6 border-b border-primary-accent;
+  @apply grid grid-cols-12 w-full gap-6 px-3 py-6 border-b border-primary-hover;
 
   &:nth-child(3n + 1) {
     & .productBg {
diff --git a/components/wishlist/WishlistCard/WishlistCard.tsx b/components/wishlist/WishlistCard/WishlistCard.tsx
index ae9add365..f257c2a8e 100644
--- a/components/wishlist/WishlistCard/WishlistCard.tsx
+++ b/components/wishlist/WishlistCard/WishlistCard.tsx
@@ -24,7 +24,7 @@ const WishlistCard: FC<Props> = ({ className, data }) => {
         <p className="mb-4">
           Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
         </p>
-        <button className="py-1 px-3 border border-secondary rounded-md shadow-sm">
+        <button className="py-1 px-3 border border-secondary rounded-md shadow-sm hover:bg-primary-hover">
           Add to cart
         </button>
       </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 8f193a039..6ad7d0975 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -17,6 +17,7 @@ module.exports = {
         'accent-1': '#FAFAFA',
         'accent-2': '#F1F3F5',
         'accent-4': '#888',
+        'accent-8': '#111111',
         violet: '#7928CA',
         pink: '#FF0080',
         cyan: '#50E3C2',
@@ -26,6 +27,7 @@ module.exports = {
         primary: 'var(--bg-primary)',
         secondary: 'var(--bg-secondary)',
         'primary-accent': 'var(--bg-primary-accent)',
+        'primary-hover': 'var(--bg-primary-accent)',
       },
       textColor: {
         base: 'var(--text-primary)',