Skip to content

Commit 2032086

Browse files
MS-RexMS-Rex
authored
Merge pull request #11 from CSO2/feature/ui
Feature/UI
2 parents 3af9bdd + 325d16b commit 2032086

32 files changed

+1066
-960
lines changed

‎.github/workflows/build-test.yml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,12 @@ jobs:
4040
- name: Run linter
4141
run: npm run lint
4242

43+
- name: SonarQube Scan
44+
uses: SonarSource/sonarqube-scan-action@v4
45+
env:
46+
SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
47+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
48+
4349
- name: Build production bundle
4450
run: npm run build
4551

‎.nvmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
20

‎README.md‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -230,7 +230,14 @@ const nextConfig = {
230230

231231
### Prerequisites
232232

233-
- Node.js 18+
233+
- Node.js 20.9.0+
234+
- Recommend using [nvm](https://github.com/nvm-sh/nvm) (Node Version Manager):
235+
```bash
236+
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
237+
# Restart terminal or source ~/.bashrc
238+
nvm install 20
239+
nvm use 20
240+
```
234241
- npm or yarn
235242
- Backend services running (see [Backend README](../backend/README.md))
236243

‎app/cart/page.tsx‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -21,22 +21,22 @@ export default function CartPage() {
2121

2222
if (isLoading) {
2323
return (
24-
<div className="min-h-screen bg-white dark:bg-gray-900 py-12 flex justify-center items-center">
25-
<Loader2 className="h-12 w-12 animate-spin text-wso2-orange" />
24+
<div className="min-h-screen bg-background py-12 flex justify-center items-center">
25+
<Loader2 className="h-12 w-12 animate-spin text-primary" />
2626
</div>
2727
);
2828
}
2929

3030
if (items.length === 0) {
3131
return (
32-
<div className="min-h-screen bg-white dark:bg-gray-900 py-12">
32+
<div className="min-h-screen bg-background py-12">
3333
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
3434
<div className="text-center py-20">
35-
<ShoppingBag className="h-24 w-24 text-gray-400 mx-auto mb-6" />
36-
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
35+
<ShoppingBag className="h-24 w-24 text-muted-foreground mx-auto mb-6" />
36+
<h2 className="text-3xl font-bold text-foreground mb-4">
3737
Your cart is empty
3838
</h2>
39-
<p className="text-gray-600 dark:text-gray-400 mb-8">
39+
<p className="text-muted-foreground mb-8">
4040
Add some awesome products to get started!
4141
</p>
4242
<AnimatedButton href="/" variant="primary">
@@ -49,20 +49,20 @@ export default function CartPage() {
4949
}
5050

5151
return (
52-
<div className="min-h-screen bg-white dark:bg-gray-900 py-12">
52+
<div className="min-h-screen bg-background py-12">
5353
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
5454
<motion.div
5555
initial={{ opacity: 0, y: 20 }}
5656
animate={{ opacity: 1, y: 0 }}
5757
transition={{ duration: 0.6 }}
5858
>
5959
<div className="flex items-center justify-between mb-8">
60-
<h1 className="text-4xl font-bold text-gray-900 dark:text-white">
60+
<h1 className="text-4xl font-heading font-bold text-foreground">
6161
Shopping Cart
6262
</h1>
6363
<button
6464
onClick={clearCart}
65-
className="text-red-500 hover:text-red-600 transition-colors text-sm font-medium"
65+
className="text-destructive hover:text-destructive/80 transition-colors text-sm font-medium"
6666
>
6767
Clear Cart
6868
</button>
@@ -77,7 +77,7 @@ export default function CartPage() {
7777
initial={{ opacity: 0, y: 20 }}
7878
animate={{ opacity: 1, y: 0 }}
7979
transition={{ delay: index * 0.1, duration: 0.5 }}
80-
className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-md border border-gray-200 dark:border-gray-700"
80+
className="bg-card text-card-foreground rounded-xl p-6 shadow-md border border-border"
8181
>
8282
<div className="flex gap-6">
8383
<Link href={`/product/${item.product.id}`}>
@@ -93,30 +93,30 @@ export default function CartPage() {
9393

9494
<div className="flex-1">
9595
<Link href={`/product/${item.product.id}`}>
96-
<h3 className="font-semibold text-gray-900 dark:text-white mb-2 hover:text-wso2-orange transition-colors">
96+
<h3 className="font-semibold text-foreground mb-2 hover:text-primary transition-colors">
9797
{item.product.name}
9898
</h3>
9999
</Link>
100-
<p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
100+
<p className="text-sm text-muted-foreground mb-2">
101101
{item.product.brand}
102102
</p>
103-
<p className="text-2xl font-bold text-wso2-orange">
103+
<p className="text-2xl font-bold text-primary">
104104
{`LKR ${item.product.price.toLocaleString('en-LK')}`}
105105
</p>
106106
</div>
107107

108108
<div className="flex flex-col items-end justify-between">
109109
<button
110110
onClick={() => removeItem(item.product.id)}
111-
className="p-2 text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
111+
className="p-2 text-destructive hover:bg-destructive/10 rounded-lg transition-colors"
112112
>
113113
<Trash2 className="h-5 w-5" />
114114
</button>
115115

116-
<div className="flex items-center gap-3 bg-gray-100 dark:bg-gray-700 rounded-lg p-1">
116+
<div className="flex items-center gap-3 bg-muted rounded-lg p-1">
117117
<button
118118
onClick={() => updateQuantity(item.product.id, item.quantity - 1)}
119-
className="p-1 hover:bg-white dark:hover:bg-gray-600 rounded transition-colors"
119+
className="p-1 hover:bg-background rounded transition-colors"
120120
>
121121
<Minus className="h-4 w-4" />
122122
</button>
@@ -126,7 +126,7 @@ export default function CartPage() {
126126
<button
127127
onClick={() => updateQuantity(item.product.id, item.quantity + 1)}
128128
disabled={item.quantity >= item.product.stockLevel}
129-
className="p-1 hover:bg-white dark:hover:bg-gray-600 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
129+
className="p-1 hover:bg-background rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
130130
>
131131
<Plus className="h-4 w-4" />
132132
</button>
@@ -144,24 +144,24 @@ export default function CartPage() {
144144
transition={{ duration: 0.6 }}
145145
className="lg:col-span-1"
146146
>
147-
<div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-md border border-gray-200 dark:border-gray-700 sticky top-20">
148-
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
147+
<div className="bg-card text-card-foreground rounded-xl p-6 shadow-md border border-border sticky top-20">
148+
<h2 className="text-2xl font-bold text-foreground mb-6">
149149
Order Summary
150150
</h2>
151151

152152
<div className="space-y-4 mb-6">
153-
<div className="flex justify-between text-gray-600 dark:text-gray-400">
153+
<div className="flex justify-between text-muted-foreground">
154154
<span>Subtotal</span>
155155
<span>{`LKR ${subtotal.toLocaleString('en-LK')}`}</span>
156156
</div>
157-
<div className="flex justify-between text-gray-600 dark:text-gray-400">
157+
<div className="flex justify-between text-muted-foreground">
158158
<span>VAT (15%)</span>
159159
<span>{`LKR ${tax.toLocaleString('en-LK')}`}</span>
160160
</div>
161-
<div className="border-t border-gray-200 dark:border-gray-700 pt-4">
162-
<div className="flex justify-between text-xl font-bold text-gray-900 dark:text-white">
161+
<div className="border-t border-border pt-4">
162+
<div className="flex justify-between text-xl font-bold text-foreground">
163163
<span>Total</span>
164-
<span className="text-wso2-orange">{`LKR ${total.toLocaleString('en-LK')}`}</span>
164+
<span className="text-primary">{`LKR ${total.toLocaleString('en-LK')}`}</span>
165165
</div>
166166
</div>
167167
</div>
@@ -172,7 +172,7 @@ export default function CartPage() {
172172

173173
<Link
174174
href="/"
175-
className="block text-center mt-4 text-wso2-orange hover:text-wso2-orange-dark transition-colors"
175+
className="block text-center mt-4 text-primary hover:text-primary/80 transition-colors"
176176
>
177177
Continue Shopping
178178
</Link>

0 commit comments

Comments
 (0)