minor

public/css/skin.css

@@ -0,0 +1,456 @@
+@font-face {
+  font-family: 'Euclid';
+  src: url('euclid/EuclidCircularA-Regular.woff');
+}
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  width: 100%;
+  font-family: 'Euclid';
+  /* background-color: #FAFAFA; */
+}
+footer {
+  margin-top: auto;
+}
+:root {
+  --pry-color: #5AC8FA;
+  --pry-dark-color: #08415C;
+  --sec-color: #FDE1AF;
+}
+::-moz-selection { background: var(--pry-color); color: #fff; }
+::selection { background: var(--pry-color); color: #fff; }
+.logo {
+  width: 90%;
+}
+nav.navbar {
+  width: 100%;
+  border-bottom: 1px solid #eee;
+  background-color: #fff;
+  z-index: 100;
+  padding: 0;
+}
+nav .container-fluid{
+  height: 60px;
+  /* padding: 0 50px; */
+}
+.navbar-nav {
+  margin-left: 240px;
+  margin-bottom: 0;
+}
+.navbar.navBarWeb {
+  height: 60px;
+  box-shadow: 0px 6px 4px rgba(43, 67, 80, 0.01);
+  border-bottom: none;
+}
+.navbar-nav li{
+  display: inline;
+  padding-left: 10px;
+  font-size: 16px;
+  line-height: 20px;
+  text-transform: capitalize;
+}
+#navBarWeb li {
+  padding-right: 20px;
+  padding-left: 0;
+  font-size: 17px;
+  font-weight: 400;
+}
+.navbar-nav li a {
+  color: #000000;
+  font-weight: 400;
+  border-bottom:1px solid rgba(0,0,0,0);
+  transition: 0.5s;
+}
+.navbar-nav li a:hover {
+  color: var(--pry-color);
+  transition: 0.5s;
+}
+.nav-item {
+  position: relative;
+}
+.nav-item.active::after {
+  content: url('/img/dashboard/active_link.svg');
+  position: absolute;
+  right: 54%;
+  bottom:-8px;
+}
+.nav-item a {
+  color: var(--pry-dark-color);
+}
+.nav-item a:hover, .nav-item.active a {
+  color: var(--pry-color);
+}
+a:hover {
+  text-decoration: none;
+}
+.search-form {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.search-field::placeholder {
+  color: #8E8E93;
+  font-weight: 200;
+}
+.search-field, .search-field:focus {
+  border:none;
+  outline: none;
+  border-left:1px solid #eee;
+  padding: 12px;
+  width: 350px;
+}
+.submit-search {
+  height: 42px;
+  width: 42px;
+  border-radius: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border:none;
+  background-color: var(--pry-color);
+}
+.submit-search:hover {
+  background-color: var(--pry-dark-color);
+  transition: 0.4s;
+}
+.user {
+  position: relative;
+  height: 40px;
+}
+.user::after {
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  content: "\f111";
+  font-size: 15px;
+  position: absolute;
+  bottom:-8px;
+  left:45px;
+  color:#34C759;
+  border-radius: 100%;
+}
+.flex-row {
+  display: flex;
+  justify-content: space-between;
+}
+.flex-inner-row {
+  display: flex;
+  justify-content: space-between;
+}
+.flex-inner-row > div {
+  width: 50%;
+}
+.custom-card {
+  background-color: #ffffff;
+  box-shadow: 0px 100px 80px rgba(76, 97, 110, 0.07), 0px 41.7776px 33.4221px rgba(76, 97, 110, 0.030149), 0px 22.3363px 17.869px rgba(76, 97, 110, 0.0134937), 0px 12.5216px 10.0172px rgba(76, 97, 110, 0.00523753), 0px 6.6501px 5.32008px rgba(76, 97, 110, 0.00118705);
+  padding: 30px;
+  position: relative;
+}
+.custom-card.overflow {
+  overflow: auto;
+}
+[moe] {
+  display: block;
+}
+.table-wrap {
+  padding: 0 !important;
+}
+.table-wrap table {
+  table-layout: fixed;
+}
+.custom-card th {
+  color: #8E8E93;
+  border:none;
+  vertical-align: inherit !important;
+  font-weight: 500;
+  font-size: 15px;
+  line-height: 20px;
+}
+.custom-card td {
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 19px;
+}
+.custom-card h4 {
+  font-weight: 500;
+  font-size: 34px;
+  line-height: 41px;
+  letter-spacing: 0.374px;
+}
+.flex-stats {
+  display: flex;
+  align-items: center;
+}
+.flex-stats div {
+  margin-left: 12px;
+}
+.flex-stats h4 {
+  font-weight: 600;
+  font-size: 44px;
+  line-height: 41px;
+  letter-spacing: 0.35px;
+}
+.text-purple {
+  color: #5856D6;
+}
+.text-blue{
+  color: var(--pry-color);
+}
+.text-green{
+  color: #34C759;
+}
+.text-red{
+  color: #FF3B30;
+}
+.text-orange{
+  color: #FF9F0A;
+}
+.hidden, .mobile, .tab, .sm-screen, .tab-search {
+  display: none;
+}
+
+.btn-pry {
+  background-color: var(--pry-dark-color);
+  color: #fff;
+  padding: 7px 30px;
+}
+.btn-pry:hover {
+  background-color: var(--pry-color);
+  color: #fff;
+}
+.pry-sm {
+  padding: 7px 20px;
+}
+.flex-links {
+  display: flex;
+  justify-content: space-between;
+}
+.flex-links a {
+  width: 100%;
+  color: #000000;
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 27px;
+}
+.flex-links a:not(:last-child) {
+  margin-right: 20px;
+}
+.flex-links a:not(:first-child) {
+  margin-left: 20px;
+}
+.flex-links a::before {
+  margin-right: 10px;
+}
+.flex-links .onboarded::before {
+  content: url('/img/dashboard/onboarded.svg');
+}
+.flex-links .pending::before {
+  content: url('/img/dashboard/pending.svg');
+}
+.flex-links .ineligible::before {
+  content: url('/img/dashboard/ineligible.svg');
+}
+.flex-links .onboarded.active::before {
+  content: url('/img/dashboard/onboarded-active.svg');
+}
+.flex-links .pending.active::before {
+  content: url('/img/dashboard/pending-active.svg');
+}
+.flex-links .ineligible.active::before {
+  content: url('/img/dashboard/ineligible-active.svg');
+}
+.flex-links .onboarded.active {
+  background-color: #34C759;
+}
+.flex-links .pending.active {
+  background-color: #FF9F0A;
+}
+.flex-links .ineligible.active {
+  background-color: #FF3B30;
+}
+.flex-links a.active {
+  filter: drop-shadow(0px 100px 80px rgba(190, 190, 190, 0.07)), drop-shadow(0px 41.7776px 33.4221px rgba(190, 190, 190, 0.0503198)), drop-shadow(0px 22.3363px 17.869px rgba(190, 190, 190, 0.0417275)), drop-shadow(0px 12.5216px 10.0172px rgba(190, 190, 190, 0.035)), drop-shadow(0px 6.6501px 5.32008px rgba(190, 190, 190, 0.0282725)), drop-shadow(0px 2.76726px 2.21381px rgba(190, 190, 190, 0.0196802));
+}
+.flex-links .onboarded h4 {
+  color: #34C759;
+}
+.flex-links .pending h4 {
+  color: #FF9F0A;
+}
+.flex-links .ineligible h4 {
+  color: #FF3B30;
+}
+.flex-links a.active h4, .flex-links a.active {
+  color: #fff;
+}
+.patient-avatar {
+  height: 40px;
+  width: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #eee;
+  box-shadow: 0px 100px 80px rgba(76, 97, 110, 0.07), 0px 41.7776px 33.4221px rgba(76, 97, 110, 0.030149), 0px 22.3363px 17.869px rgba(76, 97, 110, 0.0134937), 0px 12.5216px 10.0172px rgba(76, 97, 110, 0.00523753), 0px 6.6501px 5.32008px rgba(76, 97, 110, 0.00118705);
+  border-radius: 100%;
+}
+@media screen and (max-width:1024px) {
+  .search-field {
+    width: 250px;
+  }
+}
+@media screen and (max-width:991px) {
+  .navBarWeb, .web, .patient-avatar {
+    display: none !important;
+  }
+  .mobile, .tab {
+    display: block;
+  }
+  .table-wrap table {
+    table-layout: auto;
+  }
+  #navBar {
+    position: absolute;
+    width: 100%;
+    background-color: #ffffff;
+    top: 64px;
+    right: 0;
+    padding: 1px 10px 1px;
+    border-top: 1px solid #eee;
+  }
+  .navbar-nav {
+    margin-left: 0;
+  }
+  .navbar-nav li{
+    display: block;
+  }
+  .nav-item {
+    border-bottom: 1px solid #eee;
+    padding: 10px 0px;
+  }
+  .sidebar .nav-item {
+    border-bottom: none;
+  }
+  .nav-links {
+    position: absolute;
+    right: 60px;
+    top:18px;
+  }
+  .nav-links ul{
+    list-style: none;
+  }
+  .nav-links ul li{
+    display: inline-block;
+    margin-right: 10px;
+  }
+  .logo {
+    margin-left: 10px;
+  }
+  .navbar-toggler {
+    color: var(--pry-dark-color);
+    border:1px solid var(--pry-dark-color);
+    background-color: #fff;
+    padding: 12px;
+    margin-bottom: 0;
+    margin-right: 12px;
+  }
+  .navbar-toggler:hover {
+    background-color: var(--pry-color);
+    color: #fff;
+  }
+  nav {
+    padding: 0 10px;
+  }
+  .flex-row {
+    display: block;
+  }
+  .custom-card {
+    width: 100%;
+    margin-bottom: 40px;
+  }
+  .tab-search {
+    display: block;
+    background-color: #ffffff;
+    padding: 5px 0;
+    padding-right:12px;
+  }
+  .search-field, .search-field:focus {
+    width: 100%;
+  }
+  .submit-search {
+    height: 42px;
+    width: 46px;
+  }
+  .flex-links {
+    flex-wrap: wrap;
+  }
+  .flex-links a {
+    width: 48%;
+  }
+  .flex-links a:not(:last-child), .flex-links a:not(:first-child)  {
+    margin:0;
+  }
+  .flex-links a{
+    margin-bottom: 20px !important;
+  }
+}
+@media screen and (max-width:545px) {
+  .sm-screen {
+    display: block;
+    padding: 12px 0;
+    margin: 0;
+    margin-bottom: -10px;
+  }
+  .flex-links a {
+    width: 32%;
+    padding: 14px;
+  }
+  .flex-links a.active::before, .flex-links a::before {
+    content: none !important;
+  }
+ .tab {
+   display: none;
+ }
+ .flex-inner-row {
+   flex-wrap: wrap;
+   margin-top: 0 !important;
+ }
+ .flex-inner-row >div{
+   width: 100%;
+ }
+ .flex-stats h4 {
+   font-size: 37px;
+ }
+ .custom-card {
+   padding: 40px 20px;
+ }
+ .navbar .container-fluid {
+   flex-wrap: nowrap;
+ }
+ .statuses {
+   font-size: 16px;
+ }
+}
+@media screen and (max-width:400px) {
+  .flex-links a {
+    width: 100%;
+  }
+  .nav-tabs .nav-item {
+    width: 100%;
+  }
+
+}
+@media screen and (max-width:325px) {
+  .statuses {
+    font-size: 14px;
+  }
+  .sm-screen {
+    display: block;
+  }
+  .flex-stats img {
+    display: none;
+  }
+ .tab {
+   display: none;
+ }
+}

public/css/style.css

@@ -47,6 +47,18 @@ footer {
 .navbar {
   z-index: 100;
 }
+.navbar-toggler {
+  color: var(--pry-dark-color);
+  border:1px solid var(--pry-dark-color);
+  background-color: #fff;
+  padding: 12px;
+  margin-bottom: 0;
+  margin-right: 12px;
+}
+.navbar-toggler:hover {
+  background-color: var(--pry-color);
+  color: #fff;
+}
 .nav-link {
   padding: 10px;
 }

resources/views/layouts/login.blade.php

@@ -13,6 +13,7 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
   <link href="{{ asset('/css/strengthify.min.css') }}" rel="stylesheet">
   <link href="{{asset('css/style.css')}}" rel=stylesheet>
+  <link href="{{asset('css/skin.css')}}" rel=stylesheet>
   <link href="{{asset('css/landing.css')}}" rel=stylesheet>
   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
   <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
@@ -22,23 +23,24 @@
 </head>
 
 <body>
-  <nav id="top" class="navbar navbar-expand-lg navbar-light bg-white d-flex align-items-center justify-content-between">
-    <div class="container justify-content-center justify-content-md-start">
-      <a class="navbar-brand" href="{{route('login')}}"><img src="/img/logo.svg" alt="Logo" height="50"> </a>
-    </div>
-
-    <div class="collapse navbar-collapse dashboard-nav" id="navBar">
-      <ul class="navbar-nav ml-auto">
-        <li class="nav-item">
-          <a class="d-flex align-items-center text-dark" href="{{ config('app.backToLeadershipHealthUrl') }}">
-            <img class="mr-1" height="20" src="{{asset('img/chart.svg')}}">Back to LeadershipHealth.org
-          </a>
-        </li>
-      </ul>
-    </div>
-
+  <nav class="navbar navbar-expand-lg py-1">
+        <div class="container-fluid position-relative">
+            <a href="{{ route('login') }}"><img class="logo" src="{{asset('img/logo.svg')}}"></a>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navBar" aria-controls="navBar" aria-expanded="false" aria-label="Toggle navigation">
+                <i class="fas fa-bars"></i>
+            </button>
+            <div class="collapse navbar-collapse mobile" id="navBar">
+                <ul class="navbar-nav ml-auto">
+                  <li class="nav-item">
+                    <a class="d-flex align-items-center text-dark" href="{{ config('app.backToLeadershipHealthUrl') }}">
+                      <img class="mr-1" height="20" src="{{asset('img/chart.svg')}}">Back to LeadershipHealth.org
+                    </a>
+                  </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
 
-  </nav>
   <hr class="m-0">
   <div class="welcome-container">
     <div class="container my-3 my-md-4 my-lg-5">