Skip to content

Commit df827f3

Browse files
eternalmahaeternalmaha
committed
style: stlying the add item form inside the listpage
2 parents f76004b + 5e27cee commit df827f3

File tree

14 files changed

+161
-56
lines changed

14 files changed

+161
-56
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/components/forms/AddItemForm.scss

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
@import "../../styles/variables";
2+
3+
.custom-borders {
4+
border: 2px solid $secondary-blue !important;
5+
border-radius: 4px !important;
6+
padding: 20px;
7+
margin-top: 20px;
8+
position: relative;
9+
}
10+
11+
.legend-text {
12+
font-weight: bold;
13+
padding: 0 10px; /* Creates space between the border and text */
14+
color: #001f3f; /* Optional: text color */
15+
position: relative;
16+
top: -40px;
17+
left: 10px;
18+
background-color: #f3ecd3;
19+
width: 80%;
20+
}

‎src/components/forms/AddItemForm.tsx

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import { validateItemName } from "../../utils";
44
import toast from "react-hot-toast";
55
import Button from "react-bootstrap/Button";
66
import Form from "react-bootstrap/Form";
7-
87
import { useNavigate } from "react-router-dom";
8+
import "./AddItemForm.scss";
99

1010
interface Props {
1111
listPath: string;
@@ -104,27 +104,29 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
104104
};
105105

106106
return (
107-
<section>
107+
<section className="custom-borders d-flex flex-column align-items-center p-2 ">
108108
<Form onSubmit={(e) => handleSubmit(e, listPath)}>
109-
<h3>First, add your item!</h3>
109+
<h3>New Item</h3>
110110
<Form.Label htmlFor="item-name">
111-
Item:
111+
<h5>Item Name:</h5>
112112
<Form.Control
113113
id="item-name"
114114
type="text"
115115
name="item"
116+
placeholder="Item Name..."
116117
value={itemName}
117118
onChange={handleItemNameTextChange}
118119
aria-label="Enter the item name"
119120
aria-required
120121
/>
121122
</Form.Label>
122123
<label htmlFor="item-quantity">
123-
Quantity:
124+
<h5>Item Quantity: </h5>
124125
<Form.Control
125126
id="item-quantity"
126127
type="number"
127128
name="quantity"
129+
placeholder="Quantity..."
128130
min="1"
129131
max="100"
130132
value={addedQuantity}
@@ -134,10 +136,10 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
134136
/>
135137
</label>
136138
<br />
137-
<h3>Next, pick when you plan on buying this item again!</h3>
138-
<fieldset>
139-
<legend>When to buy:</legend>
140-
<Form.Label htmlFor={PurchaseTime.soon}>
139+
<fieldset className="custom-borders ">
140+
<legend className="legend-text">When to buy:</legend>
141+
142+
<Form.Label htmlFor={PurchaseTime.soon} className="d-flex gap-2 ">
141143
<Form.Check
142144
type="radio"
143145
id={PurchaseTime.soon}
@@ -151,7 +153,10 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
151153
Soon -- Within {purchaseTimelines[PurchaseTime.soon]} days!
152154
</Form.Label>
153155
<br />
154-
<Form.Label htmlFor={PurchaseTime.kindOfSoon}>
156+
<Form.Label
157+
htmlFor={PurchaseTime.kindOfSoon}
158+
className="d-flex gap-2"
159+
>
155160
<Form.Check
156161
type="radio"
157162
id={PurchaseTime.kindOfSoon}
@@ -166,7 +171,7 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
166171
days!
167172
</Form.Label>
168173
<br />
169-
<label htmlFor={PurchaseTime.notSoon}>
174+
<Form.Label htmlFor={PurchaseTime.notSoon} className="d-flex gap-2">
170175
<Form.Check
171176
type="radio"
172177
id={PurchaseTime.notSoon}
@@ -178,14 +183,13 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
178183
aria-label={`Set buy to not soon, within ${purchaseTimelines[PurchaseTime.notSoon]} days`}
179184
/>
180185
Not soon -- Within {purchaseTimelines[PurchaseTime.notSoon]} days!
181-
</label>
186+
</Form.Label>
187+
<Button type="submit" aria-label="Add item to shopping list">
188+
Submit Item
189+
</Button>
182190
</fieldset>
183-
<Button type="submit" aria-label="Add item to shopping list">
184-
Submit Item
185-
</Button>
186191
</Form>
187-
<h4>Let&apos;s go look at your list!</h4>
188-
<Button onClick={navigateToListPage}>{"View List"}</Button>
192+
{/*<Button onClick={navigateToListPage}>{"View List"}</Button>*/}
189193
</section>
190194
);
191195
}

‎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+
}

0 commit comments

Comments
 (0)