updates according comments

branchNotes.txt

@@ -1,10 +1,10 @@
 1.  Move the register form to the "register strand"
 2.  Add a login form for the "login strand"
-3.  header.ejs line 11: Change this from <a> to <button>,  give it onclick="registerObj.display()"
-4.  shared.css line 13: You added a black background color.  This applies to all pages and makes everything unusable.
+v 3.  header.ejs line 11: Change this from <a> to <button>,  give it onclick="registerObj.display()" 
+v 4.  shared.css line 13: You added a black background color.  This applies to all pages and makes everything unusable.
     If you want to change just that page, then go to views/landingPage/landing.css to create style for just that page.
-5.  shared.css lines 325 - 323: You create a .form-background style, but it is not used
-6.  form.ejs line 4:  This should be a button because it shows a different part of the same page.
+v5.  shared.css lines 325 - 323: You create a .form-background style, but it is not used
+v6.  form.ejs line 4:  This should be a button because it shows a different part of the same page.
     Give it onclick="loginObj.display()"
     Then add style to it to make it look like a link if you want that.
 

views/landingPage/landing.css

@@ -80,6 +80,7 @@
         }
 
 /* Login Strand */
+
 #loginStrand{
     display: none;
     flex-direction: column;
@@ -91,23 +92,16 @@
     height: 91.5vh;
 }
 
-    /* #loginStrand form{
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        align-items: center;
-        border: 2px solid rgb(201, 201, 201);
-        background: rgb(240, 252, 255);
-        color: rgb(255, 99, 107);
-        padding: 25px;
-        border-radius: 10px;
-    }
-
-        #loginStrand form > *{
-            margin: 10px 0;
-        } */
-
 /* Register Strand */
+/* Hide the browser's default checkbox */
+.container input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
 #registerStrand{
     display: none;
     flex-direction: column;
@@ -120,6 +114,15 @@
 
     #agreement{
         display: flex;
+        margin-top: 10px;
+    }
+    
+    #checkAgree{
+        width: 24px;
+        height: 24px;
+        margin-right: 17px;
+        margin-bottom: 3px;
+        padding-top: 0px
     }
 
 @media screen and (max-width: 600px){
@@ -139,53 +142,3 @@
         right: 25vw;
     }
 }
-
-/* #posChoiceStrand{
-    display: none;
-    flex-direction: column;
-    align-items: center;
-}
-
-    .cards{
-        display: flex;
-        justify-content: space-around;
-    }
-
-        .cards > *{
-            display: flex;
-            flex-direction: column;
-            justify-content: space-around;
-            text-align: center;
-            width: 300px;
-            height: 200px;
-            border-radius: 25px;
-            border: 2px solid black;
-            padding: 50px;
-            cursor: pointer;
-            margin: 25px;
-            box-shadow: 0 0 20px black;
-            text-decoration: none;
-        }
-
-            .cards > * img{
-                max-height: 75%;
-            }
-
-            .cards > *:hover{
-                box-shadow: 0 0 25px #ff636b;
-            }
-
-            .cards > *:active{
-                box-shadow: 0 0 10px #ff636b;
-            }
-
-            .cards p{
-                margin-top: 25px;
-                font-size: 25px;
-                font-weight: bold;
-                color: black;
-            }
-
-        .cards img{
-            margin: auto 10px;
-        } */

views/landingPage/landing.ejs

@@ -44,40 +44,11 @@
         </div>
 
         <div id="loginStrand">
-            <% include ../shared/form %>
+            <% include ../shared/loginform %>
         </div>
         
         <div id="registerStrand">
-
-            <form action="/merchant/create/none" method="post" onsubmit="registerObj.submit()">
-                <label>Restaurant Name:
-                    <input id="restName" name="name" type="text" required>
-                </label>
-
-                <label>Email:
-                    <input name="email" type="email" required>
-                </label>
-
-                <label>Password:
-                    <input name="password" type="password" required>
-                </label>
-
-                <label>Confirm Password:
-                    <input name="confirmPassword" type="password" required>
-                </label>
-
-                <div id="agreement">
-                    <input id="checkAgree" type="checkbox" onchange="registerObj.agreement()">
-
-                    <p>I agree to the <a href="/information">Privacy Policy</a> and the <a href="/information">Terms and Conditions</a></p>
-                </div>
-
-                <input id="regButton" class="buttonDisabled" type="submit" value="Register">
-            </form>
-
-            <a class="button" href="/cloverlogin">Register with Clover</a>
-
-            <button class="button" onclick="publicObj.display()">Cancel</button>
+            <% include ../shared/registerform %>
         </div>
         
 

views/shared/form.ejs

@@ -1,23 +0,0 @@
-<div>
-    <form onsubmit="basicInfoObj.submit()">
-        <h1> Please Sign Up </h1>
-        <h3 class="link"> Do You need Sign In? </h3>
-        <label id="nameLabel">Name
-            <input class="input" id="regName" type="text">
-        </label>
-
-        <label>Email
-            <input type="text" id="regEmail" type="email" required>
-        </label>
-
-        <label>Password
-            <input type="password" id="regPass" type="password" required>
-        </label>
-
-        <label>Confirm Password
-            <input type="password" id="regConfirmPass" type="password" required>
-        </label>
-
-        <input type="submit" value="Continue">
-    </form>
-</div>

views/shared/header.ejs

@@ -6,8 +6,9 @@
 
     <div class="public-buttons">
 
+        <!-- <button class="button" onclick="loginObj.display()"> Log In </button> -->
         <button class="button" onclick="loginObj.display()"> Log In </button>
-        <a class="button-join link" href="/merchant/new/clover"> Or Join </a>
+        <a class="button-join link" onclick="registerObj.display()"> Or Join </a>
 
     </div>
     

views/shared/loginform.ejs

@@ -0,0 +1,20 @@
+
+<link rel="stylesheet" href="/shared/registerform.css">
+    
+<div>
+    <form onsubmit="basicInfoObj.submit()">
+        <h1> Please Sign In </h1>
+        <h3 class="link" onclick="registerObj.display()"> New Here? Please Sign Up </h3>
+
+        <label>Email
+            <input type="text" id="regEmail" type="email" required>
+        </label>
+
+        <label>Password
+            <input type="password" id="regPass" type="password" required>
+        </label>
+
+                <input id="signIn" class="buttonDisabled" type="submit" value="Sign In">
+    </form>
+</div>
+

views/shared/registerform.css

@@ -0,0 +1,70 @@
+/* The container */
+.container {
+    display: block;
+    position: relative;
+    padding-left: 35px;
+    margin-bottom: 12px;
+    cursor: pointer;
+    font-size: 16px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+  
+  /* Hide the browser's default checkbox */
+  .container input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+  
+  /* Create a custom checkbox */
+  .checkmark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 24px;
+    width: 24px;
+    border: 1px solid#ccc;
+    border-radius: 4px;
+    background-color: rgb(255, 255, 255);
+  }
+  
+  /* On mouse-over, add a grey background color */
+  .checkmark:hover {
+    background-color: #ccc;
+  }
+  
+  /* When the checkbox is checked, add a blue background */
+  .container input:checked ~ .checkmark {
+    background-color: #5A6F7D;
+    border: 1px solid#5A6F7D;
+  }
+  
+  /* Create the checkmark/indicator (hidden when not checked) */
+  .checkmark:after {
+    content: "";
+    position: absolute;
+    display: none;
+  }
+  
+  /* Show the checkmark when checked */
+  .container input:checked ~ .checkmark:after {
+    display: block;
+  }
+  
+  /* Style the checkmark/indicator */
+  .container .checkmark:after {
+    left: 9px;
+    top: 5px;
+    width: 5px;
+    height: 10px;
+    border: solid white;
+    border-width: 0 3px 3px 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }

views/shared/registerform.ejs

@@ -0,0 +1,39 @@
+
+<link rel="stylesheet" href="/shared/registerform.css">
+    
+<div>
+    <form onsubmit="basicInfoObj.submit()">
+        <h1> Please Sign Up </h1>
+        <h3 class="link" onclick="loginObj.display()"> Or Register with Clover </h3>
+        <label id="nameLabel">Restaurant Name
+            <input class="input" id="regName" type="text">
+        </label>
+
+        <label>Email
+            <input type="text" id="regEmail" type="email" required>
+        </label>
+
+        <label>Password
+            <input type="password" id="regPass" type="password" required>
+        </label>
+
+        <label>Confirm Password
+            <input type="password" id="regConfirmPass" type="password" required>
+        </label>
+
+        <!-- <input type="submit" value="Continue"> -->
+        <div id="agreement">
+            <label class="container">
+                <input type="checkbox">
+                <span class="checkmark"></span>
+
+                <p style="padding-top: 5px; padding-left: 7px;">I agree to the 
+                    <a class="link" href="/information">Privacy Policy</a> and the 
+                    <a class="link" href="/information">Terms and Conditions</a></p>
+
+            </label>   
+        </div> 
+            <input id="regButton" class="buttonDisabled" type="submit" value="Register">
+    </form>
+</div>
+

views/shared/shared.css

@@ -10,7 +10,6 @@ body{
     font-family:'Saira',sans-serif;
     color: rgb(0, 27, 45);
     min-height: 100vh;
-    background-color: rgb(0, 27, 45);
 }
 
 /* General style that should apply to all pages */
@@ -64,7 +63,7 @@ form{
     margin: 10px;
     background: rgb(240, 252, 255);
     font-size: 16px;
-    margin-top: 80px;
+    margin-top: 40px;
     width: 550px;
     justify-content: space-evenly;
     height: auto;
@@ -315,22 +314,15 @@ strand-selector{
 
     .link {
         cursor: pointer;
+        color: gray;
+        text-decoration: none;
     }
     
     .link:hover {
         color: #ff636b;
+        text-decoration: underline;
         cursor: pointer;
     }
-    
-    .form-background{
-        background-image: url("/shared/images/backgroundImg01.jpg");
-        background-repeat: no-repeat;
-        background-size: cover;
-        height: -webkit-fill-available;
-        width: 100%;
-        color: rgb(0, 27, 45);
-        margin-bottom: 136px;
-    }    
 
 /* Footer Partial */
 .spacer{