mirror of https://github.com/morpheus65535/bazarr
Fixed minor style and colors broken on Mantine v7 update
* Fixed action icon styles * small fixes * fix brand color * more small fixes * fix disabled color for dark * feat: customize highlight and warning badge * chore: Remove hardcoded variables * feat: add text wrap pretty to pop over * fix: pagination position * chore: small adjustments
This commit is contained in:
parent
240948e638
commit
0a0762b1cf
|
@ -52,7 +52,7 @@ const AppHeader: FunctionComponent = () => {
|
|||
size="sm"
|
||||
hiddenFrom="sm"
|
||||
></Burger>
|
||||
<Badge size="lg" radius="sm">
|
||||
<Badge size="lg" radius="sm" variant="brand">
|
||||
Bazarr
|
||||
</Badge>
|
||||
</Group>
|
||||
|
|
|
@ -6,6 +6,7 @@ import {
|
|||
Button,
|
||||
createTheme,
|
||||
MantineProvider,
|
||||
Pagination,
|
||||
} from "@mantine/core";
|
||||
import ThemeLoader from "@/App/ThemeLoader";
|
||||
import "@mantine/core/styles.layer.css";
|
||||
|
@ -15,6 +16,7 @@ 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";
|
||||
|
||||
const themeProvider = createTheme({
|
||||
fontFamily: "Roboto, open sans, Helvetica Neue, Helvetica, Arial, sans-serif",
|
||||
|
@ -46,6 +48,9 @@ const themeProvider = createTheme({
|
|||
Button: Button.extend({
|
||||
classNames: buttonClasses,
|
||||
}),
|
||||
Pagination: Pagination.extend({
|
||||
classNames: paginationClasses,
|
||||
}),
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
@ -9,6 +9,42 @@ $color-brand-7: #ae3ec9;
|
|||
$color-brand-8: #9c36b5;
|
||||
$color-brand-9: #862e9c;
|
||||
|
||||
// Based on Mantine Cyan
|
||||
$color-highlight-0: #e3fafc;
|
||||
$color-highlight-1: #c5f6fa;
|
||||
$color-highlight-2: #99e9f2;
|
||||
$color-highlight-3: #66d9e8;
|
||||
$color-highlight-4: #3bc9db;
|
||||
$color-highlight-5: #22b8cf;
|
||||
$color-highlight-6: #15aabf;
|
||||
$color-highlight-7: #1098ad;
|
||||
$color-highlight-8: #0c8599;
|
||||
$color-highlight-9: #0b7285;
|
||||
|
||||
// Based on Mantine Yellow
|
||||
$color-warning-0: #fff9db;
|
||||
$color-warning-1: #fff3bf;
|
||||
$color-warning-2: #ffec99;
|
||||
$color-warning-3: #ffe066;
|
||||
$color-warning-4: #ffd43b;
|
||||
$color-warning-5: #fcc419;
|
||||
$color-warning-6: #fab005;
|
||||
$color-warning-7: #f59f00;
|
||||
$color-warning-8: #f08c00;
|
||||
$color-warning-9: #e67700;
|
||||
|
||||
// Based on Mantine Gray
|
||||
$color-disabled-0: #f8f9fa;
|
||||
$color-disabled-1: #f1f3f5;
|
||||
$color-disabled-2: #e9ecef;
|
||||
$color-disabled-3: #dee2e6;
|
||||
$color-disabled-4: #ced4da;
|
||||
$color-disabled-5: #adb5bd;
|
||||
$color-disabled-6: #868e96;
|
||||
$color-disabled-7: #495057;
|
||||
$color-disabled-8: #343a40;
|
||||
$color-disabled-9: #212529;
|
||||
|
||||
$header-height: 64px;
|
||||
|
||||
:global {
|
||||
|
|
|
@ -1,14 +1,25 @@
|
|||
@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);
|
||||
}
|
||||
|
||||
@include light {
|
||||
&[data-variant="light"] {
|
||||
background-color: var(--mantine-color-gray-1);
|
||||
color: var(--mantine-color-dark-2);
|
||||
}
|
||||
|
||||
&[data-variant="dark"] {
|
||||
--ai-color: var(--mantine-color-dark-filled);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
.main {
|
||||
@include dark {
|
||||
background-color: rgb(26, 27, 30);
|
||||
@layer mantine {
|
||||
.main {
|
||||
@include dark {
|
||||
background-color: var(--mantine-color-dark-8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,8 +1,40 @@
|
|||
.root {
|
||||
background-color: var(--mantine-color-grape-light);
|
||||
@layer mantine {
|
||||
.root {
|
||||
background-color: transparentize($color-brand-6, 0.8);
|
||||
|
||||
@include light {
|
||||
color: var(--mantine-color-dark-filled);
|
||||
background-color: var(--mantine-color-grape-light);
|
||||
&[data-variant="warning"] {
|
||||
color: lighten($color-warning-2, 1);
|
||||
background-color: transparentize($color-warning-6, 0.8);
|
||||
}
|
||||
|
||||
&[data-variant="highlight"] {
|
||||
color: lighten($color-highlight-2, 1);
|
||||
background-color: transparentize($color-highlight-5, 0.8);
|
||||
}
|
||||
|
||||
&[data-variant="disabled"] {
|
||||
color: lighten($color-disabled-0, 1);
|
||||
background-color: transparentize($color-disabled-7, 0.8);
|
||||
}
|
||||
|
||||
@include light {
|
||||
color: $color-brand-6;
|
||||
background-color: transparentize($color-brand-3, 0.8);
|
||||
|
||||
&[data-variant="warning"] {
|
||||
color: darken($color-warning-7, 1);
|
||||
background-color: transparentize($color-warning-6, 0.8);
|
||||
}
|
||||
|
||||
&[data-variant="disabled"] {
|
||||
color: darken($color-disabled-6, 1);
|
||||
background-color: transparentize($color-disabled-4, 0.8);
|
||||
}
|
||||
|
||||
&[data-variant="highlight"] {
|
||||
color: darken($color-highlight-6, 1);
|
||||
background-color: transparentize($color-highlight-5, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -9,4 +9,10 @@
|
|||
color: var(--mantine-color-red-0);
|
||||
}
|
||||
}
|
||||
|
||||
.root:disabled {
|
||||
@include dark {
|
||||
color: var(--mantine-color-dark-9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,3 @@
|
|||
.control {
|
||||
--pagination-active-bg: var(--mantine-color-brand-filled);
|
||||
}
|
|
@ -21,7 +21,12 @@ const TextPopover: FunctionComponent<TextPopoverProps> = ({
|
|||
}
|
||||
|
||||
return (
|
||||
<Tooltip opened={hovered} label={text} {...tooltip}>
|
||||
<Tooltip
|
||||
opened={hovered}
|
||||
label={text}
|
||||
{...tooltip}
|
||||
style={{ textWrap: "pretty" }}
|
||||
>
|
||||
<div ref={ref}>{children}</div>
|
||||
</Tooltip>
|
||||
);
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import { FunctionComponent, useEffect } from "react";
|
||||
import { Group, Pagination, Text } from "@mantine/core";
|
||||
import { useIsLoading } from "@/contexts";
|
||||
|
||||
interface Props {
|
||||
count: number;
|
||||
index: number;
|
||||
|
@ -28,7 +29,7 @@ const PageControl: FunctionComponent<Props> = ({
|
|||
}, [total, goto]);
|
||||
|
||||
return (
|
||||
<Group p={16} justify="apart">
|
||||
<Group p={16} justify="space-between">
|
||||
<Text size="sm">
|
||||
Show {start} to {end} of {total} entries
|
||||
</Text>
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
.group {
|
||||
@include light {
|
||||
color: var(--mantine-color-gray-3);
|
||||
background-color: var(--mantine-color-gray-3);
|
||||
}
|
||||
|
||||
@include dark {
|
||||
color: var(--mantine-color-dark-5);
|
||||
background-color: var(--mantine-color-dark-5);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -10,7 +10,7 @@ declare type ToolboxComp = FunctionComponent<PropsWithChildren> & {
|
|||
|
||||
const Toolbox: ToolboxComp = ({ children }) => {
|
||||
return (
|
||||
<Group p={12} justify="apart" className={styles.group}>
|
||||
<Group p={12} justify="space-between" className={styles.group}>
|
||||
{children}
|
||||
</Group>
|
||||
);
|
||||
|
|
|
@ -24,13 +24,13 @@ export const Subtitle: FunctionComponent<Props> = ({
|
|||
|
||||
const disabled = subtitle.path === null;
|
||||
|
||||
const color: MantineColor | undefined = useMemo(() => {
|
||||
const variant: MantineColor | undefined = useMemo(() => {
|
||||
if (opened && !disabled) {
|
||||
return "cyan";
|
||||
return "highlight";
|
||||
} else if (missing) {
|
||||
return "yellow";
|
||||
return "warning";
|
||||
} else if (disabled) {
|
||||
return "gray";
|
||||
return "disabled";
|
||||
}
|
||||
}, [disabled, missing, opened]);
|
||||
|
||||
|
@ -50,7 +50,7 @@ export const Subtitle: FunctionComponent<Props> = ({
|
|||
}, [episodeId, subtitle.code2, subtitle.path]);
|
||||
|
||||
const ctx = (
|
||||
<Badge color={color}>
|
||||
<Badge variant={variant}>
|
||||
<Language.Text value={subtitle} long={false}></Language.Text>
|
||||
</Badge>
|
||||
);
|
||||
|
|
|
@ -169,7 +169,7 @@ const Table: FunctionComponent<Props> = ({
|
|||
<Action
|
||||
label="Manual Search"
|
||||
disabled={disabled}
|
||||
color="dark"
|
||||
variant="dark"
|
||||
onClick={() => {
|
||||
modals.openContextModal(EpisodeSearchModal, {
|
||||
item: row.original,
|
||||
|
@ -182,7 +182,7 @@ const Table: FunctionComponent<Props> = ({
|
|||
<Action
|
||||
label="History"
|
||||
disabled={disabled}
|
||||
color="dark"
|
||||
variant="dark"
|
||||
onClick={() => {
|
||||
modals.openContextModal(
|
||||
EpisodeHistoryModal,
|
||||
|
|
|
@ -198,7 +198,6 @@ const MovieDetailView: FunctionComponent = () => {
|
|||
<Menu.Target>
|
||||
<Action
|
||||
label="More Actions"
|
||||
color="dark"
|
||||
icon={faEllipsis}
|
||||
disabled={hasTask}
|
||||
/>
|
||||
|
|
|
@ -161,7 +161,7 @@ const Table: FunctionComponent<Props> = ({ movie, profile, disabled }) => {
|
|||
<Action
|
||||
label="Subtitle Actions"
|
||||
disabled={isSubtitleTrack(path)}
|
||||
color="dark"
|
||||
variant="dark"
|
||||
icon={faEllipsis}
|
||||
></Action>
|
||||
</SubtitleToolsMenu>
|
||||
|
|
|
@ -132,7 +132,7 @@ const ItemOverview: FunctionComponent<Props> = (props) => {
|
|||
flexWrap: "nowrap",
|
||||
}}
|
||||
>
|
||||
<Grid.Col span={3} hiddenFrom="sm">
|
||||
<Grid.Col span={3} visibleFrom="sm">
|
||||
<Image
|
||||
src={item?.poster}
|
||||
mx="auto"
|
||||
|
|
Loading…
Reference in New Issue