feat(styles): update colors to be srouced from variable & other minor…

… fixes

app/not-found.tsx

@@ -1,4 +1,4 @@
-import Button from '@/components/Button'
+import { Button } from '@/components/ui/button'
 import { NextPage } from 'next'
 import Link from 'next/link'
 
@@ -14,7 +14,7 @@ const NotFound: NextPage = () => {
 			</p>
 
 			<Button
-				variant="red"
+				variant="destructive"
 				className="mt-8"
 			>
 				<Link href="/">Home</Link>

app/packs/_components/Filter.tsx

@@ -77,15 +77,15 @@ function Filter() {
 					>
 						Search for a pack
 					</label>
-					<Search className="size-4 absolute left-4 bottom-4 dark:text-[#666666]" />
+					<Search className="size-4 absolute left-4 bottom-4 text-muted-foreground" />
 					<Input
 						id="search"
 						name="search"
 						placeholder="Search..."
 						value={searchQuery}
 						onChange={(e) => setSearchQuery(e.target.value)}
 						onKeyDown={(e) => e.key === 'Enter' && doSearch()}
-						className="pl-10 pr-4 h-12 dark:bg-[#1D1D1D]"
+						className="pl-10 pr-4 h-12"
 					/>
 					<Button
 						variant={'ghost'}
@@ -125,9 +125,9 @@ function Filter() {
 						type="button"
 						onClick={() => selectType('all')}
 						className={cn(
-							'flex items-center gap-1 px-2 py-1.5 text-muted-foreground text-xs rounded-md bg-background-light cursor-pointer shrink-0',
+							'flex items-center gap-1 px-2 py-1.5 text-muted-foreground transition-all text-xs rounded-md bg-background-light cursor-pointer shrink-0',
 							{
-								'bg-brand-primary text-white': !t
+								'bg-brand-primary text-primary-foreground': !t
 							}
 						)}
 					>
@@ -144,7 +144,8 @@ function Filter() {
 							className={cn(
 								'flex items-center gap-1 px-2 py-1.5 text-muted-foreground text-xs rounded-md bg-background-light cursor-pointer',
 								{
-									'bg-brand-primary text-white': t && t === type.slug
+									'bg-brand-primary text-primary-foreground':
+										t && t === type.slug
 								}
 							)}
 						>

app/packs/_components/QuestionPack.tsx

@@ -134,8 +134,8 @@ export default function QuestionPack({
 							{description}
 						</CardDescription>
 						{popular && (
-							<div className="flex uppercase tracking-wider items-center w-fit gap-1 px-2 py-1 rounded-md text-white popular-badge select-none absolute -top-5 right-6">
-								<Flame className="size-4 fill-white" />
+							<div className="flex uppercase tracking-wider items-center w-fit gap-1 px-2 py-1 rounded-md popular-badge select-none absolute -top-5 right-6 text-primary-foreground">
+								<Flame className="size-4 text-primary-foreground" />
 								<span className="text-[11px] hidden lg:block">Popular</span>
 							</div>
 						)}
@@ -160,22 +160,22 @@ export default function QuestionPack({
 								onClick={() => likePack(id)}
 								variant="secondary"
 								disabled={!isLoggedIn}
-								className={clsx('w-full dark:bg-[hsl(0,0%,6%)]', {
+								className={clsx('w-full', {
 									'opacity-50 cursor-not-allowed': !isLoggedIn
 								})}
 							>
 								<Heart
 									className={cn(
 										'mr-2 h-4 w-4 shrink-0',
 										userLiked ?
-											'text-red-500 fill-red-500'
-										:	'text-brand-gray-text fill-brand-gray-text'
+											'text-destructive fill-destructive'
+										:	'text-muted-foreground'
 									)}
 								/>
 								<span
 									className={cn(
 										'text-muted-foreground',
-										userLiked && 'text-red-500'
+										userLiked && 'text-destructive'
 									)}
 								>
 									{likes === 1 ? `${likes} Like` : `${likes} Likes`}
@@ -233,15 +233,16 @@ export default function QuestionPack({
 					{style === 'denied' && (
 						<>
 							<Button
-								variant="secondary"
-								className="w-full bg-red-500 hover:bg-red-600 text-white dark:bg-red-500 dark:hover:bg-red-600"
+								variant="destructive"
+								className="w-full"
 								onClick={() => router.push(`/packs/edit/${id}?resubmit=true`)}
 							>
 								<RefreshCw className="mr-2 h-4 w-4 shrink-0" />
 								Resubmit
 							</Button>
 							<Button
-								className="w-full bg-brand-blue-100 hover:bg-brand-blue-200 text-white"
+								variant="secondary"
+								className="w-full"
 								onClick={() => router.push(`/packs/edit/${id}`)}
 							>
 								<Edit className="mr-2 h-4 w-4 shrink-0" />
@@ -261,7 +262,7 @@ const DeleteConfirmation = ({ onConfirm }: { onConfirm: () => void }) => {
 			<AlertDialogTrigger asChild>
 				<Button
 					variant="destructive"
-					className="bg-red-500 hover:bg-red-600 text-white dark:bg-red-500 dark:hover:bg-red-600 col-span-2"
+					className="col-span-2"
 				>
 					<Trash2 className="mr-2 h-4 w-4 shrink-0" />
 					Delete
@@ -281,7 +282,6 @@ const DeleteConfirmation = ({ onConfirm }: { onConfirm: () => void }) => {
 						<Button
 							variant="destructive"
 							onClick={() => onConfirm()}
-							className="bg-red-500 hover:bg-red-600 text-white dark:bg-red-500 dark:hover:bg-red-600"
 						>
 							Continue
 						</Button>

app/packs/_components/QuestionPackDetails.tsx

@@ -147,9 +147,9 @@ const PackDetails = ({ id, type }: { id: string; type: string }) => {
 			<section className="max-md:mt-6">
 				<p className="my-2 text-sm capitalize">look inside</p>
 				<div className="border rounded-xl overflow-hidden">
-					<div className="dark:bg-[#1D1D1D] bg-background-light flex items-center justify-between px-4 py-2 gap-4 border-b">
+					<div className="bg-background-darker flex items-center justify-between px-4 py-2 gap-4 border-b">
 						<div className="relative w-full md:w-3/4">
-							<Search className="size-4 absolute left-2 bottom-3 dark:text-[#666666]" />
+							<Search className="size-4 absolute left-2 bottom-3 text-muted-foreground" />
 							<Input
 								placeholder="Search questions"
 								className="w-full pl-8 focus:ring-0"
@@ -226,7 +226,7 @@ export function QuestionPackDetails({
 
 	const buttonContent = (
 		<Button
-			className={cn('w-full', !isReview && 'text-white')}
+			className="w-full"
 			variant={isReview ? 'outline' : 'default'}
 		>
 			{isReview ?
@@ -322,10 +322,10 @@ const QuestionPackDetailsSkeleton = () => {
 			<section>
 				<Skeleton className="w-32 h-4 bg-foreground/15 my-2" />
 				<div className="border rounded-xl overflow-hidden">
-					<div className="dark:bg-[#1D1D1D] bg-background-light flex items-center px-4 py-2 gap-4 border-b">
+					<div className="bg-background-darker flex items-center px-4 py-2 gap-4 border-b">
 						<div className="relative md:w-3/4">
 							<div className="p-3 rounded-lg border">
-								<Search className="size-4 absolute left-2 bottom-3 dark:text-[#666666]" />
+								<Search className="size-4 absolute left-2 bottom-3 text-muted-foreground" />
 								<Skeleton className="w-24 h-4 bg-foreground/15 ml-4" />
 							</div>
 						</div>

app/packs/_components/QuestionPackDetailsSkeleton.tsx

@@ -78,9 +78,9 @@ const PackDetails = ({ id, type }: { id: string; type: string }) => {
 					look inside
 				</p>
 				<div className="border rounded-xl overflow-hidden">
-					<div className="dark:bg-[#1D1D1D] bg-background-light flex items-center px-4 py-2 gap-4 border-b">
+					<div className="bg-background-light flex items-center px-4 py-2 gap-4 border-b">
 						<div className="relative md:w-3/4">
-							<Search className="size-4 absolute left-2 bottom-3 dark:text-[#666666]" />
+							<Search className="size-4 absolute left-2 bottom-3 text-muted-foreground" />
 							<Input
 								placeholder="Search questions"
 								className="w-full pl-8 focus:ring-0"
@@ -113,14 +113,7 @@ export function QuestionPackDetails({
 			onOpenChange={setIsOpen}
 		>
 			<DialogTrigger asChild>
-				<Button
-					className={cn(
-						'w-full bg-brand-blue-100 hover:bg-brand-blue-200 text-white',
-						{
-							'popular-btn': false // You might want to adjust this based on your needs
-						}
-					)}
-				>
+				<Button className="w-full">
 					<ExternalLink className="mr-2 h-4 w-4 shrink-0" />{' '}
 					<span>Use Pack</span>
 				</Button>

app/packs/create/_components/PackForm.tsx

@@ -237,7 +237,7 @@ function PackForm() {
 									</SelectContent>
 								</Select>
 								{errors.type && (
-									<p className="px-1 text-xs text-brand-red-100">
+									<p className="px-1 text-xs text-destructive">
 										{errors.type.message}
 									</p>
 								)}
@@ -265,7 +265,7 @@ function PackForm() {
 									</SelectContent>
 								</Select>
 								{errors.language && (
-									<p className="px-1 text-xs text-brand-red-100">
+									<p className="px-1 text-xs text-destructive">
 										{errors.language.message}
 									</p>
 								)}
@@ -281,7 +281,7 @@ function PackForm() {
 									maxLength={100}
 								/>
 								{errors.name && (
-									<p className="px-1 text-xs text-brand-red-100">
+									<p className="px-1 text-xs text-destructive">
 										{errors.name.message}
 									</p>
 								)}
@@ -298,7 +298,7 @@ function PackForm() {
 									maxLength={500}
 								/>
 								{errors.description && (
-									<p className="px-1 text-xs text-brand-red-100">
+									<p className="px-1 text-xs text-destructive">
 										{errors.description.message}
 									</p>
 								)}
@@ -322,7 +322,7 @@ function PackForm() {
 											type="button"
 											key={tag}
 											onClick={() => deleteTag(tag)}
-											className="flex items-center gap-1 px-2 py-1 mr-1 text-left break-all text-xs rounded-lg dark:bg-[#1D1D1D] bg-background-light cursor-pointer"
+											className="flex items-center gap-1 px-2 py-1 mr-1 text-left break-all text-xs rounded-lg bg-background-darker cursor-pointer"
 										>
 											<span>
 												<XCircle size={14} />
@@ -332,27 +332,25 @@ function PackForm() {
 									))}
 								</div>
 								{errors.tags && (
-									<p className="px-1 text-xs text-brand-red-100">
+									<p className="px-1 text-xs text-destructive">
 										{errors.tags.message}
 									</p>
 								)}
 							</div>
 							<Button
 								type="button"
 								onClick={validateBeforeMoving}
-								className="rounded-lg w-fit py-2 px-4 bg-brand-blue-100 hover:bg-brand-blue-200 text-white"
-								size="sm"
+								className="w-fit"
 							>
 								Next
 							</Button>
 						</section>
 						//  second step adding questions to the pack
-					:	<section className="space-y-8  min-h-[calc(100vh-160px)]">
+					:	<section className="space-y-4 min-h-[calc(100vh-160px)]">
 							<div className="flex flex-col gap-2">
 								<div className="flex flex-wrap items-center gap-4">
 									<Button
-										className="rounded-lg w-fit py-2 px-4 flex gap-2 self-end"
-										size="sm"
+										className="flex gap-2"
 										variant="outline"
 										type="button"
 										disabled={isSubmitting}
@@ -365,8 +363,7 @@ function PackForm() {
 										<ImportQuestionModal
 											trigger={
 												<Button
-													className="rounded-lg w-fit py-2 px-4 flex gap-2 self-end"
-													size="sm"
+													className="flex gap-2"
 													variant="outline"
 													type="button"
 													disabled={isSubmitting}
@@ -382,8 +379,7 @@ function PackForm() {
 										<ExportQuestionModal
 											trigger={
 												<Button
-													className="rounded-lg w-fit py-2 px-4 flex gap-2 self-end"
-													size="sm"
+													className="flex gap-2"
 													variant="outline"
 													type="button"
 													disabled={isSubmitting || addedQuestions.length === 0}
@@ -397,8 +393,7 @@ function PackForm() {
 									</div>
 									<div className="flex flex-col gap-2 justify-center">
 										<Button
-											className="rounded-lg w-fit py-2 px-4 flex gap-2 self-end"
-											size="sm"
+											className="flex gap-2"
 											type="submit"
 											disabled={isSubmitting}
 										>
@@ -418,17 +413,17 @@ function PackForm() {
 									/>
 								</div>
 								{errors.questions && (
-									<p className="px-1 text-xs text-brand-red-100">
+									<p className="px-1 text-xs text-destructive">
 										{errors.questions.message}
 									</p>
 								)}
 							</div>
 							<div className="border rounded-xl overflow-hidden divide-y">
-								<div className="dark:bg-[#1D1D1D] bg-background-light flex justify-between p-2 pl-4 gap-4">
+								<div className="bg-background-darker flex justify-between p-2 pl-4 gap-4">
 									<div className="flex items-center gap-4">
 										<p className="block w-fit">Questions</p>
 										<div className="relative hidden xs:block">
-											<Search className="size-4 absolute left-2 bottom-3 dark:text-[#666666]" />
+											<Search className="size-4 absolute left-2 bottom-3 text-muted-foreground" />
 											<Input
 												placeholder="Search for a question"
 												className="md:w-[441px] pl-8 focus:ring-0"
@@ -461,7 +456,7 @@ function PackForm() {
 														variant={'ghost'}
 														type="button"
 														onClick={() => editQuestion(index)}
-														className="hover:text-brand-blue-100"
+														className="hover:text-primary"
 													>
 														<Pen className="size-4" />
 														<span className="sr-only">edit this question</span>
@@ -471,7 +466,7 @@ function PackForm() {
 														variant={'ghost'}
 														onClick={() => deleteQuestion(index)}
 														type="button"
-														className="hover:text-brand-red-100"
+														className="hover:text-destructive"
 													>
 														<Trash2 className="size-4" />
 														<span className="sr-only">
@@ -503,7 +498,7 @@ function PackForm() {
 																	<span>Edit</span>
 																</button>
 															</DropdownMenuItem>
-															<DropdownMenuItem className="focus:text-red-400">
+															<DropdownMenuItem className="focus:text-destructive">
 																<button
 																	onClick={() => deleteQuestion(index)}
 																	className="w-full flex items-center gap-2"

app/packs/create/_components/QuestionModal.tsx

@@ -220,13 +220,13 @@ function QuestionModal({
 						rows={5}
 						value={questionValue}
 						onChange={(e) => handleQuestionInput(e.target.value)}
-						className="w-full p-2 dark:bg-[#1D1D1D] rounded-md resize-none"
+						className="w-full p-2 rounded-md resize-none"
 						placeholder="Question Text"
 						minLength={10}
 						maxLength={300}
 					/>
 					{questionError && (
-						<p className="px-1 text-xs text-brand-red-100">{questionError}</p>
+						<p className="px-1 text-xs text-destructive">{questionError}</p>
 					)}
 				</div>
 				{type === 'mixed' && (
@@ -257,24 +257,22 @@ function QuestionModal({
 							</SelectContent>
 						</Select>
 						{typeError && (
-							<p className="px-1 text-xs text-brand-red-100">{typeError}</p>
+							<p className="px-1 text-xs text-destructive">{typeError}</p>
 						)}
 					</div>
 				)}
 				<DialogFooter className="justify-end gap-2 flex-row">
 					<DialogClose asChild>
 						<Button
 							type="button"
-							className="rounded-lg w-fit py-2 px-6"
-							size="sm"
+							className="w-fit"
 							variant="secondary"
 						>
 							Close
 						</Button>
 					</DialogClose>
 					<Button
-						className="rounded-lg w-fit py-2 px-6 bg-brand-blue-100 hover:bg-brand-blue-200 text-white"
-						size="sm"
+						className="w-fit"
 						type="submit"
 						onClick={mode === 'create' ? addQuestion : editQuestion}
 					>