Anderson Shindy Oki
6 months ago
committed by
GitHub
parent
bb8233b599
commit
be8f2d6d18
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,14 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
"postcss-preset-mantine": {},
|
||||||
|
"postcss-simple-vars": {
|
||||||
|
variables: {
|
||||||
|
"mantine-breakpoint-xs": "36em",
|
||||||
|
"mantine-breakpoint-sm": "48em",
|
||||||
|
"mantine-breakpoint-md": "62em",
|
||||||
|
"mantine-breakpoint-lg": "75em",
|
||||||
|
"mantine-breakpoint-xl": "88em",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
.header {
|
||||||
|
@include light {
|
||||||
|
color: var(--mantine-color-gray-0);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include dark {
|
||||||
|
color: var(--mantine-color-dark-0);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,56 @@
|
|||||||
|
.anchor {
|
||||||
|
border-color: var(--mantine-color-gray-5);
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
@include dark {
|
||||||
|
border-color: var(--mantine-color-dark-5);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
border-left: 2px solid $color-brand-4;
|
||||||
|
background-color: var(--mantine-color-gray-1);
|
||||||
|
|
||||||
|
@include dark {
|
||||||
|
border-left: 2px solid $color-brand-8;
|
||||||
|
background-color: var(--mantine-color-dark-8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.hover {
|
||||||
|
background-color: var(--mantine-color-gray-0);
|
||||||
|
|
||||||
|
@include dark {
|
||||||
|
background-color: var(--mantine-color-dark-7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
margin-left: auto;
|
||||||
|
text-decoration: none;
|
||||||
|
box-shadow: var(--mantine-shadow-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 1.4rem;
|
||||||
|
margin-right: var(--mantine-spacing-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
background-color: var(--mantine-color-gray-2);
|
||||||
|
|
||||||
|
@include dark {
|
||||||
|
background-color: var(--mantine-color-dark-8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
color: var(--mantine-color-gray-8);
|
||||||
|
|
||||||
|
@include dark {
|
||||||
|
color: var(--mantine-color-gray-5);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
import { useCallback, useEffect, useState } from "react";
|
||||||
|
import { MantineColorScheme, useMantineColorScheme } from "@mantine/core";
|
||||||
|
import { useSystemSettings } from "@/apis/hooks";
|
||||||
|
|
||||||
|
const ThemeProvider = () => {
|
||||||
|
const [localScheme, setLocalScheme] = useState<MantineColorScheme | null>(
|
||||||
|
null,
|
||||||
|
);
|
||||||
|
const { setColorScheme } = useMantineColorScheme();
|
||||||
|
|
||||||
|
const settings = useSystemSettings();
|
||||||
|
|
||||||
|
const settingsColorScheme = settings.data?.general
|
||||||
|
.theme as MantineColorScheme;
|
||||||
|
|
||||||
|
const setScheme = useCallback(
|
||||||
|
(colorScheme: MantineColorScheme) => {
|
||||||
|
setColorScheme(colorScheme);
|
||||||
|
},
|
||||||
|
[setColorScheme],
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!settingsColorScheme) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (localScheme === settingsColorScheme) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setScheme(settingsColorScheme);
|
||||||
|
setLocalScheme(settingsColorScheme);
|
||||||
|
}, [settingsColorScheme, setScheme, localScheme]);
|
||||||
|
|
||||||
|
return <></>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ThemeProvider;
|
||||||
@ -0,0 +1,61 @@
|
|||||||
|
import {
|
||||||
|
ActionIcon,
|
||||||
|
AppShell,
|
||||||
|
Badge,
|
||||||
|
Button,
|
||||||
|
createTheme,
|
||||||
|
MantineProvider,
|
||||||
|
} from "@mantine/core";
|
||||||
|
import { FunctionComponent, PropsWithChildren } from "react";
|
||||||
|
import ThemeLoader from "@/App/ThemeLoader";
|
||||||
|
import "@mantine/core/styles.layer.css";
|
||||||
|
import "@mantine/notifications/styles.layer.css";
|
||||||
|
import styleVars from "@/assets/_variables.module.scss";
|
||||||
|
import buttonClasses from "@/assets/button.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";
|
||||||
|
|
||||||
|
const themeProvider = createTheme({
|
||||||
|
fontFamily: "Roboto, open sans, Helvetica Neue, Helvetica, Arial, sans-serif",
|
||||||
|
colors: {
|
||||||
|
brand: [
|
||||||
|
styleVars.colorBrand0,
|
||||||
|
styleVars.colorBrand1,
|
||||||
|
styleVars.colorBrand2,
|
||||||
|
styleVars.colorBrand3,
|
||||||
|
styleVars.colorBrand4,
|
||||||
|
styleVars.colorBrand5,
|
||||||
|
styleVars.colorBrand6,
|
||||||
|
styleVars.colorBrand7,
|
||||||
|
styleVars.colorBrand8,
|
||||||
|
styleVars.colorBrand9,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
primaryColor: "brand",
|
||||||
|
components: {
|
||||||
|
ActionIcon: ActionIcon.extend({
|
||||||
|
classNames: actionIconClasses,
|
||||||
|
}),
|
||||||
|
AppShell: AppShell.extend({
|
||||||
|
classNames: appShellClasses,
|
||||||
|
}),
|
||||||
|
Badge: Badge.extend({
|
||||||
|
classNames: badgeClasses,
|
||||||
|
}),
|
||||||
|
Button: Button.extend({
|
||||||
|
classNames: buttonClasses,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const ThemeProvider: FunctionComponent<PropsWithChildren> = ({ children }) => {
|
||||||
|
return (
|
||||||
|
<MantineProvider theme={themeProvider} defaultColorScheme="auto">
|
||||||
|
<ThemeLoader />
|
||||||
|
{children}
|
||||||
|
</MantineProvider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ThemeProvider;
|
||||||
@ -1,87 +0,0 @@
|
|||||||
import { useSystemSettings } from "@/apis/hooks";
|
|
||||||
import {
|
|
||||||
ColorScheme,
|
|
||||||
ColorSchemeProvider,
|
|
||||||
createEmotionCache,
|
|
||||||
MantineProvider,
|
|
||||||
MantineThemeOverride,
|
|
||||||
} from "@mantine/core";
|
|
||||||
import { useColorScheme } from "@mantine/hooks";
|
|
||||||
import {
|
|
||||||
FunctionComponent,
|
|
||||||
PropsWithChildren,
|
|
||||||
useCallback,
|
|
||||||
useEffect,
|
|
||||||
useState,
|
|
||||||
} from "react";
|
|
||||||
|
|
||||||
const theme: MantineThemeOverride = {
|
|
||||||
fontFamily: "Roboto, open sans, Helvetica Neue, Helvetica, Arial, sans-serif",
|
|
||||||
colors: {
|
|
||||||
brand: [
|
|
||||||
"#F8F0FC",
|
|
||||||
"#F3D9FA",
|
|
||||||
"#EEBEFA",
|
|
||||||
"#E599F7",
|
|
||||||
"#DA77F2",
|
|
||||||
"#CC5DE8",
|
|
||||||
"#BE4BDB",
|
|
||||||
"#AE3EC9",
|
|
||||||
"#9C36B5",
|
|
||||||
"#862E9C",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
primaryColor: "brand",
|
|
||||||
};
|
|
||||||
|
|
||||||
function useAutoColorScheme() {
|
|
||||||
const settings = useSystemSettings();
|
|
||||||
const settingsColorScheme = settings.data?.general.theme;
|
|
||||||
|
|
||||||
let preferredColorScheme: ColorScheme = useColorScheme();
|
|
||||||
switch (settingsColorScheme) {
|
|
||||||
case "light":
|
|
||||||
preferredColorScheme = "light" as ColorScheme;
|
|
||||||
break;
|
|
||||||
case "dark":
|
|
||||||
preferredColorScheme = "dark" as ColorScheme;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
const [colorScheme, setColorScheme] = useState(preferredColorScheme);
|
|
||||||
|
|
||||||
// automatically switch dark/light theme
|
|
||||||
useEffect(() => {
|
|
||||||
setColorScheme(preferredColorScheme);
|
|
||||||
}, [preferredColorScheme]);
|
|
||||||
|
|
||||||
const toggleColorScheme = useCallback((value?: ColorScheme) => {
|
|
||||||
setColorScheme((scheme) => value || (scheme === "dark" ? "light" : "dark"));
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return { colorScheme, setColorScheme, toggleColorScheme };
|
|
||||||
}
|
|
||||||
|
|
||||||
const emotionCache = createEmotionCache({ key: "bazarr" });
|
|
||||||
|
|
||||||
const ThemeProvider: FunctionComponent<PropsWithChildren> = ({ children }) => {
|
|
||||||
const { colorScheme, toggleColorScheme } = useAutoColorScheme();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ColorSchemeProvider
|
|
||||||
colorScheme={colorScheme}
|
|
||||||
toggleColorScheme={toggleColorScheme}
|
|
||||||
>
|
|
||||||
<MantineProvider
|
|
||||||
withGlobalStyles
|
|
||||||
withNormalizeCSS
|
|
||||||
theme={{ colorScheme, ...theme }}
|
|
||||||
emotionCache={emotionCache}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</MantineProvider>
|
|
||||||
</ColorSchemeProvider>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ThemeProvider;
|
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
$color-brand-0: #f8f0fc;
|
||||||
|
$color-brand-1: #f3d9fa;
|
||||||
|
$color-brand-2: #eebefa;
|
||||||
|
$color-brand-3: #e599f7;
|
||||||
|
$color-brand-4: #da77f2;
|
||||||
|
$color-brand-5: #cc5de8;
|
||||||
|
$color-brand-6: #be4bdb;
|
||||||
|
$color-brand-7: #ae3ec9;
|
||||||
|
$color-brand-8: #9c36b5;
|
||||||
|
$color-brand-9: #862e9c;
|
||||||
|
|
||||||
|
$header-height: 64px;
|
||||||
|
|
||||||
|
:global {
|
||||||
|
.table-long-break {
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-primary {
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
font-size: var(--mantine-font-size-sm);
|
||||||
|
|
||||||
|
@include smaller-than($mantine-breakpoint-sm) {
|
||||||
|
min-width: 12rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-no-wrap {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-select {
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
@include smaller-than($mantine-breakpoint-sm) {
|
||||||
|
min-width: 10rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,61 @@
|
|||||||
|
@use "sass:math";
|
||||||
|
|
||||||
|
$mantine-breakpoint-xs: "36em";
|
||||||
|
$mantine-breakpoint-sm: "48em";
|
||||||
|
$mantine-breakpoint-md: "62em";
|
||||||
|
$mantine-breakpoint-lg: "75em";
|
||||||
|
$mantine-breakpoint-xl: "88em";
|
||||||
|
|
||||||
|
@function rem($value) {
|
||||||
|
@return #{math.div(math.div($value, $value * 0 + 1), 16)}rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin light {
|
||||||
|
[data-mantine-color-scheme="light"] & {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin dark {
|
||||||
|
[data-mantine-color-scheme="dark"] & {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin hover {
|
||||||
|
@media (hover: hover) {
|
||||||
|
&:hover {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (hover: none) {
|
||||||
|
&:active {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin smaller-than($breakpoint) {
|
||||||
|
@media (max-width: $breakpoint) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin larger-than($breakpoint) {
|
||||||
|
@media (min-width: $breakpoint) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin rtl {
|
||||||
|
[dir="rtl"] & {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin ltr {
|
||||||
|
[dir="ltr"] & {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
$navbar-width: 200;
|
||||||
|
|
||||||
|
:export {
|
||||||
|
colorBrand0: $color-brand-0;
|
||||||
|
colorBrand1: $color-brand-1;
|
||||||
|
colorBrand2: $color-brand-2;
|
||||||
|
colorBrand3: $color-brand-3;
|
||||||
|
colorBrand4: $color-brand-4;
|
||||||
|
colorBrand5: $color-brand-5;
|
||||||
|
colorBrand6: $color-brand-6;
|
||||||
|
colorBrand7: $color-brand-7;
|
||||||
|
colorBrand8: $color-brand-8;
|
||||||
|
colorBrand9: $color-brand-9;
|
||||||
|
|
||||||
|
headerHeight: $header-height;
|
||||||
|
|
||||||
|
navBarWidth: $navbar-width;
|
||||||
|
}
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
@layer mantine {
|
||||||
|
.root {
|
||||||
|
&[data-variant="light"] {
|
||||||
|
color: var(--mantine-color-dark-0);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include light {
|
||||||
|
&[data-variant="light"] {
|
||||||
|
background-color: var(--mantine-color-gray-1);
|
||||||
|
color: var(--mantine-color-dark-2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
.main {
|
||||||
|
@include dark {
|
||||||
|
background-color: rgb(26, 27, 30);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
.root {
|
||||||
|
background-color: var(--mantine-color-grape-light);
|
||||||
|
|
||||||
|
@include light {
|
||||||
|
color: var(--mantine-color-dark-filled);
|
||||||
|
background-color: var(--mantine-color-grape-light);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
@layer mantine {
|
||||||
|
.root {
|
||||||
|
@include dark {
|
||||||
|
color: var(--mantine-color-dark-0);
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-variant="danger"] {
|
||||||
|
background-color: var(--mantine-color-red-9);
|
||||||
|
color: var(--mantine-color-red-0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
.result {
|
||||||
|
@include light {
|
||||||
|
color: var(--mantine-color-dark-8);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include dark {
|
||||||
|
color: var(--mantine-color-gray-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
.content {
|
||||||
|
@include smaller-than($mantine-breakpoint-md) {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,4 +1,4 @@
|
|||||||
export { default as Search } from "./Search";
|
export { default as Search } from "./Search";
|
||||||
export * from "./inputs";
|
export * from "./inputs";
|
||||||
export * from "./tables";
|
export * from "./tables";
|
||||||
export { default as Toolbox } from "./toolbox";
|
export { default as Toolbox } from "./toolbox/Toolbox";
|
||||||
|
|||||||
@ -0,0 +1,4 @@
|
|||||||
|
.container {
|
||||||
|
pointer-events: none;
|
||||||
|
min-height: 220px;
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
.container {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
.group {
|
||||||
|
@include light {
|
||||||
|
color: var(--mantine-color-gray-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include dark {
|
||||||
|
color: var(--mantine-color-dark-5);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: calc(100vh - $header-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart {
|
||||||
|
height: 90%;
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
.card {
|
||||||
|
border-radius: var(--mantine-radius-sm);
|
||||||
|
border: 1px solid var(--mantine-color-gray-7);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: var(--mantine-shadow-md);
|
||||||
|
border: 1px solid $color-brand-5;
|
||||||
|
}
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue