From b29e554b6d90227f853ffaa01b2cf8d3121be02e Mon Sep 17 00:00:00 2001 From: Sidney Alcantara Date: Wed, 22 Sep 2021 15:59:01 +1000 Subject: [PATCH] update firebaseui button styles --- src/assets/logos/apple.svg | 3 + src/assets/logos/facebook.svg | 4 ++ src/assets/logos/github.svg | 3 + src/assets/logos/microsoft.svg | 6 ++ src/assets/logos/twitter.svg | 3 + src/assets/logos/yahoo.svg | 5 ++ src/components/Auth/AuthLayout.tsx | 1 - src/components/Auth/FirebaseUi.tsx | 98 +++++++++++++++++++----------- src/firebase/firebaseui.ts | 46 +++++++++++--- src/pages/Deploy.tsx | 4 +- 10 files changed, 124 insertions(+), 49 deletions(-) create mode 100644 src/assets/logos/apple.svg create mode 100644 src/assets/logos/facebook.svg create mode 100644 src/assets/logos/github.svg create mode 100644 src/assets/logos/microsoft.svg create mode 100644 src/assets/logos/twitter.svg create mode 100644 src/assets/logos/yahoo.svg diff --git a/src/assets/logos/apple.svg b/src/assets/logos/apple.svg new file mode 100644 index 00000000..4cd95316 --- /dev/null +++ b/src/assets/logos/apple.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/logos/facebook.svg b/src/assets/logos/facebook.svg new file mode 100644 index 00000000..eba45484 --- /dev/null +++ b/src/assets/logos/facebook.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/logos/github.svg b/src/assets/logos/github.svg new file mode 100644 index 00000000..582950da --- /dev/null +++ b/src/assets/logos/github.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/logos/microsoft.svg b/src/assets/logos/microsoft.svg new file mode 100644 index 00000000..9f0f0ab9 --- /dev/null +++ b/src/assets/logos/microsoft.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/logos/twitter.svg b/src/assets/logos/twitter.svg new file mode 100644 index 00000000..0622d263 --- /dev/null +++ b/src/assets/logos/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/logos/yahoo.svg b/src/assets/logos/yahoo.svg new file mode 100644 index 00000000..59161df5 --- /dev/null +++ b/src/assets/logos/yahoo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/Auth/AuthLayout.tsx b/src/components/Auth/AuthLayout.tsx index 8cc8ea23..04a0ad88 100644 --- a/src/components/Auth/AuthLayout.tsx +++ b/src/components/Auth/AuthLayout.tsx @@ -124,7 +124,6 @@ export default function AuthLayout({ Project: {projectId} diff --git a/src/components/Auth/FirebaseUi.tsx b/src/components/Auth/FirebaseUi.tsx index e33a625e..663a4422 100644 --- a/src/components/Auth/FirebaseUi.tsx +++ b/src/components/Auth/FirebaseUi.tsx @@ -13,12 +13,16 @@ import { auth, db } from "@src/firebase"; import { defaultUiConfig, getSignInOptions } from "@src/firebase/firebaseui"; import { PUBLIC_SETTINGS } from "config/dbPaths"; +import { colord, extend } from "colord"; +import mixPlugin from "colord/plugins/mix"; +extend([mixPlugin]); + const useStyles = makeStyles((theme) => createStyles({ "@global": { ".rowy-firebaseui": { width: "100%", - minHeight: 48, + minHeight: 32, "& .firebaseui-container": { backgroundColor: "transparent", @@ -56,11 +60,11 @@ const useStyles = makeStyles((theme) => margin: 0, }, "& .firebaseui-list-item + .firebaseui-list-item": { - paddingTop: theme.spacing(2), + paddingTop: theme.spacing(1), }, "& .mdl-button": { - borderRadius: (theme.shape.borderRadius as number) * (48 / 32), + borderRadius: theme.shape.borderRadius, ...theme.typography.button, }, "& .mdl-button--raised": { @@ -88,16 +92,35 @@ const useStyles = makeStyles((theme) => }, }, - "& .firebaseui-idp-button, & .firebaseui-tenant-button": { - maxWidth: "none", - minHeight: 48, - }, + "& .firebaseui-idp-button.mdl-button--raised, & .firebaseui-tenant-button.mdl-button--raised": + { + maxWidth: "none", + minHeight: 32, + padding: theme.spacing(0.5, 1.5), + + backgroundColor: theme.palette.action.input + " !important", + "&:hover": { + backgroundColor: theme.palette.action.hover + " !important", + }, + "&:active, &:focus": { + backgroundColor: + theme.palette.action.disabledBackground + " !important", + }, + + "&, &:hover, &.Mui-disabled": { border: "none" }, + "&, &:hover, &:active, &:focus": { + boxShadow: `0 0 0 1px ${theme.palette.action.inputOutline} inset, + 0 ${theme.palette.mode === "dark" ? "" : "-"}1px 0 0 ${ + theme.palette.action.inputOutline + } inset`, + }, + }, "& .firebaseui-idp-icon": { display: "block", }, "& .firebaseui-idp-text": { ...theme.typography.button, - fontSize: "1rem", + color: theme.palette.text.primary, paddingLeft: theme.spacing(2), paddingRight: Number(theme.spacing(2).replace("px", "")) + 18, @@ -105,35 +128,37 @@ const useStyles = makeStyles((theme) => width: "100%", textAlign: "center", - // [theme.breakpoints.down("sm")]: { "&.firebaseui-idp-text-long": { display: "none" }, "&.firebaseui-idp-text-short": { display: "table-cell" }, - // }, }, - "& .firebaseui-idp-google": { - "& .firebaseui-idp-icon-wrapper::before": { - content: "''", - display: "block", - position: "absolute", - top: 2, - left: 2, - width: 48 - 4, - height: 48 - 4, - zIndex: 0, - - backgroundColor: "#fff", - borderRadius: theme.shape.borderRadius, - }, - "& .firebaseui-idp-icon-wrapper img": { - position: "relative", - left: -1, - }, - - "&>.firebaseui-idp-text": { - color: "#fff", - }, + "& .firebaseui-idp-google > .firebaseui-idp-text": { + color: theme.palette.text.primary, }, + "& .firebaseui-idp-github .firebaseui-idp-icon, & [data-provider-id='apple.com'] .firebaseui-idp-icon": + { + filter: theme.palette.mode === "dark" ? "invert(1)" : "", + }, + "& [data-provider-id='microsoft.com'] .firebaseui-idp-icon": { + width: 21, + height: 21, + position: "relative", + left: -1, + top: -1, + }, + "& [data-provider-id='yahoo.com'] > .firebaseui-idp-icon-wrapper > .firebaseui-idp-icon": + { + width: 18, + height: 18, + filter: + theme.palette.mode === "dark" + ? "invert(1) saturate(0) brightness(1.5)" + : "", + }, + "& .firebaseui-idp-password .firebaseui-idp-icon, & .firebaseui-idp-phone .firebaseui-idp-icon, & .firebaseui-idp-anonymous .firebaseui-idp-icon": + { + filter: theme.palette.mode === "light" ? "invert(1)" : "", + }, "& .firebaseui-card-header": { padding: 0 }, "& .firebaseui-card-actions": { padding: 0 }, @@ -173,11 +198,10 @@ const useStyles = makeStyles((theme) => }, signInText: { - fontSize: "1rem", display: "block", textAlign: "center", color: theme.palette.text.secondary, - margin: theme.spacing(-1, 0, -2.5), + margin: theme.spacing(-1, 0, -3), }, skeleton: { @@ -186,12 +210,12 @@ const useStyles = makeStyles((theme) => "& > *": { width: "100%", - height: 48, - borderRadius: (theme.shape.borderRadius as number) * (48 / 32), + height: 32, + borderRadius: theme.shape.borderRadius, }, "& > * + *": { - marginTop: theme.spacing(2), + marginTop: theme.spacing(1), }, }, }) diff --git a/src/firebase/firebaseui.ts b/src/firebase/firebaseui.ts index 65c0383e..d8ea988b 100644 --- a/src/firebase/firebaseui.ts +++ b/src/firebase/firebaseui.ts @@ -1,31 +1,59 @@ import firebase from "firebase/app"; import * as firebaseui from "firebaseui"; +import twitterLogo from "assets/logos/twitter.svg"; +import facebookLogo from "assets/logos/facebook.svg"; +import githubLogo from "assets/logos/github.svg"; +import appleLogo from "assets/logos/apple.svg"; +import yahooLogo from "assets/logos/yahoo.svg"; + +import { mdiGoogle } from "@mdi/js"; +console.log( + `data:image/svg+xml;utf8,` + + encodeURIComponent( + `` + ) +); + export const authOptions = { google: { provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID, - buttonColor: "#4285F4", }, - twitter: firebase.auth.TwitterAuthProvider.PROVIDER_ID, - facebook: firebase.auth.FacebookAuthProvider.PROVIDER_ID, + twitter: { + provider: firebase.auth.TwitterAuthProvider.PROVIDER_ID, + iconUrl: twitterLogo, + }, + facebook: { + provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID, + iconUrl: facebookLogo, + }, github: { provider: firebase.auth.GithubAuthProvider.PROVIDER_ID, - buttonColor: "#000", + iconUrl: githubLogo, }, microsoft: { provider: "microsoft.com", loginHintKey: "login_hint", - buttonColor: "#000", }, - apple: { provider: "apple.com" }, - yahoo: { provider: "yahoo.com" }, + apple: { + provider: "apple.com", + iconUrl: appleLogo, + }, + yahoo: { + provider: "yahoo.com", + iconUrl: yahooLogo, + }, email: { provider: firebase.auth.EmailAuthProvider.PROVIDER_ID, requireDisplayName: true, disableSignUp: { status: true }, }, - phone: firebase.auth.PhoneAuthProvider.PROVIDER_ID, - anonymous: firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID, + phone: { + provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID, + }, + anonymous: { + provider: firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID, + }, }; export const defaultUiConfig: firebaseui.auth.Config = { diff --git a/src/pages/Deploy.tsx b/src/pages/Deploy.tsx index d1534c02..1e2afffc 100644 --- a/src/pages/Deploy.tsx +++ b/src/pages/Deploy.tsx @@ -64,8 +64,8 @@ export default function DeployPage() { src="https://deploy.cloud.run/button.svg" alt="Run on Google Cloud" style={{ display: "block" }} - width={286} - height={50} + width={183} + height={32} />