From 3f57e1adb89c817ca651492294cacbb7dd0fb2a2 Mon Sep 17 00:00:00 2001 From: rare-magma Date: Sun, 1 Oct 2023 12:32:57 +0200 Subject: [PATCH] refactor: split css per component Signed-off-by: rare-magma --- src/App.css | 316 +++--------------- src/App.tsx | 1 + src/colors.css | 36 ++ .../CalculateButton/CalculateButton.css | 31 ++ .../CalculateButton/CalculateButton.tsx | 1 + src/components/Chart/Chart.css | 5 + src/components/Chart/Chart.tsx | 1 + src/components/ChartsPage/ChartsPage.tsx | 2 +- src/components/ErrorModal/ErrorModal.css | 67 ++++ src/components/ErrorModal/ErrorModal.tsx | 5 +- src/components/ItemForm/ItemFormGroup.css | 17 + src/components/ItemForm/ItemFormGroup.tsx | 1 + src/components/NavBar/NavBar.css | 80 +++++ src/components/NavBar/NavBar.tsx | 1 + src/components/NavBar/NavBarItem.tsx | 1 + src/components/Notification/Notification.css | 9 + src/components/Notification/Notification.tsx | 1 + src/components/StatCard/StatCard.css | 13 + src/components/StatCard/StatCard.tsx | 2 +- src/components/TableCard/TableCard.css | 33 ++ src/components/TableCard/TableCard.tsx | 1 + 21 files changed, 343 insertions(+), 281 deletions(-) create mode 100644 src/colors.css create mode 100644 src/components/CalculateButton/CalculateButton.css create mode 100644 src/components/Chart/Chart.css create mode 100644 src/components/ErrorModal/ErrorModal.css create mode 100644 src/components/ItemForm/ItemFormGroup.css create mode 100644 src/components/NavBar/NavBar.css create mode 100644 src/components/Notification/Notification.css create mode 100644 src/components/StatCard/StatCard.css create mode 100644 src/components/TableCard/TableCard.css diff --git a/src/App.css b/src/App.css index e0d3f61..68730af 100644 --- a/src/App.css +++ b/src/App.css @@ -1,37 +1,3 @@ -@media (prefers-color-scheme: dark) { - * { - --textcolor: #f8f8f2; - --bgcolor: #21222c; - --lightbgcolor: #282a36; - --highlight: #50fa7b; - --red: #ff5555; - --orange: #ffb86c; - --yellow: #f1fa8c; - --purple: #bd93f9; - --cyan: #8be9fd; - --pink: #ff79c6; - --selection: #44475a; - --comment: #6272a4; - } -} - -@media (prefers-color-scheme: light) { - * { - --bgcolor: #eaebf9; - --lightbgcolor: #f8f8f2; - --textcolor: #282a36; - --highlight: #008504; - --red: #d82f39; - --orange: #a0651b; - --yellow: #6c7908; - --purple: #855fbf; - --cyan: #007e90; - --pink: #c13f8e; - --selection: #c5c8de; - --comment: #7e8ec2; - } -} - body { background: var(--bgcolor); color: var(--textcolor); @@ -47,100 +13,6 @@ a:hover { color: var(--cyan); } -.accordion-button:after, -.accordion-button:not(.collapsed):after { - filter: invert(58%) sepia(93%) saturate(2284%) hue-rotate(322deg) - brightness(95%) contrast(112%); -} - -.modal-header { - border-bottom: 0; -} - -.accordion-button, -.accordion-button:after, -.accordion-button:not(.collapsed):after, -.accordion-flush, -.accordion-item, -.modal-item { - border-radius: 0.375rem; -} - -.card, -.dropdown, -.dropdown-item, -.dropdown-item:focus, -.dropdown-item.disabled, -.dropdown-item:disabled, -.dropdown-item:hover { - background: var(--lightbgcolor); - color: var(--textcolor); -} - -.navbar, -.offcanvas-body, -.offcanvas-header { - background: var(--bgcolor); - color: var(--textcolor); -} - -.accordion, -.accordion-button, -.accordion-button:focus, -.accordion-item, -.accordion-item:focus, -.dropdown-menu, -.dropdown-menu.show { - background: var(--lightbgcolor); - border: 0 solid var(--comment); - border-radius: 0.375rem; - color: var(--textcolor); -} - -.accordion-button:focus, -.accordion-item:focus { - border-radius: 0.375rem; - box-shadow: 0 0 0 0.2rem rgba(189, 147, 249, 0.25); -} - -.form-control, -.input-group-text, -.modal-content, -.modal-item, -input .input-group-text, -input.form-control, -input.text-end.form-control { - background: var(--lightbgcolor); - border: 1px solid var(--comment); - color: var(--textcolor); -} - -.dropdown-item:focus, -.dropdown-item:focus-visible, -.dropdown-item:hover, -.form-control:focus, -input.text-end.form-control:focus { - background: var(--lightbgcolor); - border: 1px solid var(--pink); - box-shadow: 0 0 0; - color: var(--textcolor); -} -.straight-corners { - border-radius: 0; -} - -/* Chrome, Safari, Edge, Opera */ -input::-webkit-inner-spin-button, -input::-webkit-outer-spin-button { - -webkit-appearance: none; - margin: 0; -} - -/* Firefox */ -input[type="number"] { - -moz-appearance: textfield; -} - .btn:focus-visible { background-color: var(--comment); box-shadow: none !important; @@ -155,68 +27,12 @@ input[type="number"] { .btn-close, .btn-currency, -.btn-delete, -.btn-outline-secondary, -.btn-text { +.btn-outline-secondary { background-color: var(--lightbgcolor); border: 1px solid var(--comment); border-radius: 0.375rem; } -.btn-delete { - color: var(--red); -} - -.btn-delete:focus-visible, -.btn-delete:hover { - background-color: var(--red); - border: 1px solid var(--red); - border-radius: 0.375rem; - color: var(--lightbgcolor); -} - -.btn-Expenses-plus-button { - border: 1px solid var(--comment); - color: var(--purple); -} - -.btn-Expenses-plus-button:focus-visible, -.btn-Expenses-plus-button:hover { - background-color: var(--purple); - border: 1px solid var(--purple); - color: var(--lightbgcolor); -} - -.btn-Revenue-plus-button { - border: 1px solid var(--comment); - color: var(--highlight); -} - -.btn-Revenue-plus-button:focus-visible, -.btn-Revenue-plus-button:hover { - background-color: var(--highlight); - border: 1px solid var(--highlight); - color: var(--lightbgcolor); -} - -.btn-delete-modal, -.btn-outline-danger { - background-color: var(--lightbgcolor); - border: 1px solid var(--comment); - border-radius: 0.375rem; - color: var(--red); -} - -.btn-delete-modal:focus-visible, -.btn-delete-modal:hover, -.btn-outline-danger:focus-visible, -.btn-outline-danger:hover { - background-color: var(--red); - border: 1px solid var(--red); - border-radius: 0.375rem; - color: var(--lightbgcolor); -} - .btn-outline-info { background-color: var(--lightbgcolor); border: 1px solid var(--comment); @@ -262,58 +78,22 @@ input[type="number"] { color: var(--lightbgcolor); } -.btn-text:hover { - background-color: var(--lightbgcolor); - color: var(--textcolor); -} - -.btn-currency:hover { - background-color: var(--highlight); - color: var(--textcolor); -} - -.btn-go-button { - background-color: var(--lightbgcolor); - border: 1px solid var(--comment); - color: var(--purple); -} - -.btn-go-button:focus-visible, -.btn-go-button:hover { - background-color: var(--purple); - border: 1px solid var(--purple); - color: var(--lightbgcolor); -} - -.Expenses-card, -.stat-card, -.Revenue-card { +.card { border: 1px solid var(--comment); + background: var(--lightbgcolor); + color: var(--textcolor); } -.Expenses-card-header, -.stat-card-header, -.Revenue-card-header { +.card-header { border-bottom: 1px solid var(--comment); } -.stat-card-footer { +.card-footer { border-top: 1px solid var(--comment); } -.navbar .navbar-toggler-icon { - background-image: url("data:image/svg+xml;utf8,💸"); -} - -.version { - color: var(--selection); - font-size: 0.9em; -} - -.code, .fixed-width-font, -.textarea, -.version { +.textarea { font-family: ui-monospace, SF Mono, @@ -323,60 +103,46 @@ input[type="number"] { monospace; } -.brand { +.form-control, +.input-group-text, +input .input-group-text, +input.form-control, +input.text-end.form-control { + background: var(--lightbgcolor); + border: 1px solid var(--comment); color: var(--textcolor); } -.pre, -.textarea { - background: var(--selection); - border-radius: 0; - font-size: 0.9em; - margin: 0.8em 0 1em; - max-height: 35vh; - overflow: auto; - padding: 0.6em 0.9em; +.form-control:focus, +input.text-end.form-control:focus { + background: var(--lightbgcolor); + border: 1px solid var(--pink); + box-shadow: 0 0 0; + color: var(--textcolor); } -.modal-90w { - max-width: none !important; - width: 90%; +/* Chrome, Safari, Edge, Opera */ +input::-webkit-inner-spin-button, +input::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; } -.modal-body { - max-height: 65vh; - overflow: auto; +/* Firefox */ +input[type="number"] { + -moz-appearance: textfield; } .input-group-sm > .form-control { font-size: 1rem; } -.auto-goal, -.navbar-toggler { - border: 1px solid var(--comment); - border-radius: 0.375rem; -} - -.dropdown-menu { - min-width: inherit; - overflow-x: hidden !important; -} - .popover { border: 1px solid var(--comment); border-radius: 0.375rem; width: auto; } -.toast { - border: 1px solid var(--comment); -} -.toast-container > :not(:last-child) { - margin-bottom: 0.75rem; -} - -.toast, .popover, .popover-header { background: var(--lightbgcolor); @@ -395,21 +161,17 @@ input[type="number"] { border-top-color: var(--comment); } -input[type="text"]::placeholder { - color: var(--comment); - opacity: 1; -} - -.recharts-default-tooltip, -.recharts-tooltip-wrapper { - background-color: var(--lightbgcolor); - border: 1px solid var(--comment); -} - -.progress { - background-color: var(--comment); +.pre, +.textarea { + background: var(--selection); + border-radius: 0; + font-size: 0.9em; + margin: 0.8em 0 1em; + max-height: 35vh; + overflow: auto; + padding: 0.6em 0.9em; } -.progress-bar { - background-color: var(--pink); +.straight-corners { + border-radius: 0; } diff --git a/src/App.tsx b/src/App.tsx index d2b8b67..e31eb60 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,7 @@ import "bootstrap/dist/css/bootstrap.min.css"; import { Route, BrowserRouter as Router, Routes } from "react-router-dom"; import "./App.css"; +import "./colors.css"; import BudgetPage from "./components/Budget/BudgetPage"; import { BudgetProvider } from "./context/BudgetContext"; import { ConfigProvider } from "./context/ConfigContext"; diff --git a/src/colors.css b/src/colors.css new file mode 100644 index 0000000..f5c9184 --- /dev/null +++ b/src/colors.css @@ -0,0 +1,36 @@ +@media (prefers-color-scheme: dark) { + * { + --textcolor: #f8f8f2; + --bgcolor: #21222c; + --bs-body-color: #21222c; + --lightbgcolor: #282a36; + --highlight: #50fa7b; + --bs-success: #50fa7b; + --red: #ff5555; + --orange: #ffb86c; + --yellow: #f1fa8c; + --purple: #bd93f9; + --cyan: #8be9fd; + --pink: #ff79c6; + --selection: #44475a; + --comment: #6272a4; + } +} + +@media (prefers-color-scheme: light) { + * { + --bgcolor: #eaebf9; + --lightbgcolor: #f8f8f2; + --textcolor: #282a36; + --highlight: #008504; + --bs-success: #008504; + --red: #d82f39; + --orange: #a0651b; + --yellow: #6c7908; + --purple: #855fbf; + --cyan: #007e90; + --pink: #c13f8e; + --selection: #c5c8de; + --comment: #7e8ec2; + } +} diff --git a/src/components/CalculateButton/CalculateButton.css b/src/components/CalculateButton/CalculateButton.css new file mode 100644 index 0000000..a1d7323 --- /dev/null +++ b/src/components/CalculateButton/CalculateButton.css @@ -0,0 +1,31 @@ +.dropdown, +.dropdown-item, +.dropdown-item:focus, +.dropdown-item.disabled, +.dropdown-item:disabled, +.dropdown-item:hover { + background: var(--lightbgcolor); + color: var(--textcolor); +} + +.dropdown-item:focus, +.dropdown-item:focus-visible, +.dropdown-item:hover { + background: var(--lightbgcolor); + border: 1px solid var(--pink); + box-shadow: 0 0 0; + color: var(--textcolor); +} + +.dropdown-menu { + min-width: inherit; + overflow-x: hidden !important; +} + +.dropdown-menu, +.dropdown-menu.show { + background: var(--lightbgcolor); + border: 0 solid var(--comment); + border-radius: 0.375rem; + color: var(--textcolor); +} diff --git a/src/components/CalculateButton/CalculateButton.tsx b/src/components/CalculateButton/CalculateButton.tsx index 2c55ffb..a7c6368 100644 --- a/src/components/CalculateButton/CalculateButton.tsx +++ b/src/components/CalculateButton/CalculateButton.tsx @@ -11,6 +11,7 @@ import { BsCheckLg, BsDashLg, BsPlusSlashMinus, BsXLg } from "react-icons/bs"; import { CgMathDivide, CgMathPlus } from "react-icons/cg"; import { useConfig } from "../../context/ConfigContext"; import { ItemForm } from "../ItemForm/ItemForm"; +import "./CalculateButton.css"; interface CalculateButtonProps { itemForm: ItemForm; diff --git a/src/components/Chart/Chart.css b/src/components/Chart/Chart.css new file mode 100644 index 0000000..377f987 --- /dev/null +++ b/src/components/Chart/Chart.css @@ -0,0 +1,5 @@ +.recharts-default-tooltip, +.recharts-tooltip-wrapper { + background-color: var(--lightbgcolor); + border: 1px solid var(--comment); +} diff --git a/src/components/Chart/Chart.tsx b/src/components/Chart/Chart.tsx index 2420fd6..e607e55 100644 --- a/src/components/Chart/Chart.tsx +++ b/src/components/Chart/Chart.tsx @@ -12,6 +12,7 @@ import { import { useBudget } from "../../context/BudgetContext"; import { useConfig } from "../../context/ConfigContext"; import { intlFormat, median } from "../../utils"; +import "./Chart.css"; import ChartTooltip from "./ChartTooltip"; import useDynamicYAxisWidth from "./DynamicYAxis"; diff --git a/src/components/ChartsPage/ChartsPage.tsx b/src/components/ChartsPage/ChartsPage.tsx index eefe223..8c8f489 100644 --- a/src/components/ChartsPage/ChartsPage.tsx +++ b/src/components/ChartsPage/ChartsPage.tsx @@ -41,7 +41,7 @@ function ChartsPage({ onShowGraphs }: GraphProps) {