Skip to content

Commit cf8d509

Browse files
gikusergikuser
authored
Merge pull request #6 from gikuser/rework
updated the app frontend
2 parents bec141b + 1ef2213 commit cf8d509

7 files changed

Lines changed: 388 additions & 53 deletions

File tree

‎src/App.css‎

Lines changed: 174 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,40 +2,193 @@
22
display: flex;
33
flex-direction: column;
44
align-items: center;
5-
justify-content: center;
5+
justify-content: flex-start;
6+
min-height: 100vh;
7+
padding: 2rem 1rem;
8+
max-width: 1200px;
9+
margin: 0 auto;
610
}
711

8-
.App-logo {
9-
height: 40vmin;
10-
pointer-events: none;
12+
.app-header {
13+
text-align: center;
14+
margin-bottom: 2rem;
15+
width: 100%;
1116
}
1217

13-
@media (prefers-reduced-motion: no-preference) {
14-
.App-logo {
15-
animation: App-logo-spin infinite 20s linear;
16-
}
18+
.app-header h1 {
19+
color: #ffffff;
20+
font-size: 2.5rem;
21+
font-weight: 700;
22+
margin: 0 0 0.5rem 0;
23+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
24+
letter-spacing: -0.5px;
1725
}
1826

19-
.App-header {
20-
background-color: #282c34;
21-
min-height: 100vh;
27+
.app-header p {
28+
color: #ffffff;
29+
font-size: 1.2rem;
30+
margin: 0;
31+
opacity: 0.95;
32+
font-weight: 300;
33+
}
34+
35+
.cart-container {
36+
background: #ffffff;
37+
border-radius: 16px;
38+
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
39+
padding: 2rem;
40+
width: 100%;
41+
margin-bottom: 2rem;
42+
transition: transform 0.3s ease, box-shadow 0.3s ease;
43+
}
44+
45+
.cart-container:hover {
46+
transform: translateY(-2px);
47+
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
48+
}
49+
50+
.shipping-container {
51+
background: #ffffff;
52+
border-radius: 16px;
53+
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
54+
padding: 2rem;
55+
width: 100%;
56+
margin-bottom: 2rem;
57+
}
58+
59+
.purchase-button {
60+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
61+
color: white;
62+
border: none;
63+
padding: 1rem 3rem;
64+
font-size: 1.1rem;
65+
font-weight: 600;
66+
border-radius: 12px;
67+
cursor: pointer;
68+
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
69+
transition: all 0.3s ease;
70+
text-transform: uppercase;
71+
letter-spacing: 1px;
72+
width: 100%;
73+
max-width: 400px;
74+
margin: 0 auto;
75+
display: block;
76+
}
77+
78+
.purchase-button:hover {
79+
transform: translateY(-2px);
80+
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
81+
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
82+
}
83+
84+
.purchase-button:active {
85+
transform: translateY(0);
86+
box-shadow: 0 2px 10px rgba(102, 126, 234, 0.4);
87+
}
88+
89+
.cart-items-list {
90+
list-style-type: none;
91+
padding: 0;
92+
margin: 0;
2293
display: flex;
2394
flex-direction: column;
95+
gap: 1rem;
96+
}
97+
98+
.cart-summary {
99+
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
100+
border-radius: 12px;
101+
padding: 1.5rem;
102+
margin-top: 2rem;
103+
border: 1px solid rgba(0, 0, 0, 0.05);
104+
}
105+
106+
.cart-summary p {
107+
margin: 0.75rem 0;
108+
font-size: 1rem;
109+
color: #333;
110+
display: flex;
111+
justify-content: space-between;
24112
align-items: center;
25-
justify-content: center;
26-
font-size: calc(10px + 2vmin);
27-
color: white;
28113
}
29114

30-
.App-link {
31-
color: #61dafb;
115+
.cart-summary hr {
116+
border: none;
117+
border-top: 2px solid rgba(102, 126, 234, 0.3);
118+
margin: 1rem 0;
119+
}
120+
121+
.cart-summary .order-total {
122+
font-size: 1.5rem;
123+
font-weight: 700;
124+
color: #667eea;
125+
margin-top: 1rem;
126+
padding-top: 1rem;
127+
border-top: 2px solid rgba(102, 126, 234, 0.3);
128+
}
129+
130+
.cart-title {
131+
color: #333;
132+
font-size: 2rem;
133+
font-weight: 700;
134+
margin: 0 0 1.5rem 0;
135+
padding-bottom: 1rem;
136+
border-bottom: 3px solid #667eea;
137+
}
138+
139+
.shipping-title {
140+
color: #333;
141+
font-size: 1.5rem;
142+
font-weight: 600;
143+
margin: 0 0 1.5rem 0;
144+
}
145+
146+
.loading-text,
147+
.error-text {
148+
text-align: center;
149+
padding: 2rem;
150+
color: #333;
151+
font-size: 1.2rem;
152+
}
153+
154+
.error-text {
155+
color: #e74c3c;
156+
background: #ffeaea;
157+
border-radius: 8px;
158+
border-left: 4px solid #e74c3c;
32159
}
33160

34-
@keyframes App-logo-spin {
35-
from {
36-
transform: rotate(0deg);
161+
.shipping-option-label {
162+
display: flex;
163+
align-items: center;
164+
padding: 1rem;
165+
border-radius: 8px;
166+
border: 2px solid #e0e0e0;
167+
transition: all 0.3s ease;
168+
cursor: pointer;
169+
}
170+
171+
.shipping-option-label:hover {
172+
border-color: #667eea;
173+
background-color: #f8f9ff;
174+
}
175+
176+
@media (max-width: 768px) {
177+
.App {
178+
padding: 1rem 0.5rem;
37179
}
38-
to {
39-
transform: rotate(360deg);
180+
181+
.app-header h1 {
182+
font-size: 2rem;
183+
}
184+
185+
.cart-container,
186+
.shipping-container {
187+
padding: 1.5rem;
188+
}
189+
190+
.purchase-button {
191+
padding: 0.875rem 2rem;
192+
font-size: 1rem;
40193
}
41194
}

‎src/App.js‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,26 @@ function App(props) {
1515
return (
1616
<>
1717
<div className="App">
18+
<div className="app-header">
19+
<h1>🛍️ Shopping Cart</h1>
1820
<p data-testid="thanks_id">Thank you for shopping with us!</p>
21+
</div>
22+
<div className="cart-container">
1923
<CartView shippingCost={shippingCost} cartId={props.cartId} />
24+
</div>
25+
<div className="shipping-container">
2026
<ShippingOptions onChangeValue={handleChangeValue} />
21-
<button onClick={() => setMsgYNModal({
27+
</div>
28+
<button
29+
className="purchase-button"
30+
onClick={() => setMsgYNModal({
2231
showMsgYNModal: true, message: "Do you agree with the purchase agreement?", methodOnClose: (decision) => {
2332
setMsgYNModal({ msgYNModalState: { showMsgYNModal: false, message: "", methodOnClose: ()=>{} } })
2433
}
25-
})} >
26-
Make Purchase
27-
</button>
34+
})}
35+
>
36+
Make Purchase
37+
</button>
2838
</div>
2939
<MsgYNModal
3040
style={{ width: '80%', maxHeight: 435 }}

‎src/cartItem.js‎

Lines changed: 39 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,50 @@ import Typography from '@material-ui/core/Typography';
88
const useStyles = makeStyles((theme) => ({
99
root: {
1010
display: 'flex',
11+
borderRadius: '12px',
12+
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
13+
transition: 'all 0.3s ease',
14+
overflow: 'hidden',
15+
marginBottom: '0.5rem',
16+
'&:hover': {
17+
transform: 'translateY(-2px)',
18+
boxShadow: '0 6px 20px rgba(0, 0, 0, 0.15)',
19+
},
1120
},
1221
details: {
1322
display: 'flex',
1423
flexDirection: 'column',
24+
flex: '1 1 auto',
25+
padding: '1rem',
1526
},
1627
content: {
1728
flex: '1 0 auto',
29+
padding: '0.5rem 1rem !important',
1830
},
1931
cover: {
20-
height: 100,
21-
width: '10%',
22-
}
32+
height: '120px',
33+
width: '120px',
34+
minWidth: '120px',
35+
objectFit: 'cover',
36+
background: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)',
37+
},
38+
title: {
39+
fontWeight: 600,
40+
color: '#333',
41+
marginBottom: '0.5rem',
42+
fontSize: '1.1rem',
43+
},
44+
description: {
45+
color: '#666',
46+
marginBottom: '0.5rem',
47+
fontSize: '0.9rem',
48+
},
49+
price: {
50+
color: '#667eea',
51+
fontWeight: 700,
52+
fontSize: '1.2rem',
53+
marginTop: '0.5rem',
54+
},
2355
}));
2456

2557
export default function CartItem(props) {
@@ -29,14 +61,14 @@ export default function CartItem(props) {
2961
<Card className={classes.root}>
3062
<div className={classes.details}>
3163
<CardContent className={classes.content}>
32-
<Typography component="h5" variant="h5">
64+
<Typography component="h5" variant="h5" className={classes.title}>
3365
{props.item.title}
3466
</Typography>
35-
<Typography variant="subtitle1" color="textSecondary">
67+
<Typography variant="subtitle1" className={classes.description}>
3668
{props.item.description}
3769
</Typography>
38-
<Typography variant="subtitle1" color="textSecondary">
39-
{(props.item.cost/100).toFixed(2)}
70+
<Typography variant="subtitle1" className={classes.price}>
71+
${(props.item.cost/100).toFixed(2)}
4072
</Typography>
4173
</CardContent>
4274
</div>

‎src/cartview.js‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,9 @@ function CartView(props) {
3232
}, [props.cartId]);
3333

3434
if (error) {
35-
return (<h1 data-testid="error_heading_id">Failed to retrieve cart ({error.message})</h1>);
35+
return (<h1 className="error-text" data-testid="error_heading_id">Failed to retrieve cart ({error.message})</h1>);
3636
} else if (!cart) {
37-
return (<h1>Loading shopping cart...</h1>);
37+
return (<h1 className="loading-text">Loading shopping cart...</h1>);
3838
} else {
3939
const costs = cart.cartItems.map(a => a.cost);
4040
const itemTotal = sum(...costs);
@@ -43,21 +43,33 @@ function CartView(props) {
4343
return (
4444
<>
4545
<div>
46-
<h1 data-testid="cart_heading_id">Shopping Cart</h1>
47-
<ul style={{ listStyleType: 'none', padding: 0, margin: 0 }}>
46+
<h1 className="cart-title" data-testid="cart_heading_id">Shopping Cart</h1>
47+
<ul className="cart-items-list">
4848
{cart.cartItems.map((cartItemData, idx) =>
4949
<li key={idx}>
5050
<CartItem item={cartItemData} />
5151
</li>
5252
)}
5353
</ul>
5454
</div>
55-
<div>
56-
<p data-testid="itemscost_id">Items: ${(itemTotal/100).toFixed(2)}</p>
57-
<p>Shipping: ${(props.shippingCost/100).toFixed(2)}</p>
58-
<p>Tax: ${(tax/100).toFixed(2)}</p>
55+
<div className="cart-summary">
56+
<p data-testid="itemscost_id">
57+
<span>Items:</span>
58+
<span>${(itemTotal/100).toFixed(2)}</span>
59+
</p>
60+
<p>
61+
<span>Shipping:</span>
62+
<span>${(props.shippingCost/100).toFixed(2)}</span>
63+
</p>
64+
<p>
65+
<span>Tax:</span>
66+
<span>${(tax/100).toFixed(2)}</span>
67+
</p>
5968
<hr></hr>
60-
<p><b>Order Total: ${(total/100).toFixed(2)}</b></p>
69+
<p className="order-total">
70+
<span>Order Total:</span>
71+
<span>${(total/100).toFixed(2)}</span>
72+
</p>
6173
</div>
6274
</>
6375
);

‎src/index.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
15
body {
26
margin: 0;
7+
padding: 0;
38
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
49
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
510
sans-serif;
611
-webkit-font-smoothing: antialiased;
712
-moz-osx-font-smoothing: grayscale;
13+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
14+
min-height: 100vh;
815
}
916

1017
code {

0 commit comments

Comments
 (0)