Fix Icon Button Color

Author: CannonLock

app/docs/[...slug]/page.tsx

@@ -1,7 +1,11 @@
 import { glob } from 'glob';
+
+
 import DocumentationPage from "@/components/DocumentationPage";
 
-const RELATIVE_DOCS_PATH = '../../../docs';
+
+
+const RELATIVE_DOCS_PATH = '/docs';
 
 export default async function Page({ params }: {
 	params: Promise<{ slug: string[] }>;
@@ -46,10 +50,12 @@ const importSlug = async (slug: string[]) => {
 
 	for (const ext of EXTENSIONS) {
 		for (const file of FILES) {
-			const fullPath = `${RELATIVE_DOCS_PATH}/${path}${file}.${ext}`;
+			const fullPath = `${path}${file}.${ext}`;
 			try {
-				return await import(fullPath);
-			} catch (e) {}
+				return await import(`@/docs/${fullPath}`);
+			} catch (e) {
+				console.error(fullPath);
+			}
 		}
 	}
 

components/LabeledIconButton/LabeledIconButton.tsx

@@ -11,13 +11,14 @@ interface LabeledIconButtonProps extends IconButtonProps {
  * IconButton with a small label below it in a vertical layout.
  */
 const LabeledIconButton = ({label, href, ...props}: LabeledIconButtonProps) => {
+
 	return (
 		<Link href={href}>
 			<Box display={"flex"} flexDirection={"column"} alignItems={"center"}>
 				<IconButton {...props} sx={{...props.sx, mb: -1}}>
 					{props.children}
 				</IconButton>
-				<Typography variant="caption" display="block" textAlign="center">
+				<Typography variant="caption" display="block" textAlign="center" sx={props.sx}>
 					{label}
 				</Typography>
 			</Box>