fix: design review

frontend/src/components/layouts/AppLayout.tsx

@@ -334,7 +334,7 @@ const MenuItem = ({
  }}
  className={({ isActive }) =>
  cn(
- "flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary",
+ "flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-accent-foreground",
  disabled && "cursor-not-allowed",
  !disabled && isActive ? "bg-muted" : ""
  )

frontend/src/components/ui/button.tsx

@@ -18,7 +18,7 @@ const buttonVariants = cva(
  secondary:
  "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
  ghost: "hover:bg-accent hover:text-accent-foreground",
- link: "text-primary underline-offset-4 hover:underline",
+ link: "text-foreground hover:text-accent-foreground underline-offset-4 hover:underline",
  positive:
  "bg-positive text-positive-foreground shadow-sm hover:bg-positive/90",
  },

frontend/src/themes/alby.css

@@ -1,66 +1,52 @@
 .theme-alby {
- /* Name: custom color palette
- Author: Ilias Ism
- URL: https://gradient.page */
-
- /* CSS: .bg-gradient { background: var(--gradient) } */
- --background: 60 8% 95%;
- --foreground: 30 8% 5%;
-
- --card: 60 8% 95%;
- --card-foreground: 30 8% 5%;
-
- --popover: 60 8% 95%;
- --popover-foreground: 30 8% 5%;
-
+ --background: 0 0% 100%;
+ --foreground: 0 0% 5%;
+ --card: 0 0% 100%;
+ --card-foreground: 0 0% 5%;
+ --popover: 0 0% 100%;
+ --popover-foreground: 0 0% 5%;
  --primary: 47 100% 72%;
- --primary-foreground: 0 9% 2%;
-
- --secondary: 48 11% 91%;
- --secondary-foreground: 30 8% 5%;
-
- --muted: 45 9% 91%;
- --muted-foreground: 46 9% 45%;
-
- --accent: 48 11% 91%;
- --accent-foreground: 30 8% 5%;
-
+ --primary-foreground: 0 0% 2%;
+ --secondary: 0 0% 96%;
+ --secondary-foreground: 0 0% 5%;
+ --muted: 0 0% 96%;
+ --muted-foreground: 0 0% 45%;
+ --accent: 0 0% 96%;
+ --accent-foreground: 0 0% 5%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
-
- --border: 40 9% 87%;
- --input: 47 9% 81%;
- --ring: 47 36% 72%;
-
+ --border: 0 0% 92%;
+ --input: 0 0% 85%;
+ --ring: 0 0% 76%;
  --radius: 0.5rem;
 }
 
 .theme-alby.dark {
- --background: 60 4% 5%;
+ --background: 0 0% 3%;
  --foreground: 0 0% 98%;
 
- --card: 60 4% 5%;
+ --card: 0 0% 3%;
  --card-foreground: 0 0% 98%;
 
- --popover: 60 4% 5%;
+ --popover: 0 0% 0%;
  --popover-foreground: 0 0% 98%;
 
  --primary: 47 100% 72%;
  --primary-foreground: 0 0% 2%;
 
- --secondary: 60 2% 10%;
+ --secondary: 0 0% 0%;
  --secondary-foreground: 0 0% 98%;
 
- --muted: 60 3% 15%;
- --muted-foreground: 48 2% 49%;
+ --muted: 0 0% 10%;
+ --muted-foreground: 0 0% 49%;
 
- --accent: 47 18% 10%;
+ --accent: 0 0% 0%;
  --accent-foreground: 0 0% 98%;
 
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
 
- --border: 60 2% 12%;
- --input: 30 2% 18%;
+ --border: 0 0% 15%;
+ --input: 0 0% 15%;
  --ring: 47 100% 40%;
 }

frontend/src/themes/bitcoin.css

@@ -1,37 +1,61 @@
 .theme-bitcoin {
- /* Name: custom color palette
- Author: Ilias Ism
- URL: https://gradient.page */
+ --background: 0 0% 100%;
+ --foreground: 0 0% 5%;
 
- /* CSS: .bg-gradient { background: var(--gradient) } */
- --gradient: #f7931a;
+ --card: 0 0% 100%;
+ --card-foreground: 0 0% 5%;
 
- --background: 35 60.45% 4.32%;
- --foreground: 35 9.3% 97.7%;
+ --popover: 0 0% 100%;
+ --popover-foreground: 0 0% 5%;
 
- --muted: 35 93% 3.24%;
- --muted-foreground: 35 9.3% 55.4%;
+ --primary: 42 100% 47%;
+ --primary-foreground: 0 0% 2%;
 
- --popover: 35 46.4% 7.0200000000000005%;
- --popover-foreground: 35 9.3% 97.7%;
+ --secondary: 0 0% 96%;
+ --secondary-foreground: 0 0% 5%;
 
- --card: 35 46.4% 7.0200000000000005%;
- --card-foreground: 35 9.3% 97.7%;
+ --muted: 0 0% 96%;
+ --muted-foreground: 0 0% 45%;
 
- --border: 35 93% 3.24%;
- --input: 35 93% 3.24%;
+ --accent: 0 0% 96%;
+ --accent-foreground: 0 0% 5%;
 
- --primary: 35 93% 54%;
- --primary-foreground: 35 9.3% 5.4%;
+ --destructive: 0 84% 60%;
+ --destructive-foreground: 0 0% 98%;
 
- --secondary: 35 93% 3.24%;
- --secondary-foreground: 35 9.3% 97.7%;
+ --border: 0 0% 92%;
+ --input: 0 0% 85%;
+ --ring: 0 0% 76%;
 
- --accent: 35 93% 3.24%;
- --accent-foreground: 35 9.3% 97.7%;
+ --radius: 0.5rem;
+}
+
+.theme-bitcoin.dark {
+ --background: 60 3% 6%;
+ --foreground: 0 0% 98%;
+
+ --card: 60 3% 6%;
+ --card-foreground: 0 0% 98%;
+
+ --popover: 60 3% 6%;
+ --popover-foreground: 0 0% 98%;
+
+ --primary: 42 100% 47%;
+ --primary-foreground: 0 0% 2%;
+
+ --secondary: 40 5% 12%;
+ --secondary-foreground: 0 0% 98%;
+
+ --muted: 45 4% 18%;
+ --muted-foreground: 40 5% 49%;
+
+ --accent: 42 44% 12%;
+ --accent-foreground: 0 0% 98%;
 
- --destructive: 0 62.8% 30.6%;
- --destructive-foreground: 35 9.3% 97.7%;
+ --destructive: 0 84% 60%;
+ --destructive-foreground: 0 0% 98%;
 
- --ring: 35 93% 54%;
+ --border: 40 5% 12%;
+ --input: 45 4% 18%;
+ --ring: 42 100% 40%;
 }

frontend/src/themes/nostr.css

@@ -1,45 +1,61 @@
 .theme-nostr {
- --background: 266 0% 95%;
- --foreground: 266 0% 0%;
- --card: 266 0% 90%;
- --card-foreground: 266 0% 10%;
- --popover: 266 0% 95%;
- --popover-foreground: 266 95% 0%;
- --primary: 266 100% 50%;
- --primary-foreground: 0 0% 100%;
- --secondary: 266 10% 70%;
- --secondary-foreground: 0 0% 0%;
- --muted: 228 10% 85%;
- --muted-foreground: 266 0% 35%;
- --accent: 228 10% 80%;
- --accent-foreground: 266 0% 10%;
- --destructive: 0 50% 30%;
- --destructive-foreground: 266 0% 90%;
- --border: 266 20% 50%;
- --input: 266 20% 18%;
- --ring: 266 100% 50%;
+ --background: 270 8% 95%;
+ --foreground: 270 8% 5%;
+
+ --card: 270 8% 95%;
+ --card-foreground: 270 8% 5%;
+
+ --popover: 270 8% 95%;
+ --popover-foreground: 270 8% 5%;
+
+ --primary: 273 100% 29%;
+ --primary-foreground: 300 9% 98%;
+
+ --secondary: 276 11% 91%;
+ --secondary-foreground: 270 8% 5%;
+
+ --muted: 270 9% 91%;
+ --muted-foreground: 274 9% 45%;
+
+ --accent: 276 11% 91%;
+ --accent-foreground: 270 8% 5%;
+
+ --destructive: 0 84% 60%;
+ --destructive-foreground: 0 0% 98%;
+
+ --border: 270 9% 87%;
+ --input: 267 9% 81%;
+ --ring: 273 36% 72%;
+
  --radius: 0.5rem;
 }
 
 .theme-nostr.dark {
- --background: 266 10% 5%;
- --foreground: 266 0% 90%;
- --card: 266 0% 0%;
- --card-foreground: 266 0% 90%;
- --popover: 266 10% 5%;
- --popover-foreground: 266 0% 90%;
- --primary: 266 100% 50%;
- --primary-foreground: 0 0% 100%;
- --secondary: 266 10% 10%;
- --secondary-foreground: 0 0% 100%;
- --muted: 228 10% 15%;
- --muted-foreground: 266 0% 60%;
- --accent: 228 10% 15%;
- --accent-foreground: 266 0% 90%;
- --destructive: 0 50% 30%;
- --destructive-foreground: 266 0% 90%;
- --border: 266 20% 18%;
- --input: 266 20% 18%;
- --ring: 266 100% 50%;
- --radius: 0.5rem;
+ --background: 300 4% 5%;
+ --foreground: 0 0% 98%;
+
+ --card: 300 4% 5%;
+ --card-foreground: 0 0% 98%;
+
+ --popover: 300 4% 5%;
+ --popover-foreground: 0 0% 98%;
+
+ --primary: 273 42% 47%;
+ --primary-foreground: 0 0% 98%;
+
+ --secondary: 300 2% 10%;
+ --secondary-foreground: 0 0% 98%;
+
+ --muted: 270 3% 15%;
+ --muted-foreground: 276 2% 49%;
+
+ --accent: 273 18% 10%;
+ --accent-foreground: 0 0% 98%;
+
+ --destructive: 0 84% 60%;
+ --destructive-foreground: 0 0% 98%;
+
+ --border: 300 2% 12%;
+ --input: 270 2% 18%;
+ --ring: 272 41% 40%;
 }