Skip to content

Commit 5e27cee

Browse files
zahrafalakzahrafalak
authored
Merge pull request #65 from the-collab-lab/fz-design-homepage
Issue#55: Style Home Page
2 parents 942a42e + 80d3b75 commit 5e27cee

File tree

11 files changed

+119
-38
lines changed

11 files changed

+119
-38
lines changed

‎src/components/CreateList.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,9 @@ export function CreateList({ user, setListPath }: Props) {
4848
return (
4949
<>
5050
<Form onSubmit={handleSubmit}>
51-
<h3>Create New Shopping List</h3>
52-
<Form.Label htmlFor="newListName">Name Your List</Form.Label>
51+
<h3 className="heading-text">
52+
<Form.Label htmlFor="newListName">Create A New List</Form.Label>
53+
</h3>
5354
<InputGroup>
5455
<br />
5556
<Form.Control
@@ -62,7 +63,11 @@ export function CreateList({ user, setListPath }: Props) {
6263
aria-required="true" // Indicates that this field is required
6364
/>
6465
<br />
65-
<Button aria-label="Create new shopping list">Create List</Button>
66+
<div className="custom-button-wrapper">
67+
<Button aria-label="Create new shopping list" type="submit">
68+
Create List
69+
</Button>
70+
</div>
6671
</InputGroup>
6772
</Form>
6873
</>

‎src/components/SingleList.scss‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
1+
@use "../styles/mixins.scss" as *;
2+
@import "../views/unauthenticated/UnauthenticatedHome.scss";
3+
14
.SingleList {
2-
align-items: baseline;
3-
display: flex;
4-
flex-direction: row;
5-
font-size: 1.2em;
5+
@extend .custom-button-wrapper;
6+
list-style-type: none;
67
}
78

8-
.SingleList-label {
9-
margin-left: 0.2em;
9+
.SingleList button {
10+
width: 100%;
11+
margin: 5px;
12+
@include tablet {
13+
margin: 5px;
14+
}
1015
}

‎src/styles/_mixins.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// ====== MEDIA ========
2+
@mixin tablet {
3+
@media (min-width: 768px) {
4+
@content;
5+
}
6+
}
7+
8+
@mixin mobile {
9+
@media (min-width: 375px) {
10+
@content;
11+
}
12+
}

‎src/styles/_variables.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@
22
$primary-beige: #f1e6cc;
33
$primary-blue: #3f6476;
44
$secondary-blue: #001f3f;
5+
$light-blue: #356481;

‎src/views/Home.scss‎

Whitespace-only changes.

‎src/views/Home.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from "react";
2-
import "./Home.scss";
32
import { List, User } from "../api";
43
import { AuthenticatedHome, UnauthenticatedHome } from "../views";
54

‎src/views/Layout.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@
1313
height: 100dvh;
1414
}
1515

16-
.Layout > * {
17-
padding-inline: min(5dvw, 3.2rem);
18-
}
16+
// .Layout > * {
17+
// padding-inline: min(5dvw, 3.2rem);
18+
// }
1919

2020
.Layout-header {
2121
background-color: var(--color-bg);

‎src/views/authenticated/AuthenticatedHome.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@use "../../styles/mixins.scss" as *;
2+
3+
.lists {
4+
display: block;
5+
margin-top: 20px;
6+
padding: 0;
7+
margin: 0;
8+
9+
@include tablet {
10+
padding: 0;
11+
display: flex;
12+
justify-content: space-between;
13+
flex-flow: wrap;
14+
}
15+
}

‎src/views/authenticated/AuthenticatedHome.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import React from "react";
1+
// import React from "react";
22
import { SingleList, CreateList } from "../../components";
33
import { List, User } from "../../api";
4+
import "./AuthenticatedHome.scss";
45

56
interface Props {
67
data: List[];
@@ -10,14 +11,12 @@ interface Props {
1011

1112
export function AuthenticatedHome({ data, setListPath, user }: Props) {
1213
return (
13-
<>
14-
<p>
15-
Hello from the home (<code>/</code>) page!
16-
</p>
17-
14+
<div className="home">
1815
{user && (
1916
<>
20-
<ul>
17+
<CreateList user={user} setListPath={setListPath} />
18+
<h3 className="heading-text">Your Lists</h3>
19+
<ul className="lists">
2120
{data.map((list, index) => (
2221
<SingleList
2322
key={index}
@@ -27,9 +26,8 @@ export function AuthenticatedHome({ data, setListPath, user }: Props) {
2726
/>
2827
))}
2928
</ul>
30-
<CreateList user={user} setListPath={setListPath} />
3129
</>
3230
)}
33-
</>
31+
</div>
3432
);
3533
}

‎src/views/unauthenticated/UnauthenticatedHome.scss‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
@use "../../styles/variables.scss" as *;
2+
3+
.home {
4+
background-color: rgba($primary-beige, 0.9);
5+
border-radius: 5%;
6+
padding: 40px;
7+
}
8+
9+
.heading-text {
10+
color: $secondary-blue;
11+
text-align: center;
12+
padding: 12px;
13+
}
14+
15+
.normal-text {
16+
color: $light-blue;
17+
text-align: center;
18+
}
19+
20+
.button {
21+
background-color: $primary-blue;
22+
border: none;
23+
color: $primary-beige;
24+
text-align: center;
25+
padding: 10px 40px;
26+
width: 170px;
27+
28+
&:hover {
29+
background-color: $secondary-blue;
30+
}
31+
}
32+
33+
.custom-button-wrapper {
34+
display: flex;
35+
justify-content: center;
36+
align-items: center;
37+
}
38+
39+
.custom-button-wrapper button {
40+
@extend .button;
41+
}

0 commit comments

Comments
 (0)