summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorAnderson Shindy Oki <[email protected]>2024-06-13 11:35:35 +0900
committerGitHub <[email protected]>2024-06-12 22:35:35 -0400
commitd719d4c6df0c8d8dbc71e29aabf59f5d0987ac18 (patch)
tree13c23d9c3fb808382c289527b8bd3aa46aab2306
parentd7445bf39c2a6b4365064087c75c39972b22469d (diff)
downloadbazarr-d719d4c6df0c8d8dbc71e29aabf59f5d0987ac18.tar.gz
bazarr-d719d4c6df0c8d8dbc71e29aabf59f5d0987ac18.zip
Fixed theme colors and variantsv1.4.4-beta.5
-rw-r--r--frontend/src/App/Header.tsx3
-rw-r--r--frontend/src/App/Navbar.tsx10
-rw-r--r--frontend/src/App/ThemeProvider.tsx5
-rw-r--r--frontend/src/assets/_bazarr.scss6
-rw-r--r--frontend/src/assets/action_icon.module.scss25
-rw-r--r--frontend/src/assets/app_shell.module.scss7
-rw-r--r--frontend/src/assets/badge.module.scss7
-rw-r--r--frontend/src/components/forms/MovieUploadForm.module.scss0
-rw-r--r--frontend/src/components/forms/MovieUploadForm.tsx2
-rw-r--r--frontend/src/components/forms/ProfileEditForm.tsx2
-rw-r--r--frontend/src/components/forms/SeriesUploadForm.tsx2
-rw-r--r--frontend/src/components/modals/ManualSearchModal.tsx3
-rw-r--r--frontend/src/pages/Episodes/table.tsx2
-rw-r--r--frontend/src/pages/Movies/Details/table.tsx1
-rw-r--r--frontend/src/pages/Movies/index.tsx1
-rw-r--r--frontend/src/pages/Series/index.tsx1
-rw-r--r--frontend/src/pages/Settings/General/index.tsx6
-rw-r--r--frontend/src/pages/Settings/Languages/equals.tsx2
-rw-r--r--frontend/src/pages/Settings/Languages/table.tsx2
-rw-r--r--frontend/src/pages/Settings/Notifications/index.tsx9
-rw-r--r--frontend/src/pages/System/Backups/table.tsx2
-rw-r--r--frontend/src/pages/System/Releases/index.tsx2
22 files changed, 40 insertions, 60 deletions
diff --git a/frontend/src/App/Header.tsx b/frontend/src/App/Header.tsx
index cfc3f3319..29c1d1a8d 100644
--- a/frontend/src/App/Header.tsx
+++ b/frontend/src/App/Header.tsx
@@ -64,10 +64,9 @@ const AppHeader: FunctionComponent = () => {
label="System"
tooltip={{ position: "left", openDelay: 2000 }}
loading={offline}
- color={offline ? "yellow" : undefined}
+ c={offline ? "yellow" : undefined}
icon={faGear}
size="lg"
- variant="light"
></Action>
</Menu.Target>
<Menu.Dropdown>
diff --git a/frontend/src/App/Navbar.tsx b/frontend/src/App/Navbar.tsx
index 3b5ce1881..679a0e3e7 100644
--- a/frontend/src/App/Navbar.tsx
+++ b/frontend/src/App/Navbar.tsx
@@ -130,8 +130,7 @@ const AppNavbar: FunctionComponent = () => {
<Group gap="xs">
<Action
label="Change Theme"
- color={dark ? "yellow" : "indigo"}
- variant="subtle"
+ c={dark ? "yellow" : "indigo"}
onClick={() => toggleColorScheme()}
icon={dark ? faSun : faMoon}
></Action>
@@ -139,12 +138,7 @@ const AppNavbar: FunctionComponent = () => {
href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=XHHRWXT9YB7WE&source=url"
target="_blank"
>
- <Action
- label="Donate"
- icon={faHeart}
- variant="subtle"
- color="red"
- ></Action>
+ <Action label="Donate" icon={faHeart} c="red"></Action>
</Anchor>
</Group>
</AppShell.Section>
diff --git a/frontend/src/App/ThemeProvider.tsx b/frontend/src/App/ThemeProvider.tsx
index 224791843..662a1ce69 100644
--- a/frontend/src/App/ThemeProvider.tsx
+++ b/frontend/src/App/ThemeProvider.tsx
@@ -1,7 +1,6 @@
import { FunctionComponent, PropsWithChildren } from "react";
import {
ActionIcon,
- AppShell,
Badge,
Button,
createTheme,
@@ -13,7 +12,6 @@ import "@mantine/core/styles.layer.css";
import "@mantine/notifications/styles.layer.css";
import styleVars from "@/assets/_variables.module.scss";
import actionIconClasses from "@/assets/action_icon.module.scss";
-import appShellClasses from "@/assets/app_shell.module.scss";
import badgeClasses from "@/assets/badge.module.scss";
import buttonClasses from "@/assets/button.module.scss";
import paginationClasses from "@/assets/pagination.module.scss";
@@ -39,9 +37,6 @@ const themeProvider = createTheme({
ActionIcon: ActionIcon.extend({
classNames: actionIconClasses,
}),
- AppShell: AppShell.extend({
- classNames: appShellClasses,
- }),
Badge: Badge.extend({
classNames: badgeClasses,
}),
diff --git a/frontend/src/assets/_bazarr.scss b/frontend/src/assets/_bazarr.scss
index a2476ed12..96e44e619 100644
--- a/frontend/src/assets/_bazarr.scss
+++ b/frontend/src/assets/_bazarr.scss
@@ -74,3 +74,9 @@ $header-height: 64px;
}
}
}
+
+:root {
+ @include dark {
+ --mantine-color-body: var(--mantine-color-dark-8);
+ }
+}
diff --git a/frontend/src/assets/action_icon.module.scss b/frontend/src/assets/action_icon.module.scss
index 3bdf0c417..d23cb6ce2 100644
--- a/frontend/src/assets/action_icon.module.scss
+++ b/frontend/src/assets/action_icon.module.scss
@@ -1,25 +1,16 @@
@layer mantine {
.root {
- background-color: transparent;
-
- &[data-variant="light"] {
- color: var(--mantine-color-dark-0);
- }
-
- &[data-variant="dark"] {
- --ai-bg: transparent;
- --ai-hover: darken(var(--mantine-color-grape-light), 0.2);
- }
+ --ai-bg: transparent;
@include light {
- &[data-variant="light"] {
- background-color: var(--mantine-color-gray-1);
- color: var(--mantine-color-dark-2);
- }
+ color: var(--mantine-color-dark-2);
+ --ai-hover: var(--mantine-color-gray-1);
+ --ai-hover-color: var(--mantine-color-gray-1);
+ }
- &[data-variant="dark"] {
- --ai-color: var(--mantine-color-dark-filled);
- }
+ @include dark {
+ color: var(--mantine-color-dark-0);
+ --ai-hover: var(--mantine-color-gray-8);
}
}
}
diff --git a/frontend/src/assets/app_shell.module.scss b/frontend/src/assets/app_shell.module.scss
deleted file mode 100644
index 49c3f1947..000000000
--- a/frontend/src/assets/app_shell.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@layer mantine {
- .main {
- @include dark {
- background-color: var(--mantine-color-dark-8);
- }
- }
-}
diff --git a/frontend/src/assets/badge.module.scss b/frontend/src/assets/badge.module.scss
index 2ef1b3904..4b8717fe3 100644
--- a/frontend/src/assets/badge.module.scss
+++ b/frontend/src/assets/badge.module.scss
@@ -3,7 +3,7 @@
background-color: transparentize($color-brand-6, 0.8);
&[data-variant="warning"] {
- color: lighten($color-warning-2, 1);
+ color: lighten($color-warning-2, 0.8);
background-color: transparentize($color-warning-6, 0.8);
}
@@ -17,6 +17,11 @@
background-color: transparentize($color-disabled-7, 0.8);
}
+ &[data-variant="light"] {
+ color: var(--mantine-color-dark-0);
+ background-color: transparentize($color-disabled-9, 0.8);
+ }
+
@include light {
color: $color-brand-6;
background-color: transparentize($color-brand-3, 0.8);
diff --git a/frontend/src/components/forms/MovieUploadForm.module.scss b/frontend/src/components/forms/MovieUploadForm.module.scss
deleted file mode 100644
index e69de29bb..000000000
--- a/frontend/src/components/forms/MovieUploadForm.module.scss
+++ /dev/null
diff --git a/frontend/src/components/forms/MovieUploadForm.tsx b/frontend/src/components/forms/MovieUploadForm.tsx
index 5a5a47f06..7e3df4b33 100644
--- a/frontend/src/components/forms/MovieUploadForm.tsx
+++ b/frontend/src/components/forms/MovieUploadForm.tsx
@@ -243,7 +243,7 @@ const MovieUploadForm: FunctionComponent<Props> = ({
<Action
label="Remove"
icon={faTrash}
- color="red"
+ c="red"
onClick={() => action.remove(index)}
></Action>
);
diff --git a/frontend/src/components/forms/ProfileEditForm.tsx b/frontend/src/components/forms/ProfileEditForm.tsx
index 81b50cfcd..0a6471dc5 100644
--- a/frontend/src/components/forms/ProfileEditForm.tsx
+++ b/frontend/src/components/forms/ProfileEditForm.tsx
@@ -241,7 +241,7 @@ const ProfileEditForm: FunctionComponent<Props> = ({
<Action
label="Remove"
icon={faTrash}
- color="red"
+ c="red"
onClick={() => action.remove(row.index)}
></Action>
);
diff --git a/frontend/src/components/forms/SeriesUploadForm.tsx b/frontend/src/components/forms/SeriesUploadForm.tsx
index 31b39a8d8..99a8e8e30 100644
--- a/frontend/src/components/forms/SeriesUploadForm.tsx
+++ b/frontend/src/components/forms/SeriesUploadForm.tsx
@@ -309,7 +309,7 @@ const SeriesUploadForm: FunctionComponent<Props> = ({
<Action
label="Remove"
icon={faTrash}
- color="red"
+ c="red"
onClick={() => action.remove(index)}
></Action>
);
diff --git a/frontend/src/components/modals/ManualSearchModal.tsx b/frontend/src/components/modals/ManualSearchModal.tsx
index 2c764e83c..d29a2deba 100644
--- a/frontend/src/components/modals/ManualSearchModal.tsx
+++ b/frontend/src/components/modals/ManualSearchModal.tsx
@@ -162,8 +162,7 @@ function ManualSearchView<T extends SupportType>(props: Props<T>) {
<Action
label="Download"
icon={faDownload}
- color="brand"
- variant="light"
+ c="brand"
disabled={item === null}
onClick={() => {
if (!item) return;
diff --git a/frontend/src/pages/Episodes/table.tsx b/frontend/src/pages/Episodes/table.tsx
index c68e7b7fc..b28e0d7e8 100644
--- a/frontend/src/pages/Episodes/table.tsx
+++ b/frontend/src/pages/Episodes/table.tsx
@@ -169,7 +169,6 @@ const Table: FunctionComponent<Props> = ({
<Action
label="Manual Search"
disabled={disabled}
- variant="dark"
onClick={() => {
modals.openContextModal(EpisodeSearchModal, {
item: row.original,
@@ -182,7 +181,6 @@ const Table: FunctionComponent<Props> = ({
<Action
label="History"
disabled={disabled}
- variant="dark"
onClick={() => {
modals.openContextModal(
EpisodeHistoryModal,
diff --git a/frontend/src/pages/Movies/Details/table.tsx b/frontend/src/pages/Movies/Details/table.tsx
index 0a1b4e722..eef5a52f6 100644
--- a/frontend/src/pages/Movies/Details/table.tsx
+++ b/frontend/src/pages/Movies/Details/table.tsx
@@ -161,7 +161,6 @@ const Table: FunctionComponent<Props> = ({ movie, profile, disabled }) => {
<Action
label="Subtitle Actions"
disabled={isSubtitleTrack(path)}
- variant="dark"
icon={faEllipsis}
></Action>
</SubtitleToolsMenu>
diff --git a/frontend/src/pages/Movies/index.tsx b/frontend/src/pages/Movies/index.tsx
index 94c98a007..1cbd14a36 100644
--- a/frontend/src/pages/Movies/index.tsx
+++ b/frontend/src/pages/Movies/index.tsx
@@ -87,7 +87,6 @@ const MovieView: FunctionComponent = () => {
<Action
label="Edit Movie"
tooltip={{ position: "left" }}
- variant="light"
onClick={() =>
modals.openContextModal(
ItemEditModal,
diff --git a/frontend/src/pages/Series/index.tsx b/frontend/src/pages/Series/index.tsx
index e36a89be6..92f63c9ab 100644
--- a/frontend/src/pages/Series/index.tsx
+++ b/frontend/src/pages/Series/index.tsx
@@ -87,7 +87,6 @@ const SeriesView: FunctionComponent = () => {
<Action
label="Edit Series"
tooltip={{ position: "left" }}
- variant="light"
onClick={() =>
modals.openContextModal(
ItemEditModal,
diff --git a/frontend/src/pages/Settings/General/index.tsx b/frontend/src/pages/Settings/General/index.tsx
index 13f8ed409..312d09d1f 100644
--- a/frontend/src/pages/Settings/General/index.tsx
+++ b/frontend/src/pages/Settings/General/index.tsx
@@ -93,9 +93,8 @@ const SettingsGeneralView: FunctionComponent = () => {
window.isSecureContext && (
<Action
label="Copy API Key"
- variant="light"
settingKey={settingApiKey}
- color={copied ? "green" : undefined}
+ c={copied ? "green" : undefined}
icon={copied ? faCheck : faClipboard}
onClick={(update, value) => {
if (value) {
@@ -108,9 +107,8 @@ const SettingsGeneralView: FunctionComponent = () => {
}
<Action
label="Regenerate"
- variant="light"
settingKey={settingApiKey}
- color="red"
+ c="red"
icon={faSync}
onClick={(update) => {
update(generateApiKey());
diff --git a/frontend/src/pages/Settings/Languages/equals.tsx b/frontend/src/pages/Settings/Languages/equals.tsx
index 968550cf2..dae20a75a 100644
--- a/frontend/src/pages/Settings/Languages/equals.tsx
+++ b/frontend/src/pages/Settings/Languages/equals.tsx
@@ -342,7 +342,7 @@ const EqualsTable: FunctionComponent<EqualsTableProps> = () => {
<Action
label="Remove"
icon={faTrash}
- color="red"
+ c="red"
onClick={() => remove(row.index)}
></Action>
);
diff --git a/frontend/src/pages/Settings/Languages/table.tsx b/frontend/src/pages/Settings/Languages/table.tsx
index 08b1bace5..29902a546 100644
--- a/frontend/src/pages/Settings/Languages/table.tsx
+++ b/frontend/src/pages/Settings/Languages/table.tsx
@@ -133,7 +133,6 @@ const Table: FunctionComponent = () => {
label="Edit Profile"
icon={faWrench}
c="gray"
- variant="dark"
onClick={() => {
modals.openContextModal(ProfileEditModal, {
languages,
@@ -144,7 +143,6 @@ const Table: FunctionComponent = () => {
></Action>
<Action
label="Remove"
- variant="dark"
icon={faTrash}
c="red"
onClick={() => action.remove(row.index)}
diff --git a/frontend/src/pages/Settings/Notifications/index.tsx b/frontend/src/pages/Settings/Notifications/index.tsx
index bb116ada4..54ce0d0b8 100644
--- a/frontend/src/pages/Settings/Notifications/index.tsx
+++ b/frontend/src/pages/Settings/Notifications/index.tsx
@@ -1,12 +1,19 @@
+// eslint-disable-next-line simple-import-sort/imports
import { FunctionComponent } from "react";
import { Anchor, Blockquote, Text } from "@mantine/core";
import { Check, Layout, Message, Section } from "@/pages/Settings/components";
import { NotificationView } from "./components";
+import { faQuoteLeftAlt } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const SettingsNotificationsView: FunctionComponent = () => {
return (
<Layout name="Notifications">
- <Blockquote>
+ <Blockquote
+ bg="transparent"
+ mt="xl"
+ icon={<FontAwesomeIcon icon={faQuoteLeftAlt}></FontAwesomeIcon>}
+ >
<Text>
Thanks to caronc for his work on{" "}
<Anchor
diff --git a/frontend/src/pages/System/Backups/table.tsx b/frontend/src/pages/System/Backups/table.tsx
index 7076e44b6..efd60f78f 100644
--- a/frontend/src/pages/System/Backups/table.tsx
+++ b/frontend/src/pages/System/Backups/table.tsx
@@ -81,7 +81,7 @@ const Table: FunctionComponent<Props> = ({ backups }) => {
return (
<Action
label="Delete"
- color="red"
+ c="red"
onClick={() =>
modals.openConfirmModal({
title: "Delete Backup",
diff --git a/frontend/src/pages/System/Releases/index.tsx b/frontend/src/pages/System/Releases/index.tsx
index 291607a6a..908e5ba5c 100644
--- a/frontend/src/pages/System/Releases/index.tsx
+++ b/frontend/src/pages/System/Releases/index.tsx
@@ -21,7 +21,7 @@ const SystemReleasesView: FunctionComponent = () => {
useDocumentTitle("Releases - Bazarr (System)");
return (
- <Container size={600} py={12}>
+ <Container size="md" py={12}>
<QueryOverlay result={releases}>
<Stack gap="lg">
{data?.map((v, idx) => (