Merge pull request #21 from Capstone-Projects-2022-Spring/BAZ-119-consistent-theming-for-shopping-lists

Baz 119 consistent theming for shopping lists

Author: linlioechsle

src/Components/Carousel.jsx

@@ -37,19 +37,19 @@ const CAROUSEL = () => {
                     transitionDuration={500}
 
                 >
-                    <div className='bg-purple-100 mx-2 max-w-sm h-[200px] rounded p-2 flex items-center justify-center flex-col space-y-3 min-h-[400px]'>
+                    <div className='bg-purple-100 mx-2 max-w-sm h-[200px] rounded p-2 flex items-center justify-center flex-col space-y-3 '>
                         <div className='text-lg uppercase'>Purpose</div>
                         <div className='text-sm text-center'>Bringing your favorite stores in one place.</div>
                     </div>
 
-                    <div className='bg-purple-100 mx-2 max-w-sm h-[200px] rounded p-2 flex flex-col items-center justify-center  space-y-3 min-h-[400px]'>
+                    <div className='bg-purple-100 mx-2 max-w-sm h-[200px] rounded p-2 flex flex-col items-center justify-center  space-y-3'>
                         <div className='text-lg uppercase'>3 Simple Steps</div>
                         <div className='text-sm text-center'>1. Check Savings.</div>
                         <div className='text-sm text-center'>2. Manage Lists.</div>
                         <div className='text-sm text-center'>3. EZ Product Search.</div>
 
 
-                    </div><div className='bg-purple-100 mx-2 max-w-sm h-[200px] rounded p-2 flex flex-col items-center justify-center space-y-3 min-h-[400px]'>
+                    </div><div className='bg-purple-100 mx-2 max-w-sm h-[200px] rounded p-2 flex flex-col items-center justify-center space-y-3 '>
                         <div className='text-lg uppercase'>Contact</div>
                         <div className='text-sm text-center'>Email: bazaara@email.com</div>
                     </div>

src/Components/Footer/Footer.jsx

@@ -5,7 +5,7 @@ function Footer() {
     const currentYear = new Date().getFullYear();
 
     return (
-        <footer className='flex flex-col bg-zinc-900 font-regular text-white text-center p-3 sticky bottom-0'>
+        <footer className='flex flex-col bg-zinc-900 font-regular text-white text-center p-3 mt-4 sticky bottom-0'>
 
                 <div>BAZAARA</div>
                 <div className='text-xs'> SAVE time, money, and energy.</div>

src/Components/Pages/ShoppingLists/ShoppingListSelection.js

@@ -27,15 +27,15 @@ export class ShoppingListSelection extends React.Component {
     render() {
         return(
 
-            <section className="">
+            <section className="flex flex-col items-start space-y-2 bg-purple-200 justify-start">
                 <h1>Shopping Lists</h1>
-                <button onClick={(e) => this.props.togglePop(e)}>+ Create New List</button>
+                <button onClick={(e) => this.props.togglePop(e)} className="px-2 py-1 text-sm rounded-full text-white bg-purple-600">+ Create New List</button>
                 {this.props.seen ?    
                     <div className="modal">
                         <div className="modal_content">
                             <span className="close"></span>
 
-                                    <input type="text" placeholder="New Shopping List Name" onChange={(e) => this.props.handleInput(e)}/>
+                                    <input type="text" className='px-2 text-sm w-48 mr-0 py-1 rounded-full  bg-gray-100 border-2 border-2 border-purple-300' placeholder="New Shopping List Name" onChange={(e) => this.props.handleInput(e)}/>
                                 <br />
                                 <button onClick={(e) => this.props.handleAddList(this.props.value, e)}>Add</button>
 

src/Components/Pages/ShoppingLists/ShoppingListView.js

@@ -156,12 +156,12 @@ export class ShoppingListView extends React.Component {
         return(
             <>
             <Navbar />
-            <section className='container'>
-               <section className='viewer'>
+            <section className="bg-purple-200 p-3">
+               <section className='bg-purple-200 flex'>
                <div className='listnamescolumn'>
                         <ShoppingListSelection changeListHandler={this.changeListHandler} handleAddList={this.handleAddList} lists={this.state.lists} handleInput={this.handleInput} value={this.state.value} togglePop={this.togglePop} seen={this.state.seen}/>
                     </div>
-                    <div className='productlistcolumn'>
+                    <div className='productlistcolumn bg-purple-200'>
                         <button onClick={this.handleAddProduct}>+ Add a Product</button>
                         <ShoppingListDisplay displayIndex={this.state.listIndex} lists={this.state.lists} currentList={this.state.currentList} removeProduct={this.handleRemoveProduct} productIndex={this.state.productIndex}/>
 

src/Components/Pages/ShoppingLists/styles.css

@@ -18,7 +18,7 @@
     height: 90%;
 
     margin: 20px auto;
-    background-color: #dd7e7e;
+    /* background-color: #dd7e7e; */
     border-radius: 30px;
 }
 
@@ -29,7 +29,7 @@
 
 
   margin: 20px auto;
-  background-color: #dd7e7e;
+  /* background-color: #dd7e7e; */
   overflow-x: hidden;
   overflow-y: auto;
 }
@@ -41,7 +41,7 @@
 
 
   margin: 20px auto;
-  background-color: #dd7e7e;
+  /* background-color: #dd7e7e; */
   overflow-x: hidden;
   overflow: auto;
 }