feat: add visual user (#105)

- create a new user called “visual_user”
- Take 2 of the cards and right-justify the Title
- Deliberately misalign the Add to Cart button
- Move the shopping cart icon to the left, enough to be noticeable
- Change one of the images to the pug (preferably a card that hasn’t been altered yet)
- Leave everything else as-is, so that our tool will pick up everything
- On this screen, shift the Checkout button
- fix linting
- add tests

Author: wswebcreation

package-lock.json

@@ -1,5 +1,5 @@
 const BrokenComponent = () => {
-    throw new Error('This component failed to render!');
+  throw new Error("This component failed to render!");
 };
 
 export default BrokenComponent;

src/components/BrokenComponent.jsx

@@ -20,13 +20,13 @@
 }
 
 .btn_secondary {
-  border: 1px solid #E2231A;
+  border: 1px solid #e2231a;
   background-color: #fff;
-  color: #E2231A;
+  color: #e2231a;
 }
 
 .btn_action {
-  background-color: #3DDC91;
+  background-color: #3ddc91;
   border-radius: 4px;
   color: #132322;
 }
@@ -57,6 +57,17 @@
   width: 100%;
 }
 
+.btn_inventory_misaligned {
+  position: absolute;
+  right: -20px;
+}
+
+.btn_visual_failure {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
 @media only screen and (max-width: 900px) {
   .btn_small,
   .btn_medium,

src/components/Button.css

@@ -1,5 +1,5 @@
 .cart_item {
-  border: 1px solid #EDEDED;
+  border: 1px solid #ededed;
   border-radius: 8px;
   background: #fff;
   display: flex;
@@ -8,7 +8,7 @@
 }
 
 .cart_quantity {
-  border: 1px solid #EDEDED;
+  border: 1px solid #ededed;
   box-sizing: border-box;
   text-align: center;
   font-size: 14px;

src/components/CartItem.css

@@ -4,10 +4,10 @@
   }
 }
 .menu-item {
-  border-bottom: 1px solid #EDEDED;
-  color: #18583A;
+  border-bottom: 1px solid #ededed;
+  color: #18583a;
   display: inline-block;
-  font-family: 'DM Mono', 'sans-serif';
+  font-family: "DM Mono", "sans-serif";
   font-size: 16px;
   margin-bottom: 7px;
   text-decoration: none;
@@ -16,7 +16,7 @@
 }
 
 .menu-item:hover {
-  color: #3DDC91;
+  color: #3ddc91;
 }
 
 /* ===============Burger button styling==================== */

src/components/DrawerMenu.css

@@ -1,44 +1,44 @@
-import React from 'react';
-import './Footer.css';
+import React from "react";
+import "./Footer.css";
 
 const SwagLabsFooter = () => {
   return (
     <footer className="footer">
       {/* <div className="footer_container"> */}
-        <ul className="social">
-          <li className="social_twitter">
-            <a
-              href="https://twitter.com/saucelabs"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Twitter
-            </a>
-          </li>
-          <li className="social_facebook">
-            <a
-              href="https://www.facebook.com/saucelabs"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Facebook
-            </a>
-          </li>
-          <li className="social_linkedin">
-            <a
-              href="https://www.linkedin.com/company/sauce-labs/"
-              target="_blank"
-              rel="noreferrer"
-            >
-              LinkedIn
-            </a>
-          </li>
-        </ul>
+      <ul className="social">
+        <li className="social_twitter">
+          <a
+            href="https://twitter.com/saucelabs"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Twitter
+          </a>
+        </li>
+        <li className="social_facebook">
+          <a
+            href="https://www.facebook.com/saucelabs"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Facebook
+          </a>
+        </li>
+        <li className="social_linkedin">
+          <a
+            href="https://www.linkedin.com/company/sauce-labs/"
+            target="_blank"
+            rel="noreferrer"
+          >
+            LinkedIn
+          </a>
+        </li>
+      </ul>
 
-        <div className="footer_copy">
-          &copy; {new Date().getFullYear()} Sauce Labs. All Rights Reserved.
-          Terms of Service | Privacy Policy
-        </div>
+      <div className="footer_copy">
+        &copy; {new Date().getFullYear()} Sauce Labs. All Rights Reserved. Terms
+        of Service | Privacy Policy
+      </div>
       {/* </div> */}
     </footer>
   );

src/components/Footer.jsx

@@ -18,7 +18,7 @@
 }
 
 .primary_header .app_logo {
-  font-family: DM Mono, 'sans-serif';
+  font-family: DM Mono, "sans-serif";
   font-size: 24px;
   line-height: 48px;
   text-align: center;
@@ -32,6 +32,13 @@
   top: 10px;
   right: 20px;
 }
+.primary_header .shopping_cart_container.visual_failure {
+  height: 40px;
+  width: 40px;
+  position: absolute;
+  top: 40px;
+  right: 205px;
+}
 
 .header_secondary_container {
   background: #fff;
@@ -46,7 +53,7 @@
 
 .header_secondary_container .title {
   color: #132322;
-  font-family: 'DM Sans', sans-serif;
+  font-family: "DM Sans", sans-serif;
   font-size: 18px;
   font-weight: 500;
   line-height: 48px;