ui: theme: fix classNames for all component related to RepoList and settings

avikalpg · avikalpg · commit 4612a2352916 · 2024-05-24T19:06:18.000+05:30
diff --git a/components/LoginLogout.tsx b/components/LoginLogout.tsx
@@ -12,7 +12,6 @@ export default function LoginLogout() {
 	const [session, setSession] = useState<Session | null>(null);
 	const { rudderEventMethods } = useContext(RudderContext);
 
-
 	// FIXME: Ideally, this should have been automatically accomplished using useSession provided by NextAuth. But that is not working.
 	useEffect(() => {
 		fetch("/api/auth/session", { cache: "no-store" }).then(async (res) => {
@@ -46,22 +45,23 @@ export default function LoginLogout() {
 		};
 	}, [rudderEventMethods, session]);
 
+	const menuItemClassName = 'border-b-2 border-b-border last-of-type:border-0 p-2 text-center';
 	if (session?.user) return (
 		<>
 			<Image src={getAuthUserImage(session)} onClick={() => setShowMenu(prev => !prev)} alt="Display picture" title={getAuthUserName(session)} width={300} height={300} className="h-full w-auto hover:cursor-pointer rounded-xl cursor-pointer max-h-8 mx-auto" />
 			{/* Log out Pop up  */}
 			{showMenu ?
-				<ol className='w-[40%] sm:w-[15%] rounded-md absolute right-5 sm:right-10 top-16 border-2 bg-primary-light text-primary-darktext'>
-					<li className='border-b-2 border-b-gray-200 p-2 text-center'>
+				<ol className='w-[40%] sm:w-[15%] rounded-md absolute right-5 sm:right-10 top-16 border-2 border-border bg-background text-primary-foreground'>
+					<li className={menuItemClassName}>
 						<Link href='/u' className='cursor-pointer w-full'>Profile</Link>
 					</li>
-					<li id='contribute-link' className='border-b-2 border-b-gray-200 p-2 text-center'>
+					<li id='contribute-link' className={menuItemClassName}>
 						<Link href='https://github.com/Alokit-Innovations/' target='_blank' className='cursor-pointer w-full'>Contribute</Link>
 					</li>
-					<li id='settings-link' className='border-b-2 border-b-gray-200 p-2 text-center'>
+					<li id='settings-link' className={menuItemClassName}>
 						<Link href='/settings' className='cursor-pointer w-full'>Settings</Link>
 					</li>
-					<li id='logout-link' className='p-2 text-center cursor-pointer' onClick={() => (logout(getAuthUserId(session), getAuthUserName(session), getAndSetAnonymousIdFromLocalStorage(), (rudderEventMethods ?? null)))}>
+					<li id='logout-link' className={`cursor-pointer ${menuItemClassName}`} onClick={() => (logout(getAuthUserId(session), getAuthUserName(session), getAndSetAnonymousIdFromLocalStorage(), (rudderEventMethods ?? null)))}>
 						Logout
 					</li>
 				</ol>
@@ -71,7 +71,7 @@ export default function LoginLogout() {
 		</>
 	)
 	else return (
-		<Button variant='contained' onClick={() => (login(getAndSetAnonymousIdFromLocalStorage(), (rudderEventMethods ?? null)))} className="rounded bg-inherit sm:bg-primary-main text-secondary-main py-2 px-4 font-semibold">
+		<Button variant='contained' onClick={() => (login(getAndSetAnonymousIdFromLocalStorage(), (rudderEventMethods ?? null)))} className="rounded bg-inherit sm:bg-secondary text-secondary-foreground py-2 px-4 font-semibold">
 			Login/Signup
 		</Button>
 	)
diff --git a/components/ProviderLogo.tsx b/components/ProviderLogo.tsx
@@ -1,10 +1,11 @@
 import Image from "next/image";
 import type { RepoProvider } from "../utils/providerAPI";
 import React from "react";
+import { Theme } from "../utils/theme";
 
-export const getProviderLogoSrc = (provider: RepoProvider, theme: "light" | "dark") => `/${provider}${theme === 'dark' ? "-dark" : ""}.svg`;
+export const getProviderLogoSrc = (provider: RepoProvider, theme: Theme) => `/${provider}${theme !== 'dark' ? "-dark" : ""}.svg`;
 
-const ProviderLogo: React.FC<{ provider: RepoProvider, theme: "light" | "dark", className?: string }> = ({ provider, theme, className }) => {
+const ProviderLogo: React.FC<{ provider: RepoProvider, theme: Theme, className?: string }> = ({ provider, theme, className }) => {
 	return (
 		<Image
 			loading="lazy"
diff --git a/components/SelectBase.tsx b/components/SelectBase.tsx
@@ -14,7 +14,7 @@ const SelectTrigger = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
 	<SelectPrimitive.Trigger
 		ref={ref}
-		className={"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 " + className}
+		className={"flex h-10 w-full items-center justify-between rounded-md border border-input bg-primary px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 " + className}
 		{...props}
 	>
 		{children}
diff --git a/components/SwitchSubmit.tsx b/components/SwitchSubmit.tsx
@@ -15,7 +15,7 @@ const SwitchSubmit = (props: PropsWithChildren<{
 			checked={props.checked}
 			onCheckedChange={props.toggleFunction}
 		>
-			<Switch.Thumb className="block w-[21px] h-[21px] bg-secondary-main rounded-full transition-transform duration-100 translate-x-0.5 will-change-transform data-[state=checked]:translate-x-[19px]" />
+			<Switch.Thumb className="block w-[21px] h-[21px] bg-primary rounded-full transition-transform duration-100 translate-x-0.5 will-change-transform data-[state=checked]:translate-x-[19px]" />
 		</Switch.Root>
 	)
 }
diff --git a/components/Table.tsx b/components/Table.tsx
@@ -1,7 +1,7 @@
 import { PropsWithChildren } from "react";
 
 const TableHeaderCell = ({ className, children }: PropsWithChildren<{ className?: string }>) => (
-	<th className={"px-6 py-3 bg-gray-100 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider " + className}>
+	<th className={"px-6 py-3 bg-primary text-left text-xs font-semibold text-gray-500 uppercase tracking-wider " + className}>
 		{children}
 	</th>
 );
diff --git a/views/MainAppBar.tsx b/views/MainAppBar.tsx
@@ -13,7 +13,7 @@ export default function MainAppBar() {
 	}, [])
 
 	return (
-		<AppBar position='fixed' className='mx-auto py-2 px-10 justify-between items-center max-w-7xl' backdropClassName='bg-primary-light'>
+		<AppBar position='fixed' className='mx-auto py-2 px-10 justify-between items-center max-w-7xl' backdropClassName='bg-background'>
 			<Link href="/" className="mr-16 h-full overflow-clip flex flex-row items-center">
 				<Image src={VibinexDarkLogo} alt="Vibinex logo" className="inline w-10 mr-2" priority></Image>
 				<h1 className='font-bold text-3xl sm:text-4xl font-sans tracking-wider'>
diff --git a/views/RepoList.tsx b/views/RepoList.tsx
@@ -5,11 +5,13 @@ import ProviderLogo from "../components/ProviderLogo";
 import SwitchSubmit from "../components/SwitchSubmit";
 import { TableCell, TableHeaderCell } from "../components/Table";
 import type { DbRepoSerializable, RepoIdentifier } from "../types/repository";
+import { getPreferredTheme, Theme } from "../utils/theme";
 
 const RepoList = () => {
 	const [loading, setLoading] = useState(false);
 	const [configLoading, setConfigLoading] = useState(false); // while loading user can't send another api request to change setting
 	const [repoList, setRepoList] = useState<DbRepoSerializable[]>([]);
+	const [theme, setTheme] = useState<Theme>('light')
 
 	useEffect(() => {
 		setLoading(true);
@@ -24,6 +26,8 @@ const RepoList = () => {
 			.finally(() => {
 				setLoading(false);
 			});
+
+		setTheme(getPreferredTheme());
 	}, [])
 
 	const setConfig = (repo: RepoIdentifier, configType: 'auto_assign' | 'comment', value: boolean) => {
@@ -57,7 +61,7 @@ const RepoList = () => {
 	}
 	return (<>
 		<h2 className="text-xl font-semibold my-2">Added Repositories</h2>
-		<table className="min-w-full divide-y divide-gray-200">
+		<table className="min-w-full divide-y divide-border">
 			<thead>
 				<tr>
 					<TableHeaderCell>Repo Name</TableHeaderCell>
@@ -68,7 +72,7 @@ const RepoList = () => {
 					<TableHeaderCell>Stats</TableHeaderCell>
 				</tr>
 			</thead>
-			<tbody className="bg-white divide-y divide-gray-200">
+			<tbody className="bg-backgroudn divide-y divide-border">
 				{repoList.map(({ repo_provider: repoProvider, repo_owner: repoOwner, repo_name: repoName, config }) => {
 					const repoAddr = `${repoProvider}/${repoOwner}/${repoName}`;
 					const repo_id: RepoIdentifier = {
@@ -80,7 +84,7 @@ const RepoList = () => {
 						<tr key={repoAddr}>
 							<TableCell>{repoName}</TableCell>
 							<TableCell>{repoOwner}</TableCell>
-							<TableCell className="text-center"><ProviderLogo provider={repoProvider} theme="dark" className="mx-auto" /></TableCell>
+							<TableCell className="text-center"><ProviderLogo provider={repoProvider} theme={theme} className="mx-auto" /></TableCell>
 							<TableCell className="text-center"><SwitchSubmit checked={config.auto_assign} toggleFunction={() => setConfig(repo_id, 'auto_assign', !config.auto_assign)} disabled={configLoading} /></TableCell>
 							<TableCell className="text-center"><SwitchSubmit checked={config.comment} toggleFunction={() => setConfig(repo_id, 'comment', !config.comment)} disabled={configLoading} /></TableCell>
 							<TableCell className="text-primary-main"><Link href={`/repo?repo_name=${repoAddr}`}>Link</Link></TableCell>

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ const SelectTrigger = React.forwardRef<`
`14`	`14`	`>(({ className, children, ...props }, ref) => (`
`15`	`15`	`<SelectPrimitive.Trigger`
`16`	`16`	`ref={ref}`
`17`		`- className={"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 " + className}`
	`17`	`+ className={"flex h-10 w-full items-center justify-between rounded-md border border-input bg-primary px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 " + className}`
`18`	`18`	`{...props}`
`19`	`19`	`>`
`20`	`20`	`{children}`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ const SwitchSubmit = (props: PropsWithChildren<{`
`15`	`15`	`checked={props.checked}`
`16`	`16`	`onCheckedChange={props.toggleFunction}`
`17`	`17`	`>`
`18`		`- <Switch.Thumb className="block w-[21px] h-[21px] bg-secondary-main rounded-full transition-transform duration-100 translate-x-0.5 will-change-transform data-[state=checked]:translate-x-[19px]" />`
	`18`	`+ <Switch.Thumb className="block w-[21px] h-[21px] bg-primary rounded-full transition-transform duration-100 translate-x-0.5 will-change-transform data-[state=checked]:translate-x-[19px]" />`
`19`	`19`	`</Switch.Root>`
`20`	`20`	`)`
`21`	`21`	`}`