Skip to content

Feature/UI #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MS-Rex merged 2 commits into from
Dec 16, 2025
Merged

Feature/UI #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
82015fb
UI redesign
MS-Rex Dec 16, 2025
325d16b
null fix
MS-Rex Dec 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .github/workflows/build-test.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,12 @@ jobs:
- name: Run linter
run: npm run lint

- name: SonarQube Scan
uses: SonarSource/sonarqube-scan-action@v4
env:
SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

- name: Build production bundle
run: npm run build

Expand Down
1 change: 1 addition & 0 deletions .nvmrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
20
9 changes: 8 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,14 @@ const nextConfig = {

### Prerequisites

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

Expand Down
50 changes: 25 additions & 25 deletions app/cart/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,22 +21,22 @@ export default function CartPage() {

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

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

return (
<div className="min-h-screen bg-white dark:bg-gray-900 py-12">
<div className="min-h-screen bg-background py-12">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
>
<div className="flex items-center justify-between mb-8">
<h1 className="text-4xl font-bold text-gray-900 dark:text-white">
<h1 className="text-4xl font-heading font-bold text-foreground">
Shopping Cart
</h1>
<button
onClick={clearCart}
className="text-red-500 hover:text-red-600 transition-colors text-sm font-medium"
className="text-destructive hover:text-destructive/80 transition-colors text-sm font-medium"
>
Clear Cart
</button>
Expand All @@ -77,7 +77,7 @@ export default function CartPage() {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.1, duration: 0.5 }}
className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-md border border-gray-200 dark:border-gray-700"
className="bg-card text-card-foreground rounded-xl p-6 shadow-md border border-border"
>
<div className="flex gap-6">
<Link href={`/product/${item.product.id}`}>
Expand All @@ -93,30 +93,30 @@ export default function CartPage() {

<div className="flex-1">
<Link href={`/product/${item.product.id}`}>
<h3 className="font-semibold text-gray-900 dark:text-white mb-2 hover:text-wso2-orange transition-colors">
<h3 className="font-semibold text-foreground mb-2 hover:text-primary transition-colors">
{item.product.name}
</h3>
</Link>
<p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
<p className="text-sm text-muted-foreground mb-2">
{item.product.brand}
</p>
<p className="text-2xl font-bold text-wso2-orange">
<p className="text-2xl font-bold text-primary">
{`LKR ${item.product.price.toLocaleString('en-LK')}`}
</p>
</div>

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

<div className="flex items-center gap-3 bg-gray-100 dark:bg-gray-700 rounded-lg p-1">
<div className="flex items-center gap-3 bg-muted rounded-lg p-1">
<button
onClick={() => updateQuantity(item.product.id, item.quantity - 1)}
className="p-1 hover:bg-white dark:hover:bg-gray-600 rounded transition-colors"
className="p-1 hover:bg-background rounded transition-colors"
>
<Minus className="h-4 w-4" />
</button>
Expand All @@ -126,7 +126,7 @@ export default function CartPage() {
<button
onClick={() => updateQuantity(item.product.id, item.quantity + 1)}
disabled={item.quantity >= item.product.stockLevel}
className="p-1 hover:bg-white dark:hover:bg-gray-600 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
className="p-1 hover:bg-background rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
<Plus className="h-4 w-4" />
</button>
Expand All @@ -144,24 +144,24 @@ export default function CartPage() {
transition={{ duration: 0.6 }}
className="lg:col-span-1"
>
<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">
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
<div className="bg-card text-card-foreground rounded-xl p-6 shadow-md border border-border sticky top-20">
<h2 className="text-2xl font-bold text-foreground mb-6">
Order Summary
</h2>

<div className="space-y-4 mb-6">
<div className="flex justify-between text-gray-600 dark:text-gray-400">
<div className="flex justify-between text-muted-foreground">
<span>Subtotal</span>
<span>{`LKR ${subtotal.toLocaleString('en-LK')}`}</span>
</div>
<div className="flex justify-between text-gray-600 dark:text-gray-400">
<div className="flex justify-between text-muted-foreground">
<span>VAT (15%)</span>
<span>{`LKR ${tax.toLocaleString('en-LK')}`}</span>
</div>
<div className="border-t border-gray-200 dark:border-gray-700 pt-4">
<div className="flex justify-between text-xl font-bold text-gray-900 dark:text-white">
<div className="border-t border-border pt-4">
<div className="flex justify-between text-xl font-bold text-foreground">
<span>Total</span>
<span className="text-wso2-orange">{`LKR ${total.toLocaleString('en-LK')}`}</span>
<span className="text-primary">{`LKR ${total.toLocaleString('en-LK')}`}</span>
</div>
</div>
</div>
Expand All @@ -172,7 +172,7 @@ export default function CartPage() {

<Link
href="/"
className="block text-center mt-4 text-wso2-orange hover:text-wso2-orange-dark transition-colors"
className="block text-center mt-4 text-primary hover:text-primary/80 transition-colors"
>
Continue Shopping
</Link>
Expand Down
Loading