From 6ffd514b3c51e4e53ae9f8f56f11910bcf5533a3 Mon Sep 17 00:00:00 2001 From: akshat Date: Sat, 9 Mar 2024 19:53:51 +0530 Subject: [PATCH] fix: beta customizer as stable - bg blur & page headings --- public/theme.css | 33 ++- src/app/about-us/page.tsx | 29 +- src/app/changelog/page.tsx | 4 +- src/app/contact-us/page.tsx | 4 +- src/app/courses/page.tsx | 4 +- src/app/globals.css | 9 +- src/app/privacy-policy/page.tsx | 5 +- src/app/t&c/page.tsx | 4 +- src/components/Hero.tsx | 23 +- src/components/theme/theme-customizer.tsx | 318 ++++++++++++---------- src/components/ui/sheet.tsx | 74 +++-- src/hooks/use-config.ts | 2 +- src/lib/themes.ts | 47 ++++ tailwind.config.ts | 3 +- 14 files changed, 342 insertions(+), 217 deletions(-) diff --git a/public/theme.css b/public/theme.css index 7fbc2e3..75645e6 100644 --- a/public/theme.css +++ b/public/theme.css @@ -28,6 +28,8 @@ --ring: 240 5.9% 10%; + --translucent: 0, 0%, 9.8%, 0.3; + --highlight: 192.94, 100%, 50%; --radius: 0.5rem; } @@ -92,6 +94,8 @@ --ring: 222.2 84% 4.9%; + --translucent: 227.59, 47.54%, 11.96%, 0.3; + --highlight: 192.94, 100%, 50%; --radius: 0.5rem; } @@ -156,6 +160,8 @@ --ring: 20 14.3% 4.1%; + --translucent: 40, 6.12%, 9.61%, 0.3; + --highlight: 192.94, 100%, 50%; --radius: 0.95rem; } @@ -220,6 +226,8 @@ --ring: 224 71.4% 4.1%; + --translucent: 232.17, 34.33%, 13.14%, 0.3; + --highlight: 192.94, 100%, 50%; --radius: 0.35rem; } @@ -284,7 +292,9 @@ --ring: 0 0% 3.9%; - --radius: ; + --translucent: 192.94, 100%, 50%, 0.3; + --highlight: 192.94, 100%, 50%; + --radius: 0.5rem; } .dark .theme-neutral { @@ -348,6 +358,9 @@ --ring: 0 72.2% 50.6%; + --translucent: 0, 60.48%, 51.37%, 0.3; + --highlight: 0, 60.48%, 51.37%; + --radius: 0.4rem; } @@ -412,6 +425,9 @@ --ring: 346.8 77.2% 49.8%; + --translucent: 327.8, 57.75%, 41.76%, 0.3; + --highlight: 327.8, 57.75%, 41.76%; + --radius: 0.5rem; } @@ -476,6 +492,9 @@ --ring: 24.6 95% 53.1%; + --translucent: 5.32, 89.43%, 44.51%, 0.3; + --highlight: 5.32, 89.43%, 44.51%; + --radius: 0.95rem; } @@ -540,6 +559,9 @@ --ring: 142.1 76.2% 36.3%; + --translucent: 144.44, 55.1%, 28.82%, 0.3; + --highlight: 144.44, 55.1%, 28.82%; + --radius: ; } @@ -604,6 +626,9 @@ --ring: 221.2 83.2% 53.3%; + --translucent: 238.26, 58.97%, 45.88%, 0.3; + --highlight: 238.26, 58.97%, 45.88%; + --radius: ; } @@ -668,6 +693,9 @@ --ring: 20 14.3% 4.1%; + --translucent: 58.83, 88.03%, 54.12%, 0.3; + --highlight: 58.83, 88.03%, 54.12%; + --radius: 0.95rem; } @@ -732,6 +760,9 @@ --ring: 262.1 83.3% 57.8%; + --translucent: 286.33, 89.96%, 46.86%, 0.3; + --highlight: 286.33, 89.96%, 46.86%; + --radius: ; } diff --git a/src/app/about-us/page.tsx b/src/app/about-us/page.tsx index 623183b..235f993 100644 --- a/src/app/about-us/page.tsx +++ b/src/app/about-us/page.tsx @@ -43,9 +43,7 @@ const page: FC = async ({}) => {

Unveiling the Minds Behind{" "} - - SyllabusX - + SyllabusX

@@ -57,17 +55,20 @@ const page: FC = async ({}) => {
- Team Image +
+
+ Team Image +
{team ? ( diff --git a/src/app/changelog/page.tsx b/src/app/changelog/page.tsx index c9dea4a..4daa46c 100644 --- a/src/app/changelog/page.tsx +++ b/src/app/changelog/page.tsx @@ -53,9 +53,7 @@ const page: FC = async ({}) => {

Changelog{" "} - - Chronicles - + Chronicles

diff --git a/src/app/contact-us/page.tsx b/src/app/contact-us/page.tsx index fd9db81..f19d925 100644 --- a/src/app/contact-us/page.tsx +++ b/src/app/contact-us/page.tsx @@ -37,9 +37,7 @@ const Page: FC = ({}) => {

Let's Connect: Reach Out to{" "} - - SyllabusX - + SyllabusX

diff --git a/src/app/courses/page.tsx b/src/app/courses/page.tsx index 8542a70..8831567 100644 --- a/src/app/courses/page.tsx +++ b/src/app/courses/page.tsx @@ -35,9 +35,7 @@ const page: FC = async ({}) => {

Unleash Your Academic{" "} - - Odyssey - + Odyssey

diff --git a/src/app/globals.css b/src/app/globals.css index 046b4d2..c842062 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -24,7 +24,8 @@ --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --radius: 0.5rem; - --translucent: rgba(0, 200, 255, 0.3); + --translucent: 192.94, 100%, 50%, 0.3; + --highlight: 192.94, 100%, 50%; } .dark { @@ -77,7 +78,7 @@ .radial-top { background: radial-gradient( ellipse 80% 35% at 50% -20%, - var(--translucent), + hsl(var(--translucent)), rgba(0, 0, 100, 0) ); } @@ -85,8 +86,8 @@ .conic-center { background: conic-gradient( from 230.29deg at 51.63% 52.16%, - var(--translucent) 0deg, - var(--translucent) 360deg + hsl(var(--translucent)) 0deg, + hsl(var(--translucent)) 360deg ); filter: blur(150px); transform: translateZ(0px); diff --git a/src/app/privacy-policy/page.tsx b/src/app/privacy-policy/page.tsx index 15ef723..b349dab 100644 --- a/src/app/privacy-policy/page.tsx +++ b/src/app/privacy-policy/page.tsx @@ -38,10 +38,7 @@ const page: FC = async ({}) => {

- Privacy{" "} - - Policy - + Privacy Policy

diff --git a/src/app/t&c/page.tsx b/src/app/t&c/page.tsx index 89481ee..43994a2 100644 --- a/src/app/t&c/page.tsx +++ b/src/app/t&c/page.tsx @@ -39,9 +39,7 @@ const page: FC = async ({}) => {

Terms &{" "} - - Conditions - + Conditions

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx index 555d822..1bead49 100644 --- a/src/components/Hero.tsx +++ b/src/components/Hero.tsx @@ -30,10 +30,8 @@ const Hero: FC = ({ content, releaseTag, releaseUrl }) => {

- - SyllabusX - {" "} - is Your academic GPS. Navigate studies effortlessly. + SyllabusX is + Your academic GPS. Navigate studies effortlessly.

@@ -46,13 +44,18 @@ const Hero: FC = ({ content, releaseTag, releaseUrl }) => {
Browse Courses
-
-
+
+
= ({ content, releaseTag, releaseUrl }) => { alt="Hero Image" fill quality={100} - className="rounded-md" + className="rounded-md p-2" />
-
+
= ({ content, releaseTag, releaseUrl }) => { alt="Hero Image Light" fill quality={100} - className="rounded-md" + className="rounded-md p-2" />
diff --git a/src/components/theme/theme-customizer.tsx b/src/components/theme/theme-customizer.tsx index b0796f6..babbb92 100644 --- a/src/components/theme/theme-customizer.tsx +++ b/src/components/theme/theme-customizer.tsx @@ -3,19 +3,18 @@ import { useConfig } from "@/hooks/use-config"; import { themes } from "@/lib/themes"; import { cn } from "@/lib/utils"; -import { CheckIcon, MoonIcon, Palette, SunIcon, Undo } from "lucide-react"; +import { CheckIcon, MoonIcon, Palette, SunIcon, Undo, X } from "lucide-react"; import { useTheme } from "next-themes"; -import { FC, useEffect, useState } from "react"; +import { useEffect, useState } from "react"; import { Button } from "../ui/button"; import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer"; import { Label } from "../ui/label"; import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"; +import { ScrollArea } from "../ui/scroll-area"; +import { Sheet, SheetClose, SheetContent, SheetTrigger } from "../ui/sheet"; import { Skeleton } from "../ui/skeleton"; -import { ThemeWrapper } from "./theme-wrapper"; -interface ThemeCustomizerProps {} - -const ThemeCustomizer: FC = ({}) => { +const ThemeCustomizer = () => { const [mounted, setMounted] = useState(false); useEffect(() => { @@ -34,25 +33,29 @@ const ThemeCustomizer: FC = ({}) => {
- - + + - - + - {mounted ? : null} - - + {mounted ? : null} + +
); }; -function Customizer() { +interface CustomizerProps { + closeTriggerHidden?: boolean; +} + +function Customizer({ closeTriggerHidden = false }: CustomizerProps) { const [mounted, setMounted] = useState(false); const { setTheme: setMode, resolvedTheme: mode } = useTheme(); const [config, setConfig] = useConfig(); @@ -63,150 +66,171 @@ function Customizer() { return (
-
-
+
+
- Customize (Beta) + Customize SyllabusX
- Pick a style and color. + Tweak it, twist it, make it funky!
- +
+ + {closeTriggerHidden && ( + + + + )} +
-
-
- -
- {themes.map((theme) => { - const isActive = config.theme === theme.name; - - return mounted ? ( - - ) : ( - - ); - })} + + {isActive && ( + + )} + + {theme.label} + + ) : ( + + ); + })} +
-
-
- -
- {["0", "0.3", "0.5", "0.75", "1.0"].map((value) => { - return ( - - ); - })} +
+ +
+ {["0", "0.3", "0.5", "0.75", "1.0"].map((value) => { + return ( + + ); + })} +
-
-
- -
- {mounted ? ( - <> - - - - ) : ( - <> - - - - )} +
+ +
+ {mounted ? ( + <> + + + + ) : ( + <> + + + + )} +
-
+
); } diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx index 7e42bbb..63c3c6e 100644 --- a/src/components/ui/sheet.tsx +++ b/src/components/ui/sheet.tsx @@ -1,10 +1,11 @@ "use client"; -import * as React from "react"; import * as SheetPrimitive from "@radix-ui/react-dialog"; import { cva, type VariantProps } from "class-variance-authority"; import { X } from "lucide-react"; +import * as React from "react"; +import { useConfig } from "@/hooks/use-config"; import { cn } from "@/lib/utils"; const Sheet = SheetPrimitive.Root; @@ -49,27 +50,54 @@ const sheetVariants = cva( interface SheetContentProps extends React.ComponentPropsWithoutRef, - VariantProps {} + VariantProps { + isCloseTriggerVisible?: boolean; +} const SheetContent = React.forwardRef< React.ElementRef, SheetContentProps ->(({ side = "right", className, children, ...props }, ref) => ( - - - - {children} - - - Close - - - -)); +>( + ( + { + side = "right", + className, + isCloseTriggerVisible = true, + children, + ...props + }, + ref + ) => { + const [config] = useConfig(); + return ( + + + + {children} + {isCloseTriggerVisible && ( + + + Close + + )} + + + ); + } +); SheetContent.displayName = SheetPrimitive.Content.displayName; const SheetHeader = ({ @@ -126,13 +154,13 @@ SheetDescription.displayName = SheetPrimitive.Description.displayName; export { Sheet, - SheetPortal, - SheetOverlay, - SheetTrigger, SheetClose, SheetContent, - SheetHeader, + SheetDescription, SheetFooter, + SheetHeader, + SheetOverlay, + SheetPortal, SheetTitle, - SheetDescription, + SheetTrigger, }; diff --git a/src/hooks/use-config.ts b/src/hooks/use-config.ts index ed60f27..e7fc880 100644 --- a/src/hooks/use-config.ts +++ b/src/hooks/use-config.ts @@ -1,7 +1,7 @@ import { createStore, useAtom } from "jotai"; import { atomWithStorage } from "jotai/utils"; -import { Theme } from "@/lib/themes"; +import type { Theme } from "@/lib/themes"; type Config = { theme: Theme["name"]; diff --git a/src/lib/themes.ts b/src/lib/themes.ts index fa4b67c..80fdf98 100644 --- a/src/lib/themes.ts +++ b/src/lib/themes.ts @@ -28,6 +28,8 @@ export const themes = [ input: "240 5.9% 90%", ring: "240 5.9% 10%", radius: "0.5rem", + translucent: "0, 0%, 9.8%, 0.3", + highlight: "192.94, 100%, 50%", }, dark: { background: "240 10% 3.9%", @@ -49,6 +51,8 @@ export const themes = [ border: "240 3.7% 15.9%", input: "240 3.7% 15.9%", ring: "240 4.9% 83.9%", + translucent: "0, 0%, 9.8%, 0.3", + highlight: "192.94, 100%, 50%", }, }, }, @@ -81,6 +85,8 @@ export const themes = [ input: "214.3 31.8% 91.4%", ring: "222.2 84% 4.9%", radius: "0.5rem", + translucent: "227.59, 47.54%, 11.96%, 0.3", + highlight: "192.94, 100%, 50%", }, dark: { background: "222.2 84% 4.9%", @@ -102,6 +108,8 @@ export const themes = [ border: "217.2 32.6% 17.5%", input: "217.2 32.6% 17.5%", ring: "212.7 26.8% 83.9", + translucent: "227.59, 47.54%, 11.96%, 0.3", + highlight: "192.94, 100%, 50%", }, }, }, @@ -134,6 +142,8 @@ export const themes = [ input: "20 5.9% 90%", ring: "20 14.3% 4.1%", radius: "0.95rem", + translucent: "40, 6.12%, 9.61%, 0.3", + highlight: "192.94, 100%, 50%", }, dark: { background: "20 14.3% 4.1%", @@ -155,6 +165,8 @@ export const themes = [ border: "12 6.5% 15.1%", input: "12 6.5% 15.1%", ring: "24 5.7% 82.9%", + translucent: "40, 6.12%, 9.61%, 0.3", + highlight: "192.94, 100%, 50%", }, }, }, @@ -187,6 +199,8 @@ export const themes = [ input: "220 13% 91%", ring: "224 71.4% 4.1%", radius: "0.35rem", + translucent: "232.17, 34.33%, 13.14%, 0.3", + highlight: "192.94, 100%, 50%", }, dark: { background: "224 71.4% 4.1%", @@ -208,6 +222,8 @@ export const themes = [ border: "215 27.9% 16.9%", input: "215 27.9% 16.9%", ring: "216 12.2% 83.9%", + translucent: "232.17, 34.33%, 13.14%, 0.3", + highlight: "192.94, 100%, 50%", }, }, }, @@ -239,6 +255,8 @@ export const themes = [ border: "0 0% 89.8%", input: "0 0% 89.8%", ring: "0 0% 3.9%", + translucent: "192.94, 100%, 50%, 0.3", + highlight: "192.94, 100%, 50%", }, dark: { background: "0 0% 3.9%", @@ -260,6 +278,8 @@ export const themes = [ border: "0 0% 14.9%", input: "0 0% 14.9%", ring: "0 0% 83.1%", + translucent: "192.94, 100%, 50%, 0.3", + highlight: "192.94, 100%, 50%", }, }, }, @@ -292,6 +312,8 @@ export const themes = [ input: "0 0% 89.8%", ring: "0 72.2% 50.6%", radius: "0.4rem", + translucent: "0, 60.48%, 51.37%, 0.3", + highlight: "0, 60.48%, 51.37%", }, dark: { background: "0 0% 3.9%", @@ -313,6 +335,8 @@ export const themes = [ border: "0 0% 14.9%", input: "0 0% 14.9%", ring: "0 72.2% 50.6%", + translucent: "0, 60.48%, 51.37%, 0.3", + highlight: "0, 60.48%, 51.37%", }, }, }, @@ -345,6 +369,8 @@ export const themes = [ input: "240 5.9% 90%", ring: "346.8 77.2% 49.8%", radius: "0.5rem", + translucent: "327.8, 57.75%, 41.76%, 0.3", + highlight: "327.8, 57.75%, 41.76%", }, dark: { background: "20 14.3% 4.1%", @@ -366,6 +392,8 @@ export const themes = [ border: "240 3.7% 15.9%", input: "240 3.7% 15.9%", ring: "346.8 77.2% 49.8%", + translucent: "327.8, 57.75%, 41.76%, 0.3", + highlight: "327.8, 57.75%, 41.76%", }, }, }, @@ -398,6 +426,8 @@ export const themes = [ input: "20 5.9% 90%", ring: "24.6 95% 53.1%", radius: "0.95rem", + translucent: "5.32, 89.43%, 44.51%, 0.3", + highlight: "5.32, 89.43%, 44.51%", }, dark: { background: "20 14.3% 4.1%", @@ -419,6 +449,7 @@ export const themes = [ border: "12 6.5% 15.1%", input: "12 6.5% 15.1%", ring: "20.5 90.2% 48.2%", + translucent: "5.32, 89.43%, 44.51%, 0.3", }, }, }, @@ -450,6 +481,8 @@ export const themes = [ border: "240 5.9% 90%", input: "240 5.9% 90%", ring: "142.1 76.2% 36.3%", + translucent: "144.44, 55.1%, 28.82%, 0.3", + highlight: "144.44, 55.1%, 28.82%", }, dark: { background: "20 14.3% 4.1%", @@ -471,6 +504,8 @@ export const themes = [ border: "240 3.7% 15.9%", input: "240 3.7% 15.9%", ring: "142.4 71.8% 29.2%", + translucent: "144.44, 55.1%, 28.82%, 0.3", + highlight: "144.44, 55.1%, 28.82%", }, }, }, @@ -502,6 +537,8 @@ export const themes = [ border: "214.3 31.8% 91.4%", input: "214.3 31.8% 91.4%", ring: "221.2 83.2% 53.3%", + translucent: "238.26, 58.97%, 45.88%, 0.3", + highlight: "238.26, 58.97%, 45.88%", }, dark: { background: "222.2 84% 4.9%", @@ -523,6 +560,8 @@ export const themes = [ border: "217.2 32.6% 17.5%", input: "217.2 32.6% 17.5%", ring: "224.3 76.3% 48%", + translucent: "238.26, 58.97%, 45.88%, 0.3", + highlight: "238.26, 58.97%, 45.88%", }, }, }, @@ -555,6 +594,8 @@ export const themes = [ input: "20 5.9% 90%", ring: "20 14.3% 4.1%", radius: "0.95rem", + translucent: "58.83, 88.03%, 54.12%, 0.3", + highlight: "58.83, 88.03%, 54.12%", }, dark: { background: "20 14.3% 4.1%", @@ -576,6 +617,8 @@ export const themes = [ border: "12 6.5% 15.1%", input: "12 6.5% 15.1%", ring: "35.5 91.7% 32.9%", + translucent: "58.83, 88.03%, 54.12%, 0.3", + highlight: "58.83, 88.03%, 54.12%", }, }, }, @@ -607,6 +650,8 @@ export const themes = [ border: "220 13% 91%", input: "220 13% 91%", ring: "262.1 83.3% 57.8%", + translucent: "286.33, 89.96%, 46.86%, 0.3", + highlight: "286.33, 89.96%, 46.86%", }, dark: { background: "224 71.4% 4.1%", @@ -628,6 +673,8 @@ export const themes = [ border: "215 27.9% 16.9%", input: "215 27.9% 16.9%", ring: "263.4 70% 50.4%", + translucent: "286.33, 89.96%, 46.86%, 0.3", + highlight: "286.33, 89.96%, 46.86%", }, }, }, diff --git a/tailwind.config.ts b/tailwind.config.ts index 34bff41..08f36eb 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -53,7 +53,8 @@ module.exports = { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, - translucent: "var(--translucent)", + translucent: "hsl(var(--translucent))", + highlight: "hsl(var(--highlight))", }, borderRadius: { lg: "var(--radius)",