Skip to content

Commit f37f403

Browse files
JakeLo123JakeLo123
authored
Merge pull request #25 from FusionAuth/24-update-styling-for-all-pages-and-components
24 Update Styling for All Pages and Components
2 parents 8a22d04 + 9468ea7 commit f37f403

5 files changed

Lines changed: 133 additions & 74 deletions

File tree

‎complete-application/src/app/account-page/account-page.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="column-container">
22
<div class="app-container">
3-
<h3>Your balance</h3>
3+
<h3>Your Balance</h3>
44
<div class="balance">{{balance | currency}}</div>
55
</div>
66
</div>

‎complete-application/src/app/app.component.html‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,24 +28,23 @@
2828

2929
<div id="menu-bar" class="menu-bar">
3030
<ng-container *ngIf="isLoggedIn">
31-
<a class="menu-link" routerLink="make-change" routerLinkActive="active"
32-
>Make Change</a
33-
>
3431
<a class="menu-link" routerLink="account" routerLinkActive="active"
3532
>Account</a
3633
>
34+
<a class="menu-link" routerLink="make-change" routerLinkActive="active"
35+
>Make Change</a
36+
>
3737
</ng-container>
3838
<ng-container *ngIf="!isLoggedIn">
39-
<a class="menu-link">About</a>
40-
<a class="menu-link">Services</a>
41-
<a class="menu-link">Products</a>
42-
4339
<a class="menu-link" style="text-decoration-line: underline">Home</a>
40+
<a class="menu-link">Products</a>
41+
<a class="menu-link">Services</a>
42+
<a class="menu-link">About</a>
4443
</ng-container>
4544
</div>
4645
</div>
4746

48-
<div style="flex: 1">
47+
<div>
4948
<router-outlet></router-outlet>
5049
</div>
5150
</div>

‎complete-application/src/app/home-page/home-page.component.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
11
<div class="column-container">
22
<div class="content-container">
3-
<div style="margin-bottom: 100px">
3+
<div>
44
<h1>Welcome to Changebank</h1>
55
<p>
6-
To get started,
6+
Login or create a new account to get started
7+
</p>
78
<button
8-
class="button-redirect"
9+
class="button-lg"
910
(click)="login()"
1011
style="cursor: pointer"
1112
>
12-
log in
13+
Login
1314
</button>
14-
or
15+
<br/>
1516
<button
1617
class="button-redirect"
1718
(click)="register()"
1819
style="cursor: pointer"
1920
>
20-
create a new account.
21+
Create a new account.
2122
</button>
22-
</p>
2323
</div>
2424
</div>
25-
<div style="flex: 0">
26-
<img src="/assets/money.jpg" style="max-width: 800px" />
25+
<div class="image-container">
26+
<img src="/assets/money.jpg" alt="Coins" />
2727
</div>
2828
</div>

‎complete-application/src/app/make-change-page/make-change-page.component.html‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
<div class="app-container change-container">
2-
<h3>We Make Change</h3>
3-
4-
<div class="change-message" *ngIf="change">
5-
We can make change for {{change.total | currency}} with {{change.nickels}} nickels and {{change.pennies}} pennies!
6-
</div>
2+
<h3>Make Change</h3>
73

84
<form (ngSubmit)="makeChange()">
9-
<div class="h-row">
10-
<div class="change-label">Amount in USD: $</div>
5+
<div class="change-label">Amount in USD</div>
116
<input class="change-input" name="amount" [(ngModel)]="amount" type="number" step=".01"/>
127
<input class="change-submit" type="submit" value="Make Change"/>
13-
</div>
148
</form>
9+
10+
<div class="change-message" *ngIf="change">
11+
We can make change for {{change.total | currency}} with {{change.nickels}} nickels and {{change.pennies}} pennies!
12+
</div>
1513
</div>

‎complete-application/src/styles.css‎

Lines changed: 110 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
/* You can add global styles to this file, and also import other style files */
21

32
h1 {
43
color: #096324;
54
}
65

76
h3 {
87
color: #096324;
9-
margin-top: 20px;
10-
margin-bottom: 40px;
8+
font-size: 18px;
9+
font-weight: 700;
10+
margin-top: 0;
1111
}
1212

1313
a {
@@ -29,8 +29,8 @@ p {
2929

3030
body {
3131
font-family: sans-serif;
32-
padding: 0px;
33-
margin: 0px;
32+
padding: 0;
33+
margin: 0;
3434
}
3535

3636
.h-row {
@@ -39,10 +39,7 @@ body {
3939
}
4040

4141
#page-container {
42-
display: flex;
43-
flex-direction: column;
44-
width: 100%;
45-
height: 100%;
42+
overflow: hidden;
4643
}
4744

4845
#page-header {
@@ -55,109 +52,174 @@ body {
5552
display: flex;
5653
justify-content: space-between;
5754
align-items: center;
58-
padding: 10px;
55+
column-gap: 20px;
56+
padding: 12px 40px 12px 40px;
5957
}
6058

6159
.menu-bar {
6260
display: flex;
63-
flex-direction: row-reverse;
61+
flex-direction: row;
6462
align-items: center;
6563
height: 35px;
6664
padding: 15px 50px 15px 30px;
6765
background-color: #096324;
6866
font-size: 20px;
67+
column-gap: 80px;
6968
}
7069

7170
.menu-link {
7271
font-weight: 600;
73-
color: #FFFFFF;
74-
margin-left: 40px;
72+
font-size: 20px;
73+
font-family: sans-serif;
74+
color: #ffffff;
7575
text-decoration-line: none;
76+
background: none;
77+
border: none;
7678
}
7779

7880
.active {
7981
text-decoration-line: underline;
8082
}
8183

8284
.button-lg {
83-
width: 150px;
84-
height: 30px;
85+
border: none;
8586
background-color: #096324;
86-
color: #FFFFFF;
87-
font-size: 16px;
88-
font-weight: 700;
89-
border-radius: 10px;
87+
color: #ffffff;
88+
font-size: 18px;
89+
font-weight: 600;
90+
border-radius: 8px;
9091
text-align: center;
91-
padding-top: 10px;
92+
padding: 8px 42px 8px 42px;
93+
gap: 20px;
9294
text-decoration-line: none;
9395
}
9496

97+
.button-redirect {
98+
background: none;
99+
border: none;
100+
font-size: 18px;
101+
font-family: sans-serif;
102+
color: #096324;
103+
margin-top: 20px;
104+
}
105+
95106
.column-container {
96107
display: flex;
97108
flex-direction: row;
98-
justify-content: space-between;
109+
flex: 1;
110+
height: calc(100vh - 144px);
99111
}
100112

101113
.content-container {
102114
flex: 1;
103115
display: flex;
104116
flex-direction: column;
105-
padding: 60px 20px 20px 40px;
117+
align-items: center;
118+
justify-content: center;
119+
text-align: center;
106120
}
107121

108122
.balance {
109-
font-size: 50px;
110-
font-weight: 800;
123+
font-size: 36px;
124+
font-weight: 700;
125+
margin-bottom: 32px;
111126
}
112127

113128
.change-label {
114-
font-size: 20px;
115-
margin-right: 5px;
129+
font-size: 18px;
130+
font-weight: 400;
131+
margin-bottom: 8px;
116132
}
117133

118134
.change-input {
119-
font-size: 20px;
120-
height: 40px;
135+
font-size: 18px;
136+
font-weight: 400;
137+
width: 210px;
138+
height: 42px;
139+
padding: 10px 22px 10px 22px;
121140
text-align: end;
122-
padding-right: 10px;
141+
border-radius: 2px;
142+
border-width: 1px;
143+
border-color: #000000;
144+
box-sizing: border-box;
123145
}
124146

147+
125148
.change-submit {
126-
font-size: 15px;
127-
height: 40px;
128-
margin-left: 15px;
129-
border-radius: 5px;
149+
border-width: 1px;
150+
border-color: #000000;
151+
padding: 8px;
152+
font-size: 18px;
153+
font-weight: 600;
154+
height: 42px;
155+
margin-left: 20px;
156+
border-radius: 8px;
130157
}
131158

132159
.change-message {
133160
font-size: 20px;
134-
margin-bottom: 15px;
161+
margin-top: 8px;
135162
}
136163

137164
.error-message {
138165
font-size: 20px;
139-
color: #FF0000;
166+
color: #ff0000;
140167
margin-bottom: 15px;
141168
}
142169

143170
.app-container {
144-
flex: 0;
145-
min-width: 440px;
146171
display: flex;
147172
flex-direction: column;
148-
margin-top: 40px;
149-
margin-left: 80px;
173+
padding: 40px;
150174
}
151175

152-
.change-container {
176+
.image-container {
177+
display: flex;
153178
flex: 1;
154179
}
155180

156-
.button-redirect {
157-
background: none;
158-
border: none;
159-
color: #096324;
160-
font-size: 18px;
161-
font-family: sans-serif;
162-
padding: 0;
163-
}
181+
.image-container img {
182+
width: 100%;
183+
height: 100%;
184+
object-fit: cover;
185+
}
186+
187+
@media (max-width: 768px) {
188+
.image-container {
189+
display: none;
190+
}
191+
.image-container img {
192+
display: none;
193+
}
194+
.menu-bar {
195+
overflow: scroll;
196+
}
197+
#logo-header {
198+
flex-direction: column;
199+
justify-content: center;
200+
padding: 12px 20px 12px 20px;
201+
}
202+
.h-row {
203+
flex-direction: column;
204+
}
205+
.header-email {
206+
margin-right: 0;
207+
margin-top: 0;
208+
}
209+
.app-container {
210+
padding: 24px;
211+
}
212+
}
213+
214+
@media (max-width: 390px) {
215+
.change-container {
216+
display: flex;
217+
flex: 1;
218+
align-items: flex-start;
219+
flex-direction: column;
220+
}
221+
.change-submit {
222+
margin-left: 0;
223+
margin-top: 8px;
224+
}
225+
}

0 commit comments

Comments
 (0)