feat: selected board style, boards spacing, text font size

src/components/ui/ColorSchemeToggle/ColorSchemeToggle.module.css

@@ -1,4 +1,5 @@
 .container {
+    border-width: 0;
     @mixin dark {
         background-color: var(--mantine-color-dark-7);
     }

src/components/ui/ColorSchemeToggle/ColorSchemeToggle.tsx

@@ -7,6 +7,7 @@ import {
     useComputedColorScheme,
     useMantineColorScheme,
 } from "@mantine/core";
+import SmallPageBlock from "@/components/layout/SmallPageBlock/SmallPageBlock";
 import style from "./ColorSchemeToggle.module.css";
 
 export function ColorSchemeToggle() {
@@ -20,21 +21,23 @@ export function ColorSchemeToggle() {
     };
 
     return (
-        <ActionIcon
-            onClick={toggleColorScheme}
-            variant="default"
-            size="xl"
-            radius="lg"
-            aria-label="Toggle color scheme"
-            className={style.container}>
-            <IconSun
-                className={classNames(style.icon, style.light)}
-                stroke={1.5}
-            />
-            <IconMoon
-                className={classNames(style.icon, style.dark)}
-                stroke={1.5}
-            />
-        </ActionIcon>
+        <SmallPageBlock>
+            <ActionIcon
+                onClick={toggleColorScheme}
+                variant="default"
+                size="xl"
+                radius="lg"
+                aria-label="Toggle color scheme"
+                className={style.container}>
+                <IconSun
+                    className={classNames(style.icon, style.light)}
+                    stroke={1.5}
+                />
+                <IconMoon
+                    className={classNames(style.icon, style.dark)}
+                    stroke={1.5}
+                />
+            </ActionIcon>
+        </SmallPageBlock>
     );
 }