mirror of
https://github.com/morpheus65535/bazarr.git
synced 2025-04-24 06:37:16 -04:00
Fixed theme colors and variants
This commit is contained in:
Anderson Shindy Oki
GitHub
parent
d7445bf39c
commit
d719d4c6df
22 changed files with 40 additions and 60 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}),
|
||||
|
|
|
|||
|
|
@ -74,3 +74,9 @@ $header-height: 64px;
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
@include dark {
|
||||
--mantine-color-body: var(--mantine-color-dark-8);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
@layer mantine {
|
||||
.main {
|
||||
@include dark {
|
||||
background-color: var(--mantine-color-dark-8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -243,7 +243,7 @@ const MovieUploadForm: FunctionComponent<Props> = ({
|
|||
<Action
|
||||
label="Remove"
|
||||
icon={faTrash}
|
||||
color="red"
|
||||
c="red"
|
||||
onClick={() => action.remove(index)}
|
||||
></Action>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -241,7 +241,7 @@ const ProfileEditForm: FunctionComponent<Props> = ({
|
|||
<Action
|
||||
label="Remove"
|
||||
icon={faTrash}
|
||||
color="red"
|
||||
c="red"
|
||||
onClick={() => action.remove(row.index)}
|
||||
></Action>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -309,7 +309,7 @@ const SeriesUploadForm: FunctionComponent<Props> = ({
|
|||
<Action
|
||||
label="Remove"
|
||||
icon={faTrash}
|
||||
color="red"
|
||||
c="red"
|
||||
onClick={() => action.remove(index)}
|
||||
></Action>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -161,7 +161,6 @@ const Table: FunctionComponent<Props> = ({ movie, profile, disabled }) => {
|
|||
<Action
|
||||
label="Subtitle Actions"
|
||||
disabled={isSubtitleTrack(path)}
|
||||
variant="dark"
|
||||
icon={faEllipsis}
|
||||
></Action>
|
||||
</SubtitleToolsMenu>
|
||||
|
|
|
|||
|
|
@ -87,7 +87,6 @@ const MovieView: FunctionComponent = () => {
|
|||
<Action
|
||||
label="Edit Movie"
|
||||
tooltip={{ position: "left" }}
|
||||
variant="light"
|
||||
onClick={() =>
|
||||
modals.openContextModal(
|
||||
ItemEditModal,
|
||||
|
|
|
|||
|
|
@ -87,7 +87,6 @@ const SeriesView: FunctionComponent = () => {
|
|||
<Action
|
||||
label="Edit Series"
|
||||
tooltip={{ position: "left" }}
|
||||
variant="light"
|
||||
onClick={() =>
|
||||
modals.openContextModal(
|
||||
ItemEditModal,
|
||||
|
|
|
|||
|
|
@ -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());
|
||||
|
|
|
|||
|
|
@ -342,7 +342,7 @@ const EqualsTable: FunctionComponent<EqualsTableProps> = () => {
|
|||
<Action
|
||||
label="Remove"
|
||||
icon={faTrash}
|
||||
color="red"
|
||||
c="red"
|
||||
onClick={() => remove(row.index)}
|
||||
></Action>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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)}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ const Table: FunctionComponent<Props> = ({ backups }) => {
|
|||
return (
|
||||
<Action
|
||||
label="Delete"
|
||||
color="red"
|
||||
c="red"
|
||||
onClick={() =>
|
||||
modals.openConfirmModal({
|
||||
title: "Delete Backup",
|
||||
|
|
|
|||
|
|
@ -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) => (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue