button-component #29

Merged
stne3960 merged 22 commits from button-component into main 2025-12-12 11:52:31 +01:00
3 changed files with 45 additions and 46 deletions
Showing only changes of commit 902d59098b - Show all commits

View File

@ -197,7 +197,7 @@
--color-su-primary: #002f5f; --color-su-primary: #002f5f;
--color-su-primary-80: #33587f; --color-su-primary-80: #33587f;
--bottom-nav-height: 4.5rem; --bottom-nav-height: 4.5rem;
font-family: 'TheSans', system-ui, Avenir, Helvetica, Arial, sans-serif; font-family: "TheSans", system-ui, Avenir, Helvetica, Arial, sans-serif;
background-color: #ffffff; background-color: #ffffff;
color: #000000; color: #000000;
} }
@ -218,7 +218,6 @@
font-size: 18px; font-size: 18px;
} }
.body-semibold-md { .body-semibold-md {
font-family: "TheSansB W5 Plain", system-ui, sans-serif; font-family: "TheSansB W5 Plain", system-ui, sans-serif;
font-size: 16px; font-size: 16px;

View File

@ -1,16 +1,16 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from "react";
import Button from '../components/Button/Button'; import Button from "../components/Button/Button";
export default function ComponentLibrary() { export default function ComponentLibrary() {
const [darkMode, setDarkMode] = useState(() => { const [darkMode, setDarkMode] = useState(() => {
stne3960 marked this conversation as resolved Outdated

This file needs to be ran through Prettier.

This file needs to be ran through Prettier.
return document.documentElement.classList.contains('dark'); return document.documentElement.classList.contains("dark");
}); });
useEffect(() => { useEffect(() => {
if (darkMode) { if (darkMode) {
document.documentElement.classList.add('dark'); document.documentElement.classList.add("dark");
} else { } else {
document.documentElement.classList.remove('dark'); document.documentElement.classList.remove("dark");
} }
}, [darkMode]); }, [darkMode]);
@ -21,7 +21,7 @@ export default function ComponentLibrary() {
<section className="mt-lg"> <section className="mt-lg">
<h2 className="mb-md">Dark Mode</h2> <h2 className="mb-md">Dark Mode</h2>
<Button variant="primary" onClick={() => setDarkMode(!darkMode)}> <Button variant="primary" onClick={() => setDarkMode(!darkMode)}>
{darkMode ? 'Light Mode' : 'Dark Mode'} {darkMode ? "Light Mode" : "Dark Mode"}
</Button> </Button>
</section> </section>

View File

@ -1,6 +1,6 @@
import { defineConfig } from 'vite'; import { defineConfig } from "vite";
stne3960 marked this conversation as resolved Outdated

This file needs to be ran through Prettier.

This file needs to be ran through Prettier.
import react from '@vitejs/plugin-react-swc'; import react from "@vitejs/plugin-react-swc";
import tailwindcss from '@tailwindcss/vite'; import tailwindcss from "@tailwindcss/vite";
// https://vite.dev/config/ // https://vite.dev/config/
export default defineConfig({ export default defineConfig({