DIV-1141 - Updated the login page

edivorce/apps/core/static/css/main.scss

@@ -4,20 +4,19 @@ $brand-blue: #003366;
 $brand-gold: #fcba19;
 $brand-titles: #003366;
 $brand-links: #365ebe;
-/*#2b5580;*/
 $brand-buttons: $brand-links;
 $color-blue-dark: $brand-titles;
 $color-blue-medium: #38598A;
 $color-blue-light: $brand-buttons;
-$color-blue-lighter: #d4dce5;
+$color-blue-lighter: #d7dff2;
 $color-grey-dark: $body-copy;
 $color-grey-medium: #9D9D9D;
 $color-grey-light: #d5d5d5;
 $color-grey-lighter: #efefef;
-$color-grey-lightest: #fdfdfd;
+$color-grey-lightest: #f2f2f2;
 $color-green: #57b26a;
 $color-green-light: #d5e6d8;
-$color-green-dark: #246A33;
+$color-green-dark: #2e8540;
 $color-gold-light: #e6ca85;
 $color-red: #D8292F;
 $color-red-light: #F7D4D5;
@@ -189,7 +188,7 @@ input[type=number]::-webkit-outer-spin-button {
 
 	&[readonly] {
 		color: #8c8c8c;
-		background: #f2f2f2;
+		background: $color-grey-lightest;
 	}
 
 	input, textarea {
@@ -207,7 +206,7 @@ input[type=number]::-webkit-outer-spin-button {
 
 		&[readonly] {
 			color: #8c8c8c;
-			background: #f2f2f2;
+			background: $color-grey-lightest;
 		}
 	}
 
@@ -219,7 +218,7 @@ input[type=number]::-webkit-outer-spin-button {
 .fact-sheet-control {
 	&[readonly] {
 		color: #8c8c8c;
-		background: #f2f2f2;
+		background: $color-grey-lightest;
 	}
 	border-bottom: 1px solid #ddd;
 	border-right: 1px solid #ddd;
@@ -257,7 +256,7 @@ input[type=number]::-webkit-outer-spin-button {
 
 .fact-sheet-input {
 	&[readonly] {
-		background: #f2f2f2;
+		background: $color-grey-lightest;
 	}
 }
 
@@ -310,7 +309,7 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 .child-support-amount[readonly] {
-	background: #f2f2f2;
+	background: $color-grey-lightest;
 }
 
 div.dollar-prefix {
@@ -424,11 +423,11 @@ div.percent-suffix {
 }
 
 .checkmark {
-	background: lighten($color-green, 10%);
+	background: $color-green-dark;
 	position: relative;
 	padding: 22px 20px 20px 90px;
 	color: #ffffff;
-	border-radius: 10px;
+	border-radius: 8px;
 	font-size: 32px;
 
 	&:before {
@@ -1061,6 +1060,13 @@ textarea {
 
 	.flex-row {
 		width: 45%;
+		border-radius: 8px;
+		background-color: $color-blue-lighter;
+		border: 1px solid $brand-buttons; 
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		padding: 24px 30px;
 	}
 }
 
@@ -2076,7 +2082,7 @@ textarea {
 }
 
 .modal-footer {
-	background: #f5f5f5;
+	background: $color-grey-lightest;
 	border-bottom-left-radius: 10px;
 	border-bottom-right-radius: 10px;
 }
@@ -2110,6 +2116,18 @@ textarea {
     background-color: rgba(0,0,0,0.7);
 }
 
+.light-shaded-box {
+	background-color: $color-grey-lightest;
+	border-radius: 8px;
+	padding: 18px 30px;
+	margin-bottom: 28px;
+
+	p {
+		margin: 0;
+		max-width: 100%;
+	}
+}
+
 #delete_child_modal,
 #info_modal,
 #questions_modal,

edivorce/apps/core/templates/success.html

@@ -5,44 +5,55 @@
 {% block content %}
 
 <h1 class="checkmark">You have met the conditions for using the Online Divorce Assistant</h1>
-<h2> Register or Login</h2>
+
+<div class="question-well">
+    <h3>1. Gather your documents</h3>
+    <p>You will need the following documents to move forward with the divorce request:</p>
+    <ul>
+        <li>Marriage certificate</li>
+        <li>Separation agreement (if applicable)</li>
+        <li>Court order (if applicable)</li>
+    </ul>
+</div>
+
+<div class="question-well">
+<h3>2. Register or Login</h3>
 <p>You will need a <strong>Basic BCeID</strong> or <strong>BC Services Card</strong> account to access the Online Divorce Assistant. This will also enable you to securely access multiple other online government services.</p>
 
-    <hr />
+<div class="light-shaded-box">
+    <p><strong>NOTE about logging in with your BC Services Card</strong></p>
+    <p>
+        You can log in and use the Online Divorce Assistant with your BC Services Card.  
+        However, you are limited to filing in-person at a BC Court Registry as online 
+        filing with a BC Services Card is currently not available.
+    </p>
+</div>
 
 <div class="success-buttons">
     <div class="flex-row" id="bcId" style="width: 30%;">
         <h3>Register for a <br>Basic BCeID</br></h3>
         <p>Once you register, you’ll be taken back to this website.</p>
+        <a class="btn btn-primary btn-lg btn-block" href="{% url 'register' %}">
+            Register
+        </a>
     </div>
     <div class="flex-row" id="scard" style="width: 30%;">
         <h3>Set up your <br>BC Services Card</br></h3>
         <p>Once you're set up, you’ll be taken back to this website.</p>
+        <a class="btn btn-primary btn-lg btn-block" href="{% url 'register_sc' %}">
+            Set Up
+        </a>
     </div>
     <div class="flex-row" id="login" style="width: 30%;">
         <h3>Login with a <br>BCeID or BC Services Card</br></h3>
         <p>Once you login, you’ll be taken back to this website.</p>
-
-    </div>
-</div>
-<div class="success-buttons">
-    <div class="flex-row" id="bcId" style="width: 30%;">
-        <a class="btn btn-success btn-lg btn-block" href="{% url 'register' %}">
-            Register
-        </a>
-    </div>
-    <div class="flex-row"id="scard" style="width: 30%;">
-        <a class="btn btn-success btn-lg btn-block" href="{% url 'register_sc' %}">
-            Set Up
-        </a>
-    </div>
-    <div class="flex-row"id="login" style="width: 30%;">
-        <a class="btn btn-success btn-lg btn-block" href="{% url 'login' %}">
+        <a class="btn btn-primary btn-lg btn-block" href="{% url 'login' %}">
             Login
         </a>
     </div>
 </div>
 
+</div>
 
 <p>&nbsp;</p>