fix stylings / routes

package-lock.json

@@ -16,6 +16,7 @@
         "react": "^17.0.2",
         "react-bootstrap": "^1.5.2",
         "react-dom": "^17.0.2",
+        "react-google-login": "^5.2.2",
         "react-hook-form": "^7.4.1",
         "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0",
@@ -14626,6 +14627,19 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
       "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
     },
+    "node_modules/react-google-login": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/react-google-login/-/react-google-login-5.2.2.tgz",
+      "integrity": "sha512-JUngfvaSMcOuV0lFff7+SzJ2qviuNMQdqlsDJkUM145xkGPVIfqWXq9Ui+2Dr6jdJWH5KYdynz9+4CzKjI5u6g==",
+      "dependencies": {
+        "@types/react": "*",
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17",
+        "react-dom": "^16 || ^17"
+      }
+    },
     "node_modules/react-hook-form": {
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.4.1.tgz",
@@ -31867,6 +31881,15 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
       "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
     },
+    "react-google-login": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/react-google-login/-/react-google-login-5.2.2.tgz",
+      "integrity": "sha512-JUngfvaSMcOuV0lFff7+SzJ2qviuNMQdqlsDJkUM145xkGPVIfqWXq9Ui+2Dr6jdJWH5KYdynz9+4CzKjI5u6g==",
+      "requires": {
+        "@types/react": "*",
+        "prop-types": "^15.6.0"
+      }
+    },
     "react-hook-form": {
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.4.1.tgz",

package.json

@@ -11,6 +11,7 @@
     "react": "^17.0.2",
     "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.2",
+    "react-google-login": "^5.2.2",
     "react-hook-form": "^7.4.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",

src/component/SearchResults.jsx

 import React from "react";
 import ProductRow from "./ProductRow.jsx";
-import { Table } from "react-bootstrap";
+import { Table, Container } from "react-bootstrap";
 import { deleteProduct } from "../actions/apiRequests";
 import { withRouter } from "react-router";
 import Search from "./Search.jsx";
@@ -27,11 +27,13 @@ class SearchResults extends React.Component {
   render() {
     return (
       <div className="container flex-column d-flex justify-content-center">
-        
+        <div className="container mt-3 d-flex justify-content-between align-items-center">
+
           <h1 id="title" >Search Results</h1>
-          <Search />
-        
+        <div><Search /></div>
+        </div>
         {this.state.results.length > 0 ?
+          <Container id="prod-table" className="mt-3 mx-auto">
           <Table>
             <thead>
               <tr>
@@ -53,6 +55,7 @@ class SearchResults extends React.Component {
               })}
             </tbody>
           </Table>
+          </Container>
           :
           <p>Unable to find any matching products.</p>
         }

src/component/promo_index/PromotionsIndexComponent.jsx

@@ -27,11 +27,11 @@ export default function PromotionIndexComponent () {
 
     return (
         <div>
-            <div className="promo-list-container">
-                <div className="promo-list-container">
-                    <div className="promo-header">
+            
+            <div className="container flex-column d-flex justify-content-center">
+                <div className="container mt-3 d-flex justify-content-between align-items-center">
                         <h1 className="promo-title"> Promotions</h1>
-                        <NavLink className="add-navLink" to='/promos/new'><button className="btn-success">+ New Promotion</button></NavLink>
+                        <NavLink className="add-navLink" to='/promos/new'><button className="btn btn-success">+ New Promotion</button></NavLink>
                     </div>
                     <table className="promo-index-list">
                         <thead className="promo-table-title">
@@ -48,16 +48,16 @@ export default function PromotionIndexComponent () {
                             <th>
                                 Minimum Quanitity
                             </th>
-                            <th>
+                            <th className="row-width">
 
                             </th>
-                            <th>
+                            <th className="row-width">
 
-                            </th>
+                            </th >
                             </tr>
                         </thead>
                         <tbody>
-                        {promoData.length > 0 && promoData.map((promo, key) => {
+                        {promoData.length > 0 ? promoData.map((promo, key) => {
                             return (
                             <tr key={key}>
                             <td>
@@ -77,20 +77,19 @@ export default function PromotionIndexComponent () {
                                     pathname: `/promos/${promo.promotionId}/update`,
                                     state: {promo}
                                     }}>
-                                    <button className="btn-primary">Update</button>
+                                    <button className="btn-color btn btn-primary btn-sm">Update</button>
                                 </NavLink>
                             </td>
                             <td>
-                                <button className="btn-danger btn-sm" onClick={() => deletePromotion(promo.promotionId)}>Delete</button>
+                                <button className="btn btn-danger btn-sm" onClick={() => deletePromotion(promo.promotionId)}>Delete</button>
                             </td>
                             </tr>
                             )
-                        }).reverse() }
+                        }).reverse() : <p>no promotions found.</p>}
                         
                         </tbody>
                     </table>
                 </div>
             </div>
-        </div>
     )
 }

src/component/promo_index/promolistStyle.css

-.promo-container {
+/* .promo-container {
   margin: 30px auto;
   padding: 0 16px;
 }
 .promo-header {
-  background-color: #212529;
   display: flex;
   justify-content: space-between;
   padding-left: 10px;
   padding-right: 10px;
-}
-
+} */
+/* 
 .promo-title {
-  color: white;
   padding: 8px;
+} */
+.promo-index-list {
+  margin-top: 7px;
+}
+.promo-table-title {
+  border-bottom: 1px solid black;
 }
-
 .add-navLink {
   align-self: center;
 }
@@ -24,6 +27,14 @@ table {
   width: 100%;
 }
 
+.row-width {
+  width: 7%;
+}
+
+.btn-color {
+  background-color: #00567D;
+}
+
 td,
 th {
   text-align: left;
@@ -42,10 +53,11 @@ tr:nth-child(even) {
   background-color: #dddddd;
 }
 
-thead th {
+/* thead th {
   background-color: #dddddd;
   height: 35px;
-}
+  /* border-bottom: 1px black; */
+
 
 tr:hover {
   background-color: lightblue;

src/component/promotionforms/PromotionNewFormComponent.jsx

@@ -57,7 +57,7 @@ export default function PromotionNewFormComponent (props) {
                     <input
                         {...register("promotionId", {
                             required: "promotion id is required",
-                            maxLength: { value: 10, message: "You exceeded the maximum value" }
+                            maxLength: { value: 20, message: "You exceeded the maximum value" }
                         })}
                         id="promotionId"
                         className="form-control"

src/component/promotionforms/promoStyle.css

@@ -3,7 +3,7 @@
     margin: 0px auto;
     padding: 50px;
     border-radius: 3px;
-    max-width: 500px;
+    max-width: 700px;
     
 }