redesign

public/css/style.css

@@ -99,7 +99,25 @@ video {
 .hidden {
   display: none;
 }
-
+.blue-card {
+  background-color: #EAFCFF;
+}
+.g-recaptcha {
+  max-width: 100%;
+}
+.welcome .title {
+  font-style: normal;
+  font-weight: bold;
+  font-size: 60px;
+  line-height: 77px;
+  color: #000000;
+}
+.welcome p, .welcome label, .welcome ul{
+  color: #6E7884;
+  font-style: normal;
+  font-size: 15px;
+  line-height: 29px;
+}
 @media screen and (max-width:1024px) {
   .table-container {
     overflow-x: scroll;
@@ -151,6 +169,13 @@ video {
   .navbar-toggler {
     display: inline;
   }
+  .welcome .title {
+    font-style: normal;
+  font-weight: bold;
+  font-size: 50px;
+  line-height: 57px;
+  color: #000000;
+  }
 }
 .w-100px {
   width: 100px;

resources/views/confirm-auth-token.blade.php

@@ -1,53 +1,30 @@
 @extends('layouts.login')
 @section('content')
 
-<style>
-    .salutation {
-        font-weight: bold;
-        font-size: 1.2em;
-    }
-</style>
+<div class="blue-card p-4">
+  <form action="{{route('process-confirm-auth-token')}}"  method="post">
+    <div class="text-center my-3">
+      <img src="/img/logo.svg" alt="Logo" height="35">
+    </div>
+    @csrf
+    @if(session('message'))
+    <div class="alert alert-info">{{session('message')}}</div>
+    @endif
+    <div class="form-group">
+      <label>
+        <strong>
+          Please enter the confirmation token.
+        </strong>
+      </label>
+      <input class="form-control phone" name="confirmation_token" autofocus value="{{old('confirmation_token')}}">
+    </div>
 
-<div class="container my-3 my-md-4 my-lg-5">
     <div class="row">
-        <div class="col-lg-8 offset-lg-2">
-            <div id="formView" class="card px-0 px-md-4">
-                <div class="card-body">
-                    <div>
-                        <h3 class="text-blue">
-                            <strong>
-                                Welcome to LeadershipHealth.com HR!
-                            </strong>
-                        </h3>
-                        <hr/>
-                        <p>
-                            <strong>Confirm Token</strong>
-                        </p>
-                    </div>
-                    <hr>
-                    <form action="{{route('process-confirm-auth-token')}}" method="post">
-                        @csrf
-                        @if(session('message'))
-                        <div class="alert alert-info">{{session('message')}}</div>
-                        @endif
-                        <div class="form-group">
-                            <label>
-                                <strong>
-                                    Please enter the confirmation token.
-                                </strong>
-                            </label>
-                            <input class="form-control phone" name="confirmation_token" autofocus value="{{old('confirmation_token')}}">
-                        </div>
-
-                        <div class="row">
-                            <div class="col-12 text-center">
-                                <input type="submit" name="sendToken" value="Confirm Token" class="btn btn-sm btn-primary px-5 py-2">
-                            </div>
-                        </div>
-                    </form>
-                </div>
-            </div>
-        </div>
+      <div class="col-12 text-center">
+        <input type="submit" name="sendToken" value="Confirm Token" class="btn btn-primary btn-sm w-100 py-2">
+      </div>
     </div>
+  </form>
+
 </div>
-@endsection
+@endsection

resources/views/layouts/login.blade.php

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="csrf-token" content="{{ csrf_token() }}">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <title>LeadershipHealth</title>
+    <title>Leadership Health</title>
     <meta name="description"
           content="Scholar Health's Leadership Health program was developed in collaboration with the University of Maryland School of Public Health through a Maryland Industrial Partnerships (MIPS) project.">
     <link rel="icon" href={{asset('img/icon.svg')}}>
@@ -16,22 +16,6 @@
     <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>
     <script src='https://www.google.com/recaptcha/api.js'></script>
-    <style>
-
-        p {
-            font-size: 1.1em;
-        }
-
-        input:not([type="submit"]), select, option{
-            background-color: #fdf5e3 !important;
-            /*font-weight: bold !important;*/
-        }
-
-        input::placeholder {
-            /*font-weight: normal !important;*/
-        }
-
-    </style>
 </head>
 <body>
 <nav class="navbar navbar-expand-lg navbar-light bg-white d-flex align-items-center justify-content-between">
@@ -40,7 +24,24 @@
     </div>
 </nav>
 <hr class="m-0">
-@yield('content')
+<div class="container my-3 my-md-4 my-lg-5">
+    <div class="row welcome">
+        <div class="col-lg-7">
+            <h4 class="title">Welcome to Leadership Health HR!</h4>
+            <p>Thank you for your interest in working with LeadershipHealth.</p>
+            <p>We use this portal to:</p>
+            <ul>
+              <li>Organize the HR process.</li>
+              <li>Coordinate communication with your dedicated HR representative.</li>
+              <li>Test your webcam and/or smartphone to confirm that your hardware is ready for telehealth.</li>
+            </ul>
+            <p>This brief online form is the first step in our HR process - and will allow us to quickly assign the appropriate Dedicated HR Representative to your account who will be available to you by phone and email to ensure all your questions get answered and that your onboarding process goes smoothly.</p>
+        </div>
+        <div class="col-lg-5">
+          @yield('content')
+        </div>
+    </div>
+</div>
 <footer class="bg-light-grey d-flex align-items-center flex-column border-top">
     <div class="py-3">
         <p class="mb-0 text-center"><small>Copyright &copy; {{getdate()["year"]}} LeadershipHealth LLC. All rights reserved.</small> </p>

resources/views/login.blade.php

@@ -1,96 +1,38 @@
 @extends('layouts.login')
 @section('content')
 
-<style>
-    .salutation {
-        font-weight: bold;
-        font-size: 1.2em;
-    }
-</style>
-
-<div class="container my-3 my-md-4 my-lg-5">
-    <div class="row">
-        <div class="col-lg-8 offset-lg-2">
-            <div id="formView" class="card px-0 px-md-4">
-                <div class="card-body">
-                    <div>
-                        <h3 class="text-blue">
-                            <strong>
-                                Welcome to LeadershipHealth HR!
-                            </strong>
-                        </h3>
-                        <hr>
-                        <p>
-                            Thank you for your interest in working with LeadershipHealth.
-                        </p>
-                        <p>
-                            We use this portal to:
-                        </p>
-                        <ol class="ml-0 ml-md-4 pl-3 pl-md-4">
-                            <li>
-                                Organize the HR process.
-                            </li>
-                            <li>
-                                Coordinate communication with your dedicated HR representative.
-                            </li>
-                            <li>
-                                Test your webcam and/or smartphone to confirm that your hardware is ready for
-                                telehealth.
-                            </li>
-                        </ol>
-                        <p>
-                            This brief online form is the first step in our HR process - and will allow us to
-                            quickly assign the appropriate Dedicated HR Representative to your account
-                            who will be available to you by phone and email to ensure all your
-                            questions get answered and that your onboarding process goes smoothly.
-                        </p>
-                        <p>
-                            <strong>
-                                If you have any questions at all, please contact your Dedicated HR
-                                Representative at the phone number or email displayed inside this portal.
-                            </strong> Talk to you soon! 😊
-                        </p>
-                    </div>
-                    <hr>
-                    <form action="{{route('send-sms-auth-token')}}" method="post">
-                        @csrf
-                        @if(session('message'))
-                        <div class="alert alert-info">{{session('message')}}</div>
-                        @endif
-                        <div class="form-group">
-                            <label>
-                                <strong>
-                                    Please enter your cell phone number (to receive an SMS token).
-                                </strong>
-                            </label>
-                            <input type="tel" class="form-control phone" name="cell_number" autofocus value="{{old('cell_number')}}">
-                            <small>
-                                *Your mobile provider's standard rates for sending and receiving text messages will
-                                apply.
-                            </small>
-                        </div>
-
-                        <div class="form-group">
-                            <div class="g-recaptcha" data-sitekey="{{config('services.recaptcha.key')}}">
-                            </div>
-                        </div>
-                        @error('g-recaptcha-response')
-                        <small>
-                            Please confirm your are not a robot.
-                        </small>
-                        @enderror
-
-
+<div id="formView" class="blue-card p-4">
+    <form action="{{route('send-sms-auth-token')}}" method="post">
+        <div class="text-center my-3">
+          <img src="/img/logo.svg" alt="Logo" height="35">
+        </div>
+        @csrf
+        @if(session('message'))
+        <div class="alert alert-info">{{session('message')}}</div>
+        @endif
+        <div class="form-group">
+            <label>Enter Your Mobile Number (to receive an SMS token)</label>
+            <input type="tel" class="form-control phone" name="cell_number" autofocus value="{{old('cell_number')}}">
+            <small class="d-block mt-3 text-muted text-center">
+              *Your mobile provider's standard rates for sending and receiving text messages will apply.
+            </small>
+        </div>
 
-                        <div class="row">
-                            <div class="col-12 text-center">
-                                <input type="submit" name="sendToken" value="Submit" class="btn btn-sm btn-primary px-5 py-2">
-                            </div>
-                        </div>
-                    </form>
-                </div>
+        <div class="form-group">
+            <div class="g-recaptcha" data-sitekey="{{config('services.recaptcha.key')}}">
+            </div>
+        </div>
+        @error('g-recaptcha-response')
+        <small>
+            Please confirm your are not a robot.
+        </small>
+        @enderror
+        <div class="row">
+            <div class="col-12 text-center">
+                <input type="submit" name="sendToken" value="Send SMS Token" class="btn btn-sm btn-primary w-100 py-2">
             </div>
         </div>
-    </div>
+        <p class="text-center text-muted mt-3"><small>If you have any questions at all, please contact your Dedicated HR Representative at the phone number or email displayed inside this portal</small> </p>
+    </form>
 </div>
 @endsection

resources/views/pro-details.blade.php

@@ -1,76 +1,53 @@
 @extends('layouts.login')
 @section('content')
 
-<style>
-    .salutation {
-        font-weight: bold;
-        font-size: 1.2em;
-    }
-</style>
+<div id="formView" class="blue-card p-4">
+  <form action="{{route('submit-pro-details')}}" method="post">
+      <div class="text-center my-3">
+        <img src="/img/logo.svg" alt="Logo" height="35">
+      </div>
+      <p>Enter your details below.</p>
+      @csrf
+      @if(session('message'))
+      <div class="alert alert-info">{{session('message')}}</div>
+      @endif
+      <div class="form-group">
+          <label for="" class="control-label">First Name</label>
+          <input class="form-control phone" name="first_name" autofocus value="{{old('first_name')}}">
+          @error('first_name')
+          <span class="text-sm text-muted">{{$message}}</span>
+          @enderror
+      </div>
 
-<div class="container my-3 my-md-4 my-lg-5">
-    <div class="row">
-        <div class="col-lg-8 offset-lg-2">
-            <div id="formView" class="card px-0 px-md-4">
-                <div class="card-body">
-                    <div>
-                        <h3 class="text-blue">
-                            <strong>
-                                Welcome to LeadershipHealth.com HR!
-                            </strong>
-                        </h3>
-                        <hr/>
-                        <p>
-                            <strong>Enter your details</strong>
-                        </p>
-                    </div>
-                    <hr>
-                    <form action="{{route('submit-pro-details')}}" method="post">
-                        @csrf
-                        @if(session('message'))
-                        <div class="alert alert-info">{{session('message')}}</div>
-                        @endif
-                        <div class="form-group">
-                            <label for="" class="control-label">First Name</label>
-                            <input class="form-control phone" name="first_name" autofocus value="{{old('first_name')}}">
-                            @error('first_name')
-                            <span class="text-sm text-muted">{{$message}}</span>
-                            @enderror
-                        </div>
+      <div class="form-group">
+          <label for="" class="control-label">Last Name</label>
+          <input class="form-control phone" name="last_name" autofocus value="{{old('last_name')}}">
+          @error('last_name')
+          <span class="text-sm text-muted">{{$message}}</span>
+          @enderror
+      </div>
 
-                        <div class="form-group">
-                            <label for="" class="control-label">Last Name</label>
-                            <input class="form-control phone" name="last_name" autofocus value="{{old('last_name')}}">
-                            @error('last_name')
-                            <span class="text-sm text-muted">{{$message}}</span>
-                            @enderror
-                        </div>
+      <div class="form-group">
+          <label for="" class="control-label">Email Address</label>
+          <input class="form-control phone" name="email_address" autofocus value="{{old('email_address')}}">
+          @error('email_address')
+          <span class="text-sm text-muted">{{$message}}</span>
+          @enderror
+      </div>
 
-                        <div class="form-group">
-                            <label for="" class="control-label">Email Address</label>
-                            <input class="form-control phone" name="email_address" autofocus value="{{old('email_address')}}">
-                            @error('email_address')
-                            <span class="text-sm text-muted">{{$message}}</span>
-                            @enderror
-                        </div>
+      <div class="form-group">
+          <label for="" class="control-label">Password</label>
+          <input class="form-control phone" type="password" name="password" autofocus value="{{old('password')}}">
+          @error('password')
+          <span class="text-sm text-muted">{{$message}}</span>
+          @enderror
+      </div>
 
-                        <div class="form-group">
-                            <label for="" class="control-label">Password</label>
-                            <input class="form-control phone" type="password" name="password" autofocus value="{{old('password')}}">
-                            @error('password')
-                            <span class="text-sm text-muted">{{$message}}</span>
-                            @enderror
-                        </div>
-
-                        <div class="row">
-                            <div class="col-12 text-center">
-                                <input type="submit" name="Submit" value="Submit" class="btn btn-sm btn-primary px-5 py-2">
-                            </div>
-                        </div>
-                    </form>
-                </div>
-            </div>
-        </div>
-    </div>
+      <div class="row">
+          <div class="col-12 text-center">
+              <input type="submit" name="Submit" value="Submit" class="btn btn-sm btn-primary w-100 py-2">
+          </div>
+      </div>
+  </form>
 </div>
 @endsection