feat:

- cursor pointer for toggle - hover effect for social links
idkzsh · Sep 10, 2023 · e9f330f · e9f330f
1 parent 50a4f97
commit e9f330f
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 10 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -5,7 +5,7 @@ import Spacer from "@/components/Spacer";
 import Footer from "@/components/Footer";
 
 export const metadata = {
-  title: "idkz"
+  title: "idkz",
 };
 
 export default function RootLayout({
@@ -16,14 +16,15 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-
-      <body className="flex fixed w-full justify-center">
-        <main className="min-h-screen bg-background flex flex-col items-center w-full">
+      <body className="fixed flex justify-center w-full">
+        <main className="flex flex-col items-center w-full min-h-screen bg-background">
           <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
             <NavBar />
             <Spacer />
             {children}
-            <span className="fixed bottom-[4.2rem] flex w-full items-center justify-center text-xs">Powered by Vercel, Next.js and Supabase</span>
+            <span className="fixed bottom-[4.2rem] flex w-full items-center justify-center text-xs">
+              Powered by Vercel, Next.js and Supabase
+            </span>
             <Footer />
           </ThemeProvider>
         </main>

diff --git a/app/projects/page.tsx b/app/projects/page.tsx
@@ -7,7 +7,7 @@ const Projects = () => {
       <div className="gap-4 flex flex-col items-center justify-center w-[80vw] max-w-[800px] h-[70vh] mb-11">
         <h2 className="flex justify-start min-w-[300px] w-[95%] text-sm">PROJECTS</h2>
         <hr className="border-[0.5px] border-secondary min-w-[300px] w-[95%] " />
-        <div className="flex gap-3 flex-wrap w-full justify-center">
+        <div className="flex flex-wrap justify-center w-full gap-3">
             <ProjectCard title="coming soon"/>
         </div>
       </div>

diff --git a/components/Toggle.tsx b/components/Toggle.tsx
@@ -25,13 +25,13 @@ export function Toggle() {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>
+        <DropdownMenuItem className="cursor-pointer" onClick={() => setTheme("light")}>
           Light
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
+        <DropdownMenuItem className="cursor-pointer"  onClick={() => setTheme("dark")}>
           Dark
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>
+        <DropdownMenuItem className="cursor-pointer"  onClick={() => setTheme("system")}>
           System
         </DropdownMenuItem>
       </DropdownMenuContent>

diff --git a/components/link-card.tsx b/components/link-card.tsx
@@ -10,7 +10,7 @@ interface Props {
 
 const LinkCard = ({ icon, title, color, bg, iconAlt }: Props) => {
   return (
-    <div className={` text-2xl flex justify-center gap-2 items-center w-[150px] h-[60px] bg-card rounded-lg`}>
+    <div className={` text-2xl flex justify-center gap-2 items-center w-[150px] h-[60px] bg-card rounded-lg hover:bg-secondary`}>
       <div className={`flex items-center justify-center ${color} ${bg} w-8 h-8 rounded-lg bg-opacity-10`}>{icon? icon : <img className="w-6 h-6" src={iconAlt}></img>}</div>
       <span className="text-sm">{title}</span>
     </div>