fix: dark mode settings improvements

apps/client/layouts/settings.tsx

@@ -2,6 +2,8 @@ import useTranslation from "next-translate/useTranslation";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useUser } from "../store/session";
+import { Bell, Key, KeyRound } from "lucide-react";
+import { classNames } from "@/shadcn/lib/utils";
 
 export default function Settings({ children }) {
  const router = useRouter();
@@ -11,69 +13,44 @@ export default function Settings({ children }) {
 
  const linkStyles = {
  active:
- "w-full bg-teal-50 border-teal-500 text-teal-700 hover:bg-teal-50 hover:text-teal-700 group border-l-4 px-3 py-2 flex items-center text-sm font-medium",
+ "w-full bg-primary hover:bg-accent rounded-md group border-l-4 px-3 py-2 flex items-center text-sm font-medium",
  inactive:
- "w-full border-transparent text-gray-900 hover:bg-gray-50 hover:text-gray-900 group mt-1 border-l-4 px-3 py-2 flex items-center text-sm font-medium",
+ "w-full bg-secondary hover:bg-primary rounded-md group mt-1 border-l-4 px-3 py-2 flex items-center text-sm font-medium",
  };
 
  return (
  <main className="relative pt-8">
  <div className="max-w-screen-xl mx-auto pb-6 px-4 sm:px-6 lg:pb-16 lg:px-8">
- <div className="bg-white rounded-lg shadow overflow-hidden">
- <div className="divide-y divide-gray-200 lg:grid lg:grid-cols-12 lg:divide-y-0 lg:divide-x">
- <aside className="py-6 lg:col-span-3">
- <nav>
+ <div className="bg-background rounded-lg shadow overflow-hidden">
+ <div className="divide-y lg:grid lg:grid-cols-12 lg:divide-y-0 lg:divide-x">
+ <aside className="py-6 px-2 lg:col-span-3">
+ <nav className="space-y-2">
  <Link
  href="/settings/notifications"
- className={
+ className={classNames(
  router.pathname === "/settings/notifications"
- ? linkStyles.active
- : linkStyles.inactive
- }
+ ? "bg-secondary dark:bg-primary"
+ : "hover:bg-[#F0F3F9] dark:hover:bg-white dark:hover:text-gray-900 ",
+ "group flex items-center gap-x-3 py-2 px-3 rounded-md text-sm font-semibold leading-6"
+ )}
  aria-current="page"
  >
- <svg
- xmlns="http://www.w3.org/2000/svg"
- fill="none"
- viewBox="0 0 24 24"
- stroke="currentColor"
- stroke-width="2"
- className="flex-shrink-0 -ml-1 mr-3 h-6 w-6"
- >
- <path
- stroke-linecap="round"
- stroke-linejoin="round"
- d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
- />
- </svg>
+ <Bell className="flex-shrink-0 h-5 w-5 text-foreground" />
  <span className="truncate">{t("notifications")}</span>
  </Link>
 
  {!user.sso_active && (
  <Link
  href="/settings/password"
- className={
+ className={classNames(
  router.pathname === "/settings/password"
- ? linkStyles.active
- : linkStyles.inactive
- }
+ ? "bg-secondary dark:bg-primary"
+ : "hover:bg-[#F0F3F9] dark:hover:bg-white dark:hover:text-gray-900 ",
+ "group flex items-center gap-x-3 py-2 px-3 rounded-md text-sm font-semibold leading-6"
+ )}
  >
- <svg
- className=" flex-shrink-0 -ml-1 mr-3 h-6 w-6"
- xmlns="http://www.w3.org/2000/svg"
- fill="none"
- viewBox="0 0 24 24"
- stroke="currentColor"
- aria-hidden="true"
- >
- <path
- stroke-linecap="round"
- stroke-linejoin="round"
- stroke-width="2"
- d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
- />
- </svg>
- <span className="truncate">{t("reset_password")}</span>
+ <KeyRound className="flex-shrink-0 h-5 w-5 text-foreground" />
+ <span>{t("reset_password")}</span>
  </Link>
  )}
  </nav>

apps/client/pages/notifications.tsx

@@ -64,7 +64,7 @@ export default function Tickets() {
  })
  ) : (
  <div className="min-h-screen flex items-center justify-center">
- <span className="block text-sm font-semibold text-gray-900">
+ <span className="block text-sm font-semibold text-foreground">
  You have no notifcations
  </span>
  </div>

apps/client/pages/settings/notifications.tsx

@@ -48,14 +48,14 @@ export default function UserNotifications() {
  <span className="flex-grow flex flex-col">
  <Switch.Label
  as="span"
- className="text-sm font-medium text-gray-900"
+ className="text-sm font-medium text-foreground"
  passive
  >
  Ticket Creation
  </Switch.Label>
  <Switch.Description
  as="span"
- className="text-sm text-gray-500"
+ className="text-sm text-foreground-muted"
  >
  Get emailed when a new ticket is created
  </Switch.Description>
@@ -64,15 +64,15 @@ export default function UserNotifications() {
  checked={ticket_creation}
  onChange={setTicket_creation}
  className={classNames(
- ticket_creation ? "bg-teal-600" : "bg-gray-200",
+ ticket_creation ? "bg-primary" : "bg-gray-200",
  "relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
  )}
  >
  <span
  aria-hidden="true"
  className={classNames(
  ticket_creation ? "translate-x-5" : "translate-x-0",
- "pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
+ "pointer-events-none inline-block h-5 w-5 rounded-full bg-foreground shadow transform ring-0 transition ease-in-out duration-200"
  )}
  />
  </Switch>
@@ -85,14 +85,14 @@ export default function UserNotifications() {
  <span className="flex-grow flex flex-col">
  <Switch.Label
  as="span"
- className="text-sm font-medium text-gray-900"
+ className="text-sm font-medium text-foreground"
  passive
  >
  Ticket Status Change
  </Switch.Label>
  <Switch.Description
  as="span"
- className="text-sm text-gray-500"
+ className="text-sm text-foreground-muted"
  >
  Get emailed when a ticket you're assigned to has it's
  status changed
@@ -102,15 +102,15 @@ export default function UserNotifications() {
  checked={ticket_status}
  onChange={setTicket_status}
  className={classNames(
- ticket_status ? "bg-teal-600" : "bg-gray-200",
+ ticket_status ? "bg-primary" : "bg-gray-200",
  "relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
  )}
  >
  <span
  aria-hidden="true"
  className={classNames(
  ticket_status ? "translate-x-5" : "translate-x-0",
- "pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
+ "pointer-events-none inline-block h-5 w-5 rounded-full bg-foreground shadow transform ring-0 transition ease-in-out duration-200"
  )}
  />
  </Switch>
@@ -123,14 +123,14 @@ export default function UserNotifications() {
  <span className="flex-grow flex flex-col">
  <Switch.Label
  as="span"
- className="text-sm font-medium text-gray-900"
+ className="text-sm font-medium text-foreground"
  passive
  >
  Assgined new ticket
  </Switch.Label>
  <Switch.Description
  as="span"
- className="text-sm text-gray-500"
+ className="text-sm text-foreground-muted"
  >
  Get emailed when you get assigned a new ticket
  </Switch.Description>
@@ -139,15 +139,15 @@ export default function UserNotifications() {
  checked={ticket_assigned}
  onChange={setTicket_assigned}
  className={classNames(
- ticket_assigned ? "bg-teal-600" : "bg-gray-200",
+ ticket_assigned ? "bg-primary" : "bg-gray-200",
  "relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
  )}
  >
  <span
  aria-hidden="true"
  className={classNames(
  ticket_assigned ? "translate-x-5" : "translate-x-0",
- "pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
+ "pointer-events-none inline-block h-5 w-5 rounded-full bg-foreground shadow transform ring-0 transition ease-in-out duration-200"
  )}
  />
  </Switch>
@@ -160,14 +160,14 @@ export default function UserNotifications() {
  <span className="flex-grow flex flex-col">
  <Switch.Label
  as="span"
- className="text-sm font-medium text-gray-900"
+ className="text-sm font-medium text-foreground"
  passive
  >
  Ticket Comment
  </Switch.Label>
  <Switch.Description
  as="span"
- className="text-sm text-gray-500"
+ className="text-sm text-foreground-muted"
  >
  Get emailed when a comment is added to your ticket
  </Switch.Description>
@@ -176,15 +176,15 @@ export default function UserNotifications() {
  checked={ticket_comments}
  onChange={setTicket_comments}
  className={classNames(
- ticket_comments ? "bg-teal-600" : "bg-gray-200",
+ ticket_comments ? "bg-primary" : "bg-gray-200",
  "relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
  )}
  >
  <span
  aria-hidden="true"
  className={classNames(
  ticket_comments ? "translate-x-5" : "translate-x-0",
- "pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
+ "pointer-events-none inline-block h-5 w-5 rounded-full bg-foreground shadow transform ring-0 transition ease-in-out duration-200"
  )}
  />
  </Switch>
@@ -195,7 +195,7 @@ export default function UserNotifications() {
  <button
  onClick={() => updateNotifications()}
  type="button"
- className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+ className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
  >
  save
  </button>

apps/client/pages/settings/password.tsx

@@ -56,14 +56,14 @@ export default function PasswordChange({ children }) {
  <div className="m-2 space-y-4 p-4">
  <input
  type="password"
- className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
+ className="shadow-sm text-foreground bg-transparent focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
  onChange={(e) => setPassword(e.target.value)}
  placeholder="Enter users new password"
  />
 
  <input
  type="password"
- className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
+ className="shadow-sm text-foreground bg-transparent focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
  onChange={(e) => setCheck(e.target.value)}
  placeholder="Confirm users password"
  />
@@ -75,7 +75,7 @@ export default function PasswordChange({ children }) {
  await postData();
  }}
  type="submit"
- className="inline-flex items-center px-4 py-2 border font-semibold border-gray-300 shadow-sm text-xs rounded text-gray-700 bg-white hover:bg-gray-50 "
+ className="inline-flex bg-primary items-center px-4 py-2 border font-semibold border-gray-300 shadow-sm text-xs rounded text-white"
  >
  Update Password
  </button>

apps/client/styles/globals.css

@@ -10,7 +10,7 @@
  --card-foreground: 0 0% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 3.9%;
- --primary: 0 72.2% 50.6%;
+ --primary: 158 76% 36%; /* Converted #10b981 to HSL */
  --primary-foreground: 0 85.7% 97.3%;
  --secondary: 0 0% 96.1%;
  --secondary-foreground: 0 0% 9%;