From a473f58d2236abd2105269a9ef7d025d8e667adc Mon Sep 17 00:00:00 2001
From: William Brawner <me@wbrawner.com>
Date: Wed, 19 Feb 2020 20:18:27 -0700
Subject: [PATCH] Make default landing page look a little nicer

Signed-off-by: William Brawner <me@wbrawner.com>
---
 src/app/budgets/budget.component.css  | 28 +++++++++++++++++++++++++++
 src/app/budgets/budget.component.html | 12 ++++++++----
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/src/app/budgets/budget.component.css b/src/app/budgets/budget.component.css
index e69de29..25aa3dd 100644
--- a/src/app/budgets/budget.component.css
+++ b/src/app/budgets/budget.component.css
@@ -0,0 +1,28 @@
+.dashboard {
+    color: #F1F1F1;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    padding: 1em;
+    flex-direction: column;
+}
+
+.auth-button-container {
+    display: flex;
+    flex-grow: 1;
+    width: 100%;
+    max-width: 500px;
+    justify-content: space-between;
+    padding-top: 1em;
+}
+
+.auth-button-container > a {
+    flex-grow: 1;
+    margin: 1em;
+}
+
+@media all and (max-width: 400px) {
+    .auth-button-container {
+        flex-direction: column-reverse;
+    }
+}
\ No newline at end of file
diff --git a/src/app/budgets/budget.component.html b/src/app/budgets/budget.component.html
index de20fa2..8451122 100644
--- a/src/app/budgets/budget.component.html
+++ b/src/app/budgets/budget.component.html
@@ -1,6 +1,10 @@
 <div class="dashboard" *ngIf="!isLoggedIn()">
-  <h2 class="log-in">Get started</h2>
-  <p>To begin tracking your finances, <a routerLink="/login">login</a> or <a routerLink="/register">create an account</a>!</p>
+  <h2 class="log-in">Welcome to Twigs!</h2>
+  <p>To begin tracking your finances, login or create an account!</p>
+  <div class="auth-button-container">
+    <a routerLink="/register" mat-stroked-button color="accent">Register</a>
+    <a routerLink="/login" mat-raised-button color="accent">Login</a>
+  </div>
 </div>
 <mat-nav-list class="budgets" *ngIf="isLoggedIn()">
   <a mat-list-item *ngFor="let budget of budgets" routerLink="/budgets/{{ budget.id }}">
@@ -12,12 +16,12 @@
     </p>
   </a>
 </mat-nav-list>
-<div class="no-budgets" *ngIf="!budgets || budgets.length === 0">
+<div class="no-budgets" *ngIf="isLoggedIn() && (!budgets || budgets.length === 0)">
   <a mat-button routerLink="/budgets/new">
     <mat-icon>add</mat-icon>
     <p>Add budgets to begin tracking your finances.</p>
   </a>
 </div>
-<a mat-fab routerLink="/budgets/new">
+<a mat-fab routerLink="/budgets/new" *ngIf="isLoggedIn()">
   <mat-icon aria-label="Add">add</mat-icon>
 </a>
\ No newline at end of file