Implemented header with login and language selector

deskpro · Aug 10, 2019 · 2d7ac2d · 2d7ac2d
1 parent 1f52a08
commit 2d7ac2d
Show file tree

Hide file tree

Showing 5 changed files with 130 additions and 5 deletions.
diff --git a/packages/portal-style/src/components/_forms.scss b/packages/portal-style/src/components/_forms.scss
@@ -142,5 +142,16 @@
     height: 40px;
     border-radius: 4px;
   }
+}
+
+.dp-po-form-btntext {
+  color: $grey-darkest;
+  font-size: $p4-font-size;
+  display: table;
+  margin-top: 10px;
 
+  &:hover {
+    text-decoration: none;
+    color: $brand-primary;
+  }
 }
diff --git a/packages/portal-style/src/modules/_header.scss b/packages/portal-style/src/modules/_header.scss
@@ -33,4 +33,97 @@
     height: 100%;
     justify-content: flex-end;
   }
+
+  .dp-po-user {
+    position: relative;
+    margin-left: 30px;
+
+    &:before {
+      content: '';
+      height: 100%;
+      width: 1px;
+      background: $grey-light;
+      position: absolute;
+    }
+
+    &-login {
+      font-weight: 700;
+      color: $grey-darkest;
+      font-size: $p2-font-size;
+      padding: 10px 30px;
+      display: inline-block;
+
+      &:hover {
+        color: $grey;
+        text-decoration: none;
+      }
+    }
+
+    &-dropdown {
+      padding: 20px;
+
+      .dp-po-social-login {
+        display: block;
+
+        .dp-po-oauth {
+          margin: 0;
+        }
+      }
+
+      .dp-po-divider {
+        display: block;
+
+        &-text {
+          margin: 20px 0;
+          text-align: center;
+
+          &:before,
+          &:after {
+            height: 2px;
+            width: 100px;
+            top: 10px;
+            left: 0;
+          }
+
+          &:after {
+            left: auto;
+            right: 0;
+          }
+        }
+      }
+
+      &-title {
+        padding: 0;
+        font-size: $p4-font-size;
+        margin: 0 0 20px;
+      }
+    }
+  }
+
+  .dp-po-language {
+    margin-right: 30px;
+
+    &-link {
+      display: flex;
+      align-items: center;
+      width: 120px;
+      justify-content: space-between;
+      color: $grey-darkest;
+      font-size: $p2-font-size;
+
+      &:hover {
+        text-decoration: none;
+        color: $brand-primary;
+      }
+
+      .dp-po-icon {
+        color: $brand-primary;
+        font-size: 20px;
+      }
+    }
+
+    .dropdown-item {
+      font-size: $p2-font-size;
+    }
+  }
 }
diff --git a/packages/portal-style/website/demos/_partials/_comments-add-form.ejs b/packages/portal-style/website/demos/_partials/_comments-add-form.ejs
@@ -21,7 +21,7 @@
         </div>
         <span>or</span>
         <div class="dp-po-drag">
-          <i class="dp-po-icon far fa-expand-arrows"></i>
+          <i class="dp-po-icon far fa-bring-forward"></i>
           Drag and drop
         </div>
       </div>

diff --git a/packages/portal-style/website/demos/_partials/_form-login.ejs b/packages/portal-style/website/demos/_partials/_form-login.ejs
@@ -12,5 +12,6 @@
       <label class="form-check-label" for="loginCheck">Stay logged in</label>
     </div>
     <button type="submit" class="btn btn-primary btn-lg">Log in</button>
+    <a href="" class="dp-po-form-btntext">Need a password reminder?</a>
   </form>
 </section>
diff --git a/packages/portal-style/website/demos/_partials/_header.ejs b/packages/portal-style/website/demos/_partials/_header.ejs
@@ -12,14 +12,34 @@
         </div>
         <div class="col-sm-6">
           <div class="dp-po-header-right">
-            <div class="dp-po-country-selector">
-
+            <div class="dp-po-language">
+              <a class="dp-po-language-link" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <img src="/portal-components/portal-style/static/img/docs/flag-uk.jpg" /> English
+                <i class="dp-po-icon far fa-angle-down"></i>
+              </a>
+              <div class="dropdown-menu dropdown-menu-left">
+                <a class="dropdown-item" href="#">
+                  <img class="dp-po-icon" src="/portal-components/portal-style/static/img/docs/flag-germany.jpg" />
+                  German
+                </a>
+                <a class="dropdown-item" href="#">
+                  <img class="dp-po-icon" src="/portal-components/portal-style/static/img/docs/flag-france.jpg" />
+                  French
+                </a>
+              </div>
             </div>
             <div class="dp-po-header-button">
               <a href="javascript:void(0)" class="btn btn-primary" title="Contact Us">Contact us</a>
             </div>
-            <div class="dp-po-user-dropdown">
-
+            <div class="dp-po-user">
+              <a href="javascript:void(0)" class="dp-po-user-login" data-toggle="dropdown" aria-haspopup="true"
+                aria-expanded="false">Login</a>
+              <div class="dropdown-menu dropdown-menu-right dp-po-user-dropdown">
+                <h4 class="dropdown-item-text dp-po-user-dropdown-title">New to Deskpro? <a href="">Register for an
+                    account</a></h4>
+                <%- include('_form-login.ejs'); %>
+                <%- include('_form-login-social.ejs'); %>
+              </div>
             </div>
           </div>