styling changes for custom button to invert colors for shop list items

Author: AdityaKumawat97

src/components/cart-dropdown/cart-dropdown.styles.scss

@@ -19,6 +19,7 @@
     }
 
     button {
+        width: 100%;
         margin-top: auto;
     }
 }

src/components/collection-item/collection-item.component.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import CustomButton from '../custom-button/custom-button.component'
 import './collection-item.styles.scss'
 export default function CollectionItem({ id, name, price, imageUrl }) {
     return (
@@ -12,6 +13,7 @@ export default function CollectionItem({ id, name, price, imageUrl }) {
                 <span className="name">{name}</span>
                 <span className="price">{price}</span>
             </div>
+            <CustomButton inverted> Add to Cart </CustomButton>
         </div>
     )
 }

src/components/collection-item/collection-item.styles.scss

@@ -1,33 +1,51 @@
 .collection-item {
-    width: 22%;
+  width: 22%;
+  display: flex;
+  flex-direction: column;
+  height: 350px;
+  align-items: center;
+  position: relative;
+
+  &:hover {
+    .image{
+      opacity: 0.8;
+    }
+    .custom-button {
+      display: block;
+      opacity: 0.85;
+    }
+  }
+
+  .image {
+    width: 100%;
+    height: 95%;
+    background-size: cover;
+    background-position: center;
+    margin-bottom: 5px;
+  }
+  .custom-button {
+    width: 80%;
+    opacity: 0.7;
+    position: absolute;
+    top: 255px;
+    border: none;
+    display: none;
+  }
+
+  .collection-footer {
+    width: 100%;
+    height: 5%;
     display: flex;
-    flex-direction: column;
-    height: 350px;
-    align-items: center;
-  
-    .image {
-      width: 100%;
-      height: 95%;
-      background-size: cover;
-      background-position: center;
-      margin-bottom: 5px;
+    justify-content: space-between;
+    font-size: 18px;
+
+    .name {
+      width: 90%;
+      margin-bottom: 15px;
     }
-  
-    .collection-footer {
-      width: 100%;
-      height: 5%;
-      display: flex;
-      justify-content: space-between;
-      font-size: 18px;
-  
-      .name {
-        width: 90%;
-        margin-bottom: 15px;
-      }
-  
-      .price {
-        width: 10%;
-      }
+
+    .price {
+      width: 10%;
     }
   }
-  
+}

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

@@ -1,9 +1,9 @@
 import React from 'react'
 import './custom-button.styles.scss'
 
-export default function CustomButton({ children, isGoogleSignIn, ...otherProps }) {
+export default function CustomButton({ children, isGoogleSignIn, inverted, ...otherProps }) {
     return (
-        <button className={`${isGoogleSignIn ? 'google-sign-in' : ''} custom-button`} {...otherProps}>
+        <button className={`${inverted ? 'inverted' : ''} ${isGoogleSignIn ? 'google-sign-in' : ''} custom-button`} {...otherProps}>
             {children}
         </button >
     )

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

@@ -14,6 +14,8 @@
     border: none;
     cursor: pointer;
     border-radius: 3px;
+    display: flex;
+    justify-content: center;
     &:hover {
         background-color: white;
         color: black;
@@ -28,4 +30,14 @@
             border: none;
         }
     }
+    &.inverted {
+        background-color: white;
+        color: black;
+        border: 1px solid black;
+        &:hover {
+            background-color: black;
+            color: white;
+            border: none;
+        }
+    }
 }