Merge pull request #151 from bcgov/DIV-1089

DIV-1089: Update visual design

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

@@ -7,21 +7,24 @@ $brand-links: #365ebe;
 $brand-buttons: $brand-links;
 $color-blue-dark: $brand-titles;
 $color-blue-medium: #38598A;
-$color-blue-light: $brand-buttons;
+$color-blue: $brand-buttons;
+$color-blue-light: #265EBE;
 $color-blue-lighter: #d7dff2;
 $color-grey-dark: $body-copy;
-$color-grey-medium: #9D9D9D;
+$color-grey-medium: #606060;
 $color-grey-light: #d5d5d5;
 $color-grey-lighter: #efefef;
 $color-grey-lightest: #f2f2f2;
-$color-green: #57b26a;
+$color-green: #2e8540;
 $color-green-light: #d5e6d8;
-$color-green-dark: #2e8540;
-$color-gold-light: #e6ca85;
-$color-red: #D8292F;
+$color-green-darker: #246A33;
+$color-green-darkest: #1c5428;
+$color-gold-dark: #925E00;
+$color-gold-light: #FEEABA;
 $color-red-light: #F7D4D5;
-$color-red-dark: #AC2025;
-$color-yellow-light: #fcf8e3;
+$color-red: #D8292F;
+$color-red-darker: #AC2025;
+$color-red-darkest: #9A1C21;
 
 $font-custom: Myriad-Pro, Calibri, Arial, Sans Serif;
 $font-custom-bold: Myriad-Pro-Bold, Calibri, Arial, Sans Serif;
@@ -221,15 +224,15 @@ input[type=number]::-webkit-outer-spin-button {
 		color: #8c8c8c;
 		background: $color-grey-lightest;
 	}
-	border-bottom: 1px solid #ddd;
-	border-right: 1px solid #ddd;
-	border-left: 1px solid #ddd;
+	border-bottom: 1px solid $color-grey-light;
+	border-right: 1px solid $color-grey-light;
+	border-left: 1px solid $color-grey-light;
 	font-size: 16px;
 
 	a {
-		color: #494949;
+		color: $color-grey-medium;
 		i {
-			color: #494949;
+			color: $color-grey-medium;
 		}
 
 		&:hover {
@@ -238,18 +241,18 @@ input[type=number]::-webkit-outer-spin-button {
 	}
 
 	&:hover {
-		background: #d4dce5;
+		background: $color-blue-lighter;
 	}
 }
 
 .fact-sheet-button {
 	a {
 		padding-right: 6px;
-		color: #494949;
+		color: $color-grey-medium;
 		i {
-			color: #494949;
+			color: $color-grey-medium;
 			&:hover {
-				color: #385dbc;
+				color: $brand-buttons;
 			}
 		}
 	}
@@ -305,7 +308,7 @@ input[type=number]::-webkit-outer-spin-button {
 	height: 50px;
 	// exclude last 2 columns because contain buttons
 	&:hover td:not(:nth-last-child(-n+2)) {
-		background: #d4dce5;
+		background: $color-blue-lighter;
 	}
 }
 
@@ -320,7 +323,7 @@ div.dollar-prefix {
 		content: '$ ';
 		top: 0;
 		height: 100%;
-		padding-left: 5px;
+		padding-left: 10px;
 		position: absolute;
 		display: flex;
 		flex-direction: row;
@@ -373,7 +376,7 @@ div.percent-suffix {
 	padding: 30px 30px 30px 75px;
 	border-radius: 8px;
 	margin-bottom: 20px;
-	background-color: $color-yellow-light;
+	background-color: $color-gold-light;
 
 	&:after {
 		content: "\f071";
@@ -383,7 +386,7 @@ div.percent-suffix {
 		text-decoration: inherit;
 		position: absolute;
 		font-size: 24px;
-		color: #f0ad4e;
+		color: $color-gold-dark;
 		top: 30px;
 		left: 27px;
 	}
@@ -393,7 +396,10 @@ div.percent-suffix {
   }
 
 	&.hard-stop {
-		background-color: #faebe9;
+		background-color: $color-red-light;
+        hr {
+            border-top: 1px solid $color-red-darkest;
+        }
 
 		&:after {
 			content: "\f05e";
@@ -403,7 +409,7 @@ div.percent-suffix {
 			text-decoration: inherit;
 			position: absolute;
 			font-size: 24px;
-			color: #d9534f;
+			color: $color-red-darkest;
 			top: 30px;
 			left: 27px;
 		}
@@ -424,7 +430,7 @@ div.percent-suffix {
 }
 
 .checkmark {
-	background: $color-green-dark;
+	background: $color-green;
 	position: relative;
 	padding: 22px 20px 20px 90px;
 	color: #ffffff;
@@ -540,8 +546,8 @@ div.percent-suffix {
 
 .collapse-trigger {
 	& > div {
-		color: $color-blue-light;
-		border-bottom: solid 1px $color-blue-light;
+		color: $color-blue;
+		border-bottom: solid 1px $color-blue;
 		display: inline;
 		cursor: pointer;
 
@@ -654,10 +660,12 @@ div#other_names_fields {
 			}
 		}
 
-		label {
-			width: calc(100% - 90px);
-			text-align: left;
-		}
+		.label-group {
+            display: flex;
+            justify-content: space-between;
+            width: 100%;
+            align-items: center;
+        }
 	}
 }
 
@@ -669,6 +677,7 @@ div#other_names_fields {
 
 .btn-primary {
 	background: $brand-buttons;
+    font-weight: bold;
 
 	&:hover {
 		background-color: darken($brand-buttons, 20%);
@@ -693,10 +702,10 @@ i.fa.fa-question-circle {
 	margin: 30px 0;
 
 	.btn {
-		font-size: 18px;
+		font-size: 16px;
 		border: none;
-		border-radius: 10px;
-		padding: 12px 15px;
+		border-radius: 4px;
+		padding: 16px;
 		background-color: $brand-buttons;
 		color: #ffffff;
 		margin-bottom: 12px;
@@ -704,7 +713,7 @@ i.fa.fa-question-circle {
 		transition: all 0.1s ease-in-out;
 
 		&:hover {
-			background-color: darken($brand-buttons, 20%);
+			background-color: $brand-blue;
 			-webkit-transition: all 0.1s ease-in-out;
 			transition: all 0.1s ease-in-out;
 		}
@@ -720,7 +729,7 @@ i.fa.fa-question-circle {
 			transition: all 0.1s ease-in-out;
 
 			&:hover {
-				background-color: darken($color-green, 20%);
+				background-color: $color-green-darkest;
 				-webkit-transition: all 0.1s ease-in-out;
 				transition: all 0.1s ease-in-out;
 			}
@@ -737,7 +746,7 @@ i.fa.fa-question-circle {
     border-radius: 8px;
     position: relative;
     padding: 30px 30px 30px 75px;
-    margin-bottom: 20px;
+    margin-top: 30px;
 
     ul {
         padding-left: 15px;
@@ -751,12 +760,12 @@ i.fa.fa-question-circle {
         text-decoration: inherit;
         position: absolute;
         font-size: 24px;
-        color: $color-red-dark;
+        color: $color-red-darker;
         top: 30px;
-        left: 27px;
+        left: 30px;
     }
     .warning, .progress-status i {
-        color: $color-red-dark;
+        color: $color-red-darker;
         font-weight: bolder;
         margin: 0 3px;
     }
@@ -774,6 +783,34 @@ i.fa.fa-question-circle {
     }
 }
 
+.has-error {
+    input {
+        border: 2px solid $color-red !important;
+    }
+    .help-block {
+        color: $color-red;
+        font-weight: bolder;
+    }
+}
+
+.btn-danger {
+    background-color: $color-red;
+    border: 1px solid $color-red;
+    font-weight: bold;
+    &:hover {
+        background-color: lighten($color-red, 5%);
+    }
+}
+
+.btn-success {
+    background-color: $color-green;
+    border: 1px solid $color-green;
+    font-weight: bold;
+    &:hover {
+        background-color: lighten($color-green, 5%);
+    }
+}
+
 .error-text {
     color: $color-red;
 }
@@ -795,19 +832,32 @@ i.fa.fa-question-circle {
 }
 
 .btn-radio {
-	color: $brand-titles;
-	background-color: $color-blue-lighter;
-	font-size: 16px;
-	text-transform: uppercase;
-	letter-spacing: 0.08em;
-	font-weight: 600;
-	padding: 20px 0;
-	width: 60px;
-	height: 60px;
-	border-radius: 30px;
-	border: 3px solid $color-blue-lighter;
-	-webkit-transition: all 0.1s ease-in-out;
-	transition: all 0.1s ease-in-out;
+    color: $color-blue-light;
+    background-color: $color-blue-lighter;
+    font-size: 16px;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    font-weight: 600;
+    padding: 18px 0;
+    width: 52px;
+    height: 52px;
+    margin-left: 7px;
+    margin-top: 7px;
+    border-radius: 26px;
+    -webkit-transition: all 0.1s ease-in-out;
+    transition: all 0.1s ease-in-out;
+
+    &:before {
+        content: " ";
+        position: absolute;
+        display: block;
+        width: 64px;
+        height: 64px;
+        border-radius: 32px;
+        margin-top: -25.2px;
+        margin-left: -7.2px;
+        border: 1px solid $color-grey-medium;
+    }
 }
 
 .btn-radio.active,
@@ -849,7 +899,7 @@ fieldset[disabled] .btn-radio:hover {
 }
 
 .btn-radio + .btn-radio {
-	margin-left: 15px;
+	margin-left: 27px;
 }
 
 .btn-radio-group {
@@ -884,9 +934,9 @@ fieldset[disabled] .btn-radio:hover {
 /* Form Elements*/
 input {
 	border-radius: 4px;
-	color: #494949;
-	padding: 12px 15px;
-	border: solid 1px $color-grey-light;
+	color: $color-grey-medium;
+	padding: 12px 15px 12px 20px;
+	border: solid 1px $color-grey-medium;
 	line-height: 1em;
 
 	&:focus {
@@ -949,7 +999,7 @@ input {
 textarea {
 	width: 100%;
 	border-radius: 10px;
-	color: #494949;
+	color: $color-grey-medium;
 	padding: 12px 15px;
 	border: solid 1px $color-grey-light;
 	line-height: 24px;
@@ -1004,7 +1054,6 @@ textarea {
 
 			&:active,
 			&:hover {
-				color: #fcfcfc;
 				text-decoration: underline;
 			}
 		}
@@ -1024,23 +1073,36 @@ textarea {
 	.mid_banner-dash a,
 	.mid_banner-link a,
 	.more_information-link a {
-		padding: 10px 16px;
+		padding: 15px 16px;
 		float: right;
 		margin-left: 6px;
 
 		&.active,
 		&:hover {
 			color: #fff;
-			background-color: $brand-gold;
-			text-decoration: none;
-
 			i {
 				color: #fff;
 			}
 		}
 	}
 
-	.mid_banner-dash a {
+    .mid_banner-dash a,
+    .mid_banner-link a {
+        &.active,
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    .more_information-link a {
+        &.active,
+        &:hover {
+            background-color: $brand-gold;
+            text-decoration: none;
+        }
+    }
+
+        .mid_banner-dash a {
 		margin-left: 24px;
 	}
 
@@ -1065,26 +1127,38 @@ textarea {
 	}
 }
 
-.success-buttons {
-	text-align: center;
-	display: -webkit-box;
-	display: -ms-flexbox;
-	display: flex;
-	-ms-flex-line-pack: justify;
-	-webkit-box-pack: justify;
-	-ms-flex-pack: justify;
-	justify-content: space-between;
-
-	.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;
-	}
+.success-page {
+    .success-buttons {
+        text-align: center;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -ms-flex-line-pack: justify;
+        -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+        justify-content: space-between;
+
+        .flex-row {
+            width: 32%;
+            border-radius: 8px;
+            background-color: $color-blue-lighter;
+            border: 1px solid $brand-buttons;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            padding: 30px 45px;
+            @media (max-width: 992px) {
+                padding: 20px 20px;
+            }
+            h3 {
+                font-size: 26px;
+                line-height: 36px;
+            }
+        }
+    }
+    .col-flex.content-column {
+        padding-bottom: 92px;
+    }
 }
 
 
@@ -1100,12 +1174,16 @@ textarea {
 		.form-group {
 			display: block;
 			width: 100%;
+			margin-top: 5px;
 			margin-bottom: 5px;
 			@media (min-width: 992px) {
 				-webkit-box-flex: 1;
 				-ms-flex: 1;
 				flex: 1;
 			}
+            input {
+                margin-bottom: 0;
+            }
 		}
 
 		.form-control {
@@ -1118,7 +1196,7 @@ textarea {
 		}
 		margin-bottom: 10px;
 		padding: 10px;
-		background: $color-grey-lighter;
+		background: $color-grey-lightest;
 		border-radius: 5px;
 
 		label {
@@ -1166,7 +1244,7 @@ textarea {
 
 .footer {
 	background-color: $brand-blue;
-	border-top: 3px solid $brand-gold;
+	border-top: 2px solid $brand-gold;
 	padding: 15px;
 
 	.footer-container ul {
@@ -1194,14 +1272,14 @@ textarea {
 
 .question-well {
 	min-height: 20px;
-	padding: 25px;
-	margin-top: 25px;
+	padding: 30px;
+	margin-top: 28px;
 	border: 1px solid $color-grey-light;
-	border-radius: 10px;
+	border-radius: 8px;
 	background: #ffffff;
 
 	&.hasFocus {
-		border: 1px solid $color-blue-light;
+		border: 1px solid $color-blue;
 		-webkit-transition: 0.1s ease-in-out all;
 		transition: 0.1s ease-in-out all;
 	}
@@ -1224,9 +1302,10 @@ textarea {
         font-family: $font-custom-bold;
         font-weight: bold;
         text-transform: uppercase;
-        padding: 4px 6px;
+        padding: 6px;
         margin-left: 16px;
         white-space: nowrap;
+        vertical-align: bottom;
         &.inline {
             border: none;
             padding: 0;
@@ -1236,6 +1315,7 @@ textarea {
     .required {
         color: $color-red;
         border: $color-red 2px solid;
+        vertical-align: text-bottom;
     }
 
     .optional {
@@ -1398,7 +1478,7 @@ textarea {
 }
 
 .review-child-heading {
-	background-color: #D4DCE5;
+	background-color: $color-blue-lighter;
 }
 
 .review-table-spacer {
@@ -1444,6 +1524,11 @@ textarea {
             width: 30%;
             min-width: 192px;
         }
+
+        thead {
+            -moz-border-radius-topleft: 8px;
+            -moz-border-radius-topright: 8px;
+        }
 	}
 
 	.collapse > div,
@@ -1532,7 +1617,7 @@ textarea {
         padding: 32px 20px 32px 20px;
         margin-bottom: 50px;
         background-color: $color-grey-lightest;
-        border: 1px solid $color-grey-medium;
+        border: 1px solid $color-grey-light;
         border-radius: 8px;
     }
 }
@@ -1561,25 +1646,11 @@ textarea {
         -webkit-box-ordinal-group: 4;
         -ms-flex-order: 3;
         order: 3;
-
-        &.shroud {
-            &:before {
-                content: "";
-                position: absolute;
-                width: 100%;
-                display: block;
-                height: 100%;
-                background: linear-gradient(to top, rgba(0,0,0,0.35) 0%, transparent 90%);
-                //z-index: 1;
-            }
-        }
     }
 
     .content-column {
-        /* max-width: 800px;*/
-        /* padding: 35px 50px 50px 50px;*/
         max-width: 1280px;
-        padding: 36px 6% 50px;
+        padding: 36px 6% 54px;
         position: relative;
     }
 
@@ -1587,7 +1658,7 @@ textarea {
         -webkit-box-flex: 0;
         -ms-flex: 0 0 280px;
         flex: 0 0 280px;
-        background-color: $color-grey-lighter;
+        background-color: $color-grey-lightest;
         -webkit-box-ordinal-group: 3;
         -ms-flex-order: 2;
         order: 2;
@@ -1658,7 +1729,7 @@ textarea {
 
         .content-column {
             margin: 54px auto 100px;
-            max-width: 840px;
+            max-width: 800px;
             padding: 0 20px;
             text-align: center;
             color: #ffffff;
@@ -1729,8 +1800,8 @@ textarea {
                 }
 
                 &.shaded-box {
-                    padding-top: 22px;
-                    padding-bottom: 50px;
+                    padding-top: 18px;
+                    padding-bottom: 30px;
                     margin-top: 0;
                     border-bottom-left-radius: 8px;
                     border-bottom-right-radius: 8px;
@@ -1774,8 +1845,8 @@ textarea {
         color: $color-blue-dark;
         font-size: 24px;
         line-height: 36px;
-        padding-top: 60px;
-        padding-bottom: 35px;
+        padding-top: 55px;
+        padding-bottom: 30px;
         margin: 0;
     }
     .btn {
@@ -1808,7 +1879,7 @@ textarea {
         align-items: center;
         height: 70px;
         margin-bottom: 12px;
-        padding: 0 24px;
+        padding: 0 16px;
         font-weight: bold;
 
         .progress-icon {
@@ -1857,14 +1928,14 @@ textarea {
 		&.complete {
 			i,
 			span {
-				color: $color-green-dark;
-				border-color: $color-green-dark;
+				color: $color-green-darker;
+				border-color: $color-green-darker;
 			}
 		}
 
 		&:focus,
 		&:hover {
-			background-color: $color-gold-light;
+			background-color: $color-grey-light;
 			text-decoration: none;
         }
 
@@ -1882,10 +1953,10 @@ textarea {
             float: right;
 
             &.incomplete, &.skipped {
-                color: $color-red-dark;
+                color: $color-red;
             }
             &.complete {
-                color: $color-green-dark;
+                color: $color-green-darker;
             }
         }
     }
@@ -1898,8 +1969,16 @@ textarea {
     		padding: 5px 24px 5px 22px;
 			border-left:2px solid $brand-gold;
 			width: 100%;
-		}
 
+            .progress-status i {
+                &.complete {
+                    color: $color-green-darkest;
+                }
+                &.incomplete, &.skipped {
+                    color: $color-red-darkest;
+                }
+            }
+		}
 
 		.progress-sub-question {
 			width: 190px;
@@ -1996,8 +2075,12 @@ textarea {
 
 		&:focus,
 		&:hover {
-			background-color: $color-blue-lighter;
+			background-color: $color-grey-lightest;
 			text-decoration: none;
+
+            &.incomplete, &.skipped {
+                color: $color-red-darker;
+            }
 		}
 
 		&:first-child {
@@ -2051,9 +2134,9 @@ textarea {
             }
         }
 
-		&:focus,
-		&:hover {
-			background-color: $brand-gold;
+		&:focus:not(.active),
+		&:hover:not(.active){
+			background-color: $color-blue-medium;
 		}
 	}
 }
@@ -2068,11 +2151,16 @@ textarea {
             }
 
             &.complete .progress-icon i {
-                border: solid 1px $color-green-dark;
-                background-color: $color-green-dark;
+                border: solid 1px $color-green-darker;
+                background-color: $color-green-darker;
                 color: $brand-gold;
             }
         }
+        .progress-status {
+            i.incomplete, i.skipped {
+                color: $color-red-darker;
+            }
+        }
     }
 }
 

edivorce/apps/core/static/js/vendor/autogrow.js

@@ -20,7 +20,7 @@
             //if the element is "invisible", we get an incorrect height value
             //to get correct value, clone and append to the body. 
             if (elem.is(':visible') || parseInt(elem.css('height'), 10) > 0) {
-                min = parseInt(elem.css('height'), 75) || elem.innerHeight();
+                min = parseInt(elem.css('height'), 10) || elem.innerHeight();
             } else {
                 clone = elem.clone()
                     .addClass(opts.cloneClass)
@@ -35,6 +35,7 @@
                 min = clone.innerHeight();
                 clone.remove();
             }
+            min = Math.max(min, 75);
             if (opts.fixMinHeight) {
                 elem.data('autogrow-start-height', min); //set min height
             }

edivorce/apps/core/templates/partials/alias_field.html

@@ -8,9 +8,10 @@
             <option value="with assumed name of" {% if alias_type == 'with assumed name of' %} selected {% endif %}>With assumed name of</option>
         </select>
     {% endcomment %}
-    
-    <label>Also known as</label>
-    <input type="button" class="btn btn-danger btn-delete-name form-control pull-right" value="Delete" />
+    <div class="label-group">
+        <label>Also known as</label>
+        <input type="button" class="btn btn-danger btn-delete-name form-control pull-right" value="Delete" />
+    </div>
     <div class="form-group name-group alias-body">
         <div>
             <p>First Name</p>

edivorce/apps/core/templates/question/12_review.html

@@ -216,7 +216,6 @@
 </div>
 {% if derived.any_errors %}
     <div class="review-warning">
-        <div><span class="exclamation"><i class="fa fa-fw fa-exclamation-circle"></i></span></div>
         <div>
             You have not completed at least one field that is required to create your forms.
             Missing required fields are noted on this screen in the

edivorce/apps/core/templates/success.html

@@ -1,43 +1,53 @@
 {% extends 'base.html' %}
 
 {% block title %}{{ block.super }}: Qualified{% endblock %}
+{% block container_col %}success-page{% endblock %}
 
 {% block content %}
 
 <h1 class="checkmark">You have met the conditions for using the Online Divorce Assistant</h1>
+<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>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>
+<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>
 
 <div class="success-buttons">
-    <div class="flex-row" id="bcId" style="width: 30%;">
-        <h3>Register for a <br>Basic BCeID</br></h3>
+    <div class="flex-row" id="bcId">
+        <h3>Register for a Basic BCeID</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>
+    <div class="flex-row" id="scard">
+        <h3>Set up your BC Services Card</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>
+    <div class="flex-row" id="login">
+        <h3>Login with a BCeID or BC Services Card</h3>
         <p>Once you login, you’ll be taken back to this website.</p>
         <a class="btn btn-primary btn-lg btn-block" href="{% url 'oidc_authentication_init' %}">
             Login
         </a>
     </div>
 </div>
-
 </div>
 
-<p>&nbsp;</p>
-
 {% endblock %}
 
 {% block formbuttons %}

edivorce/apps/core/utils/question_step_mapping.py

@@ -27,6 +27,8 @@ pre_qual_step_question_mapping = {
     '05': {
         'original_marriage_certificate',
         'provide_certificate_later',
+        'provide_certificate_later_reason',
+        'not_provide_certificate_reason',
         'marriage_certificate_in_english'
     },
     '06': {

vue/src/components/Uploader/Image.vue

@@ -105,8 +105,8 @@
   .image-wrap {
     height: 160px;
     border: 1px solid black;
-    border-top-left-radius: 6px;
-    border-top-right-radius: 6px;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
     background-color: white;
     overflow: hidden;
     position: relative;

vue/src/components/Uploader/ItemTile.vue

@@ -138,7 +138,7 @@
     .bottom-wrapper {
       border-bottom-left-radius: 6px;
       border-bottom-right-radius: 6px;
-      border: 1px solid silver;
+      border: 1px solid #d5d5d5;
       border-top: none;
       background-color: #f2f2f2;
       margin-bottom: 10px;
@@ -178,7 +178,7 @@
 
       &:disabled {
         i.fa {
-          opacity: 0.15;
+          color: #d5d5d5;
         }
       }
 

vue/src/components/Uploader/Uploader.vue

@@ -569,7 +569,7 @@
     text-align: left;
     border: 1px #365ebe dashed;
     border-radius: 8px;
-    padding: 20px 32px 0 24px;
+    padding: 20px 32px 0 20px;
     margin-bottom: 5px;
 
     &.dragging {
@@ -596,7 +596,7 @@
     }
 
     .fa-plus-circle {
-      font-size: 3rem;
+      font-size: 30px;
       margin-bottom: 8px;
       color: #365ebe;
     }