Add highlight modifier for box__section element and lighten body's background
MODIFY
resources/assets/sass/app.scss
resources/assets/sass/app.scss
@import 'components/helpers';
body {
- background: $colors-body;
+ background: $colors-background;
}
canvas {

MODIFY
resources/assets/sass/components/box.scss
resources/assets/sass/components/box.scss
padding: $dimensions-box-padding;
border-bottom: 1px solid $colors-border;
+ &:first-child {
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ }
+
+ &:last-child {
+ border-bottom-left-radius: 5px;
+ border-bottom-right-radius: 5px;
+ border-bottom: none;
+ }
+
&.box__section--header {
padding: 15px 20px;
font-size: 14px;
font-weight: 600;
}
- &:last-child {
- border-bottom: none;
+ &.box__section--highlight {
+ background: $colors-background;
}
}

MODIFY
resources/assets/sass/variables/colors.scss
resources/assets/sass/variables/colors.scss
+$colors-background: #F8F9FB;
$colors-border: #EBECF0;
$colors-primary: #5E9CF2;
-$colors-body: #F4F5F7;
$colors-text: #758193;

MODIFY
resources/views/login.blade.php
resources/views/login.blade.php
<button class="button">Log in</button>
</form>
</div>
- </div>
- <div class="mt-2 text-center">
+ <div class="box__section box__section--highlight text-center">
<a href="/register">New to Budget?</a>
</div>
</div>
+ </div>
@endsection

MODIFY
resources/views/register.blade.php
resources/views/register.blade.php
<button class="button">Register</button>
</form>
</div>
- </div>
- <div class="mt-2 text-center">
+ <div class="box__section box__section--highlight text-center">
<a href="/login">Already on Budget?</a>
</div>
</div>
+ </div>
@endsection

Add highlight modifier for box__section element and lighten body's background