first commit

views/landingPage/landing.css

@@ -90,7 +90,7 @@
     height: 91.5vh;
 }
 
-    #loginStrand form{
+    /* #loginStrand form{
         display: flex;
         flex-direction: column;
         justify-content: space-between;
@@ -104,7 +104,7 @@
 
         #loginStrand form > *{
             margin: 10px 0;
-        }
+        } */
 
 /* Register Strand */
 #registerStrand{
@@ -139,7 +139,7 @@
     }
 }
 
-#posChoiceStrand{
+/* #posChoiceStrand{
     display: none;
     flex-direction: column;
     align-items: center;
@@ -187,4 +187,4 @@
 
         .cards img{
             margin: auto 10px;
-        }
+        } */

views/landingPage/landing.ejs

@@ -14,12 +14,6 @@
 
         <div id="publicStrand">
             <div class="main-background">
-                <div class="public-buttons">
-                    <button class="button" onclick="loginObj.display()">Log In</button>
-
-                    <button class="button" onclick="registerObj.display()">Join</button>
-                </div>
-
                 <div class="logo-text">
                     <img src="/shared/images/logoWithText.png" alt="Subline">
 
@@ -50,26 +44,9 @@
         </div>
 
         <div id="loginStrand">
-            <form action="/login" method="post">
-                <h3>Log In</h3>
-                
-                <label>Email:
-                    <input name="email" type="email" required>
-                </label>
-
-                <label>Password:
-                    <input name="password" type="password" required>
-                </label>
-                
-                <div>
-                    <input class="button" type="submit" value="Log In">
-
-                    <button class="button" onclick="loginObj.cancel()">Cancel</button>
-                </div>
-            </form>
-        </div>
-
+            <% include ../shared/form %></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>

views/shared/form.ejs

@@ -0,0 +1,23 @@
+<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

@@ -1,10 +1,18 @@
 <div class="header">
     <a class="logo" href="http://www.thesubline.com" >
         <img src="/shared/images/logo.png" alt="Subline">
-        <h1>SUBLINE</h1>
+        <div class='header-logo'> SUBLINE </div>
     </a>
+
+    <div class="public-buttons">
+
+        <button class="button" onclick="loginObj.display()"> Log In </button>
+        <a class="button-join link" href="/merchant/new/clover"> Or Join </a>
+
+    </div>
     
-    <% if(locals.merchant || locals.data){ %>
+    <% if(locals.merchant){ %>
         <a class="logout" href="/logout">Log out</a>
     <% } %>
+
 </div>

views/shared/shared.css

@@ -10,6 +10,7 @@ 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 */
@@ -41,22 +42,26 @@ table{
         background: rgb(240, 252, 255);
     }
 
-form{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    border: 2px solid rgb(0, 27, 45);
-    padding: 25px;
-    border-radius: 10px;
-    margin: 10px;
-    background: rgb(240, 252, 255);
-    box-shadow: 1px 1px 1px rgb(0, 27, 45);
-}
-
-    form > *{
+    form{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        border: 2px solid rgb(0, 27, 45);
+        padding: 50px;
+        border-radius: 10px;
         margin: 10px;
+        background: rgb(240, 252, 255);
+        font-size: 16px;
+        margin-top: 80px;
+        width: 550px;
+        justify-content: space-evenly;
+        height: auto;
     }
 
+    /* form > *{
+        margin: 10px;
+    } */
+
 .buttonBox{
     display: flex;
     justify-content: space-between;
@@ -68,25 +73,34 @@ form{
     }
 
 .button{
-    background: none;
-    font-family:'Saira',sans-serif;
-    border: 5px solid rgb(255, 99, 107);
+    display: initial;
+    background: rgb(255, 99, 107);
+    border: none;
     text-decoration: none;
-    border-radius: 10px;
-    padding: 5px;
-    color: rgb(0, 27, 45);
+    border-radius: 4px;
+    padding: 10px 29px;
+    color: white;
     cursor: pointer;
-    font-size: 20px;
-    font-weight: bold;
-    box-shadow: 2px 2px 2px black;
+    font-size: 25px;
+    /* box-shadow: 2px 2px 2px black; */
     transition: 0.3s;
     text-align: center;
+    font-size: 18px;
+    cursor: pointer;
+    font-weight: 500;
+    margin-right: 33px;
+} 
+
+.button:hover{
+    background: rgb(243, 77, 86);
+    color: white;
 }
 
-    .button:hover{
-        background: rgb(0, 27, 45);
-        color: rgb(240, 252, 255);
-    }
+.button-join {
+    font-size: medium;
+    color:white;
+    text-decoration: blink;
+}
 
 .button-small{
     background: none;
@@ -102,6 +116,12 @@ form{
     transition: 0.3s; 
 }
 
+.public-buttons {
+    position: inherit;
+    align-self: center;
+    margin-right: 39px;
+}
+
 .buttonBox{
     display: flex;
     justify-content: space-around;
@@ -132,6 +152,76 @@ form{
     border-color: red;
 }
 
+input[type=text], select {
+    width: 100%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+    padding-bottom: 16px;
+    font-size: 16px;
+
+  }
+
+  
+  
+  /* input[type=submit], input[type=password] {
+    width: 100%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    /* background-color: rgb(255, 99, 107); */
+    /* border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 20px; */
+  /* } */
+
+  input[type=text], input[type=password], select {
+    width: 100%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+    font-size: 16px;
+  }
+  
+  input[type=submit] {
+    width: 100%;
+    background-color:rgb(255, 99, 107);
+    color: white;
+    padding: 14px 20px;
+    margin: 8px 0;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 22px;
+    margin-top: 30px;
+  }
+
+  input[type=submit]:hover {
+    background: rgb(243, 77, 86);
+    color: white;
+  }
+
+  input[type=text]:focus, input[type=password]:focus {
+    border: 2px solid #555;
+    outline: none;
+  }
+
+
+  input[type=button] {
+    background-color: rgb(255, 99, 107);
+  }
+
+  input[type=button]:hover {
+    background-color:rgb(0, 27, 45);
+  }
+
+
 .strand, .action{
     display: none;
 }
@@ -174,13 +264,20 @@ strand-selector{
         display: flex;
         align-items: center;
         text-decoration: none;
-        margin-left: 5px;
+        margin-left: 20px;
+    }
+
+    .header-logo{
+        display: inline-block;
+        color: rgb(255, 99, 107);
+        font-size: 25px;
+        font-weight: 600;
     }
 
     .header img{
         display: inline-block;
-        max-height: 65px;
-        margin: 5px;
+        max-height: 40px;
+        margin: 15px;
         text-align: center;
     }
 
@@ -222,7 +319,28 @@ strand-selector{
         color: white;
     }
 
+    .link {
+        cursor: pointer;
+    }
+    
+    .link:hover {
+        color: #ff636b;
+        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-top: 83px; */
+        margin-bottom: 136px;
+    }    
+
 /* Footer Partial */
+
 .spacer{
     flex: 1;
 }
@@ -254,4 +372,20 @@ strand-selector{
         overflow: hidden;
         text-overflow: ellipsis;
     }
+}
+
+h1 {
+    text-align: center;
+    padding-bottom: 13px;
+
+}
+
+h3 {
+    text-align: center;
+    font-weight: 500;
+    color: gray;
+}
+
+label {
+    margin-top:20px ;
 }