provide alternative light theme & improve mobile accessibility

chrisstef · Feb 5, 2024 · c6fd737 · c6fd737
1 parent 2d3abeb
commit c6fd737
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 20 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -17,19 +17,19 @@
         --card-foreground: 240 10% 3.9%;
         --popover: 0 0% 100%;
         --popover-foreground: 240 10% 3.9%;
-        --primary: 20.5 100% 62%;
-        --primary-foreground: 355.7 100% 97.3%;
+        --primary: 240 98% 54%;
+        --primary-foreground: 355.7 100% 100%;
         --secondary: 240 4.8% 95.9%;
         --secondary-foreground: 240 5.9% 10%;
         --muted: 240 4.8% 95.9%;
-        --muted-foreground: 240 3.8% 46.1%;
+        --muted-foreground: 240 3.8% 31%;
         --accent: 240 4.8% 95.9%;
         --accent-foreground: 240 5.9% 10%;
         --destructive: 0 84.2% 60.2%;
         --destructive-foreground: 0 0% 98%;
         --border: 240 5.9% 90%;
         --input: 240 5.9% 90%;
-        --ring: 20.5 100% 62%;
+        --ring: 240 98% 54%;
         --radius: 0.5rem;
     }
 

diff --git a/components/FAQ.tsx b/components/FAQ.tsx
@@ -14,7 +14,7 @@ interface FAQProps {
 const FAQList: FAQProps[] = [
     {
         question: "Is this template free?",
-        answer: "Yes. It is a free ChadcnUI template.",
+        answer: "Yes. It is a free ShadcnUI template.",
         value: "item-1",
     },
     {

diff --git a/components/HeroCards.tsx b/components/HeroCards.tsx
@@ -151,7 +151,7 @@ export const HeroCards = () => {
             <Card className="absolute w-[350px] -right-[10px] bottom-[35px]  drop-shadow-xl shadow-black/10 dark:shadow-white/10">
                 <CardHeader className="space-y-1 flex md:flex-row justify-start items-start gap-4">
                     <div className="mt-1 bg-primary/20 p-3 rounded-2xl">
-                        <Icons.bulb className="h-6 w-6 text-orange-500" />
+                        <Icons.bulb className="h-6 w-6 dark:text-orange-500 text-blue-500" />
                     </div>
                     <div>
                         <CardTitle>Light & dark mode</CardTitle>

diff --git a/components/HowWorks.tsx b/components/HowWorks.tsx
@@ -9,25 +9,33 @@ interface FeatureProps {
 
 const features: FeatureProps[] = [
     {
-        icon: <Icons.accessibility className="text-orange-500 w-7 h-7" />,
+        icon: (
+            <Icons.accessibility className="dark:text-orange-500 text-blue-500 w-7 h-7" />
+        ),
         title: "Accesibility",
         description:
             "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quas provident cum",
     },
     {
-        icon: <Icons.people className="text-orange-500 w-7 h-7" />,
+        icon: (
+            <Icons.people className="dark:text-orange-500 text-blue-500 w-7 h-7" />
+        ),
         title: "Community",
         description:
             "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quas provident cum",
     },
     {
-        icon: <Icons.scale className="text-orange-500 w-7 h-7" />,
+        icon: (
+            <Icons.scale className="dark:text-orange-500 text-blue-500 w-7 h-7" />
+        ),
         title: "Scalability",
         description:
             "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quas provident cum",
     },
     {
-        icon: <Icons.gamification className="text-orange-500 w-7 h-7" />,
+        icon: (
+            <Icons.gamification className="dark:text-orange-500 text-blue-500 w-7 h-7" />
+        ),
         title: "Gamification",
         description:
             "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quas provident cum",

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -13,7 +13,7 @@ import {
     SheetTrigger,
 } from "@/components/ui/sheet";
 
-import { buttonVariants } from "./ui/button";
+import { Button, buttonVariants } from "./ui/button";
 import { ModeToggle } from "./ModeToggle";
 import { Icons } from "@/components/Icons";
 
@@ -59,12 +59,14 @@ const Navbar = () => {
                     <div className="flex md:hidden">
                         <ModeToggle />
                         <Sheet open={isOpen} onOpenChange={setIsOpen}>
-                            <SheetTrigger className="px-2">
-                                <Menu
-                                    className="flex md:hidden h-5 w-5"
-                                    onClick={() => setIsOpen(true)}
-                                ></Menu>
-                            </SheetTrigger>
+                            <Button
+                                onClick={() => setIsOpen(true)}
+                                variant="ghost"
+                                className="px-2"
+                            >
+                                <span className="sr-only">Open Menu</span>
+                                <Menu className="flex md:hidden h-5 w-5" />
+                            </Button>
 
                             <SheetContent side={"left"}>
                                 <SheetHeader>

diff --git a/components/Services.tsx b/components/Services.tsx
@@ -12,19 +12,25 @@ const serviceList: ServiceProps[] = [
         title: "Code Collaboration",
         description:
             "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nesciunt est nostrum omnis ab sapiente.",
-        icon: <Icons.code className="h-6 w-6 text-orange-500" />,
+        icon: (
+            <Icons.code className="h-6 w-6 dark:text-orange-500 text-blue-500" />
+        ),
     },
     {
         title: "Project Management",
         description:
             "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nesciunt est nostrum omnis ab sapiente.",
-        icon: <Icons.dashboard className="h-6 w-6 text-orange-500" />,
+        icon: (
+            <Icons.dashboard className="h-6 w-6 dark:text-orange-500 text-blue-500" />
+        ),
     },
     {
         title: "Task Automation",
         description:
             "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nesciunt est nostrum omnis ab sapiente.",
-        icon: <Icons.project className="h-6 w-6 text-orange-500" />,
+        icon: (
+            <Icons.project className="h-6 w-6 dark:text-orange-500 text-blue-500" />
+        ),
     },
 ];