reworked styles for a more cohesive and dynamic theme

Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>

src/App.css

@@ -38,16 +38,18 @@
 
 .card {
   padding: 1.5em;
-  background-color: var(--card);
+    background: linear-gradient(135deg, rgba(166, 77, 255, 0.25), rgba(213, 0, 249, 0.25));
   border-radius: 12px;
-  box-shadow: 0 4px 12px var(--shadow);
+    box-shadow: 0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.2);
   margin-bottom: 1rem;
-  transition: transform 0.2s, box-shadow 0.2s;
+    transition: transform 0.3s, box-shadow 0.3s;
+    backdrop-filter: blur(10px);
+    border: none;
 }
 
 .card:hover {
-  transform: translateY(-3px);
+    transform: translateY(-5px);
-  box-shadow: 0 6px 16px var(--shadow);
+    box-shadow: 0 15px 35px var(--shadow), inset 0 0 20px rgba(166, 77, 255, 0.3);
 }
 
 /* Responsive adjustments */
@@ -67,10 +69,11 @@
 
 .dreamy-border {
   border: 2px solid transparent;
-  background: 
+  background: linear-gradient(135deg, rgba(166, 77, 255, 0.25), rgba(213, 0, 249, 0.25)) padding-box,
-    linear-gradient(var(--bg), var(--bg)) padding-box,
     var(--accent-gradient) border-box;
   border-radius: 12px;
+    box-shadow: 0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.2);
+    backdrop-filter: blur(10px);
 }
 
 .dreamy-button {
@@ -80,11 +83,14 @@
   padding: 0.6em 1.2em;
   border-radius: 8px;
   font-weight: 500;
-  transition: transform 0.2s, box-shadow 0.2s;
+    transition: transform 0.3s, box-shadow 0.3s;
-  box-shadow: 0 4px 12px var(--shadow);
+    box-shadow: 0 10px 30px var(--shadow), inset 0 0 15px rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(5px);
+    opacity: 0.9;
 }
 
 .dreamy-button:hover {
-  transform: translateY(-2px);
+    transform: translateY(-5px);
-  box-shadow: 0 6px 16px var(--shadow);
+    box-shadow: 0 15px 35px var(--shadow), inset 0 0 20px rgba(255, 255, 255, 0.3);
+    opacity: 1;
 }

src/assets/logotext.svg

@@ -6,13 +6,13 @@
         </linearGradient>
         <mask id="moonMask">
             <circle cx="60" cy="60" r="50" fill="white" />
-            <circle cx="70" cy="50" r="45" fill="black"/>
+            <circle cx="75" cy="40" r="45" fill="black"/>
         </mask>
         <style type="text/css">
             @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&amp;display=swap');
         </style>
     </defs>
-    <circle cx="60" cy="50%" r="50" fill="url(#moonGradient)" mask="url(#moonMask)" />
+    <circle cx="60" cy="60" r="60" fill="url(#moonGradient)" mask="url(#moonMask)"/>
     <text x="250" y="60%" dominant-baseline="middle" text-anchor="middle"
           font-family="'Raleway', sans-serif" font-size="70" fill="white" letter-spacing="2" 
           style="text-shadow: 0 0 5px rgba(0,0,0,0.3);">

src/components/DreamCard.tsx

@@ -2,38 +2,62 @@
 import Dream from '../types/Dream';
 import type User from "../types/User.ts";
 import {NavLink} from "react-router-dom";
+import {useEffect, useState} from "react";
 
 interface DreamCardProps {
     dream: Dream;
     user: User | undefined;
+    animationDelay?: number;
 }
 
-export default function DreamCard({dream, user}: DreamCardProps) {
+export default function DreamCard({dream, user, animationDelay = 0}: DreamCardProps) {
+    const [isVisible, setIsVisible] = useState(false);
+
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setIsVisible(true);
+        }, animationDelay * 100);
+
+        return () => clearTimeout(timer);
+    }, [animationDelay]);
+
     return (<NavLink key={dream.id} to={`/dream/${dream.id}`}>
-        <li className="dream-card mb-4">
+        <li className={`dream-card card mb-4 transition-all duration-500 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`}>
-            <div className="flex rounded items-center mb-2">
+            <div className="flex rounded items-center mb-3">
-                <img
+                <div className="relative">
-                    src={`/assets/profiles/${user?.profilePicture}`}
+                    <img
-                    alt={user?.name}
+                        src={`/assets/profiles/${user?.profilePicture}`}
-                    className="w-10 h-10 rounded-full"
+                        alt={user?.name}
-                />
+                        className="w-12 h-12 rounded-full border-2 border-accent-soft"
-                <span className="ml-4 font-semibold">{user?.name} hat geträumt:</span>
+                        style={{borderColor: 'var(--accent-soft)'}}
+                    />
+                    <div className="absolute -bottom-1 -right-1 w-4 h-4 bg-accent rounded-full"
+                         style={{backgroundColor: 'var(--accent)'}}></div>
+                </div>
+                <span className="ml-4 font-semibold text-left">{user?.name} <span className="text-text-muted">hat geträumt:</span></span>
             </div>
-            <h2 className="title">
+            <h2 className="title text-left dreamy-text text-lg">
                 {dream.title}
             </h2>
-            <p className="mt-2 line-clamp-2">
+            <p className="mt-2 line-clamp-2 text-left">
                 {(dream.input.inputType === 'text' && dream.input.input)
                     || (dream.input.inputType === 'audio' && dream.input.transcript)
                     || (dream.input.inputType === 'image' && dream.input.description)}
             </p>
-            <p
+            <div className="flex justify-between items-center mt-3">
-                className="timestamp mt-2">
+                <p className="timestamp text-left">
-                {dream.date.toLocaleDateString('de-DE', {
+                    {dream.date.toLocaleDateString('de-DE', {
-                    day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit',
+                        day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit',
-                })}
+                    })}
-            </p>
+                </p>
+                <div className="flex space-x-2">
+                    {/* Display dream type as a tag */}
+                    <span className="px-2 py-1 text-xs rounded-full bg-accent-soft text-text"
+                          style={{backgroundColor: 'var(--accent-soft)', color: 'var(--text)'}}>
+                        {dream.input.inputType}
+                    </span>
+                </div>
+            </div>
         </li>
     </NavLink>)
-
+}
-}

src/index.css

@@ -11,6 +11,7 @@
   --accent-soft: #c9a4ff;
   --accent-dark: #6a0dad;
   --shadow: rgba(166, 77, 255, 0.2);
+  --text-shadow: rgba(0, 0, 0, 0.5);
 
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
@@ -37,6 +38,7 @@
   --accent-soft: #a64dff;
   --accent-dark: #6a0dad;
   --shadow: rgba(196, 144, 255, 0.3);
+  --text-shadow: rgba(255, 255, 255, 0.5);
 }
 
 .border-background {
@@ -47,6 +49,21 @@
   background-color: var(--bg);
   color: var(--text);
   transition: background-color 0.3s, color 0.3s;
+  position: relative;
+}
+
+.page::before {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: radial-gradient(var(--accent-soft) 1px, transparent 1px);
+  background-size: 40px 40px;
+  opacity: 0.05;
+  pointer-events: none;
+  z-index: 0;
 }
 
 .pageTitle {
@@ -56,11 +73,13 @@
 }
 
 .dreamPanel {
-  background-color: var(--card);
+  background: linear-gradient(135deg, rgba(166, 77, 255, 0.35), rgba(213, 0, 249, 0.35));
   border-radius: 10px;
   padding: 1em;
   color: var(--text);
-  border: 1px solid var(--accent);
+  backdrop-filter: blur(5px);
+  box-shadow: 0 0 15px var(--shadow);
+  border: none;
 }
 
 a {
@@ -110,27 +129,58 @@ button:focus-visible {
 }
 
 .feed-container {
-  background-color: var(--container);
+  padding: 1.5em;
-  padding: 1em;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  border: none;
+  border-radius: 16px;
 }
 
+
 .dream-card {
-  background-color: var(--card);
+  background: linear-gradient(135deg, rgba(166, 77, 255, 0.35), rgba(213, 0, 249, 0.35));
-  border-radius: 10px;
+  border-radius: 12px;
-  padding: 1em;
+  padding: 1.25em;
   color: var(--text);
-  border: 1px solid var(--accent);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.3);
+  position: relative;
+  transition: all 0.3s ease;
+  border: none;
+}
+
+.dream-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  margin: -1px;
+  border-radius: inherit;
+  background: var(--accent-gradient);
+  opacity: 0.1;
+}
+
+.dream-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 15px 35px var(--shadow), inset 0 0 20px rgba(166, 77, 255, 0.3);
 }
 
 .dream-card .title {
   color: var(--accent);
   font-weight: bold;
   font-size: 1.25em;
+  margin-bottom: 0.5em;
+  line-height: 1.3;
 }
 
 .dream-card .timestamp {
   color: var(--text-muted);
   font-size: 0.85em;
+  font-weight: 500;
 }
 
 .microphone-button {
@@ -189,20 +239,23 @@ button:focus-visible {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   margin-bottom: 0.5rem;
+  text-shadow: 0 1px 2px var(--text-shadow);
 }
 
 .dream-container {
-  background-color: var(--container);
+  background: linear-gradient(135deg, rgba(166, 77, 255, 0.25), rgba(213, 0, 249, 0.25));
   border-radius: 16px;
   padding: 1.5rem;
   margin-bottom: 1.5rem;
-  box-shadow: 0 4px 15px var(--shadow);
+  box-shadow: 0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.2);
+  backdrop-filter: blur(10px);
   transition: transform 0.3s, box-shadow 0.3s;
+  border: none;
 }
 
 .dream-container:hover {
   transform: translateY(-5px);
-  box-shadow: 0 8px 25px var(--shadow);
+  box-shadow: 0 15px 35px var(--shadow), inset 0 0 20px rgba(166, 77, 255, 0.3);
 }
 
 /* Scrollbar styling */
@@ -223,6 +276,23 @@ button:focus-visible {
   background: var(--accent);
 }
 
+/* Dreamy Card Styling */
+.dreamy-card {
+  background: linear-gradient(135deg, rgba(166, 77, 255, 0.35), rgba(213, 0, 249, 0.35));
+  border-radius: 12px;
+  padding: 1.25em;
+  color: var(--text);
+  backdrop-filter: blur(5px);
+  box-shadow: 0 0 15px var(--shadow);
+  transition: all 0.3s ease;
+  border: none;
+}
+
+.dreamy-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 25px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.3);
+}
+
 /* Animations */
 @keyframes dream-float {
   0% {
@@ -240,7 +310,7 @@ button:focus-visible {
   animation: dream-float 6s ease-in-out infinite;
 }
 
-/* Responsive typography */
+/* Responsive adjustments */
 @media (max-width: 768px) {
   h1 {
     font-size: 2.5em;
@@ -251,4 +321,39 @@ button:focus-visible {
   p {
     font-size: 0.95em;
   }
+
+  .feed-container {
+    padding: 1.2em;
+  }
+
+  .dream-card {
+    padding: 1em;
+  }
+
+  .dream-card .title {
+    font-size: 1.1em;
+  }
+}
+
+@media (max-width: 480px) {
+  .page {
+    padding: 0.75rem !important;
+  }
+
+  .feed-container {
+    padding: 1em 0.75em;
+  }
+
+  .dream-card {
+    padding: 0.9em;
+  }
+
+  .dream-card .title {
+    font-size: 1em;
+  }
+
+  .dream-card img {
+    width: 2.5rem !important;
+    height: 2.5rem !important;
+  }
 }

src/pages/DreamPage.tsx

@@ -62,19 +62,30 @@ export default function DreamPage() {
         </div>
 
         <div className="p-4 sm:p-6 md:p-8 space-y-6 sm:space-y-8 max-w-4xl mx-auto">
-            <div className="dream-card rounded-xl sm:rounded-2xl p-4 sm:p-6">
+            <div className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6">
                 <div className="flex items-center mb-4">
-                    <span className="font-medium" style={{ color: 'var(--accent)' }}>Traum-Beschreibung</span>
+                    <span className="font-medium dreamy-text">Traum-Beschreibung</span>
                 </div>
+                {(dream.input.inputType === 'image' || dream.input.inputType === 'audio') && (
+                    <div className="flex justify-center mb-1">
+                        {dream.input.inputType === 'audio' && (
+                            <audio></audio>
+                        )}
+                        {dream.input.inputType === 'image' && (
+                            <img alt={dream.input.imgAlt}></img>
+                        )}
+                    </div>)}
                 <p className="leading-relaxed text-base sm:text-lg">
-                    {dream.input}
+                    {(dream.input.inputType === 'text' && dream.input.input)
+                        || (dream.input.inputType === 'audio' && dream.input.transcript)
+                        || (dream.input.inputType === 'image' && dream.input.description)}
                 </p>
             </div>
 
             {dream.ai?.interpretation && dream.ai.interpretation !== '' && (<div
-                className="dreamPanel rounded-xl sm:rounded-2xl p-4 sm:p-6">
+                className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6">
                 <div className="flex items-center mb-4">
-                    <span className="font-medium" style={{ color: 'var(--accent)' }}>KI-Interpretation</span>
+                    <span className="font-medium dreamy-text">KI-Interpretation</span>
                 </div>
                 <p className="leading-relaxed">
                     {dream.ai.interpretation}
@@ -82,9 +93,9 @@ export default function DreamPage() {
             </div>)}
 
             {dream.ai?.image && dream.ai.image !== '' && (<div
-                className="dreamPanel rounded-xl sm:rounded-2xl p-4 sm:p-6">
+                className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6">
                 <div className="flex items-center mb-4">
-                    <span className="font-medium" style={{ color: 'var(--accent)' }}>KI-Bild</span>
+                    <span className="font-medium dreamy-text">KI-Bild</span>
                 </div>
                 <div className="flex justify-center">
                     <img 
@@ -97,9 +108,9 @@ export default function DreamPage() {
             </div>)}
 
             {dream.ai?.audio && dream.ai.audio !== '' && (<div
-                className="dreamPanel rounded-xl sm:rounded-2xl p-4 sm:p-6">
+                className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6">
                 <div className="flex items-center mb-4">
-                    <span className="font-medium" style={{ color: 'var(--accent)' }}>KI-Audio</span>
+                    <span className="font-medium dreamy-text">KI-Audio</span>
                 </div>
                 <div className="flex justify-center">
                     <audio 
@@ -113,9 +124,9 @@ export default function DreamPage() {
             </div>)}
 
             {dream.ai?.video && dream.ai.video !== '' && (<div
-                className="dreamPanel rounded-xl sm:rounded-2xl p-4 sm:p-6">
+                className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6">
                 <div className="flex items-center mb-4">
-                    <span className="font-medium" style={{ color: 'var(--accent)' }}>KI-Video</span>
+                    <span className="font-medium dreamy-text">KI-Video</span>
                 </div>
                 <div className="flex justify-center">
                     <video 
@@ -129,12 +140,12 @@ export default function DreamPage() {
                 </div>
             </div>)}
 
-            <div className="dream-card rounded-xl sm:rounded-2xl p-4 sm:p-6">
+            <div className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6">
-                <h2 className="text-lg font-semibold mb-3">Details</h2>
+                <h2 className="text-lg font-semibold mb-3 dreamy-text">Details</h2>
                 <div className="space-y-3" style={{ color: 'var(--text-muted)' }}>
                     <div className="flex flex-col sm:flex-row sm:justify-between">
                         <span className="font-medium mb-1 sm:mb-0">Eingabetyp</span>
-                        <span className="capitalize">{dream.inputType}</span>
+                        <span className="capitalize">{dream.input.inputType}</span>
                     </div>
                     <div className="flex flex-col sm:flex-row sm:justify-between">
                         <span className="font-medium mb-1 sm:mb-0">Datum</span>

src/pages/Feed.tsx

@@ -8,13 +8,18 @@ import DreamCard from "../components/DreamCard";
 export default function Feed() {
     const sortedDreams = [...mockDreams].sort((a, b) => b.date.getTime() - a.date.getTime());
     return (
-        <div className="page p-4 space-y-4">
+        <div className="page p-4 space-y-6">
-            <div className="feed-container rounded-lg">
+            <div className="feed-container">
-                <ul className="space-y-6">
+                <ul className="space-y-6 md:space-y-8">
-                    {sortedDreams.map((dream: Dream) => {
+                    {sortedDreams.map((dream: Dream, index) => {
                         const user: User | undefined = MockUserMap.get(dream.userId);
                         return (
-                            <DreamCard key={dream.id} dream={dream} user={user} />
+                            <DreamCard
+                                key={dream.id}
+                                dream={dream}
+                                user={user}
+                                animationDelay={index}
+                            />
                         )
                     })}
                 </ul>

src/pages/ProfilePage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MockUsers } from '../data/MockUsers';
+import {MockUsers} from '../data/MockUsers';
 
 const ProfilePage: React.FC = () => {
   // Find Neo Quantum in MockUsers
@@ -13,47 +13,89 @@ const ProfilePage: React.FC = () => {
 
   return (
     <div className="page p-4 pb-20">
-      <div className="dreamPanel flex flex-col items-center p-4 sm:p-6 md:p-8 max-w-md mx-auto">
+        <div
+            className="dreamy-border rounded-xl p-6 max-w-md mx-auto overflow-hidden"
+            style={{
+                background: 'linear-gradient(135deg, rgba(166, 77, 255, 0.25), rgba(213, 0, 249, 0.25))',
+                backdropFilter: 'blur(10px)',
+                boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.2)'
+            }}>
         {/* Profile Picture */}
-        <div className="w-24 h-24 sm:w-32 sm:h-32 rounded-full overflow-hidden mb-4 border-4 border-accent">
+            <div className="w-28 h-28 sm:w-36 sm:h-36 rounded-full overflow-hidden mb-6 mx-auto relative"
+                 style={{
+                     background: 'var(--accent-gradient)',
+                     padding: '4px',
+                     boxShadow: '0 0 15px var(--shadow)'
+                 }}>
           <img 
             src={profileUser ? `/assets/profiles/${profileUser.profilePicture}` : `https://ui-avatars.com/api/?name=${defaultName}&background=random&color=fff&size=128`} 
-            alt={profileUser ? profileUser.name : defaultName} 
+            alt={profileUser ? profileUser.name : defaultName}
-            className="w-full h-full object-cover"
+            className="w-full h-full object-cover rounded-full"
           />
         </div>
 
         {/* User Information */}
         <div className="text-center w-full">
-          <h2 className="text-xl sm:text-2xl font-bold mb-2">{profileUser ? profileUser.name : defaultName}</h2>
+            <h2 className="text-xl sm:text-2xl mb-2 break-words dreamy-text font-bold">{profileUser ? profileUser.name : defaultName}</h2>
-          <p className="text-text-muted mb-4">{profileUser ? profileUser.email : defaultEmail}</p>
+            <p className="text-text-muted mb-8 break-words">{profileUser ? profileUser.email : defaultEmail}</p>
 
-          <div className="grid grid-cols-2 gap-2 sm:gap-4 mt-6 text-center">
+            <div className="grid grid-cols-2 gap-6 mt-6 text-center">
-            <div className="dreamPanel p-3 sm:p-4">
+                <div
-              <p className="font-bold text-xl sm:text-2xl">{profileUser ? profileUser.dreamCount : defaultDreamCount}</p>
+                    className="dreamy-border rounded-lg p-4"
-              <p className="text-xs sm:text-sm text-text-muted">Dreams</p>
+                    style={{
+                        background: 'linear-gradient(135deg, rgba(166, 77, 255, 0.35), rgba(213, 0, 249, 0.35))',
+                        boxShadow: '0 0 15px var(--shadow)',
+                        backdropFilter: 'blur(5px)'
+                    }}
+                >
+                    <p className="dreamy-text text-2xl sm:text-3xl font-bold">{profileUser ? profileUser.dreamCount : defaultDreamCount}</p>
+                    <p className="text-sm sm:text-base font-medium" style={{color: 'var(--text)'}}>Dreams</p>
             </div>
-            <div className="dreamPanel p-3 sm:p-4">
+                <div
-              <p className="font-bold text-xl sm:text-2xl">{profileUser ? profileUser.streakDays : defaultStreakDays}</p>
+                    className="dreamy-border rounded-lg p-4"
-              <p className="text-xs sm:text-sm text-text-muted">Days Streak</p>
+                    style={{
+                        background: 'linear-gradient(135deg, rgba(166, 77, 255, 0.35), rgba(213, 0, 249, 0.35))',
+                        boxShadow: '0 0 15px var(--shadow)',
+                        backdropFilter: 'blur(5px)'
+                    }}
+                >
+                    <p className="dreamy-text text-2xl sm:text-3xl font-bold">{profileUser ? profileUser.streakDays : defaultStreakDays}</p>
+                    <p className="text-sm sm:text-base font-medium" style={{color: 'var(--text)'}}>Days Streak</p>
             </div>
           </div>
 
-          <div className="mt-6 sm:mt-8">
+            <div className="mt-10">
-            <h3 className="text-lg font-semibold mb-2">Account Settings</h3>
+                <h3 className="dreamy-text text-lg mb-4 font-bold">Account Settings</h3>
-            <div className="dreamPanel text-left p-3 sm:p-4">
+                <div
-              <div className="flex justify-between items-center py-2">
+                    className="dreamy-border rounded-lg p-5 text-left"
-                <span>Notifications</span>
+                    style={{
-                <label className="theme-toggle relative inline-block">
+                        background: 'linear-gradient(135deg, rgba(166, 77, 255, 0.35), rgba(213, 0, 249, 0.35))',
-                  <input type="checkbox" defaultChecked />
+                        boxShadow: '0 0 15px var(--shadow)',
-                  <span className="slider"></span>
+                        backdropFilter: 'blur(5px)'
+                    }}
+                >
+                    <div className="flex justify-between items-center py-3 flex-wrap border-b border-purple-100/30">
+                        <span className="mr-2 font-medium" style={{color: 'var(--text)'}}>Notifications</span>
+                        <label className="relative inline-block w-12 h-6">
+                            <input type="checkbox" className="opacity-0 w-0 h-0" defaultChecked/>
+                            <span className="absolute cursor-pointer inset-0 rounded-full transition-all duration-300"
+                                  style={{
+                                      background: 'var(--accent-gradient)',
+                                      opacity: '0.9',
+                                      boxShadow: 'inset 0 0 5px rgba(166, 77, 255, 0.5)'
+                                  }}></span>
                 </label>
               </div>
-              <div className="flex justify-between items-center py-2">
+                    <div className="flex justify-between items-center py-3 flex-wrap">
-                <span>Privacy</span>
+                        <span className="mr-2 font-medium" style={{color: 'var(--text)'}}>Privacy</span>
-                <label className="theme-toggle relative inline-block">
+                        <label className="relative inline-block w-12 h-6">
-                  <input type="checkbox" />
+                            <input type="checkbox" className="opacity-0 w-0 h-0"/>
-                  <span className="slider"></span>
+                            <span className="absolute cursor-pointer inset-0 rounded-full transition-all duration-300"
+                                  style={{
+                                      background: 'var(--accent-gradient)',
+                                      opacity: '0.9',
+                                      boxShadow: 'inset 0 0 5px rgba(166, 77, 255, 0.5)'
+                                  }}></span>
                 </label>
               </div>
             </div>