styling

Author: KianNH

src/components/changelog/Header.astro

@@ -32,7 +32,7 @@ const products = await uniqueProducts(notes);
 ---
 
 <div
-	class="bg-linear-to-r mb-16 ml-[calc(50%-50vw)] flex w-screen items-center justify-evenly border-b-2 bg-gradient-to-r from-[#FFE9CB99] to-[#FFFFFF99] p-4 dark:border-b-[#2C2C2C] dark:from-[#FBAD411F] dark:to-[#2C2C2C00] max-sm:flex-col-reverse sm:h-[18.75rem]"
+	class="bg-linear-to-r !mt-0 mb-16 ml-[calc(50%-50vw)] flex w-screen items-center justify-evenly border-b-2 bg-gradient-to-r from-[#FFE9CB99] to-[#FFFFFF99] p-4 dark:border-b-[#2C2C2C] dark:from-[#FBAD411F] dark:to-[#2C2C2C00] max-sm:flex-col-reverse sm:h-[18.75rem]"
 >
 	<div class="text-center sm:text-left">
 		<h1>Changelog</h1>

src/components/changelog/ProductSelect.tsx

@@ -1,4 +1,5 @@
 import type { CollectionEntry } from "astro:content";
+import type { StylesConfig } from "react-select";
 import Select from "react-select";
 import { useEffect, useState } from "react";
 
@@ -41,6 +42,47 @@ export default function ProductSelect({ products, groups }: Props) {
 		},
 	];
 
+	const selectStyles: StylesConfig<Option, false> = {
+		control: (base, state) => ({
+			...base,
+			backgroundColor: "var(--sl-color-gray-6)",
+			borderColor: state.isFocused
+				? "var(--sl-color-gray-3)"
+				: "var(--sl-color-gray-4)",
+			"&:hover": {
+				borderColor: "var(--sl-color-gray-3)",
+			},
+			boxShadow: state.isFocused ? "0 0 0 1px var(--sl-color-gray-3)" : "none",
+		}),
+		menu: (base) => ({
+			...base,
+			backgroundColor: "var(--sl-color-gray-6)",
+			borderColor: "var(--sl-color-gray-4)",
+		}),
+		option: (base, state) => ({
+			...base,
+			backgroundColor: state.isFocused
+				? "var(--sl-color-gray-5)"
+				: "var(--sl-color-gray-6)",
+			color: "var(--sl-color-gray-1)",
+			"&:active": {
+				backgroundColor: "var(--sl-color-gray-4)",
+			},
+		}),
+		singleValue: (base) => ({
+			...base,
+			color: "var(--sl-color-gray-1)",
+		}),
+		input: (base) => ({
+			...base,
+			color: "var(--sl-color-gray-1)",
+		}),
+		groupHeading: (base) => ({
+			...base,
+			color: "var(--sl-color-gray-3)",
+		}),
+	};
+
 	useEffect(() => {
 		const url = new URL(window.location.href);
 		const param = url.searchParams.get("product");
@@ -78,6 +120,7 @@ export default function ProductSelect({ products, groups }: Props) {
 			options={options}
 			value={selectedOption}
 			onChange={handleChange}
+			styles={selectStyles}
 		/>
 	);
 }