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 * from "./inputs";
|
||||
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