Skip to content

Reset button#53 #54

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
maishivamhoo123 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Reset button#53 #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d185497
Login page detailed change and background color which was not prevesl…
maishivamhoo123 Mar 28, 2025
1a8e2eb
Influncer SisnUP page change
maishivamhoo123 Apr 2, 2025
288fbc4
company signUp page
maishivamhoo123 Apr 2, 2025
9aaf8c2
Reset button was not working
maishivamhoo123 Apr 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 17 additions & 21 deletions Frontend/src/components/mode-toggle.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,22 @@
import { Moon, Sun } from "lucide-react"
import { useTheme } from "./theme-provider"
import { Button } from "./ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./ui/dropdown-menu"
import { Moon, Sun } from "lucide-react";
import { useTheme } from "./theme-provider";
import { Button } from "./ui/button";

export function ModeToggle() {
const { setTheme } = useTheme()
const { theme, setTheme } = useTheme();

return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon">
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span className="sr-only">Toggle theme</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => setTheme("light")}>Light</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("dark")}>Dark</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("system")}>System</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
<Button
variant="outline"
size="icon"
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
>
{theme === "dark" ? (
<Sun className="h-[1.2rem] w-[1.2rem]" />
) : (
<Moon className="h-[1.2rem] w-[1.2rem]" />
)}
<span className="sr-only">Toggle theme</span>
</Button>
);
}

56 changes: 16 additions & 40 deletions Frontend/src/components/theme-provider.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,26 @@
import React from "react"
import React, { createContext, useContext, useEffect, useState } from "react";

import { createContext, useContext, useEffect, useState } from "react"
const ThemeContext = createContext({
theme: "light",
setTheme: () => {},
});

const ThemeProviderContext = createContext({
theme: "system",
setTheme: () => null,
})

export function ThemeProvider({ children, defaultTheme = "system", storageKey = "vite-ui-theme", ...props }) {
const [theme, setTheme] = useState(() => localStorage.getItem(storageKey) || defaultTheme)
export function ThemeProvider({ children, storageKey = "vite-ui-theme" }) {
const [theme, setTheme] = useState(() => localStorage.getItem(storageKey) || "light");

useEffect(() => {
const root = window.document.documentElement

root.classList.remove("light", "dark")

if (theme === "system") {
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"

root.classList.add(systemTheme)
return
}

root.classList.add(theme)
}, [theme])

const value = {
theme,
setTheme: (theme) => {
localStorage.setItem(storageKey, theme)
setTheme(theme)
},
}
const root = document.documentElement;
root.classList.toggle("dark", theme === "dark");
localStorage.setItem(storageKey, theme);
}, [theme]);

return (
<ThemeProviderContext.Provider {...props} value={value}>
<ThemeContext.Provider value={{ theme, setTheme }}>
{children}
</ThemeProviderContext.Provider>
)
</ThemeContext.Provider>
);
}

export const useTheme = () => {
const context = useContext(ThemeProviderContext)

if (context === undefined) throw new Error("useTheme must be used within a ThemeProvider")

return context
export function useTheme() {
return useContext(ThemeContext);
}

5 changes: 3 additions & 2 deletions Frontend/src/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,12 @@ import React from "react"
import ReactDOM from "react-dom/client"
import "./styles/globals.css"
import App from "./App"
import { ThemeProvider } from "./components/theme-provider"

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
<React.StrictMode>
<ThemeProvider>
<App />
</React.StrictMode>,
</ThemeProvider>,
)

Loading