From 1116f8f58d0bc71a9084119c672e8cb4ea2943b3 Mon Sep 17 00:00:00 2001 From: Sidney Alcantara Date: Thu, 23 Sep 2021 15:22:28 +1000 Subject: [PATCH 1/3] update FirebaseUi icon sizes --- src/components/Auth/FirebaseUi.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/Auth/FirebaseUi.tsx b/src/components/Auth/FirebaseUi.tsx index b87fbf5f..4b58335e 100644 --- a/src/components/Auth/FirebaseUi.tsx +++ b/src/components/Auth/FirebaseUi.tsx @@ -92,7 +92,7 @@ const useStyles = makeStyles((theme) => { maxWidth: "none", minHeight: 32, - padding: theme.spacing(0.5, 1.5), + padding: theme.spacing(0.5, 1), backgroundColor: theme.palette.action.input + " !important", "&:hover": { @@ -113,6 +113,8 @@ const useStyles = makeStyles((theme) => }, "& .firebaseui-idp-icon": { display: "block", + width: 20, + height: 20, }, "& .firebaseui-idp-text": { ...theme.typography.button, @@ -153,6 +155,10 @@ const useStyles = makeStyles((theme) => }, "& .firebaseui-idp-password .firebaseui-idp-icon, & .firebaseui-idp-phone .firebaseui-idp-icon, & .firebaseui-idp-anonymous .firebaseui-idp-icon": { + width: 24, + height: 24, + position: "relative", + left: -2, filter: theme.palette.mode === "light" ? "invert(1)" : "", }, From ce560d7854f53cccc98eb101cbbd69d70e35ab04 Mon Sep 17 00:00:00 2001 From: Sidney Alcantara Date: Thu, 23 Sep 2021 15:22:47 +1000 Subject: [PATCH 2/3] multiselect: fix spacing & use custom radio & checkbox icons --- package.json | 2 +- src/theme/CheckboxIcon.tsx | 3 ++- src/theme/CheckboxIndeterminateIcon.tsx | 3 ++- src/theme/RadioIcon.tsx | 3 ++- yarn.lock | 8 ++++---- 5 files changed, 11 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 96ed4cbe..2ff501e6 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "@mui/material": "^5.0.0", "@mui/styles": "^5.0.0", "@rowy/form-builder": "^0.1.2", - "@rowy/multiselect": "^0.1.8", + "@rowy/multiselect": "^0.1.12", "@tinymce/tinymce-react": "^3.4.0", "algoliasearch": "^4.8.6", "ansi-to-react": "^6.1.5", diff --git a/src/theme/CheckboxIcon.tsx b/src/theme/CheckboxIcon.tsx index d984e96c..a4ac0b1e 100644 --- a/src/theme/CheckboxIcon.tsx +++ b/src/theme/CheckboxIcon.tsx @@ -10,6 +10,7 @@ export default function CheckboxIcon() { height: toRem(18), margin: toRem((24 - 18) / 2), borderRadius: 1, + display: "flex", position: "relative", @@ -46,7 +47,7 @@ export default function CheckboxIcon() { boxShadow: 1, }, - ".Mui-checked &": { + ".Mui-checked &, [aria-selected='true'] &": { backgroundColor: "currentColor", borderColor: "currentColor", diff --git a/src/theme/CheckboxIndeterminateIcon.tsx b/src/theme/CheckboxIndeterminateIcon.tsx index e684b614..8313c8c6 100644 --- a/src/theme/CheckboxIndeterminateIcon.tsx +++ b/src/theme/CheckboxIndeterminateIcon.tsx @@ -10,6 +10,7 @@ export default function CheckboxIndeterminateIcon() { height: toRem(18), margin: toRem((24 - 18) / 2), borderRadius: 1, + display: "flex", position: "relative", @@ -46,7 +47,7 @@ export default function CheckboxIndeterminateIcon() { boxShadow: 1, }, - ".Mui-checked &": { + ".Mui-checked &, [aria-selected='true'] &": { backgroundColor: "currentColor", borderColor: "currentColor", diff --git a/src/theme/RadioIcon.tsx b/src/theme/RadioIcon.tsx index 6953f1b2..21974850 100644 --- a/src/theme/RadioIcon.tsx +++ b/src/theme/RadioIcon.tsx @@ -10,6 +10,7 @@ export default function RadioIcon() { height: toRem(20), margin: toRem((24 - 20) / 2), borderRadius: "50%", + display: "flex", backgroundColor: "transparent", border: "1px solid", @@ -37,7 +38,7 @@ export default function RadioIcon() { }), }, - ".Mui-checked &": { + ".Mui-checked &, [aria-selected='true'] &": { backgroundColor: "currentColor", borderColor: "currentColor", diff --git a/yarn.lock b/yarn.lock index 35cc9fc3..1f6729fd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2672,10 +2672,10 @@ use-debounce "^3.4.3" yup "^0.32.9" -"@rowy/multiselect@^0.1.8": - version "0.1.8" - resolved "https://registry.yarnpkg.com/@rowy/multiselect/-/multiselect-0.1.8.tgz#68d6234583121e0fc80abb28a463a27a1ca1101d" - integrity sha512-t1rVtkrmbFGDU860aTl0teSwUhkZiSCHtA2BasVaXABxlUxQhKZM90H7EaZrHOTTZ4opAzMwu9HvCdWKckzjsQ== +"@rowy/multiselect@^0.1.12": + version "0.1.12" + resolved "https://registry.yarnpkg.com/@rowy/multiselect/-/multiselect-0.1.12.tgz#03380ceaaed9f6847c59b6ccae6d216ce149d95a" + integrity sha512-1JmH5EDt0OSxcUWjQXfqGwp4w2xDJ5OjfS1uV9pXv7AcTw++RqwQKsF15llKYyatvpZohSyaVQIogPh7Zzpe/g== "@sindresorhus/is@^0.14.0": version "0.14.0" From 5c1d9d7f819b04d11c2905b6cf85bbfc6f328d75 Mon Sep 17 00:00:00 2001 From: Sidney Alcantara Date: Thu, 23 Sep 2021 15:22:58 +1000 Subject: [PATCH 3/3] TextEditor: rewrite styles to sx prop --- src/components/Table/editors/TextEditor.tsx | 41 ++++++++------------- 1 file changed, 16 insertions(+), 25 deletions(-) diff --git a/src/components/Table/editors/TextEditor.tsx b/src/components/Table/editors/TextEditor.tsx index f5356cf5..a57afe0f 100644 --- a/src/components/Table/editors/TextEditor.tsx +++ b/src/components/Table/editors/TextEditor.tsx @@ -1,37 +1,14 @@ import { useRef, useLayoutEffect } from "react"; import { EditorProps } from "react-data-grid"; -import { makeStyles, createStyles } from "@mui/styles"; import { TextField } from "@mui/material"; import { FieldType } from "constants/fields"; import { getCellValue } from "utils/fns"; import { useProjectContext } from "contexts/ProjectContext"; -const useStyles = makeStyles((theme) => - createStyles({ - root: { - width: "100%", - height: "100%", - backgroundColor: "var(--background-color)", - }, - - inputBase: { - height: "100%", - font: "inherit", // Prevent text jumping - letterSpacing: "inherit", // Prevent text jumping - }, - input: { - font: "inherit", // Prevent text jumping - letterSpacing: "inherit", // Prevent text jumping - padding: "var(--cell-padding)", - }, - }) -); - export default function TextEditor({ row, column }: EditorProps) { const { updateCell } = useProjectContext(); - const classes = useStyles(); const type = (column as any).config?.renderFieldType ?? (column as any).type; @@ -88,9 +65,23 @@ export default function TextEditor({ row, column }: EditorProps) { ref: inputRef, maxLength: maxLength, }} - className={classes.root} + sx={{ + width: "100%", + height: "100%", + backgroundColor: "var(--background-color)", + + "& .MuiInputBase-root": { + height: "100%", + font: "inherit", // Prevent text jumping + letterSpacing: "inherit", // Prevent text jumping + }, + "& .MuiInputBase-input": { + font: "inherit", // Prevent text jumping + letterSpacing: "inherit", // Prevent text jumping + padding: "var(--cell-padding)", + }, + }} InputProps={{ - classes: { root: classes.inputBase, input: classes.input }, endAdornment: (column as any).type === FieldType.percentage ? "%" : undefined, }}