Mirrors/rowy
1
0
Fork 0
mirror of https://github.com/rowyio/rowy.git synced 2025-12-29 00:16:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

add dark theme styles

Browse Source
This commit is contained in:
Sidney Alcantara
2020-11-01 22:47:38 +11:00
parent 4f7227453a
commit c2980d9013
16 changed files with 155 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
www/package.json
View File

@@ -46,6 +46,7 @@
"typescript": "^3.7.2",
"use-algolia": "^1.4.1",
"use-debounce": "^3.3.0",
"use-persisted-state": "^0.3.0",
"yarn": "^1.19.0",
"yup": "^0.27.0"
},
@@ -90,6 +91,7 @@
"@types/react-div-100vh": "^0.3.0",
"@types/react-dom": "16.9.0",
"@types/react-router-dom": "^4.3.5",
"@types/use-persisted-state": "^0.3.0",
"firebase-tools": "^8.12.1",
"husky": "^4.2.5",
"playwright": "^1.5.2",

60
www/src/Themes.tsx
View File

@@ -24,6 +24,11 @@ export const ROOT_FONT_SIZE = 16;
export const toRem = (px: number) => `${px / ROOT_FONT_SIZE}rem`;
export const toEm = (px: number, root: number) => `${px / root}em`;
declare module "@material-ui/core/styles/createPalette" {
interface TypeBackground {
elevation?: Record<0 | 1 | 2 | 3 | 4 | 6 | 8 | 12 | 16 | 24, string>;
}
}
declare module "@material-ui/core/styles/createTypography" {
interface FontStyle {
fontFamilyMono: string;
@@ -112,12 +117,35 @@ export const themeBase = {
};
export const darkThemeBase = {
// https://material.io/design/color/dark-theme.html#ui-application
palette: {
type: "dark",
primary: { main: ANTLER_RED, light: ANTLER_RED },
secondary: { main: SECONDARY_GREY },
text: { secondary: SECONDARY_TEXT },
error: { main: ERROR },
background: {
default: "#121212",
paper: "#1E1E1E",
elevation: {
0: "#121212",
1: "#1E1E1E",
2: "#222222",
3: "#252525",
4: "#272727",
6: "#2C2C2C",
8: "#2E2E2E",
12: "#333333",
16: "#363636",
24: "#383838",
},
},
secondary: { main: "#E4E4E5" },
text: {
// primary: "rgba(255, 255, 255, 0.87)",
secondary: "rgba(255, 255, 255, 0.7)",
// disabled: "rgba(255, 255, 255, 0.38)",
},
error: { main: "#CF6679" },
},
typography: {
overline: { color: "rgba(255, 255, 255, 0.6)" },
},
};
@@ -165,7 +193,7 @@ export const defaultOverrides = (theme: Theme): ThemeOptions => ({
outlined: { padding: theme.spacing(3 / 8, 15 / 8) },
outlinedPrimary: {
// Same as outlined text field
borderColor: "rgba(0, 0, 0, 0.23)",
borderColor: fade(theme.palette.divider, 0.23),
},
outlinedSizeLarge: {
padding: theme.spacing(1, 4),
@@ -240,6 +268,28 @@ export const defaultOverrides = (theme: Theme): ThemeOptions => ({
},
MuiPaper: {
rounded: { borderRadius: 8 },
// Dark theme paper elevation backgrounds
...(() => {
const classes: Record<string, any> = {};
for (let i = 0; i <= 24; i++) {
if (theme.palette.background.elevation === undefined) continue;
let closestElevation = i;
for (let j = i; j > 0; j--) {
if (theme.palette.background.elevation[j] !== undefined) {
closestElevation = j;
break;
}
}
classes["elevation" + i] = {
backgroundColor:
theme.palette.background.elevation[closestElevation],
};
}
console.log(classes);
return classes;
})(),
},
MuiSlider: {
disabled: {},

29
www/src/components/Navigation/UserMenu.tsx
View File

@@ -8,13 +8,12 @@ import {
IconButtonProps,
Avatar,
Menu,
Typography,
Link as MuiLink,
MenuItem,
ListItemSecondaryAction,
Divider,
// Divider,
} from "@material-ui/core";
import AccountCircleIcon from "@material-ui/icons/AccountCircle";
import LaunchIcon from "@material-ui/icons/Launch";
import CheckBoxOutlineBlankIcon from "@material-ui/icons/CheckBoxOutlineBlank";
import CheckBoxIcon from "@material-ui/icons/CheckBox";
@@ -36,7 +35,7 @@ const useStyles = makeStyles((theme) =>
color: theme.palette.text.disabled,
},
divider: { margin: theme.spacing(1, 2) },
// divider: { margin: theme.spacing(1, 2) },
secondaryIcon: {
display: "block",
@@ -94,27 +93,17 @@ export default function UserMenu(props: IconButtonProps) {
classes={{ paper: classes.paper }}
>
{displayName && (
<Typography
<MuiLink
variant="overline"
className={classes.displayName}
role="presentation"
component="a"
href={`https://console.firebase.google.com/project/${process.env.REACT_APP_FIREBASE_PROJECT_ID}/firestore/data~2F_FT_USERS~2F${currentUser.uid}`}
target="_blank"
rel="noopener"
>
{displayName}
</Typography>
</MuiLink>
)}
<MenuItem
component="a"
href={`https://console.firebase.google.com/project/${process.env.REACT_APP_FIREBASE_PROJECT_ID}/firestore/data~2F_FT_USERS~2F${currentUser.uid}`}
target="_blank"
rel="noopener"
>
User Config
<ListItemSecondaryAction>
<LaunchIcon className={classes.secondaryIcon} />
</ListItemSecondaryAction>
</MenuItem>
<Divider className={classes.divider} />
<MenuItem onClick={handleToggleTheme}>
Dark Theme

3
www/src/components/Navigation/index.tsx
View File

@@ -25,8 +25,9 @@ const useStyles = makeStyles((theme) =>
appBar: {
paddingRight: DRAWER_COLLAPSED_WIDTH,
height: APP_BAR_HEIGHT,
[theme.breakpoints.down("sm")]: { paddingRight: 0 },
backgroundColor: theme.palette.background.paper,
},
maxHeight: {

6
www/src/components/SideDrawer/useStyles.ts
View File

@@ -19,6 +19,9 @@ export const useStyles = makeStyles((theme) =>
borderRadius: `${theme.shape.borderRadius * 2}px 0 0 ${
theme.shape.borderRadius * 2
}px`,
backgroundColor:
theme.palette.background.elevation?.[24] ??
theme.palette.background.paper,
width: DRAWER_WIDTH,
overflowX: "visible",
@@ -57,7 +60,8 @@ export const useStyles = makeStyles((theme) =>
"&$disabled": {
boxShadow: theme.shadows[6],
backgroundColor: theme.palette.grey[300],
backgroundColor:
theme.palette.grey[theme.palette.type === "light" ? 300 : 800],
},
"& + &": { marginTop: theme.spacing(4) },

2
www/src/components/Table/ColumnMenu/MenuContents.tsx
View File

@@ -37,7 +37,7 @@ const useStyles = makeStyles((theme) =>
"&:hover": {
backgroundColor: theme.palette.text.primary,
color: "#f1f1f3",
color: theme.palette.type === "light" ? "#f1f1f3" : "#212129",
},
},
menuItemIcon: {

7
www/src/components/Table/ColumnMenu/index.tsx
View File

@@ -52,8 +52,11 @@ export type ColumnMenuRef = {
const useStyles = makeStyles((theme) =>
createStyles({
paper: {
// TODO: change this if we need to support a dark mode
backgroundColor: "#f1f1f3",
backgroundColor:
theme.palette.type === "light"
? "#f1f1f3"
: theme.palette.background.elevation?.[8] ??
theme.palette.background.paper,
},
})
);

4
www/src/components/Table/TableHeader/ImportCsv.tsx
View File

@@ -49,8 +49,8 @@ const useStyles = makeStyles((theme) =>
dropzone: {
height: 137,
borderRadius: theme.shape.borderRadius,
border: "dashed 3px rgba(0, 0, 0, 0.42)",
backgroundColor: "rgba(0, 0, 0, 0.09)",
border: `dashed 3px ${fade(theme.palette.text.primary, 0.42)}`,
backgroundColor: fade(theme.palette.text.primary, 0.09),
color: theme.palette.text.secondary,
cursor: "pointer",

9
www/src/components/Table/TableHeader/index.tsx
View File

@@ -9,6 +9,7 @@ import {
Typography,
Button,
} from "@material-ui/core";
import { fade } from "@material-ui/core/styles";
import { isCollectionGroup } from "utils/fns";
import AddRowIcon from "assets/icons/AddRow";
@@ -51,7 +52,13 @@ const useStyles = makeStyles((theme) =>
minWidth: 120,
margin: theme.spacing(0, 0, 0, -1),
},
inputBaseRoot: { borderRadius: theme.shape.borderRadius },
inputBaseRoot: {
borderRadius: theme.shape.borderRadius,
backgroundColor:
theme.palette.type === "dark"
? fade(theme.palette.text.primary, 0.06)
: undefined,
},
select: {
paddingTop: "6px !important",
paddingBottom: "7px !important",

30
www/src/components/Table/styles.ts
View File

@@ -22,18 +22,25 @@ export const useStyles = makeStyles((theme) =>
"@global": {
".rdg.rdg": {
"--color": theme.palette.text.secondary,
"--border-color": "#e0e0e0",
"--border-color": theme.palette.divider,
// "--summary-border-color": "#aaa",
"--background-color": theme.palette.background.paper,
"--header-background-color": theme.palette.background.default,
"--row-hover-background-color": "#f5f5f5",
"--row-selected-background-color": "#dbecfa",
"--row-selected-hover-background-color": "#c9e3f8",
"--checkbox-color": "#005295",
"--checkbox-focus-color": "#62b8ff",
"--row-hover-background-color":
theme.palette.type === "light" ? "#f5f5f5" : "#303030",
"--row-selected-background-color": fade(
theme.palette.primary.main,
theme.palette.action.hoverOpacity
),
"--row-selected-hover-background-color": fade(
theme.palette.primary.main,
theme.palette.action.selectedOpacity
),
"--checkbox-color": theme.palette.primary.main,
"--checkbox-focus-color": theme.palette.primary.main,
"--checkbox-disabled-border-color": "#ccc",
"--checkbox-disabled-background-color": "#ddd",
"--selection-color": "#66afe9",
"--selection-color": theme.palette.primary.main,
"--font-size": "0.75rem",
border: "none",
@@ -48,13 +55,20 @@ export const useStyles = makeStyles((theme) =>
alignItems: "center",
padding: theme.spacing(0, 1.5),
},
"& .rdg-cell-frozen-last": {
boxShadow:
theme.palette.type === "light"
? "2px 0 4px 0px rgba(0, 0, 0, .08)"
: "2px 0 4px 0px rgba(0, 0, 0, .67)",
},
},
".rdg-header-row .rdg-cell": {
borderTop: "1px solid var(--border-color)",
},
// TODO:
// TODO: restyle if needed
".rdg-draggable-header-cell": {
cursor: "move",
display: "inline",

2
www/src/components/Wizards/Cell.tsx
View File

@@ -17,7 +17,7 @@ const useStyles = makeStyles((theme) =>
pointerEvents: "none",
border: `1px solid #e0e0e0`,
border: `1px solid ${theme.palette.divider}`,
borderTopWidth: 0,
backgroundColor: theme.palette.background.paper,

5
www/src/components/Wizards/FadeList.tsx
View File

@@ -19,7 +19,10 @@ const useStyles = makeStyles((theme) =>
right: 0,
height: theme.spacing(3),
backgroundImage: `linear-gradient(to top, ${theme.palette.background.paper}, transparent)`,
backgroundImage: `linear-gradient(to top, ${
theme.palette.background.elevation?.[24] ??
theme.palette.background.paper
}, transparent)`,
},
},
list: {

10
www/src/components/Wizards/ImportCsvWizard/Step3Preview.tsx
View File

@@ -28,7 +28,10 @@ const useStyles = makeStyles((theme) =>
right: 0,
height: theme.spacing(3),
backgroundImage: `linear-gradient(to top, ${theme.palette.background.paper}, transparent)`,
backgroundImage: `linear-gradient(to top, ${
theme.palette.background.elevation?.[24] ??
theme.palette.background.paper
}, transparent)`,
},
"&::before": {
@@ -43,7 +46,10 @@ const useStyles = makeStyles((theme) =>
right: 0,
width: theme.spacing(3),
backgroundImage: `linear-gradient(to left, ${theme.palette.background.paper}, transparent)`,
backgroundImage: `linear-gradient(to left, ${
theme.palette.background.elevation?.[24] ??
theme.palette.background.paper
}, transparent)`,
},
},

10
www/src/components/Wizards/ImportWizard/Step4Preview.tsx
View File

@@ -25,7 +25,10 @@ const useStyles = makeStyles((theme) =>
right: 0,
height: theme.spacing(3),
backgroundImage: `linear-gradient(to top, ${theme.palette.background.paper}, transparent)`,
backgroundImage: `linear-gradient(to top, ${
theme.palette.background.elevation?.[24] ??
theme.palette.background.paper
}, transparent)`,
},
"&::before": {
@@ -40,7 +43,10 @@ const useStyles = makeStyles((theme) =>
right: 0,
width: theme.spacing(3),
backgroundImage: `linear-gradient(to left, ${theme.palette.background.paper}, transparent)`,
backgroundImage: `linear-gradient(to left, ${
theme.palette.background.elevation?.[24] ??
theme.palette.background.paper
}, transparent)`,
},
},

5
www/src/contexts/appContext.tsx
View File

@@ -2,6 +2,7 @@ import React, { useEffect, useState, useContext } from "react";
import { auth, db } from "../firebase";
import firebase from "firebase/app";
import useDoc from "hooks/useDoc";
import createPersistedState from "use-persisted-state";
import {
useMediaQuery,
@@ -11,6 +12,8 @@ import {
} from "@material-ui/core";
import Themes from "Themes";
const useThemeState = createPersistedState("_FT_THEME");
interface AppContextInterface {
currentUser: firebase.User | null | undefined;
userDoc: any;
@@ -50,7 +53,7 @@ export const AppProvider: React.FC = ({ children }) => {
// Infer theme based on system settings
const prefersDarkTheme = useMediaQuery("(prefers-color-scheme: dark)");
// Store theme
const [theme, setTheme] = useState<keyof typeof Themes>(
const [theme, setTheme] = useThemeState<keyof typeof Themes>(
prefersDarkTheme ? "dark" : "light"
);
// Update theme when system settings change

19
www/yarn.lock
View File

@@ -2685,6 +2685,13 @@
resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-1.0.4.tgz#922d092c84a776a59acb0bd6785fd82b59b9bad5"
integrity sha512-6jtHrHpmiXOXoJ31Cg9R+iEVwuEKPf0XHwFUI93eEPXx492/J2JHyafkleKE2EYzZprayk9FSjTyK1GDqcwDng==
"@types/use-persisted-state@^0.3.0":
version "0.3.0"
resolved "https://registry.yarnpkg.com/@types/use-persisted-state/-/use-persisted-state-0.3.0.tgz#23370e89bd6c8468afdb05dde2d1bab898128229"
integrity sha512-ZT98QuckR95qM7W97lGVqc7fFS9TT6f3txp7R40fl0zxa5BLm3GG7j0i51G12h8DkoJxFAf2oQyYKU99h0pxFA==
dependencies:
"@types/react" "*"
"@types/yargs-parser@*":
version "15.0.0"
resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d"
@@ -2747,6 +2754,11 @@
semver "^6.3.0"
tsutils "^3.17.1"
"@use-it/event-listener@^0.1.2":
version "0.1.5"
resolved "https://registry.yarnpkg.com/@use-it/event-listener/-/event-listener-0.1.5.tgz#870456241bfef66acea6395c69b66fe516bee3cd"
integrity sha512-SWbhB0iFcoNL1BEldApGTqfB9aoGpU82iZUVTBtZaTFNrVKAGwuQTF15N9MzRvTgyuOASWf1pCKXbdVtKZgeRg==
"@webassemblyjs/ast@1.8.5":
version "1.8.5"
resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359"
@@ -14699,6 +14711,13 @@ use-memo-one@^1.1.1:
resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.1.tgz#39e6f08fe27e422a7d7b234b5f9056af313bd22c"
integrity sha512-oFfsyun+bP7RX8X2AskHNTxu+R3QdE/RC5IefMbqptmACAA/gfol1KDD5KRzPsGMa62sWxGZw+Ui43u6x4ddoQ==
use-persisted-state@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/use-persisted-state/-/use-persisted-state-0.3.0.tgz#f8e3d2fd8eee67e0c86fd596c3ea3e8121c07402"
integrity sha512-UlWEq0JYg7NbvcRBZ1g6Bwe4SEbYfr1wr/D5mrmfCzSxXSwsPRYygGLlsxHcW58Rf7gGwRPBT23sNVvyVn4WYg==
dependencies:
"@use-it/event-listener" "^0.1.2"
use@^3.1.0:
version "3.1.1"
resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"