Skip to content

Commit

Permalink
Merge pull request #1 from PeterMonkey/feat/dark-mode
Browse files Browse the repository at this point in the history 
Feat/dark mode
  • Loading branch information
@soyricardodev
soyricardodev authored Jul 25, 2024
2 parents a1628b8 + f677f24 commit b9e3b9f
Show file tree
Hide file tree
Showing 8 changed files with 48 additions and 39 deletions.
8 changes: 6 additions & 2 deletions apps/gifting-concierge/src/app/(dashboard)/dashboard/orders/orders-query.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ export const getAllOrdersQuery = supabase.from("gifts").select(`
id,
users(id, email, full_name, avatar_url),
recipient_id,
gift_recipients(*),
gift_recipients(id, name),
gifts_orders_links(id),
status,
type
`);
Expand All @@ -24,7 +25,8 @@ export const getLinkOrdersQuery = supabase
id,
users(id, email, full_name, avatar_url),
recipient_id,
gift_recipients(*),
gift_recipients(id, name),
gifts_orders_links(id),
status,
type
`)
Expand All @@ -37,6 +39,7 @@ export const getCustomOrdersQuery = supabase
users(id, email, full_name, avatar_url),
recipient_id,
gift_recipients(id, name),
gifts_orders_links(id),
status,
type
`)
Expand All @@ -49,6 +52,7 @@ export const getStoreOrdersQuery = supabase
users(id, email, full_name, avatar_url),
recipient_id,
gift_recipients(id, name),
gifts_orders_links(id),
status,
type
`)
Expand Down
2 changes: 1 addition & 1 deletion apps/gifting-concierge/src/app/(send)/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Footer } from "../components/footer";

export default function Layout({ children }: { children: React.ReactNode }) {
return (
<div className="relative flex min-h-dvh flex-col">
<div className="relative flex min-h-dvh flex-col bg-background">
<Header />

<main className="mx-auto flex max-w-7xl w-full flex-col gap-4 px-4 py-14 sm:px-6 sm:py-24 lg:px-8 lg:py-40">
Expand Down
34 changes: 17 additions & 17 deletions apps/gifting-concierge/src/app/components/footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,12 +227,12 @@ export function Footer({ isDark }: { isDark?: boolean }) {
<div className="mx-auto max-w-screen-xl px-4 pb-6 pt-16 sm:px-6 lg:px-8 lg:pt-24">
<div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
<div className="flex flex-col gap-6">
<div className="flex items-center gap-2 text-black dark:text-white sm:justify-start">
<div className="flex items-center gap-2 text-foreground dark:text-white sm:justify-start">
<span className="font-bold sm:font-normal">TL</span>{" "}
<span className="xs:block sm:hidden text-sm text-black dark:text-white">
&copy; {new Date().getFullYear()}
</span>{" "}
<strong className="hidden sm:inline text-black dark:text-white">
<strong className="hidden sm:inline text-foreground dark:text-white">
Gifting Concierge
</strong>
</div>
Expand Down Expand Up @@ -260,7 +260,7 @@ export function Footer({ isDark }: { isDark?: boolean }) {
href={href}
rel="noreferrer"
target="_blank"
className="text-black hover:text-black/75 dark:text-gray-300 dark:hover:text-gray-400/75"
className="text-white hover:text-black/75 dark:text-gray-300 dark:hover:text-gray-400/75"
>
{name}
</Link>
Expand Down Expand Up @@ -350,7 +350,7 @@ export function Footer({ isDark }: { isDark?: boolean }) {
>
<span className="sr-only">{name}</span>
<Icon
className="size-6 stroke-current fill-transparent"
className="size-6 stroke-current fill-transparent text-foreground"
width={24}
/>
</Link>
Expand All @@ -362,15 +362,15 @@ export function Footer({ isDark }: { isDark?: boolean }) {
<div className="hidden sm:grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-4 lg:col-span-2">
{footerNavigation.map(({ name, links }) => (
<div className="text-center sm:text-left" key={name}>
<p className="text-lg font-medium text-black dark:text-white">
<p className="text-lg font-medium text-foreground dark:text-white">
{name}
</p>

<ul className="mt-8 space-y-4 text-sm">
{links.map(({ name, href }) => (
<li key={name}>
<Link
className="text-black transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75"
className="text-foreground transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75"
href={href}
>
{name}
Expand All @@ -382,7 +382,7 @@ export function Footer({ isDark }: { isDark?: boolean }) {
))}

<div className="text-center sm:text-left">
<p className="text-lg font-medium text-black dark:text-white">
<p className="text-lg font-medium text-foreground dark:text-white">
Contact Us
</p>

Expand All @@ -394,7 +394,7 @@ export function Footer({ isDark }: { isDark?: boolean }) {
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="size-5 shrink-0 text-gray-900 dark:text-white"
className="size-5 shrink-0 text-foreground dark:text-white"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
Expand All @@ -408,7 +408,7 @@ export function Footer({ isDark }: { isDark?: boolean }) {
/>
</svg>

<span className="flex-1 text-black dark:text-white">
<span className="flex-1 text-foreground dark:text-white">
[email protected]
</span>
</a>
Expand All @@ -417,7 +417,7 @@ export function Footer({ isDark }: { isDark?: boolean }) {
<li className="flex items-start justify-center gap-1.5 sm:justify-start">
<svg
xmlns="http://www.w3.org/2000/svg"
className="size-5 shrink-0 text-gray-900 dark:text-white"
className="size-5 shrink-0 text-foreground dark:text-white"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
Expand All @@ -436,7 +436,7 @@ export function Footer({ isDark }: { isDark?: boolean }) {
/>
</svg>

<p className="-mt-0.5 not-italic text-black dark:text-white w-full">
<p className="-mt-0.5 not-italic text-foreground dark:text-white w-full">
Southern California{" "}
<span className="dark:hidden inline">🖤</span>
<span className="hidden dark:inline">🤍</span>
Expand All @@ -447,13 +447,13 @@ export function Footer({ isDark }: { isDark?: boolean }) {
</div>
</div>

<div className="mt-4 sm:mt-12 sm:border-t border-black dark:border-gray-800 sm:pt-6">
<div className="mt-4 sm:mt-12 sm:border-t border-foreground dark:border-gray-800 sm:pt-6">
<div className="hidden text-center sm:flex gap-4 sm:text-left">
<p className="text-sm text-black dark:text-white flex gap-1">
<p className="text-sm text-foreground dark:text-white flex gap-1">
<span className="block sm:inline">All rights reserved.</span>

<Link
className="inline-block text-black underline transition hover:text-primary/75 dark:hover:text-secondary/75 dark:text-secondary"
className="inline-block text-foreground underline transition hover:text-primary/75 dark:hover:text-secondary/75 dark:text-secondary"
href="/terms-of-service"
>
Terms & Conditions
Expand All @@ -462,14 +462,14 @@ export function Footer({ isDark }: { isDark?: boolean }) {
<span>&middot;</span>

<Link
className="inline-block text-black underline transition hover:text-primary/75 dark:hover:text-secondary/75 dark:text-secondary"
className="inline-block text-foreground underline transition hover:text-primary/75 dark:hover:text-secondary/75 dark:text-secondary"
href="/privacy-policy"
>
Privacy Policy
</Link>
</p>

<p className="hidden sm:block mt-4 text-sm text-black dark:text-white sm:order-first sm:mt-0">
<p className="hidden sm:block mt-4 text-sm text-foreground dark:text-white sm:order-first sm:mt-0">
&copy; {new Date().getFullYear()} The Liaison
</p>
</div>
Expand All @@ -485,7 +485,7 @@ export function Footer({ isDark }: { isDark?: boolean }) {
href={href}
rel="noreferrer"
target="_blank"
className="text-black hover:text-black/75 dark:text-white dark:hover:text-white/75"
className="text-foreground hover:text-black/75 dark:text-white dark:hover:text-white/75"
>
<Icon className="size-6 stroke-current" />
<span className="sr-only">{name}</span>
Expand Down
2 changes: 1 addition & 1 deletion apps/gifting-concierge/src/app/components/send-gift-popover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export function SendGiftDialog() {
<DialogContent className="rounded-md supports-[backdrop-filter]:bg-white/10 border-transparent bg-black/95 backdrop-blur-xl">
<div className="spacem-auto w-[calc(100vw - 48px)] pt-6">
<div className="flex flex-col items-center justify-start flex-initial gap-6">
<div className="flex justify-center items-center bg-default-100 rounded-lg p-[14px] h-[60px] border border-black/10">
<div className="flex justify-center items-center bg-slate-100 rounded-lg p-[14px] h-[60px] border border-black/10">
<SendHorizontalIcon className="size-8 text-black/60" />
</div>

Expand Down
6 changes: 4 additions & 2 deletions apps/gifting-concierge/src/components/header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,10 @@ export function Header({ showModeToggle }: { showModeToggle?: boolean }) {

<div className="ml-auto flex items-center gap-2 sm:gap-4">
<Link href="/login" className="">
<UserRoundIcon className="size-5 text-gray-500 dark:text-gray-400" />
<UserRoundIcon className="size-5 text-foreground dark:text-gray-400" />
</Link>
<HeaderUser showModeToggle={showModeToggle} />
{/* cambiar luego a showModeToggle */}
<HeaderUser showModeToggle={true} />
</div>
</div>
</header>
Expand All @@ -46,6 +47,7 @@ async function HeaderUser({ showModeToggle }: { showModeToggle?: boolean }) {
error,
} = await supabase.auth.getUser();


if (!user || error)
return (
<HeaderNavigation isLoggedIn={false} showModeToggle={showModeToggle} />
Expand Down
16 changes: 8 additions & 8 deletions apps/gifting-concierge/src/components/header/change-theme.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,18 @@ import { useTheme } from "next-themes";
export function ChangeTheme() {
const { theme, setTheme } = useTheme();
return (
<div className="flex items-center justify-between">
<p>Theme</p>
<div className="flex items-center justify-between text-foreground">
<p className="ml-4">Theme</p>
<fieldset className="flex items-center w-fit h-8 rounded-full border ">
<legend className="sr-only">Select a display theme:</legend>
<span>
<label
htmlFor=""
onClick={() => setTheme("system")}
className={cn(
"rounded-full flex items-center justify-center bg-none size-8 m-0 cursor-pointer relative transition-colors text-gray-700",
"rounded-full flex items-center justify-center bg-none size-8 m-0 cursor-pointer relative transition-colors text-foreground",
{
"bg-backdround border text-gray-900": theme === "system",
"bg-backdground border text-gray-900": theme === "system",
},
)}
>
Expand All @@ -30,9 +30,9 @@ export function ChangeTheme() {
htmlFor=""
onClick={() => setTheme("light")}
className={cn(
"rounded-full flex items-center justify-center bg-none size-8 m-0 cursor-pointer relative transition-colors text-gray-700",
"rounded-full flex items-center justify-center bg-none size-8 m-0 cursor-pointer relative transition-colors text-foreground",
{
"bg-backdround border text-gray-900": theme === "light",
"bg-backdground border text-gray-900": theme === "light",
},
)}
>
Expand All @@ -44,9 +44,9 @@ export function ChangeTheme() {
htmlFor=""
onClick={() => setTheme("dark")}
className={cn(
"rounded-full flex items-center justify-center bg-none size-8 m-0 cursor-pointer relative transition-colors text-gray-700",
"rounded-full flex items-center justify-center bg-none size-8 m-0 cursor-pointer relative transition-colors text-gray-900",
{
"bg-backdround border text-gray-900": theme === "dark",
"bg-backdground border text-gray-100": theme === "dark",
},
)}
>
Expand Down
16 changes: 8 additions & 8 deletions apps/gifting-concierge/src/components/header/navigation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,12 +115,12 @@ export function HeaderNavigation(props: HeaderNavigationProps) {
className={cn(
"inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-gray-500 hover:bg-gray-100 hover:text-gray-900 h-8 w-8 shrink-0 rounded-full border dark:text-gray-400 dark:hover:bg-gray-600 dark:border-gray-600",
{
dark: props.isDarkMode,
dark: false,
},
)}
>
<svg
className="size-5"
className="size-5 text-foreground hover:text-gray-600"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
Expand All @@ -138,19 +138,19 @@ export function HeaderNavigation(props: HeaderNavigationProps) {
</DropdownMenuTrigger>
<DropdownMenuContent
className={cn(
"min-w-[16rem] rounded-xl z-50 overflow-hidden shadow-none dark:bg-black dark:border-gray-600",
"min-w-[16rem] rounded-xl z-50 overflow-hidden shadow-none bg-background dark:bg-black border-gray-500",
{
dark: props.isDarkMode,
dark: false,
},
)}
>
<DropdownMenuGroup className="p-2">
<DropdownMenuItem asChild>
<Link
href="/profile"
className="cursor-pointer relative flex select-none items-center rounded-md px-2 py-2.5 text-sm outline-none transition-colors focus:bg-zinc-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 gap-3 dark:focus:bg-zinc-600 dark:hover:bg-zinc-600"
className="cursor-pointer relative text-foreground flex select-none items-center rounded-md px-2 py-2.5 text-sm outline-none transition-colors focus:bg-zinc-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 gap-3 dark:focus:bg-zinc-600 dark:hover:bg-zinc-600"
>
<UserRoundIcon className="size-5" />
<UserRoundIcon className="size-5 text-foreground" />
<span>Profile</span>
</Link>
</DropdownMenuItem>
Expand All @@ -161,7 +161,7 @@ export function HeaderNavigation(props: HeaderNavigationProps) {
<DropdownMenuItem asChild key={menuLink.key}>
<Link
href={menuLink.href}
className="cursor-pointer relative flex select-none items-center rounded-md px-2 py-2.5 text-sm outline-none transition-colors focus:bg-zinc-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 gap-3 dark:focus:bg-zinc-600 dark:hover:bg-zinc-600"
className="cursor-pointer relative flex select-none items-center rounded-md px-2 py-2.5 text-sm outline-none transition-colors focus:bg-zinc-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 gap-3 dark:focus:bg-zinc-600 dark:hover:bg-zinc-600 text-foreground"
>
{menuLink.Icon}
{menuLink.label}
Expand All @@ -185,7 +185,7 @@ export function HeaderNavigation(props: HeaderNavigationProps) {
>
<button
type="submit"
className="flex items-center gap-3 rounded-md px-2 py-2.5 text-sm outline-none transition-colors focus:bg-zinc-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-zinc-600 dark:hover:bg-zinc-600"
className="flex items-center gap-3 rounded-md px-2 py-2.5 text-sm outline-none transition-colors focus:bg-zinc-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-zinc-600 dark:hover:bg-zinc-600 text-foreground"
>
<LogOutIcon className="size-5" />
<span>Log out</span>
Expand Down
3 changes: 3 additions & 0 deletions apps/gifting-concierge/tailwind.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@ const config = {
},
dark: {
colors: {
background: "black",
foreground: "#FBFBFE",
primary: {
DEFAULT: "#473F36",
foreground: "#FFF8F5",
Expand All @@ -53,6 +55,7 @@ const config = {
},
}),
],
darkMode: 'media',
} satisfies Config;

export default config;

0 comments on commit b9e3b9f

Please sign in to comment.