colour settings start

templates/common/base.html

@@ -27,6 +27,13 @@
                             <i class="fas fa-bell text-xl" style="width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center;"></i>
                         </a>
                     </li>
+                    {% if current_user.is_admin %}
+                    <li class="nav-item">
+                        <a class="nav-link flex items-center justify-center" href="{{ url_for('main.settings') }}">
+                            <i class="fas fa-cog text-xl" style="width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center;"></i>
+                        </a>
+                    </li>
+                    {% endif %}
                     <li class="nav-item dropdown">
                         <a class="nav-link dropdown-toggle flex items-center gap-2" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
                             <img src="{{ url_for('profile_pic', filename=current_user.profile_picture) if current_user.profile_picture else url_for('static', filename='default-avatar.png') }}"
@@ -37,7 +44,9 @@
                         </a>
                         <ul class="dropdown-menu dropdown-menu-end">
                             <li><a class="dropdown-item" href="{{ url_for('main.profile') }}"><i class="fas fa-user"></i> Profile</a></li>
-                            <li><a class="dropdown-item" href="#"><i class="fas fa-cog"></i> Settings</a></li>
+                            {% if current_user.is_admin %}
+                            <li><a class="dropdown-item" href="{{ url_for('main.settings') }}"><i class="fas fa-cog"></i> Settings</a></li>
+                            {% endif %}
                             <li><hr class="dropdown-divider"></li>
                             <li><a class="dropdown-item" href="{{ url_for('auth.logout') }}"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
                         </ul>

templates/dashboard/dashboard.html

@@ -62,6 +62,26 @@
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <script>
 document.addEventListener('DOMContentLoaded', function() {
+  // Helper function to get computed CSS variable value
+  function getCssVar(varName) {
+    return getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
+  }
+
+  // Get all chart colors
+  const chartColors = {
+    primary: getCssVar('--chart-primary'),
+    secondary: getCssVar('--chart-secondary'),
+    warning: getCssVar('--chart-warning'),
+    primaryLight: getCssVar('--chart-primary-light'),
+    primaryLighter: getCssVar('--chart-primary-lighter'),
+    primaryLightest: getCssVar('--chart-primary-lightest'),
+    primaryPale: getCssVar('--chart-primary-pale'),
+    secondaryLight: getCssVar('--chart-secondary-light'),
+    secondaryLighter: getCssVar('--chart-secondary-lighter'),
+    secondaryLightest: getCssVar('--chart-secondary-lightest'),
+    secondaryPale: getCssVar('--chart-secondary-pale')
+  };
+
   // Contact Status Chart
   const statusCtx = document.getElementById('statusChart');
   if (statusCtx) {
@@ -71,7 +91,7 @@ document.addEventListener('DOMContentLoaded', function() {
         labels: ['Active', 'Inactive'],
         datasets: [{
           data: [{{ active_count }}, {{ inactive_count }}],
-          backgroundColor: ['#16767b', '#741b5f'],
+          backgroundColor: [chartColors.primary, chartColors.secondary],
           borderWidth: 0,
           hoverOffset: 4
         }]
@@ -98,7 +118,7 @@ document.addEventListener('DOMContentLoaded', function() {
         labels: ['Starred', 'Unstarred'],
         datasets: [{
           data: [{{ starred_count }}, {{ file_count - starred_count }}],
-          backgroundColor: ['#ffd700', '#16767b'],
+          backgroundColor: [chartColors.warning, chartColors.primary],
           borderWidth: 0,
           hoverOffset: 4
         }]
@@ -124,8 +144,16 @@ document.addEventListener('DOMContentLoaded', function() {
       datasets: [{
         data: [{% for type in storage_by_type %}{{ type.total_size }}{% if not loop.last %}, {% endif %}{% endfor %}],
         backgroundColor: [
-          '#16767b', '#2c9da9', '#43c4d3', '#5ad9e8', '#71eefd',
-          '#741b5f', '#8a2b73', '#a03b87', '#b64b9b', '#cc5baf'
+          chartColors.primary,
+          chartColors.primaryLight,
+          chartColors.primaryLighter,
+          chartColors.primaryLightest,
+          chartColors.primaryPale,
+          chartColors.secondary,
+          chartColors.secondaryLight,
+          chartColors.secondaryLighter,
+          chartColors.secondaryLightest,
+          chartColors.secondaryPale
         ],
         borderWidth: 0,
         hoverOffset: 4
@@ -156,8 +184,16 @@ document.addEventListener('DOMContentLoaded', function() {
       datasets: [{
         data: [{% for type in trash_by_type %}{{ type.count }}{% if not loop.last %}, {% endif %}{% endfor %}],
         backgroundColor: [
-          '#16767b', '#2c9da9', '#43c4d3', '#5ad9e8', '#71eefd',
-          '#741b5f', '#8a2b73', '#a03b87', '#b64b9b', '#cc5baf'
+          chartColors.primary,
+          chartColors.primaryLight,
+          chartColors.primaryLighter,
+          chartColors.primaryLightest,
+          chartColors.primaryPale,
+          chartColors.secondary,
+          chartColors.secondaryLight,
+          chartColors.secondaryLighter,
+          chartColors.secondaryLightest,
+          chartColors.secondaryPale
         ],
         borderWidth: 0,
         hoverOffset: 4

templates/settings/settings.html

@@ -0,0 +1,18 @@
+{% extends "common/base.html" %}
+{% from "components/header.html" import header %}
+
+{% block title %}Settings - DocuPulse{% endblock %}
+
+{% block content %}
+{{ header(
+    title="Settings",
+    description="Manage your docupulse settings",
+    button_text="",
+    button_url="",
+    icon="fa-cog"
+) }}
+
+<div class="container-fluid">
+    <!-- Settings content will go here -->
+</div>
+{% endblock %}