diff options
author | Anderson Shindy Oki <[email protected]> | 2024-06-09 10:36:42 +0900 |
---|---|---|
committer | GitHub <[email protected]> | 2024-06-08 21:36:42 -0400 |
commit | 0a0762b1cf338affd0565184ce1e28fb70470eda (patch) | |
tree | c8df7b3db22255ba4431f3c0d3553ae9ebee1ede | |
parent | 240948e6388ef12d5c1dad537de8ac09c0b9cc7b (diff) | |
download | bazarr-1.4.4-beta.1.tar.gz bazarr-1.4.4-beta.1.zip |
Fixed minor style and colors broken on Mantine v7 updatev1.4.4-beta.1
* 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
-rw-r--r-- | frontend/src/App/Header.tsx | 2 | ||||
-rw-r--r-- | frontend/src/App/ThemeProvider.tsx | 5 | ||||
-rw-r--r-- | frontend/src/assets/_bazarr.scss | 36 | ||||
-rw-r--r-- | frontend/src/assets/action_icon.module.scss | 11 | ||||
-rw-r--r-- | frontend/src/assets/app_shell.module.scss | 8 | ||||
-rw-r--r-- | frontend/src/assets/badge.module.scss | 42 | ||||
-rw-r--r-- | frontend/src/assets/button.module.scss | 6 | ||||
-rw-r--r-- | frontend/src/assets/pagination.module.scss | 3 | ||||
-rw-r--r-- | frontend/src/components/TextPopover.tsx | 7 | ||||
-rw-r--r-- | frontend/src/components/tables/PageControl.tsx | 3 | ||||
-rw-r--r-- | frontend/src/components/toolbox/Toolbox.module.scss | 4 | ||||
-rw-r--r-- | frontend/src/components/toolbox/Toolbox.tsx | 2 | ||||
-rw-r--r-- | frontend/src/pages/Episodes/components.tsx | 10 | ||||
-rw-r--r-- | frontend/src/pages/Episodes/table.tsx | 4 | ||||
-rw-r--r-- | frontend/src/pages/Movies/Details/index.tsx | 1 | ||||
-rw-r--r-- | frontend/src/pages/Movies/Details/table.tsx | 2 | ||||
-rw-r--r-- | frontend/src/pages/views/ItemOverview.tsx | 2 |
17 files changed, 124 insertions, 24 deletions
diff --git a/frontend/src/App/Header.tsx b/frontend/src/App/Header.tsx index 9919da9d6..cfc3f3319 100644 --- a/frontend/src/App/Header.tsx +++ b/frontend/src/App/Header.tsx @@ -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> diff --git a/frontend/src/App/ThemeProvider.tsx b/frontend/src/App/ThemeProvider.tsx index c67046ce9..224791843 100644 --- a/frontend/src/App/ThemeProvider.tsx +++ b/frontend/src/App/ThemeProvider.tsx @@ -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, + }), }, }); diff --git a/frontend/src/assets/_bazarr.scss b/frontend/src/assets/_bazarr.scss index 6c23aac1a..a2476ed12 100644 --- a/frontend/src/assets/_bazarr.scss +++ b/frontend/src/assets/_bazarr.scss @@ -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 { diff --git a/frontend/src/assets/action_icon.module.scss b/frontend/src/assets/action_icon.module.scss index c4bf2eefa..3bdf0c417 100644 --- a/frontend/src/assets/action_icon.module.scss +++ b/frontend/src/assets/action_icon.module.scss @@ -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); + } } } } diff --git a/frontend/src/assets/app_shell.module.scss b/frontend/src/assets/app_shell.module.scss index b027c771a..49c3f1947 100644 --- a/frontend/src/assets/app_shell.module.scss +++ b/frontend/src/assets/app_shell.module.scss @@ -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); + } } } diff --git a/frontend/src/assets/badge.module.scss b/frontend/src/assets/badge.module.scss index 830da2927..a570ecc45 100644 --- a/frontend/src/assets/badge.module.scss +++ b/frontend/src/assets/badge.module.scss @@ -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); + } + } } } diff --git a/frontend/src/assets/button.module.scss b/frontend/src/assets/button.module.scss index 4ef306883..0c466a4c4 100644 --- a/frontend/src/assets/button.module.scss +++ b/frontend/src/assets/button.module.scss @@ -9,4 +9,10 @@ color: var(--mantine-color-red-0); } } + + .root:disabled { + @include dark { + color: var(--mantine-color-dark-9); + } + } } diff --git a/frontend/src/assets/pagination.module.scss b/frontend/src/assets/pagination.module.scss new file mode 100644 index 000000000..2b66d7510 --- /dev/null +++ b/frontend/src/assets/pagination.module.scss @@ -0,0 +1,3 @@ +.control { + --pagination-active-bg: var(--mantine-color-brand-filled); +} diff --git a/frontend/src/components/TextPopover.tsx b/frontend/src/components/TextPopover.tsx index b72654109..974c0d0c0 100644 --- a/frontend/src/components/TextPopover.tsx +++ b/frontend/src/components/TextPopover.tsx @@ -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> ); diff --git a/frontend/src/components/tables/PageControl.tsx b/frontend/src/components/tables/PageControl.tsx index 8b7fd938f..bcdf290e3 100644 --- a/frontend/src/components/tables/PageControl.tsx +++ b/frontend/src/components/tables/PageControl.tsx @@ -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> diff --git a/frontend/src/components/toolbox/Toolbox.module.scss b/frontend/src/components/toolbox/Toolbox.module.scss index 76d90ae47..10529fd27 100644 --- a/frontend/src/components/toolbox/Toolbox.module.scss +++ b/frontend/src/components/toolbox/Toolbox.module.scss @@ -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); } } diff --git a/frontend/src/components/toolbox/Toolbox.tsx b/frontend/src/components/toolbox/Toolbox.tsx index 8e600acda..f67ac60b1 100644 --- a/frontend/src/components/toolbox/Toolbox.tsx +++ b/frontend/src/components/toolbox/Toolbox.tsx @@ -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> ); diff --git a/frontend/src/pages/Episodes/components.tsx b/frontend/src/pages/Episodes/components.tsx index 29ce2e0fa..98bf15ecd 100644 --- a/frontend/src/pages/Episodes/components.tsx +++ b/frontend/src/pages/Episodes/components.tsx @@ -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> ); diff --git a/frontend/src/pages/Episodes/table.tsx b/frontend/src/pages/Episodes/table.tsx index d7eb0a0e1..c68e7b7fc 100644 --- a/frontend/src/pages/Episodes/table.tsx +++ b/frontend/src/pages/Episodes/table.tsx @@ -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, diff --git a/frontend/src/pages/Movies/Details/index.tsx b/frontend/src/pages/Movies/Details/index.tsx index 1c971d641..709f03905 100644 --- a/frontend/src/pages/Movies/Details/index.tsx +++ b/frontend/src/pages/Movies/Details/index.tsx @@ -198,7 +198,6 @@ const MovieDetailView: FunctionComponent = () => { <Menu.Target> <Action label="More Actions" - color="dark" icon={faEllipsis} disabled={hasTask} /> diff --git a/frontend/src/pages/Movies/Details/table.tsx b/frontend/src/pages/Movies/Details/table.tsx index 61a5c14c9..0a1b4e722 100644 --- a/frontend/src/pages/Movies/Details/table.tsx +++ b/frontend/src/pages/Movies/Details/table.tsx @@ -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> diff --git a/frontend/src/pages/views/ItemOverview.tsx b/frontend/src/pages/views/ItemOverview.tsx index e89100f2e..4877e24e4 100644 --- a/frontend/src/pages/views/ItemOverview.tsx +++ b/frontend/src/pages/views/ItemOverview.tsx @@ -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" |