mirror
/
bazarr
mirror of https://github.com/morpheus65535/bazarr
1
0
Fork 0
Code Issues Releases Wiki Activity

Fixed theme colors and variants

This commit is contained in:
Anderson Shindy Oki 2024-06-13 11:35:35 +09:00 committed by GitHub
parent d7445bf39c
commit d719d4c6df
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
22 changed files with 40 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/App/Header.tsx
View File

@ -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>

10
frontend/src/App/Navbar.tsx
View File

@ -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>

5
frontend/src/App/ThemeProvider.tsx
View File

@ -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,
}),

6
frontend/src/assets/_bazarr.scss
View File

@ -74,3 +74,9 @@ $header-height: 64px;
}
}
}
:root {
@include dark {
--mantine-color-body: var(--mantine-color-dark-8);
}
}

25
frontend/src/assets/action_icon.module.scss
View File

@ -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);
}
}
}

7
frontend/src/assets/app_shell.module.scss
View File

@ -1,7 +0,0 @@
@layer mantine {
.main {
@include dark {
background-color: var(--mantine-color-dark-8);
}
}
}

7
frontend/src/assets/badge.module.scss
View File

@ -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);

0
frontend/src/components/forms/MovieUploadForm.module.scss
View File

2
frontend/src/components/forms/MovieUploadForm.tsx
View File

@ -243,7 +243,7 @@ const MovieUploadForm: FunctionComponent<Props> = ({
<Action
label="Remove"
icon={faTrash}
color="red"
c="red"
onClick={() => action.remove(index)}
></Action>
);

2
frontend/src/components/forms/ProfileEditForm.tsx
View File

@ -241,7 +241,7 @@ const ProfileEditForm: FunctionComponent<Props> = ({
<Action
label="Remove"
icon={faTrash}
color="red"
c="red"
onClick={() => action.remove(row.index)}
></Action>
);

2
frontend/src/components/forms/SeriesUploadForm.tsx
View File

@ -309,7 +309,7 @@ const SeriesUploadForm: FunctionComponent<Props> = ({
<Action
label="Remove"
icon={faTrash}
color="red"
c="red"
onClick={() => action.remove(index)}
></Action>
);

3
frontend/src/components/modals/ManualSearchModal.tsx
View File

@ -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;

2
frontend/src/pages/Episodes/table.tsx
View File

@ -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,

1
frontend/src/pages/Movies/Details/table.tsx
View File

@ -161,7 +161,6 @@ const Table: FunctionComponent<Props> = ({ movie, profile, disabled }) => {
<Action
label="Subtitle Actions"
disabled={isSubtitleTrack(path)}
variant="dark"
icon={faEllipsis}
></Action>
</SubtitleToolsMenu>

1
frontend/src/pages/Movies/index.tsx
View File

@ -87,7 +87,6 @@ const MovieView: FunctionComponent = () => {
<Action
label="Edit Movie"
tooltip={{ position: "left" }}
variant="light"
onClick={() =>
modals.openContextModal(
ItemEditModal,

1
frontend/src/pages/Series/index.tsx
View File

@ -87,7 +87,6 @@ const SeriesView: FunctionComponent = () => {
<Action
label="Edit Series"
tooltip={{ position: "left" }}
variant="light"
onClick={() =>
modals.openContextModal(
ItemEditModal,

6
frontend/src/pages/Settings/General/index.tsx
View File

@ -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());

2
frontend/src/pages/Settings/Languages/equals.tsx
View File

@ -342,7 +342,7 @@ const EqualsTable: FunctionComponent<EqualsTableProps> = () => {
<Action
label="Remove"
icon={faTrash}
color="red"
c="red"
onClick={() => remove(row.index)}
></Action>
);

2
frontend/src/pages/Settings/Languages/table.tsx
View File

@ -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)}

9
frontend/src/pages/Settings/Notifications/index.tsx
View File

@ -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

2
frontend/src/pages/System/Backups/table.tsx
View File

@ -81,7 +81,7 @@ const Table: FunctionComponent<Props> = ({ backups }) => {
return (
<Action
label="Delete"
color="red"
c="red"
onClick={() =>
modals.openConfirmModal({
title: "Delete Backup",

2
frontend/src/pages/System/Releases/index.tsx
View File

@ -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) => (