fixed the styling and colors to purple

2026-01-22 00:01:27 +03:00 · 2026-01-22 00:01:27 +03:00 · fba93887ad
commit fba93887ad
parent 454e5d761b
4 changed files with 247 additions and 73 deletions
--- a/TODO.md
+++ b/TODO.md
@ -1,24 +1,3 @@
-# Edit Functionality for User and Family Data
-
-## Tasks
- [x] Add editProfile() and updateProfile() methods in FamilyController
- [x] Add routes for profile.edit and profile.update in web.php
- [x] Create profile-edit.blade.php view
- [x] Add edit buttons in show.blade.php
- [x] Add edit link in dashboard.blade.php for user card
- [x] Test the edit forms
-
-# Image Upload Modal Component
-
-## Tasks
- [x] Create migration for profile_picture column in users table
- [x] Update User model to add profile_picture to fillable and casts
- [x] Add cropperjs and browser-image-compression to package.json
- [x] Update app.js to import cropperjs and browser-image-compression
- [x] Create image-upload-modal.blade.php component
- [x] Add uploadProfilePicture method to FamilyController
- [x] Add route for profile picture upload in web.php
- [x] Update profile-edit.blade.php to include profile picture section
- [x] Update updateProfile method to handle profile_picture (not needed, upload is separate)
- [x] Run npm install and php artisan migrate
- [x] Test the image upload functionality (implementation complete, manual testing required)
+- [x] Add the :root CSS variables block to the <style> in resources/views/layouts/app.blade.php
+- [x] Update existing custom styles in the layout to use the new CSS variables (e.g., background-color: hsl(var(--primary)))
+- [x] Verify that the colors are applied correctly in the views
--- a/resources/css/app.css
+++ b/resources/css/app.css
@ -8,4 +8,55 @@
@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
+
+    /* Base Colors */
+    --color-background: hsl(220 15% 97%);
+    --color-foreground: hsl(215 25% 27%);
+
+    --color-card: hsl(0 0% 100%);
+    --color-card-foreground: hsl(215 25% 27%);
+
+    /* Primary - Soft Purple */
+    --color-primary: hsl(250 60% 70%);
+    --color-primary-foreground: hsl(0 0% 100%);
+
+    /* Secondary - Soft Sage Green */
+    --color-secondary: hsl(140 30% 75%);
+    --color-secondary-foreground: hsl(140 45% 25%);
+
+    /* Success - Soft Mint */
+    --color-success: hsl(150 40% 70%);
+    --color-success-foreground: hsl(150 45% 20%);
+
+    /* Warning - Soft Peach */
+    --color-warning: hsl(35 60% 80%);
+    --color-warning-foreground: hsl(35 60% 30%);
+
+    /* Info - Soft Sky Blue */
+    --color-info: hsl(200 50% 75%);
+    --color-info-foreground: hsl(200 60% 25%);
+
+    --color-muted: hsl(220 15% 94%);
+    --color-muted-foreground: hsl(215 15% 50%);
+
+    --color-accent: hsl(250 60% 92%);
+    --color-accent-foreground: hsl(250 60% 30%);
+
+    --color-destructive: hsl(0 50% 75%);
+    --color-destructive-foreground: hsl(0 0% 100%);
+
+    --color-border: hsl(220 15% 88%);
+    --color-input: hsl(220 15% 92%);
+    --color-ring: hsl(250 60% 70%);
+    --radius: 0.75rem;
+
+    /* Sidebar */
+    --color-sidebar-background: hsl(250 25% 96%);
+    --color-sidebar-foreground: hsl(215 25% 35%);
+    --color-sidebar-primary: hsl(250 60% 70%);
+    --color-sidebar-primary-foreground: hsl(0 0% 100%);
+    --color-sidebar-accent: hsl(250 25% 90%);
+    --color-sidebar-accent-foreground: hsl(215 25% 40%);
+    --color-sidebar-border: hsl(250 20% 85%);
+    --color-sidebar-ring: hsl(250 60% 70%);
 }
--- a/resources/views/clubs/explore.blade.php
+++ b/resources/views/clubs/explore.blade.php
@ -3,24 +3,24 @@
@section('content')
 <div class="container py-4">
    <!-- Hero Section -->
-    <div class="text-center mb-5">
-        <h1 class="display-4 fw-bold text-danger mb-2">Find Your Perfect Fit</h1>
+    <div class="text-center mb-3">
+        <h1 class="display-4 fw-bold text-primary mb-2">Find Your Perfect Fit</h1>
        <p class="lead text-muted">Discover sports clubs, trainers, nutrition clinics, and more near you</p>
-        <p class="text-muted"><i class="bi bi-geo-alt-fill me-1"></i><span id="currentLocation">Detecting location...</span></p>
+        <p class="text-muted"><span id="currentLocation" class="badge bg-primary text-white rounded-pill px-3 py-2"><i class="bi bi-geo-alt-fill me-1 fs-5"></i>Detecting location...</span></p>
    </div>

    <!-- Search Bar with Near Me Button -->
    <div class="row justify-content-center mb-4">
        <div class="col-lg-10">
-            <div class="card shadow-sm border-0">
-                <div class="card-body p-2">
-                    <div class="input-group">
+            <div class="card shadow-sm rounded-pill border-0">
+                <div class="card-body rounded-pill p-2">
+                    <div class="input-group rounded-pill">
                        <span class="input-group-text bg-white border-0">
                            <i class="bi bi-search"></i>
                        </span>
-                        <input type="text" id="searchInput" class="form-control border-0"
+                        <input type="text" id="searchInput" class="form-control bg-white border-0"
                               placeholder="Search for clubs, trainers, nutrition clinics...">
-                        <button class="btn btn-danger px-4" id="nearMeBtn" type="button">
+                        <button class="btn btn-primary px-4 rounded-pill" id="nearMeBtn" type="button">
                            <i class="bi bi-geo-alt-fill me-2"></i>Near Me
                        </button>
                    </div>
@ -33,34 +33,34 @@
    <div class="row justify-content-center mb-4">
        <div class="col-lg-10">
            <div class="d-flex flex-wrap gap-2 justify-content-center">
-                <button class="btn btn-danger category-btn active" data-category="all">
+                <button class="btn btn-primary category-btn active" data-category="all">
                    <i class="bi bi-search me-2"></i>All
                </button>
-                <button class="btn btn-outline-danger category-btn" data-category="sports-clubs">
+                <button class="btn btn-outline-primary category-btn" data-category="sports-clubs">
                    <i class="bi bi-trophy me-2"></i>Sports Clubs
                </button>
-                <button class="btn btn-outline-danger category-btn" data-category="personal-trainers">
+                <button class="btn btn-outline-primary category-btn" data-category="personal-trainers">
                    <i class="bi bi-person me-2"></i>Personal Trainers
                </button>
-                <button class="btn btn-outline-danger category-btn" data-category="events">
+                <button class="btn btn-outline-primary category-btn" data-category="events">
                    <i class="bi bi-calendar-event me-2"></i>Events
                </button>
-                <button class="btn btn-outline-danger category-btn" data-category="nutrition-clinic">
+                <button class="btn btn-outline-primary category-btn" data-category="nutrition-clinic">
                    <i class="bi bi-apple me-2"></i>Nutrition Clinic
                </button>
-                <button class="btn btn-outline-danger category-btn" data-category="physiotherapy-clinics">
+                <button class="btn btn-outline-primary category-btn" data-category="physiotherapy-clinics">
                    <i class="bi bi-activity me-2"></i>Physiotherapy Clinics
                </button>
-                <button class="btn btn-outline-danger category-btn" data-category="sports-shops">
+                <button class="btn btn-outline-primary category-btn" data-category="sports-shops">
                    <i class="bi bi-bag me-2"></i>Sports Shops
                </button>
-                <button class="btn btn-outline-danger category-btn" data-category="venues">
-                    <i class="bi bi-building me-2"></i>Venues
+                <button class="btn btn-outline-primary category-btn" data-category="venues">
+                    <i class="bi bi-building-fill me-2"></i>Venues
                </button>
-                <button class="btn btn-outline-danger category-btn" data-category="supplements">
+                <button class="btn btn-outline-primary category-btn" data-category="supplements">
                    <i class="bi bi-box me-2"></i>Supplements
                </button>
-                <button class="btn btn-outline-danger category-btn" data-category="food-plans">
+                <button class="btn btn-outline-primary category-btn" data-category="food-plans">
                    <i class="bi bi-egg-fried me-2"></i>Food Plans
                </button>
            </div>
@ -76,7 +76,7 @@

    <!-- Loading Spinner -->
    <div id="loadingSpinner" class="text-center py-5">
-        <div class="spinner-border text-danger" role="status">
+        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <p class="mt-3 text-muted">Finding what's near you...</p>
@ -88,6 +88,8 @@
            <div class="row g-4" id="clubsContainer">
                <!-- Club cards will be inserted here -->
            </div>
+        </div>
+        <div class="col-12 d-flex justify-content-center">
            <div id="noResults" class="d-flex flex-column align-items-center justify-content-center text-center" style="display: none; min-height: 400px;">
                <i class="bi bi-inbox" style="font-size: 4rem; color: #dee2e6;"></i>
                <h4 class="mt-3 text-muted">No Results Found</h4>
@ -116,7 +118,7 @@
                        <i class="bi bi-geo-alt-fill me-1"></i>
                        <span id="modalLocationCoordinates">Drag the marker to set your location</span>
                    </small>
-                    <button type="button" class="btn btn-danger" id="applyLocationBtn">
+                    <button type="button" class="btn btn-primary" id="applyLocationBtn">
                        <i class="bi bi-check-circle me-2"></i>Apply Location
                    </button>
                </div>
@ -146,7 +148,7 @@

    .category-btn.active {
        transform: translateY(-2px);
-        box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
+        box-shadow: 0 4px 8px hsl(var(--primary) / 0.3);
    }

    .club-card {
@ -171,7 +173,7 @@
        position: absolute;
        top: 10px;
        right: 10px;
-        background: #dc3545;
+        background: #0d6efd;
        color: white;
        padding: 0.25rem 0.75rem;
        border-radius: 20px;
@ -180,7 +182,7 @@
    }

    .stat-box {
-        background: #f8f9fa;
+        background: hsl(var(--muted));
        border-radius: 8px;
        padding: 0.75rem;
        text-align: center;
@ -188,18 +190,18 @@

    .stat-box i {
        font-size: 1.25rem;
-        color: #dc3545;
+        color: hsl(var(--primary));
    }

    .stat-box .stat-number {
        font-size: 1.25rem;
        font-weight: 700;
-        color: #212529;
+        color: hsl(var(--foreground));
    }

    .stat-box .stat-label {
        font-size: 0.75rem;
-        color: #6c757d;
+        color: hsl(var(--muted-foreground));
    }

    /* Pulsing animation for location marker */
@ -220,6 +222,28 @@

    .pulse-marker {
        animation: pulse 2s ease-in-out infinite;
+        color: #0d6efd;
+    }
+
+    #currentLocation {
+        font-size: 1.2rem;
+    }
+
+    .input-group.rounded-pill {
+        overflow: hidden;
+    }
+
+    .input-group.rounded-pill .input-group-text {
+        border-radius: 50rem 0 0 50rem !important;
+    }
+
+    .input-group.rounded-pill .form-control {
+        border-radius: 0;
+    }
+
+    .form-control:focus {
+        border-color: #ced4da !important;
+        box-shadow: none !important;
    }
 </style>
@endpush
@ -254,11 +278,11 @@ document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.category-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            document.querySelectorAll('.category-btn').forEach(b => {
-                b.classList.remove('active', 'btn-danger');
-                b.classList.add('btn-outline-danger');
+                b.classList.remove('active', 'btn-primary');
+                b.classList.add('btn-outline-primary');
            });
-            this.classList.remove('btn-outline-danger');
-            this.classList.add('active', 'btn-danger');
+            this.classList.remove('btn-outline-primary');
+            this.classList.add('active', 'btn-primary');

            currentCategory = this.dataset.category;
            filterClubs();
@ -338,8 +362,8 @@ function startWatchingLocation() {

 // Update location display
 function updateLocationDisplay(lat, lng) {
-    document.getElementById('currentLocation').textContent =
-        `${lat.toFixed(4)}, ${lng.toFixed(4)}`;
+    document.getElementById('currentLocation').innerHTML =
+        `<i class="bi bi-geo-alt-fill me-1 fs-5"></i>${lat.toFixed(4)}, ${lng.toFixed(4)}`;
    document.getElementById('modalLocationCoordinates').textContent =
        `Latitude: ${lat.toFixed(6)}, Longitude: ${lng.toFixed(6)}`;
 }
@ -350,7 +374,7 @@ function initMap(lat, lng) {
        map.remove();
    }

-    map = L.map('map').setView([lat, lng], 13);
+    map = L.map('map', { attributionControl: false }).setView([lat, lng], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; OpenStreetMap contributors',
@ -478,10 +502,10 @@ function displayClubs(clubs) {
                    </div>

                    <div class="d-grid gap-2">
-                        <button class="btn btn-danger">
+                        <button class="btn btn-primary">
                            <i class="bi bi-person-plus me-2"></i>Join Club
                        </button>
-                        <button class="btn btn-outline-danger">View Details</button>
+                        <button class="btn btn-outline-primary">View Details</button>
                    </div>
                </div>
            </div>
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@ -26,10 +26,130 @@

    <!-- Custom Styles -->
    <style>
+        :root {
+          /* Base Colors */
+          --background: 220 15% 97%;
+          --foreground: 215 25% 27%;
+
+          --card: 0 0% 100%;
+          --card-foreground: 215 25% 27%;
+
+          /* Primary - Soft Purple */
+          --primary: 250 60% 70%;
+          --primary-foreground: 0 0% 100%;
+          --primary-hover: 250 60% 65%;
+
+          /* Secondary - Soft Sage Green */
+          --secondary: 140 30% 75%;
+          --secondary-foreground: 140 45% 25%;
+
+          /* Success - Soft Mint */
+          --success: 150 40% 70%;
+          --success-foreground: 150 45% 20%;
+
+          /* Warning - Soft Peach */
+          --warning: 35 60% 80%;
+          --warning-foreground: 35 60% 30%;
+
+          /* Info - Soft Sky Blue */
+          --info: 200 50% 75%;
+          --info-foreground: 200 60% 25%;
+
+          --muted: 220 15% 94%;
+          --muted-foreground: 215 15% 50%;
+
+          --accent: 250 60% 92%;
+          --accent-foreground: 250 60% 30%;
+
+          --destructive: 0 50% 75%;
+          --destructive-foreground: 0 0% 100%;
+
+          --border: 220 15% 88%;
+          --input: 220 15% 92%;
+          --ring: 250 60% 70%;
+          --radius: 0.75rem;
+
+          /* Sidebar */
+          --sidebar-background: 250 25% 96%;
+          --sidebar-foreground: 215 25% 35%;
+          --sidebar-primary: 250 60% 70%;
+          --sidebar-primary-foreground: 0 0% 100%;
+          --sidebar-accent: 250 25% 90%;
+          --sidebar-accent-foreground: 215 25% 40%;
+          --sidebar-border: 250 20% 85%;
+          --sidebar-ring: 250 60% 70%;
+
+          /* Gradients */
+          --gradient-primary: linear-gradient(135deg, hsl(250 60% 75%), hsl(250 60% 65%));
+          --gradient-secondary: linear-gradient(135deg, hsl(140 30% 80%), hsl(140 30% 70%));
+          --gradient-sidebar: linear-gradient(180deg, hsl(250 25% 98%), hsl(250 25% 94%));
+          --gradient-success: linear-gradient(135deg, hsl(150 40% 75%), hsl(150 40% 65%));
+          --gradient-warning: linear-gradient(135deg, hsl(35 60% 85%), hsl(35 60% 75%));
+          --gradient-info: linear-gradient(135deg, hsl(200 50% 80%), hsl(200 50% 70%));
+
+          /* Shadows */
+          --shadow-card: 0 2px 12px hsl(250 20% 70% / 0.08);
+          --shadow-elevated: 0 8px 30px hsl(250 20% 60% / 0.12);
+          --shadow-primary: 0 4px 20px hsl(250 60% 70% / 0.25);
+
+          /* Bootstrap Overrides */
+          --bs-primary: hsl(var(--primary));
+          --bs-secondary: hsl(var(--secondary));
+          --bs-success: hsl(var(--success));
+          --bs-info: hsl(var(--info));
+          --bs-warning: hsl(var(--warning));
+          --bs-danger: hsl(var(--destructive));
+          --bs-light: hsl(var(--muted));
+          --bs-dark: hsl(var(--foreground));
+          --bs-white: hsl(var(--card));
+          --bs-body-color: hsl(var(--foreground));
+          --bs-body-bg: hsl(var(--background));
+        }
+
        body {
            font-family: 'Inter', sans-serif;
-            background-color: #f8f9fa;
+            background-color: hsl(var(--background));
        }
+
+        /* Theme Overrides */
+        .text-primary { color: hsl(var(--primary)) !important; }
+        .text-secondary { color: hsl(var(--secondary)) !important; }
+        .text-success { color: hsl(var(--success)) !important; }
+        .text-info { color: hsl(var(--info)) !important; }
+        .text-warning { color: hsl(var(--warning)) !important; }
+        .text-danger { color: hsl(var(--destructive)) !important; }
+        .text-muted { color: hsl(var(--muted-foreground)) !important; }
+
+        .bg-primary { background-color: hsl(var(--primary)) !important; }
+        .bg-secondary { background-color: hsl(var(--secondary)) !important; }
+        .bg-success { background-color: hsl(var(--success)) !important; }
+        .bg-info { background-color: hsl(var(--info)) !important; }
+        .bg-warning { background-color: hsl(var(--warning)) !important; }
+        .bg-danger { background-color: hsl(var(--destructive)) !important; }
+        .bg-light { background-color: hsl(var(--muted)) !important; }
+        .bg-white { background-color: #ffffff !important; }
+
+        .btn-primary {
+            background-color: hsl(var(--primary)) !important;
+            border-color: hsl(var(--primary)) !important;
+        }
+        .btn-primary:hover {
+            background-color: hsl(var(--primary-hover)) !important;
+            border-color: hsl(var(--primary-hover)) !important;
+        }
+        .btn-outline-primary {
+            color: hsl(var(--primary)) !important;
+            border-color: hsl(var(--primary)) !important;
+        }
+        .btn-outline-primary:hover {
+            background-color: hsl(var(--primary)) !important;
+            border-color: hsl(var(--primary)) !important;
+        }
+
+        .border { border-color: hsl(var(--border)) !important; }
+        .border-primary { border-color: hsl(var(--primary)) !important; }
+
+        .card { background-color: #ffffff !important; }
        .navbar-brand {
            font-weight: 600;
        }
@ -50,12 +170,12 @@
            font-weight: 500;
        }
        .btn-primary {
-            background-color: #0d6efd;
-            border-color: #0d6efd;
+            background-color: hsl(var(--primary));
+            border-color: hsl(var(--primary));
        }
        .btn-primary:hover {
-            background-color: #0b5ed7;
-            border-color: #0a58ca;
+            background-color: hsl(var(--primary-hover));
+            border-color: hsl(var(--primary-hover));
        }
        .user-avatar {
            width: 32px;
@ -68,8 +188,8 @@
            width: 32px;
            height: 32px;
            border-radius: 50%;
-            background-color: #0d6efd;
-            color: white;
+            background-color: hsl(var(--primary));
+            color: hsl(var(--primary-foreground));
            display: inline-flex;
            align-items: center;
            justify-content: center;
@ -94,8 +214,8 @@
            position: absolute;
            top: 0;
            right: 0;
-            background-color: #dc3545;
-            color: white;
+            background-color: hsl(var(--destructive));
+            color: hsl(var(--destructive-foreground));
            border-radius: 50%;
            width: 18px;
            height: 18px;
@ -112,24 +232,24 @@
        }
        .notification-item {
            padding: 0.75rem 1rem;
-            border-bottom: 1px solid #f0f0f0;
+            border-bottom: 1px solid hsl(var(--border));
            transition: background-color 0.2s;
        }
        .notification-item:hover {
-            background-color: #f8f9fa;
+            background-color: hsl(var(--muted));
        }
        .notification-item:last-child {
            border-bottom: none;
        }
        .notification-item.unread {
-            background-color: #f0f7ff;
+            background-color: hsl(var(--accent));
        }
    </style>

    @stack('styles')
 </head>
 <body>
-    <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
+    <nav class="navbar navbar-expand-md navbar-light bg-light shadow-sm">
        <div class="container">
            <a class="navbar-brand" href="{{ Auth::check() ? route('clubs.explore') : url('/') }}">
                <img src="{{ asset('images/logo.png') }}" alt="TAKEONE" height="40">