mirror of
https://github.com/rowyio/rowy.git
synced 2025-12-29 00:16:39 +01:00
update firebaseui button styles
This commit is contained in:
Sidney Alcantara
3
src/assets/logos/apple.svg
Normal file
3
src/assets/logos/apple.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="-30 0 315 315" fill="currentColor">
|
||||
<path d="M213.803 167.03c.442 47.58 41.74 63.413 42.197 63.615-.35 1.116-6.599 22.563-21.757 44.716-13.104 19.153-26.705 38.235-48.13 38.63-21.05.388-27.82-12.483-51.888-12.483-24.061 0-31.582 12.088-51.51 12.871-20.68.783-36.428-20.71-49.64-39.793-27-39.033-47.633-110.3-19.928-158.406 13.763-23.89 38.36-39.017 65.056-39.405 20.307-.387 39.475 13.662 51.889 13.662 12.406 0 35.699-16.895 60.186-14.414 10.25.427 39.026 4.14 57.503 31.186-1.49.923-34.335 20.044-33.978 59.822M174.24 50.199c10.98-13.29 18.369-31.79 16.353-50.199-15.826.636-34.962 10.546-46.314 23.828-10.173 11.763-19.082 30.589-16.678 48.633 17.64 1.365 35.66-8.964 46.64-22.262"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 776 B |
4
src/assets/logos/facebook.svg
Normal file
4
src/assets/logos/facebook.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
||||
<path d="M1023.94 511.96c0-282.77-229.23-512-512-512s-512 229.23-512 512c0 255.554 187.231 467.37 432 505.78V659.96h-130v-148h130v-112.8c0-128.32 76.438-199.2 193.39-199.2 56.017 0 114.61 10 114.61 10v126h-64.562c-63.603 0-83.438 39.467-83.438 79.957v96.043h142l-22.7 148h-119.3v357.78c244.769-38.41 432-250.226 432-505.78" fill="#1877F2"/>
|
||||
<path d="m711.24 659.96 22.7-148h-142v-96.043c0-40.49 19.835-79.957 83.438-79.957h64.562v-126s-58.593-10-114.61-10c-116.952 0-193.39 70.88-193.39 199.2v112.8h-130v148h130v357.78a515.834 515.834 0 0 0 80 6.22c27.216 0 53.933-2.13 80-6.22V659.96h119.3" fill="#FFF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 686 B |
3
src/assets/logos/github.svg
Normal file
3
src/assets/logos/github.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="1 1 22 22" width="24" height="24">
|
||||
<path d="M12 1.27a11 11 0 00-3.48 21.46c.55.09.73-.28.73-.55v-1.84c-3.03.64-3.67-1.46-3.67-1.46-.55-1.29-1.28-1.65-1.28-1.65-.92-.65.1-.65.1-.65 1.1 0 1.73 1.1 1.73 1.1.92 1.65 2.57 1.2 3.21.92a2 2 0 01.64-1.47c-2.47-.27-5.04-1.19-5.04-5.5 0-1.1.46-2.1 1.2-2.84a3.76 3.76 0 010-2.93s.91-.28 3.11 1.1c1.8-.49 3.7-.49 5.5 0 2.1-1.38 3.02-1.1 3.02-1.1a3.76 3.76 0 010 2.93c.83.74 1.2 1.74 1.2 2.94 0 4.21-2.57 5.13-5.04 5.4.45.37.82.92.82 2.02v3.03c0 .27.1.64.73.55A11 11 0 0012 1.27"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 614 B |
6
src/assets/logos/microsoft.svg
Normal file
6
src/assets/logos/microsoft.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 19">
|
||||
<path fill="#f25022" d="M0 0h9v9h-9z"/>
|
||||
<path fill="#00a4ef" d="M0 10h9v9h-9z"/>
|
||||
<path fill="#7fba00" d="M10 0h9v9h-9z"/>
|
||||
<path fill="#ffb900" d="M10 10h9v9h-9z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 240 B |
3
src/assets/logos/twitter.svg
Normal file
3
src/assets/logos/twitter.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 -24 256 256">
|
||||
<path d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 0 1-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 0 1-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 0 1-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 0 0 256 25.45" fill="#55acee"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 834 B |
5
src/assets/logos/yahoo.svg
Normal file
5
src/assets/logos/yahoo.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<g fill="#6001D2" fill-rule="nonzero">
|
||||
<path d="m10.708 7-2.662 6.42L5.407 7H1l4.912 11.027L4.144 22h4.315L15 7zM15.887 12.877c-1.584 0-2.773 1.191-2.773 2.578 0 1.363 1.143 2.49 2.68 2.49 1.585 0 2.773-1.17 2.773-2.577 0-1.386-1.141-2.49-2.68-2.49M18.987 2.093l-4.381 9.831H19.5l4.38-9.831z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 376 B |
@@ -124,7 +124,6 @@ export default function AuthLayout({
|
||||
<Typography
|
||||
variant="caption"
|
||||
color="text.secondary"
|
||||
textAlign="center"
|
||||
sx={{ pt: 1, display: hideProject ? "none" : "block" }}
|
||||
>
|
||||
Project: <span style={{ userSelect: "all" }}>{projectId}</span>
|
||||
|
||||
@@ -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),
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
@@ -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(
|
||||
`<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="${mdiGoogle}" /></svg>`
|
||||
)
|
||||
);
|
||||
|
||||
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 = {
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
</a>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user