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

theme updates

Browse Source
This commit is contained in:
Sidney Alcantara
2021-07-12 21:33:15 +10:00
parent 4a2ba93e5d
commit cf5e3b6018
38 changed files with 356 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
www/package.json
View File

@@ -8,7 +8,7 @@
},
"private": true,
"dependencies": {
"@antlerengineering/form-builder": "^3.0.0-0",
"@antlerengineering/form-builder": "^3.0.0-1",
"@antlerengineering/multiselect": "^1.0.0-0",
"@date-io/date-fns": "1.x",
"@emotion/react": "^11.4.0",

4
www/public/index.html
View File

@@ -19,12 +19,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="theme-color"
content="#fff"
content="#F9F9FB"
media="(prefers-color-scheme: light)"
/>
<meta
name="theme-color"
content="#000"
content="#121212"
media="(prefers-color-scheme: dark)"
/>
<meta name="description" content="Excel for your database" />

90
www/src/Themes.tsx
View File

@@ -7,7 +7,7 @@ export const BODY_FONT = "Inter, system-ui, sans-serif";
export const MONO_FONT = "IBM Plex Mono, ui-monospace, monospace";
export const ANTLER_RED = "#ED4747";
export const SECONDARY_GREY = "#282829";
export const SECONDARY_GREY = "#070042";
export const SECONDARY_TEXT = "rgba(0, 0, 0, 0.6)";
export const LOG_TEXT = "#cccccc";
export const ERROR = "#b00020";
@@ -35,10 +35,11 @@ declare module "@material-ui/core/styles/createTransitions" {
export const themeBase = {
palette: {
// primary: { main: ANTLER_RED, light: ANTLER_RED },
primary: { main: "#371FFF" },
secondary: { main: SECONDARY_GREY },
text: { secondary: SECONDARY_TEXT, log: LOG_TEXT },
error: { main: ERROR },
background: { default: "#F9F9FB" },
},
typography: {
fontFamily: BODY_FONT,
@@ -105,6 +106,38 @@ export const themeBase = {
// color: SECONDARY_TEXT,
},
},
shadows: [
// Based on https://tailwindcss.com/docs/box-shadow
// with additional “outline” shadow
"none", // 0
"0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px 0 rgba(0, 0, 0, 0.06)", // 1
"0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)", // 2
"0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)", // 3
"0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)", // 4
"0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)", // 5
"0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)", // 6
"0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)", // 7
"0 0 0 1px rgba(0, 0, 0, 0.06), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", // 8
"0 0 0 1px rgba(0, 0, 0, 0.06), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", // 9
"0 0 0 1px rgba(0, 0, 0, 0.06), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", // 10
"0 0 0 1px rgba(0, 0, 0, 0.06), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", // 11
"0 0 0 1px rgba(0, 0, 0, 0.06), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", // 12
"0 0 0 1px rgba(0, 0, 0, 0.06), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", // 13
"0 0 0 1px rgba(0, 0, 0, 0.06), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", // 14
"0 0 0 1px rgba(0, 0, 0, 0.06), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", // 15
"0 0 0 1px rgba(0, 0, 0, 0.08), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)", // 16
"0 0 0 1px rgba(0, 0, 0, 0.08), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)", // 17
"0 0 0 1px rgba(0, 0, 0, 0.08), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)", // 18
"0 0 0 1px rgba(0, 0, 0, 0.08), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)", // 19
"0 0 0 1px rgba(0, 0, 0, 0.08), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)", // 20
"0 0 0 1px rgba(0, 0, 0, 0.08), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)", // 21
"0 0 0 1px rgba(0, 0, 0, 0.08), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)", // 22
"0 0 0 1px rgba(0, 0, 0, 0.08), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)", // 23
"0 0 0 1px rgba(0, 0, 0, 0.08), 0 25px 50px -12px rgba(0, 0, 0, 0.25)", // 24
],
shape: {
borderRadius: 4,
},
components: {
MuiTextField: {
defaultProps: {
@@ -112,6 +145,57 @@ export const themeBase = {
// size: "small",
},
},
MuiPaper: {
styleOverrides: {
rounded: {
borderRadius: 8,
},
},
},
MuiDialog: {
styleOverrides: {
paper: {
borderRadius: 8,
},
},
},
MuiButton: {
styleOverrides: {
root: {
borderRadius: 24,
},
},
},
MuiListItem: {
styleOverrides: {
root: {
width: "calc(100% - 16px)",
margin: "4px 8px",
padding: "4px 8px",
borderRadius: 4,
},
},
},
MuiMenu: {
styleOverrides: {
list: {
padding: "4px 0",
},
},
},
MuiMenuItem: {
styleOverrides: {
root: {
width: "calc(100% - 8px)",
margin: "0 4px",
padding: "6px 12px",
borderRadius: 4,
"&.Mui-selected": {
color: "#371FFF",
},
},
},
},
},
};
@@ -119,6 +203,7 @@ export const darkThemeBase = {
// https://material.io/design/color/dark-theme.html#ui-application
palette: {
mode: "dark",
primary: { main: "#8A99FF" },
secondary: { main: "#E4E4E5" },
text: {
// primary: "rgba(255, 255, 255, 0.87)",
@@ -127,6 +212,7 @@ export const darkThemeBase = {
// disabled: "rgba(255, 255, 255, 0.38)",
},
error: { main: "#CF6679" },
background: { default: "#121212" },
},
// typography: {
// overline: { color: "rgba(255, 255, 255, 0.6)" },

51
www/src/assets/FiretableLogo.tsx
View File

@@ -1,45 +1,18 @@
import { useTheme } from "@material-ui/core";
import { Typography } from "@material-ui/core";
export default function FiretableLogo() {
const theme = useTheme();
const primaryColor = theme.palette.primary.main;
const strokeColor = "#FFF";
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="140"
height="32"
viewBox="0 0 140 32"
<Typography
variant="h4"
component="h1"
color="primary"
style={{
letterSpacing: 0,
fontVariantLigatures: "common-ligatures",
userSelect: "none",
}}
>
<g fill="none" fillRule="evenodd">
<rect width="32" height="32" fill={primaryColor} rx="2.667" />
<g fill={strokeColor}>
<g fillRule="nonzero">
<path d="M5.333 18.667V24A2.667 2.667 0 0 0 8 26.667h5.333v-8h-8zM6.667 20H12v5.333H8A1.333 1.333 0 0 1 6.67 24.1l-.003-.1v-4zM18.667 18.667v8H24A2.667 2.667 0 0 0 26.667 24v-5.333h-8zM20 25.333V20h5.333v4c0 .703-.544 1.279-1.233 1.33l-.1.003h-4z" />
<path d="M12 18.667v8h8v-8h-8zM13.333 20h5.334v5.333h-5.334V20z" />
</g>
<path
fillRule="nonzero"
d="M18.667 12v8h8v-8h-8zM20 13.333h5.333v5.334H20v-5.334z"
/>
<path
fillRule="nonzero"
d="M12 12v8h8v-8h-8zm1.333 1.333h5.334v5.334h-5.334v-5.334z"
/>
<path
stroke={strokeColor}
strokeWidth="1.333"
d="M19.333 6v6.667H26V6h-6.667zm2.577.667h1.512L25.672 12h-2.143l-.85-2.075L21.826 12h-2.165l2.248-5.333z"
/>
</g>
<path
fill={primaryColor}
fillRule="nonzero"
d="M43.467 26v-9.813h2.586V13.36h-2.586v-2.693c0-1.547 1.093-2.267 2.16-2.267 1.2 0 2.053.693 2.053 1.68v.187c0 .906.693 1.573 1.573 1.573s1.627-.693 1.627-1.573v-.294c0-2.24-1.787-4.453-5.253-4.453-2.987 0-5.36 1.76-5.36 4.88v2.96H37.76v2.827h2.507V26h3.2zm7.413 0V13.36h-3.2V26h3.2zm6.773 0v-8.267s.88-1.706 2.827-1.706c.933 0 1.52.293 1.52.293l1.12-2.88s-1.04-.4-2.187-.4c-2.346 0-3.44 2.16-3.44 2.16v-1.84h-3.04V26h3.2zm13.067.32c3.067 0 5.067-1.813 5.067-1.813l-1.6-2.4-.015.014c-.146.14-1.377 1.266-3.452 1.266-2 0-3.307-1.44-3.547-2.56h9.44c.027-.48.027-.96.027-1.2 0-3.894-2.907-6.587-6.373-6.587-3.654 0-6.347 2.933-6.347 6.64s2.96 6.64 6.8 6.64zm2.72-7.813h-6.267c.107-1.12 1.04-2.56 3.094-2.56 2.106 0 3.12 1.466 3.173 2.56zm11.333 7.813c1.84 0 3.04-.827 3.04-.827L86.64 22.88s-.613.453-1.333.453c-.854 0-1.654-.453-1.654-2V16.24h3.814v-2.88h-3.814V9.6h-3.2v3.76h-2.48v2.88h2.48v5.6c0 2.693 1.867 4.48 4.32 4.48zm9.28 0c2.854 0 4.16-1.92 4.16-1.92V26h2.96v-8.24c0-2.88-2.133-4.72-5.76-4.72-2.64 0-4.986 1.147-4.986 1.147l1.04 2.64s1.946-.934 3.786-.934c1.12 0 2.72.534 2.72 2.187v.72s-1.2-.907-3.52-.907c-2.746 0-4.96 1.76-4.96 4.187 0 2.693 2.187 4.24 4.56 4.24zm.987-2.667c-.987 0-2.293-.293-2.293-1.626 0-1.36 1.36-1.787 2.346-1.787 1.734 0 2.88.64 2.88.64v1.307s-1.013 1.466-2.933 1.466zm16.48 2.667c3.28 0 6.16-2.747 6.16-6.64s-2.88-6.64-6.16-6.64c-2.4 0-3.573 1.653-3.573 1.653V5.84h-3.2V26h2.96v-1.653s1.093 1.973 3.813 1.973zm-.56-2.987c-2.107 0-3.013-1.76-3.013-1.76v-3.786s.906-1.76 3.013-1.76c2.16 0 3.467 1.573 3.467 3.653s-1.307 3.653-3.467 3.653zM123.6 26V5.84h-3.2V26h3.2zm9.52.32c3.067 0 5.067-1.813 5.067-1.813l-1.6-2.4-.015.014c-.146.14-1.377 1.266-3.452 1.266-2 0-3.307-1.44-3.547-2.56h9.44c.027-.48.027-.96.027-1.2 0-3.894-2.907-6.587-6.373-6.587-3.654 0-6.347 2.933-6.347 6.64s2.96 6.64 6.8 6.64zm2.72-7.813h-6.267c.107-1.12 1.04-2.56 3.094-2.56 2.106 0 3.12 1.466 3.173 2.56z"
/>
</g>
</svg>
firetable
</Typography>
);
}

1
www/src/assets/antler.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72"><g fill="none" fill-rule="evenodd"><path fill="#EF4C47" fill-rule="nonzero" d="M0 0h72v72H0z"/><path fill="#FFF" d="M34.076 21L21 52h5.35l10.056-24.531L46.473 52H52L38.921 21z"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 252 B

1
www/src/assets/firetable-with-wordmark.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="140" height="32" viewBox="0 0 140 32"><g fill="none" fill-rule="evenodd"><rect width="32" height="32" fill="#ED4747" rx="2.667"/><g fill="#FFF"><g fill-rule="nonzero"><path d="M5.333 18.667V24A2.667 2.667 0 0 0 8 26.667h5.333v-8h-8zM6.667 20H12v5.333H8A1.333 1.333 0 0 1 6.67 24.1l-.003-.1v-4zM18.667 18.667v8H24A2.667 2.667 0 0 0 26.667 24v-5.333h-8zM20 25.333V20h5.333v4c0 .703-.544 1.279-1.233 1.33l-.1.003h-4z"/><path d="M12 18.667v8h8v-8h-8zM13.333 20h5.334v5.333h-5.334V20z"/></g><path fill-rule="nonzero" d="M18.667 12v8h8v-8h-8zM20 13.333h5.333v5.334H20v-5.334z"/><path fill-rule="nonzero" d="M12 12v8h8v-8h-8zm1.333 1.333h5.334v5.334h-5.334v-5.334z"/><path stroke="#FFF" stroke-width="1.333" d="M19.333 6v6.667H26V6h-6.667zm2.577.667h1.512L25.672 12h-2.143l-.85-2.075L21.826 12h-2.165l2.248-5.333z"/></g><path fill="#ED4747" fill-rule="nonzero" d="M43.467 26v-9.813h2.586V13.36h-2.586v-2.693c0-1.547 1.093-2.267 2.16-2.267 1.2 0 2.053.693 2.053 1.68v.187c0 .906.693 1.573 1.573 1.573s1.627-.693 1.627-1.573v-.294c0-2.24-1.787-4.453-5.253-4.453-2.987 0-5.36 1.76-5.36 4.88v2.96H37.76v2.827h2.507V26h3.2zm7.413 0V13.36h-3.2V26h3.2zm6.773 0v-8.267s.88-1.706 2.827-1.706c.933 0 1.52.293 1.52.293l1.12-2.88s-1.04-.4-2.187-.4c-2.346 0-3.44 2.16-3.44 2.16v-1.84h-3.04V26h3.2zm13.067.32c3.067 0 5.067-1.813 5.067-1.813l-1.6-2.4-.015.014c-.146.14-1.377 1.266-3.452 1.266-2 0-3.307-1.44-3.547-2.56h9.44c.027-.48.027-.96.027-1.2 0-3.894-2.907-6.587-6.373-6.587-3.654 0-6.347 2.933-6.347 6.64s2.96 6.64 6.8 6.64zm2.72-7.813h-6.267c.107-1.12 1.04-2.56 3.094-2.56 2.106 0 3.12 1.466 3.173 2.56zm11.333 7.813c1.84 0 3.04-.827 3.04-.827L86.64 22.88s-.613.453-1.333.453c-.854 0-1.654-.453-1.654-2V16.24h3.814v-2.88h-3.814V9.6h-3.2v3.76h-2.48v2.88h2.48v5.6c0 2.693 1.867 4.48 4.32 4.48zm9.28 0c2.854 0 4.16-1.92 4.16-1.92V26h2.96v-8.24c0-2.88-2.133-4.72-5.76-4.72-2.64 0-4.986 1.147-4.986 1.147l1.04 2.64s1.946-.934 3.786-.934c1.12 0 2.72.534 2.72 2.187v.72s-1.2-.907-3.52-.907c-2.746 0-4.96 1.76-4.96 4.187 0 2.693 2.187 4.24 4.56 4.24zm.987-2.667c-.987 0-2.293-.293-2.293-1.626 0-1.36 1.36-1.787 2.346-1.787 1.734 0 2.88.64 2.88.64v1.307s-1.013 1.466-2.933 1.466zm16.48 2.667c3.28 0 6.16-2.747 6.16-6.64s-2.88-6.64-6.16-6.64c-2.4 0-3.573 1.653-3.573 1.653V5.84h-3.2V26h2.96v-1.653s1.093 1.973 3.813 1.973zm-.56-2.987c-2.107 0-3.013-1.76-3.013-1.76v-3.786s.906-1.76 3.013-1.76c2.16 0 3.467 1.573 3.467 3.653s-1.307 3.653-3.467 3.653zM123.6 26V5.84h-3.2V26h3.2zm9.52.32c3.067 0 5.067-1.813 5.067-1.813l-1.6-2.4-.015.014c-.146.14-1.377 1.266-3.452 1.266-2 0-3.307-1.44-3.547-2.56h9.44c.027-.48.027-.96.027-1.2 0-3.894-2.907-6.587-6.373-6.587-3.654 0-6.347 2.933-6.347 6.64s2.96 6.64 6.8 6.64zm2.72-7.813h-6.267c.107-1.12 1.04-2.56 3.094-2.56 2.106 0 3.12 1.466 3.173 2.56z"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.8 KiB

1
www/src/assets/firetable.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><g fill="none" fill-rule="evenodd"><rect width="48" height="48" fill="#ED4747" rx="4"/><g stroke="#FFF" stroke-width="2"><path d="M9.879 38.121A2.99 2.99 0 0012 39h7V29H9v7c0 .828.336 1.578.879 2.121zM29 39h7a2.99 2.99 0 002.121-.879A2.99 2.99 0 0039 36v-7H29v10zm0-10H19v10h10zM39 19H29v10h10zm-10 0H19v10h10z"/><path fill="#FFF" d="M39 9H29v10h10z"/></g><path fill="#ED4747" d="M37 17l-2.529-6h-.94L31 17h1.035l1.947-4.746L35.93 17z"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 508 B

13
www/src/components/Auth/AuthLayout.tsx
View File

@@ -5,6 +5,7 @@ import { Paper, Typography, LinearProgress } from "@material-ui/core";
import { alpha } from "@material-ui/core/styles";
import bgPattern from "assets/bg-pattern.svg";
import FiretableLogo from "assets/FiretableLogo";
const useStyles = makeStyles((theme) =>
createStyles({
@@ -55,14 +56,6 @@ const useStyles = makeStyles((theme) =>
textAlign: "center",
},
wordmark: {
display: "block",
color: theme.palette.primary.main,
letterSpacing: 0,
fontVariantLigatures: "common-ligatures",
},
projectName: {
display: "block",
marginTop: theme.spacing(1),
@@ -91,9 +84,7 @@ export default function AuthLayout({ children, loading }: IAuthLayoutProps) {
return (
<Div100vh className={classes.root} style={{ minHeight: "100rvh" }}>
<Paper className={classes.paper}>
<Typography variant="h4" component="h1" className={classes.wordmark}>
firetable
</Typography>
<FiretableLogo />
<Typography variant="overline" className={classes.projectName}>
{process.env.REACT_APP_FIREBASE_PROJECT_ID}
</Typography>

2
www/src/components/Auth/FirebaseUi.tsx
View File

@@ -83,7 +83,7 @@ const useStyles = makeStyles((theme) =>
...theme.typography.button,
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(2) + 18,
paddingRight: Number(theme.spacing(2).replace("px", "")) + 18,
marginLeft: -18,
width: "100%",
textAlign: "center",

4
www/src/components/ConnectServiceSelect/styles.ts
View File

@@ -7,7 +7,7 @@ export const useStyles = makeStyles((theme) =>
paper: { overflow: "hidden", maxHeight: "calc(100% - 48px)" },
menuChild: {
padding: `0 ${theme.spacing(2)}px`,
padding: `0 ${theme.spacing(2)}`,
minWidth: 340,
// Need to set fixed height here so popup is positioned correctly
height: 340,
@@ -23,7 +23,7 @@ export const useStyles = makeStyles((theme) =>
background: `${theme.palette.background.paper} no-repeat`,
position: "relative",
margin: theme.spacing(0, -2),
maxWidth: `calc(100% + ${theme.spacing(4)}px)`,
maxWidth: `calc(100% + ${theme.spacing(4)})`,
"&::before, &::after": {
content: '""',

8
www/src/components/FormattedChip.tsx
View File

@@ -30,9 +30,13 @@ export default function FormattedChip(props: ChipProps) {
if (VARIANTS.includes(label)) {
return (
<Chip {...props} className={clsx(props.className, classes[label])} />
<Chip
size="small"
{...props}
className={clsx(props.className, classes[label])}
/>
);
}
return <Chip {...props} />;
return <Chip size="small" {...props} />;
}

2
www/src/components/Grid/Card/styles.ts
View File

@@ -39,7 +39,7 @@ const useStyles = makeStyles((theme) =>
tabDivider: { marginTop: -1 },
tabSection: { paddingTop: theme.spacing(2), height: "100%" },
tabContentGrid: { height: `calc(100% + ${theme.spacing(3)}px)` },
tabContentGrid: { height: `calc(100% + ${theme.spacing(3)})` },
divider: {
margin: theme.spacing(2),

4
www/src/components/HomeNavigation/NavDrawer.tsx
View File

@@ -53,7 +53,7 @@ const useStyles = makeStyles((theme) =>
listItem: {
color: theme.palette.text.secondary,
minHeight: 48,
// minHeight: 48,
transition: theme.transitions.create(["background-color", "color"]),
"& $listItemIcon": { transition: theme.transitions.create("color") },
},
@@ -68,7 +68,7 @@ const useStyles = makeStyles((theme) =>
},
listItemIcon: {},
listItemText: {
...theme.typography.button,
// ...theme.typography.button,
display: "block",
color: "inherit",
},

47
www/src/components/HomeNavigation/index.tsx
View File

@@ -42,23 +42,48 @@ const useStyles = makeStyles((theme) =>
appBar: {
height: APP_BAR_HEIGHT,
backgroundColor: theme.palette.background.paper,
[theme.breakpoints.down("md")]: { paddingRight: 0 },
[theme.breakpoints.up("md")]: {
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
transition:
theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}) +
", " +
theme.transitions.create(["box-shadow", "background-color"]),
"$open &": {
width: `calc(100% - ${NAV_DRAWER_WIDTH}px)`,
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
transition:
theme.transitions.create("width", {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}) +
", " +
theme.transitions.create(["box-shadow", "background-color"]),
},
},
// Elevation 8
backgroundImage:
"linear-gradient(rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09))",
"&::before": {
content: "''",
display: "block",
position: "absolute",
top: 0,
right: 0,
bottom: 0,
left: 0,
backgroundColor: theme.palette.background.default,
transition: theme.transitions.create("opacity"),
},
},
appBarScrolled: {
"&::before": {
opacity: 0,
},
},
maxHeight: {
height: APP_BAR_HEIGHT,
@@ -122,7 +147,7 @@ export default function HomeNavigation({
<AppBar
color="inherit"
elevation={trigger ? 4 : 0}
className={classes.appBar}
className={clsx(classes.appBar, trigger && classes.appBarScrolled)}
>
<Container>
<Toolbar className={clsx(classes.maxHeight, classes.toolbar)}>

5
www/src/components/Navigation/NavDrawer.tsx
View File

@@ -42,13 +42,14 @@ const useStyles = makeStyles((theme) =>
listItem: {
color: theme.palette.text.secondary,
minHeight: 48,
// minHeight: 48,
transition: theme.transitions.create(["background-color", "color"]),
"& $listItemIcon": { transition: theme.transitions.create("color") },
},
listItemIcon: {},
listItemText: {
...theme.typography.button,
...theme.typography.body2,
fontWeight: theme.typography.fontWeightMedium,
display: "block",
color: "inherit",
},

11
www/src/components/Navigation/NavDrawerItem.tsx
View File

@@ -20,7 +20,7 @@ const useStyles = makeStyles((theme) =>
createStyles({
listItem: {
color: theme.palette.text.secondary,
minHeight: 48,
// minHeight: 48,
},
listItemSelected: {
"&&, &&:hover": {
@@ -33,7 +33,9 @@ const useStyles = makeStyles((theme) =>
},
listItemIcon: {},
listItemText: {
...theme.typography.button,
...theme.typography.body2,
fontWeight: theme.typography.fontWeightMedium,
// ...theme.typography.button,
display: "block",
color: "inherit",
},
@@ -42,11 +44,12 @@ const useStyles = makeStyles((theme) =>
dropdownIconOpen: { transform: "rotate(180deg)" },
childListItem: {
minHeight: 40,
minHeight: 36,
paddingLeft: theme.spacing(4),
},
childListItemText: {
...theme.typography.overline,
...theme.typography.body2,
fontWeight: theme.typography.fontWeightMedium,
display: "block",
color: "inherit",
},

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

@@ -166,17 +166,26 @@ export default function UserMenu(props: IconButtonProps) {
onClose={() => setThemeSubMenu(null)}
classes={{ paper: classes.subMenu }}
>
<MenuItem onClick={() => changeTheme("system")}>
<MenuItem
onClick={() => changeTheme("system")}
selected={!themeOverridden}
>
<ListItemIcon>{!themeOverridden && <CheckIcon />}</ListItemIcon>
System
</MenuItem>
<MenuItem onClick={() => changeTheme("light")}>
<MenuItem
onClick={() => changeTheme("light")}
selected={themeOverridden && theme === "light"}
>
<ListItemIcon>
{themeOverridden && theme === "light" && <CheckIcon />}
</ListItemIcon>
Light
</MenuItem>
<MenuItem onClick={() => changeTheme("dark")}>
<MenuItem
onClick={() => changeTheme("dark")}
selected={themeOverridden && theme === "dark"}
>
<ListItemIcon>
{themeOverridden && theme === "dark" && <CheckIcon />}
</ListItemIcon>
@@ -185,6 +194,18 @@ export default function UserMenu(props: IconButtonProps) {
</Menu>
)}
<MenuItem component={Link} to={routes.userSettings}>
User settings
</MenuItem>
<Divider className={classes.divider} />
<MenuItem component={Link} to={routes.projectSettings}>
Project settings
</MenuItem>
<Divider className={classes.divider} />
<MenuItem component={Link} to={routes.signOut}>
Sign out
</MenuItem>

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

@@ -22,7 +22,7 @@ const useStyles = makeStyles((theme) =>
height: APP_BAR_HEIGHT,
[theme.breakpoints.down("md")]: { paddingRight: 0 },
backgroundColor: theme.palette.background.paper,
backgroundColor: theme.palette.background.default,
},
maxHeight: {

1
www/src/components/ProjectSettings/index.tsx
View File

@@ -30,7 +30,6 @@ export default function ProjectSettings({ handleClose }: IProjectSettings) {
return (
<FormDialog
onClose={handleClose}
open
title="Project Settings"
fields={projectSettingsForm}
values={{ ...settingsState.doc, ...publicSettingsState.doc }}

1
www/src/components/SideDrawer/index.tsx
View File

@@ -98,6 +98,7 @@ export default function SideDrawer() {
),
paper: clsx({ [classes.paperClose]: !open }),
}}
PaperProps={{ elevation: 8 }}
>
<ErrorBoundary>
<div className={classes.drawerContents}>

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

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

2
www/src/components/StyledCard.tsx
View File

@@ -35,7 +35,7 @@ const useStyles = makeStyles((theme) =>
},
cardActions: {
padding: theme.spacing(1),
// padding: theme.spacing(1),
display: "flex",
justifyContent: "space-between",

2
www/src/components/Table/TableHeader/TableHeaderButton.tsx
View File

@@ -15,7 +15,7 @@ export default function TableHeaderButton({
<Button
variant="contained"
color="secondary"
style={{ minWidth: 32, padding: 0 }}
style={{ minWidth: 36, height: 36, padding: 0 }}
aria-label={title}
{...props}
>

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

@@ -6,7 +6,6 @@ import {
Typography,
Button,
} from "@material-ui/core";
import { alpha } from "@material-ui/core/styles";
import { isCollectionGroup } from "utils/fns";
import AddRowIcon from "assets/icons/AddRow";
@@ -31,7 +30,7 @@ const useStyles = makeStyles((theme) =>
root: {
width: "100%",
margin: 0,
padding: theme.spacing(0, 1.5),
padding: theme.spacing(0, 1.5, 1.5),
minHeight: TABLE_HEADER_HEIGHT,
overflowX: "auto",
@@ -43,9 +42,15 @@ const useStyles = makeStyles((theme) =>
width: "100%",
paddingRight: theme.spacing(1),
},
"& > *": { paddingTop: "0 !important" },
},
addRowIcon: { fontSize: "26px !important" },
addRowIcon: {
fontSize: "26px !important",
marginTop: -1,
marginBottom: -1,
},
spacer: { minWidth: theme.spacing(8) },
@@ -55,14 +60,6 @@ const useStyles = makeStyles((theme) =>
},
inputBaseRoot: {
borderRadius: theme.shape.borderRadius,
backgroundColor:
theme.palette.mode === "dark"
? alpha(theme.palette.text.primary, 0.06)
: undefined,
},
select: {
paddingTop: "6px !important",
paddingBottom: "7px !important",
},
})
);
@@ -175,13 +172,14 @@ export default function TableHeader({
name: "rowHeight",
id: "rowHeight",
}}
margin="dense"
// margin="dense"
size="small"
InputProps={{
disableUnderline: true,
classes: { root: classes.inputBaseRoot },
}}
SelectProps={{
classes: { root: classes.select },
// classes: { root: classes.select },
displayEmpty: true,
}}
hiddenLabel

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

@@ -24,7 +24,7 @@ export const useStyles = makeStyles((theme) =>
"@global": {
".rdg.rdg": {
"--color": theme.palette.text.secondary,
"--color": theme.palette.text.primary,
"--border-color": theme.palette.divider,
// "--summary-border-color": "#aaa",
"--background-color": theme.palette.background.paper,
@@ -101,7 +101,7 @@ export const useStyles = makeStyles((theme) =>
".cell-collapse-padding": {
margin: theme.spacing(0, -1.5),
width: `calc(100% + ${theme.spacing(3)}px)`,
width: `calc(100% + ${theme.spacing(3)})`,
},
},
})

6
www/src/components/TableSettings/form.tsx
View File

@@ -93,9 +93,8 @@ export const tableSettings = (
) as any,
},
{
type: FieldType.multiSelect,
type: FieldType.singleSelect,
name: "section",
multiple: false,
label: "Section",
freeText: true,
options: sections,
@@ -171,12 +170,11 @@ export const tableSettings = (
},
mode === TableSettingsDialogModes.create && tables && tables?.length !== 0
? {
type: FieldType.multiSelect,
type: FieldType.singleSelect,
name: "schemaSource",
label: "Copy column config from existing table",
labelPlural: "Tables",
options: tables,
multiple: false,
freeText: false,
itemRenderer: (option: { value: string; label: string }) => (
<span key={option.value}>

12
www/src/components/TableSettings/index.tsx
View File

@@ -72,15 +72,6 @@ export default function TableSettingsDialog({
const router = useRouter();
const open = mode !== null;
const [mounted, setMounted] = useState(open);
useEffect(() => {
if (open && !mounted) setMounted(true);
if (!open && mounted)
setTimeout(() => {
if (mounted) setMounted(false);
}, 300);
}, [open]);
const [formState, setForm] = useState(FORM_EMPTY_STATE);
const handleChange = (key: string, value: any) =>
@@ -100,7 +91,7 @@ export default function TableSettingsDialog({
if (data) setForm(data);
}, [data]);
if (!mounted) return null;
if (!open) return null;
const handleSubmit = async (values) => {
const data: any = {
@@ -159,7 +150,6 @@ export default function TableSettingsDialog({
return (
<FormDialog
onClose={handleClose}
open={open}
title={
mode === TableSettingsDialogModes.create
? "Create Table"

22
www/src/components/fields/Action/FormDialog/Dialog.tsx
View File

@@ -46,17 +46,17 @@ export default function ParamsDialog({
...field,
validation: field.validation ? validationCompiler(field.validation) : null,
}));
if (!open) return null;
return (
<>
<FormDialog
onClose={handleClose}
open={open}
title={`${column.name}`}
fields={fields}
values={{}}
onSubmit={handleRun}
SubmitButtonProps={{ children: "Run" }}
/>
</>
<FormDialog
onClose={handleClose}
title={`${column.name}`}
fields={fields}
values={{}}
onSubmit={handleRun}
SubmitButtonProps={{ children: "Run" }}
/>
);
}

5
www/src/components/fields/Checkbox/SideDrawerField.tsx
View File

@@ -34,7 +34,7 @@ export default function Checkbox({
}: ISideDrawerFieldProps) {
const classes = useStyles();
const fieldClasses = useFieldStyles();
const switchClasses = useSwitchStyles();
// const switchClasses = useSwitchStyles();
return (
<Controller
@@ -57,7 +57,8 @@ export default function Checkbox({
onChange={handleChange}
onBlur={onBlur}
disabled={disabled}
classes={switchClasses}
// classes={switchClasses}
color="success"
/>
}
label={column.name}

7
www/src/components/fields/Checkbox/TableCell.tsx
View File

@@ -5,7 +5,7 @@ import { makeStyles, createStyles } from "@material-ui/styles";
import { FormControlLabel, Switch } from "@material-ui/core";
import Confirmation from "components/Confirmation";
import { useSwitchStyles } from "./styles";
// import { useSwitchStyles } from "./styles";
const useStyles = makeStyles((theme) =>
createStyles({
@@ -36,14 +36,15 @@ export default function Checkbox({
disabled,
}: IHeavyCellProps) {
const classes = useStyles();
const switchClasses = useSwitchStyles();
// const switchClasses = useSwitchStyles();
let component = (
<Switch
checked={!!value}
onChange={() => onSubmit(!value)}
disabled={disabled}
classes={switchClasses}
// classes={switchClasses}
color="success"
/>
);

4
www/src/components/fields/ConnectService/ConnectServiceSelect/styles.ts
View File

@@ -7,7 +7,7 @@ export const useStyles = makeStyles((theme) =>
paper: { overflow: "hidden", maxHeight: "calc(100% - 48px)" },
menuChild: {
padding: `0 ${theme.spacing(2)}px`,
padding: `0 ${theme.spacing(2)}`,
minWidth: 340,
// Need to set fixed height here so popup is positioned correctly
height: 340,
@@ -23,7 +23,7 @@ export const useStyles = makeStyles((theme) =>
background: `${theme.palette.background.paper} no-repeat`,
position: "relative",
margin: theme.spacing(0, -2),
maxWidth: `calc(100% + ${theme.spacing(4)}px)`,
maxWidth: `calc(100% + ${theme.spacing(4)})`,
"&::before, &::after": {
content: '""',

1
www/src/components/fields/ConnectTable/InlineCell.tsx
View File

@@ -66,6 +66,7 @@ export const ConnectTable = React.forwardRef(function ConnectTable(
value.map((doc: any) => (
<Grid item key={doc.docPath}>
<Chip
size="small"
label={config.primaryKeys
.map((key: string) => doc.snapshot[key])
.join(" ")}

1
www/src/components/fields/User/TableCell.tsx
View File

@@ -15,6 +15,7 @@ export default function User({ value }: IHeavyCellProps) {
return (
<Tooltip title={dateLabel}>
<Chip
size="small"
avatar={<Avatar alt="Avatar" src={value.photoURL} />}
label={value.displayName}
/>

4
www/src/constants/routes.ts
View File

@@ -14,6 +14,10 @@ export enum routes {
grid = "/grid",
gridWithId = "/grid/:id",
editor = "/editor",
settings = "/settings",
userSettings = "/settings/user",
projectSettings = "/settings/project",
}
export default routes;

2
www/src/contexts/FiretableContext.tsx
View File

@@ -116,7 +116,7 @@ export const FiretableContextProvider: React.FC = ({ children }) => {
)
.map((table) => ({
...table,
section: table.section ? table.section.toUpperCase().trim() : "OTHER",
section: table.section ? table.section.trim() : "OTHER",
}));
const _sections = _groupBy(filteredTables, "section");

19
www/src/pages/Home.tsx
View File

@@ -63,29 +63,15 @@ const useStyles = makeStyles((theme) =>
favButton: {
margin: theme.spacing(-0.5, -1, 0, 0),
},
editButton: {
margin: theme.spacing(-1),
marginRight: theme.spacing(-0.5),
},
configFab: {
right: theme.spacing(15),
position: "fixed",
bottom: theme.spacing(3),
width: 80,
height: 80,
borderRadius: (theme.shape.borderRadius as number) * 2,
"& svg": { width: "2em", height: "2em" },
right: theme.spacing(12),
},
fab: {
position: "fixed",
bottom: theme.spacing(3),
right: theme.spacing(3),
width: 80,
height: 80,
borderRadius: (theme.shape.borderRadius as number) * 2,
"& svg": { width: "2em", height: "2em" },
},
})
);
@@ -172,7 +158,7 @@ export default function HomePage() {
const TableCard = ({ table }) => {
const checked = Boolean(_find(favs, table));
return (
<Grid key={table.name} item xs={12} sm={6} md={open ? 6 : 4}>
<Grid key={table.name} item xs={12} sm={6} md={open ? 6 : 4} lg={4}>
<StyledCard
className={classes.card}
overline={table.section}
@@ -212,7 +198,6 @@ export default function HomePage() {
})
}
aria-label="Edit table"
className={classes.editButton}
>
<EditIcon />
</IconButton>

228
www/src/pages/Test.tsx
View File

@@ -1,7 +1,7 @@
import { useContext, useEffect } from "react";
import { SnackContext } from "contexts/SnackContext";
import { Container, Grid, Chip, Paper, Slider } from "@material-ui/core";
import { Container, Stack, Grid, Chip, Paper, Slider } from "@material-ui/core";
export default function TestView() {
const snackContext = useContext(SnackContext);
@@ -18,124 +18,124 @@ export default function TestView() {
}, []);
return (
<Container style={{ margin: "24px 0" }}>
<div>
<Chip size="small" label="Main" />
<Chip label="Main" />
<Chip
label={
<>
Main
<br />
Multiline
</>
}
/>
</div>
<div>
<Chip size="small" variant="outlined" label="Main" />
<Chip variant="outlined" label="Main" />
<Chip
variant="outlined"
label={
<>
Main
<br />
Multiline
</>
}
/>
</div>
<Container style={{ margin: "24px 0 200px" }}>
<Stack spacing={8}>
<Stack spacing={1} direction="row" alignItems="center">
<Chip size="small" label="Main" />
<Chip label="Main" />
<Chip
label={
<>
Main
<br />
Multiline
</>
}
/>
<Chip size="small" variant="outlined" label="Main" />
<Chip variant="outlined" label="Main" />
<Chip
variant="outlined"
label={
<>
Main
<br />
Multiline
</>
}
/>
</Stack>
<div>
<Chip color="primary" size="small" label="Main" />
<Chip color="primary" label="Main" />
<Chip
color="primary"
label={
<>
Main
<br />
Multiline
</>
}
/>
</div>
<div>
<Chip color="primary" size="small" variant="outlined" label="Main" />
<Chip color="primary" variant="outlined" label="Main" />
<Chip
color="primary"
variant="outlined"
label={
<>
Main
<br />
Multiline
</>
}
/>
</div>
<Stack spacing={1} direction="row" alignItems="center">
<Chip color="primary" size="small" label="Main" />
<Chip color="primary" label="Main" />
<Chip
color="primary"
label={
<>
Main
<br />
Multiline
</>
}
/>
<Chip color="primary" size="small" variant="outlined" label="Main" />
<Chip color="primary" variant="outlined" label="Main" />
<Chip
color="primary"
variant="outlined"
label={
<>
Main
<br />
Multiline
</>
}
/>
</Stack>
<div>
<Chip color="secondary" size="small" label="Main" />
<Chip color="secondary" label="Main" />
<Chip
color="secondary"
label={
<>
Main
<br />
Multiline
</>
}
/>
</div>
<div>
<Chip color="secondary" size="small" variant="outlined" label="Main" />
<Chip color="secondary" variant="outlined" label="Main" />
<Chip
color="secondary"
variant="outlined"
label={
<>
Main
<br />
Multiline
</>
}
/>
</div>
<Stack spacing={1} direction="row" alignItems="center">
<Chip color="secondary" size="small" label="Main" />
<Chip color="secondary" label="Main" />
<Chip
color="secondary"
label={
<>
Main
<br />
Multiline
</>
}
/>
<Chip
color="secondary"
size="small"
variant="outlined"
label="Main"
/>
<Chip color="secondary" variant="outlined" label="Main" />
<Chip
color="secondary"
variant="outlined"
label={
<>
Main
<br />
Multiline
</>
}
/>
</Stack>
<Grid container spacing={4}>
{new Array(24).fill(undefined).map((_, i) => (
<Grid item key={i}>
<Paper
elevation={i + 1}
style={{
width: 48,
height: 48,
display: "grid",
placeItems: "center",
}}
>
{i + 1}
</Paper>
<div>
<Grid container spacing={4}>
{new Array(24).fill(undefined).map((_, i) => (
<Grid item key={i}>
<Paper
elevation={i + 1}
style={{
width: 200,
height: 200,
display: "grid",
placeItems: "center",
}}
>
{i + 1}
</Paper>
</Grid>
))}
</Grid>
))}
</Grid>
</div>
<br />
<br />
<Slider
valueLabelDisplay="on"
// valueLabelFormat={(v) => `${v} label`}
marks={[
{ value: 20, label: 20 },
{ value: 40, label: 40 },
]}
/>
<Slider
valueLabelDisplay="on"
// valueLabelFormat={(v) => `${v} label`}
marks={[
{ value: 20, label: 20 },
{ value: 40, label: 40 },
]}
/>
</Stack>
</Container>
);
}

8
www/yarn.lock
View File

@@ -106,10 +106,10 @@
"@algolia/logger-common" "4.8.6"
"@algolia/requester-common" "4.8.6"
"@antlerengineering/form-builder@^3.0.0-0":
version "3.0.0-0"
resolved "https://registry.yarnpkg.com/@antlerengineering/form-builder/-/form-builder-3.0.0-0.tgz#ef2ade4f6d1f97c0855982fe3bb4fa94a353bdd7"
integrity sha512-fB2SNdm5A4Ap7zuYCv3MVfksLqozUs/U1PkdDCVljFnqNu79hlHrG0hm0JMUP2n4TR7bsWDWqryc9JF3EegwXQ==
"@antlerengineering/form-builder@^3.0.0-1":
version "3.0.0-1"
resolved "https://registry.yarnpkg.com/@antlerengineering/form-builder/-/form-builder-3.0.0-1.tgz#414a0dc3ae786ad6129ab43cb5f2827063328768"
integrity sha512-8n4iL29UVMpOGFfTm5QggUbeXOvbU3jPDFzdDQKshHhzlkseU2xTaEkh7T3V4QVa/1LF86Xvcl3+dqjwy1SO4A==
dependencies:
"@antlerengineering/multiselect" "^1.0.0-0"
"@hookform/resolvers" "^2.6.0"