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
pull/2521/head v1.4.4-beta.1
Anderson Shindy Oki 5 months ago committed by GitHub
parent 240948e638
commit 0a0762b1cf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -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…
Cancel
Save