mirror of
https://github.com/webstudio-is/webstudio.git
synced 2025-03-14 09:57:02 +00:00
feat: Login and error page redesign (#4777)
## Description <img width="1512" alt="image" src="https://github.com/user-attachments/assets/c61e93e0-f981-428d-8d8f-7101cdf43c2b" /> <img width="449" alt="image" src="https://github.com/user-attachments/assets/f030d9c2-ddaf-481d-9292-d2e5619939b7" /> <img width="1507" alt="image" src="https://github.com/user-attachments/assets/14bc4742-5d87-47f7-8704-db83674b115e" /> 1. What is this PR about (link the issue and add a short description) ## Steps for reproduction 1. click button 2. expect xyz ## Code Review - [ ] hi @kof, I need you to do - conceptual review (architecture, feature-correctness) - detailed review (read every line) - test it on preview ## Before requesting a review - [ ] made a self-review - [ ] added inline comments where things may be not obvious (the "why", not "what") ## Before merging - [ ] tested locally and on preview environment (preview dev login: 0000) - [ ] updated [test cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md) document - [ ] added tests - [ ] if any new env variables are added, added them to `.env` file
This commit is contained in:
Oleg Isonen
GitHub
@ -1,53 +0,0 @@
|
||||
import { css, textVariants, theme } from "@webstudio-is/design-system";
|
||||
import type { ComponentProps, JSX } from "react";
|
||||
|
||||
export const buttonStyle = css({
|
||||
boxSizing: "border-box",
|
||||
minWidth: 0,
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: theme.spacing[5],
|
||||
height: theme.spacing[15],
|
||||
px: theme.spacing[9],
|
||||
borderRadius: 12,
|
||||
border: "2px solid transparent",
|
||||
whiteSpace: "nowrap",
|
||||
backgroundImage: `
|
||||
linear-gradient(${theme.colors.backgroundPanel}, ${theme.colors.backgroundPanel}),
|
||||
${theme.colors.brandBorderFullGradient}
|
||||
`,
|
||||
backgroundOrigin: "border-box",
|
||||
backgroundClip: "padding-box, border-box",
|
||||
color: theme.colors.foregroundMain,
|
||||
boxShadow: theme.shadows.brandElevationSmall,
|
||||
...textVariants.brandButtonRegular,
|
||||
"&:hover": {
|
||||
boxShadow: theme.shadows.brandElevationBig,
|
||||
},
|
||||
"&:focus-visible": {
|
||||
outline: `1px solid ${theme.colors.borderFocus}`,
|
||||
outlineOffset: 1,
|
||||
},
|
||||
"&:disabled": {
|
||||
boxShadow: "none",
|
||||
color: theme.colors.foregroundDisabled,
|
||||
borderColor: theme.colors.borderMain,
|
||||
"& svg": {
|
||||
opacity: "0.5",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
type BrandButtonProps = ComponentProps<"button"> & {
|
||||
icon?: JSX.Element;
|
||||
};
|
||||
|
||||
export const BrandButton = ({ icon, children, ...props }: BrandButtonProps) => {
|
||||
return (
|
||||
<button {...props} type="submit" className={buttonStyle()}>
|
||||
{icon}
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
@ -1,15 +1,13 @@
|
||||
import { TooltipProvider } from "@radix-ui/react-tooltip";
|
||||
import {
|
||||
AccessibleIcon,
|
||||
Box,
|
||||
css,
|
||||
Button,
|
||||
Flex,
|
||||
globalCss,
|
||||
rawTheme,
|
||||
Text,
|
||||
theme,
|
||||
} from "@webstudio-is/design-system";
|
||||
import { GithubIcon, GoogleIcon, WebstudioIcon } from "@webstudio-is/icons";
|
||||
import { BrandButton } from "./brand-button";
|
||||
import { Form } from "@remix-run/react";
|
||||
import { authPath } from "~/shared/router-utils";
|
||||
import { SecretLogin } from "./secret-login";
|
||||
@ -17,29 +15,8 @@ import { SecretLogin } from "./secret-login";
|
||||
const globalStyles = globalCss({
|
||||
body: {
|
||||
margin: 0,
|
||||
background: theme.colors.backgroundPanel,
|
||||
},
|
||||
});
|
||||
|
||||
const layoutStyle = css({
|
||||
display: "flex",
|
||||
height: "100vh",
|
||||
flexDirection: "column",
|
||||
"@tablet": {
|
||||
flexDirection: "row",
|
||||
},
|
||||
});
|
||||
|
||||
const sidebarStyle = css({
|
||||
flexBasis: "35%",
|
||||
"@tablet": {
|
||||
background: `
|
||||
radial-gradient(65.88% 47.48% at 50% 50%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%),
|
||||
linear-gradient(0deg, rgba(255, 255, 255, 0) 49.46%, rgba(255, 255, 255, 0.33) 100%),
|
||||
linear-gradient(180deg, rgba(255, 174, 60, 0) 0%, rgba(230, 60, 254, 0.33) 100%),
|
||||
radial-gradient(211.58% 161.63% at 3.13% 100%, rgba(255, 174, 60, 0.3) 0%, rgba(227, 53, 255, 0) 100%),
|
||||
radial-gradient(107.1% 32.15% at 92.96% 5.04%, rgba(53, 255, 182, 0.2) 0%, rgba(74, 78, 250, 0.2) 100%), #EBFFFC;
|
||||
`,
|
||||
background: theme.colors.brandBackgroundDashboard,
|
||||
overflow: "hidden",
|
||||
},
|
||||
});
|
||||
|
||||
@ -58,63 +35,64 @@ export const Login = ({
|
||||
}: LoginProps) => {
|
||||
globalStyles();
|
||||
return (
|
||||
<Box className={layoutStyle()}>
|
||||
<Flex align="center" justify="center" css={{ height: "100vh" }}>
|
||||
<Flex
|
||||
align="center"
|
||||
justify="center"
|
||||
as="aside"
|
||||
className={sidebarStyle()}
|
||||
>
|
||||
<a href="https://webstudio.is" aria-label="Go to webstudio.is">
|
||||
<AccessibleIcon label="Logo">
|
||||
<WebstudioIcon size="100" />
|
||||
</AccessibleIcon>
|
||||
</a>
|
||||
</Flex>
|
||||
<Flex
|
||||
align="center"
|
||||
direction="column"
|
||||
grow
|
||||
as="main"
|
||||
gap={6}
|
||||
align="center"
|
||||
gap="6"
|
||||
css={{
|
||||
"@tablet": {
|
||||
justifyContent: "center",
|
||||
width: theme.spacing[35],
|
||||
minWidth: theme.spacing[20],
|
||||
padding: theme.spacing[17],
|
||||
borderRadius: theme.spacing[5],
|
||||
[`@media (min-width: ${rawTheme.spacing[35]})`]: {
|
||||
backgroundColor: `rgba(255, 255, 255, 0.5)`,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Text variant="brandMediumTitle" color="main" as="h1">
|
||||
Sign In
|
||||
<WebstudioIcon size={48} />
|
||||
<Text variant="brandSectionTitle" as="h1" align="center">
|
||||
Welcome to Webstudio
|
||||
</Text>
|
||||
<Flex direction="column" gap="4">
|
||||
<TooltipProvider>
|
||||
<Flex gap="3" direction="column">
|
||||
<Form action={authPath({ provider: "google" })} method="post">
|
||||
<BrandButton
|
||||
disabled={isGoogleEnabled === false}
|
||||
icon={<GoogleIcon size={22} />}
|
||||
>
|
||||
Sign in with Google
|
||||
</BrandButton>
|
||||
</Form>
|
||||
<Form action={authPath({ provider: "github" })} method="post">
|
||||
<BrandButton
|
||||
disabled={isGithubEnabled === false}
|
||||
icon={<GithubIcon size={22} fill="currentColor" />}
|
||||
>
|
||||
Sign in with GitHub
|
||||
</BrandButton>
|
||||
</Form>
|
||||
{isSecretLoginEnabled && <SecretLogin />}
|
||||
</Flex>
|
||||
</TooltipProvider>
|
||||
{errorMessage ? (
|
||||
<Text align="center" color="destructive">
|
||||
{errorMessage}
|
||||
</Text>
|
||||
) : null}
|
||||
</Flex>
|
||||
|
||||
<TooltipProvider>
|
||||
<Flex
|
||||
as={Form}
|
||||
method="post"
|
||||
direction="column"
|
||||
gap="3"
|
||||
css={{ width: "100%" }}
|
||||
>
|
||||
<Button
|
||||
disabled={isGoogleEnabled === false}
|
||||
prefix={<GoogleIcon size={22} />}
|
||||
color="primary"
|
||||
css={{ height: theme.spacing[15] }}
|
||||
formAction={authPath({ provider: "google" })}
|
||||
>
|
||||
Sign in with Google
|
||||
</Button>
|
||||
<Button
|
||||
disabled={isGithubEnabled === false}
|
||||
prefix={<GithubIcon size={22} fill="currentColor" />}
|
||||
color="ghost"
|
||||
css={{
|
||||
border: `1px solid ${theme.colors.borderDark}`,
|
||||
height: theme.spacing[15],
|
||||
}}
|
||||
formAction={authPath({ provider: "github" })}
|
||||
>
|
||||
Sign in with GitHub
|
||||
</Button>
|
||||
{isSecretLoginEnabled && <SecretLogin />}
|
||||
</Flex>
|
||||
</TooltipProvider>
|
||||
{errorMessage ? (
|
||||
<Text align="center" color="destructive">
|
||||
{errorMessage}
|
||||
</Text>
|
||||
) : null}
|
||||
</Flex>
|
||||
</Box>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,43 +1,44 @@
|
||||
import { Button, Flex, InputField, theme } from "@webstudio-is/design-system";
|
||||
import { CommitIcon } from "@webstudio-is/icons";
|
||||
import { useState } from "react";
|
||||
import { authPath } from "~/shared/router-utils";
|
||||
import { BrandButton } from "./brand-button";
|
||||
|
||||
export const SecretLogin = () => {
|
||||
const [isSecretLoginOpen, setIsSecretLoginOpen] = useState(false);
|
||||
if (isSecretLoginOpen) {
|
||||
const [show, setShow] = useState(false);
|
||||
if (show) {
|
||||
const action = authPath({ provider: "dev" });
|
||||
return (
|
||||
<Flex
|
||||
as="form"
|
||||
action={authPath({ provider: "dev" })}
|
||||
method="post"
|
||||
css={{
|
||||
width: "fit-content",
|
||||
flexDirection: "row",
|
||||
gap: theme.spacing[5],
|
||||
}}
|
||||
>
|
||||
<Flex gap="2">
|
||||
<InputField
|
||||
name="secret"
|
||||
type="text"
|
||||
type="password"
|
||||
minLength={2}
|
||||
required
|
||||
autoFocus
|
||||
placeholder="Auth secret"
|
||||
css={{ flexGrow: 1 }}
|
||||
formAction={authPath({ provider: "dev" })}
|
||||
onKeyDown={(event) => {
|
||||
const form = event.currentTarget.form;
|
||||
if (event.key === "Enter" && form) {
|
||||
form.action = action;
|
||||
form.submit();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button>Login</Button>
|
||||
<Button type="submit" formAction={action}>
|
||||
Login
|
||||
</Button>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<BrandButton
|
||||
onClick={() => setIsSecretLoginOpen(true)}
|
||||
icon={<CommitIcon size={22} />}
|
||||
<Button
|
||||
onClick={() => setShow(true)}
|
||||
color="neutral"
|
||||
css={{ height: theme.spacing[15] }}
|
||||
>
|
||||
Login with Secret
|
||||
</BrandButton>
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
@ -2,24 +2,20 @@ import {
|
||||
AccessibleIcon,
|
||||
css,
|
||||
Grid,
|
||||
Link,
|
||||
Text,
|
||||
theme,
|
||||
buttonStyle,
|
||||
} from "@webstudio-is/design-system";
|
||||
import { WebstudioIcon } from "@webstudio-is/icons";
|
||||
import { buttonStyle } from "~/auth/brand-button";
|
||||
|
||||
const pageStyle = css({
|
||||
position: "fixed",
|
||||
justifyItems: "center",
|
||||
alignContent: "start",
|
||||
inset: 0,
|
||||
background: `
|
||||
radial-gradient(65.88% 47.48% at 50% 50%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%),
|
||||
linear-gradient(0deg, rgba(255, 255, 255, 0) 49.46%, rgba(255, 255, 255, 0.33) 100%),
|
||||
linear-gradient(180deg, rgba(255, 174, 60, 0) 0%, rgba(230, 60, 254, 0.33) 100%),
|
||||
radial-gradient(211.58% 161.63% at 3.13% 100%, rgba(255, 174, 60, 0.3) 0%, rgba(227, 53, 255, 0) 100%),
|
||||
radial-gradient(107.1% 32.15% at 92.96% 5.04%, rgba(53, 255, 182, 0.2) 0%, rgba(74, 78, 250, 0.2) 100%), #EBFFFC;
|
||||
`,
|
||||
background: theme.colors.brandBackgroundDashboard,
|
||||
paddingTop: "10vh",
|
||||
});
|
||||
|
||||
export const ErrorMessage = ({
|
||||
@ -33,14 +29,16 @@ export const ErrorMessage = ({
|
||||
};
|
||||
}) => {
|
||||
return (
|
||||
<Grid className={pageStyle()} justify={"center"} gap={9}>
|
||||
<div />
|
||||
<Grid className={pageStyle()} justify={"center"} gap={6}>
|
||||
<AccessibleIcon label="Logo">
|
||||
<WebstudioIcon size="60" />
|
||||
</AccessibleIcon>
|
||||
<div />
|
||||
<div />
|
||||
<Text
|
||||
css={{
|
||||
fontSize: theme.spacing[21],
|
||||
lineHeight: 1,
|
||||
}}
|
||||
variant={"bigTitle"}
|
||||
>
|
||||
@ -50,37 +48,53 @@ export const ErrorMessage = ({
|
||||
<Grid
|
||||
css={{
|
||||
justifyItems: "center",
|
||||
mx: theme.spacing[10],
|
||||
maxWidth: 800,
|
||||
marginInline: theme.spacing[10],
|
||||
maxWidth: 600,
|
||||
}}
|
||||
gap={5}
|
||||
>
|
||||
<Text
|
||||
<Grid
|
||||
css={{
|
||||
display: "-webkit-box",
|
||||
"-webkit-line-clamp": 4,
|
||||
"-webkit-box-orient": "vertical",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
wordBreak: "break-word",
|
||||
background: theme.colors.backgroundPanel,
|
||||
padding: theme.spacing[7],
|
||||
borderRadius: theme.spacing[5],
|
||||
minWidth: theme.spacing[34],
|
||||
}}
|
||||
variant={"bigTitle"}
|
||||
gap="3"
|
||||
>
|
||||
{error.message ?? error.statusText}
|
||||
</Text>
|
||||
|
||||
{error.description && (
|
||||
<Text
|
||||
css={{ wordBreak: "break-word", whiteSpace: "pre-line" }}
|
||||
variant={"regular"}
|
||||
css={{
|
||||
display: "-webkit-box",
|
||||
"-webkit-line-clamp": 4,
|
||||
"-webkit-box-orient": "vertical",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
wordBreak: "break-word",
|
||||
}}
|
||||
variant="brandSectionTitle"
|
||||
userSelect="text"
|
||||
>
|
||||
{error.description}
|
||||
{error.message ?? error.statusText}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
<a href="/" className={buttonStyle()}>
|
||||
{error.description && (
|
||||
<Text
|
||||
css={{ wordBreak: "break-word", whiteSpace: "pre-line" }}
|
||||
userSelect="text"
|
||||
variant="brandRegular"
|
||||
>
|
||||
{error.description}
|
||||
</Text>
|
||||
)}
|
||||
</Grid>
|
||||
<Link
|
||||
href="/"
|
||||
className={buttonStyle()}
|
||||
color="contrast"
|
||||
underline="none"
|
||||
>
|
||||
Go Home
|
||||
</a>
|
||||
</Link>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
|
||||
@ -768,7 +768,7 @@
|
||||
"type": "color"
|
||||
},
|
||||
"dashboard": {
|
||||
"value": "#ededed",
|
||||
"value": "radial-gradient(65.88% 47.48% at 50% 50%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%),linear-gradient(0deg, rgba(255, 255, 255, 0) 49.46%, rgba(255, 255, 255, 0.33) 100%), linear-gradient(180deg, rgba(255, 174, 60, 0) 0%, rgba(230, 60, 254, 0.33) 100%),radial-gradient(211.58% 161.63% at 3.13% 100%, rgba(255, 174, 60, 0.3) 0%, rgba(227, 53, 255, 0) 100%), radial-gradient(107.1% 32.15% at 92.96% 5.04%, rgba(53, 255, 182, 0.2) 0%, rgba(74, 78, 250, 0.2) 100%), #EBFFFC;",
|
||||
"type": "color"
|
||||
},
|
||||
"regular-button-selected": {
|
||||
|
||||
@ -467,7 +467,8 @@ export const color = {
|
||||
brandBackgroundPublishedMain: "#39fbbb",
|
||||
brandBackgroundGradient: "linear-gradient(180deg, #e63cfe 0%, #ffae3c 100%)",
|
||||
brandBackgroundPublishedContrast: "#ebfffc",
|
||||
brandBackgroundDashboard: "#ededed",
|
||||
brandBackgroundDashboard:
|
||||
"radial-gradient(65.88% 47.48% at 50% 50%, #FFFFFF 0%, #ffffff00 100%),linear-gradient(0deg, #ffffff00 49.46%, #ffffff54 100%), linear-gradient(180deg, #ffae3c00 0%, #e63cfe54 100%),radial-gradient(211.58% 161.63% at 3.13% 100%, #ffae3c4d 0%, #e335ff00 100%), radial-gradient(107.1% 32.15% at 92.96% 5.04%, #35ffb633 0%, #4a4efa33 100%), #EBFFFC;",
|
||||
brandBackgroundRegularButtonSelected:
|
||||
"linear-gradient(180deg, #bffeec 0%, #fbfff6 100%)",
|
||||
brandBackgroundCtaButton: "linear-gradient(135deg, #4a4efa 0%, #bd2fdb 100%)",
|
||||
|
||||
@ -1,6 +1,24 @@
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11 9.18195V13.0547H16.3818C16.1455 14.3001 15.4363 15.3547 14.3727 16.0638L17.6181 18.582C19.509 16.8366 20.5999 14.2729 20.5999 11.2275C20.5999 10.5184 20.5363 9.83654 20.4181 9.18205L11 9.18195Z" fill="#4285F4"/>
|
||||
<path d="M5.39555 12.9035L4.66358 13.4638L2.07263 15.4819C3.71808 18.7455 7.09056 21.0001 10.9996 21.0001C13.6996 21.0001 15.9632 20.1092 17.6177 18.582L14.3723 16.0638C13.4814 16.6638 12.345 17.0274 10.9996 17.0274C8.39963 17.0274 6.19061 15.2729 5.39964 12.9092L5.39555 12.9035Z" fill="#34A853"/>
|
||||
<path d="M2.07265 6.51837C1.39087 7.86377 1 9.38197 1 11.0001C1 12.6183 1.39087 14.1365 2.07265 15.4819C2.07265 15.4909 5.39998 12.9001 5.39998 12.9001C5.19998 12.3001 5.08177 11.6637 5.08177 11C5.08177 10.3363 5.19998 9.69998 5.39998 9.09998L2.07265 6.51837Z" fill="#FBBC05"/>
|
||||
<path d="M10.9998 4.98182C12.4726 4.98182 13.7816 5.49089 14.8271 6.47272L17.6907 3.60912C15.9543 1.99097 13.6999 1 10.9998 1C7.09076 1 3.71808 3.24545 2.07263 6.51819L5.39986 9.10001C6.19072 6.73635 8.39984 4.98182 10.9998 4.98182Z" fill="#EA4335"/>
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M14.7199 8.1591C14.7199 7.66274 14.6753 7.18546 14.5926 6.72728H7.99988V9.43819H11.7672C11.6017 10.31 11.1053 11.0482 10.3608 11.5446V13.3073H12.6326C13.9562 12.0855 14.7199 10.2909 14.7199 8.1591Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M7.99995 15C9.88995 15 11.4745 14.3764 12.6327 13.3073L10.3609 11.5446C9.73722 11.9646 8.94176 12.2191 7.99995 12.2191C6.17995 12.2191 4.63358 10.9909 4.07995 9.33637H1.75085V11.1436C2.90267 13.4282 5.26358 15 7.99995 15Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M4.08 9.33001C3.94 8.91001 3.85727 8.46455 3.85727 8.00001C3.85727 7.53546 3.94 7.09001 4.08 6.67001V4.86274H1.75091C1.27364 5.80455 1 6.86728 1 8.00001C1 9.13274 1.27364 10.1955 1.75091 11.1373L3.56455 9.72455L4.08 9.33001Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M7.99995 3.78728C9.03085 3.78728 9.94722 4.14365 10.679 4.83092L12.6836 2.82637C11.4681 1.69365 9.88995 1.00001 7.99995 1.00001C5.26358 1.00001 2.90267 2.57183 1.75085 4.86274L4.07995 6.67001C4.63358 5.01547 6.17995 3.78728 7.99995 3.78728Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.2 KiB |
18
packages/icons/src/__generated__/components.tsx
generated
18
packages/icons/src/__generated__/components.tsx
generated
@ -2527,7 +2527,7 @@ export const GoogleIcon: IconComponent = forwardRef(
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 22 22"
|
||||
viewBox="0 0 16 16"
|
||||
width={size}
|
||||
height={size}
|
||||
fill={fill}
|
||||
@ -2535,20 +2535,20 @@ export const GoogleIcon: IconComponent = forwardRef(
|
||||
ref={forwardedRef}
|
||||
>
|
||||
<path
|
||||
fill="#4285F4"
|
||||
d="M11 9.182v3.873h5.382a4.611 4.611 0 0 1-2.01 3.009l3.246 2.518c1.891-1.745 2.982-4.31 2.982-7.355 0-.709-.064-1.39-.182-2.045H11Z"
|
||||
fill="currentColor"
|
||||
d="M14.72 8.16c0-.497-.045-.975-.127-1.433H8v2.711h3.767a3.228 3.228 0 0 1-1.406 2.107v1.762h2.272c1.323-1.222 2.087-3.016 2.087-5.148Z"
|
||||
/>
|
||||
<path
|
||||
fill="#34A853"
|
||||
d="m5.396 12.903-.732.56-2.591 2.019C3.718 18.746 7.09 21 11 21c2.7 0 4.963-.89 6.618-2.418l-3.246-2.518c-.89.6-2.027.963-3.372.963-2.6 0-4.81-1.754-5.6-4.118l-.004-.006Z"
|
||||
fill="currentColor"
|
||||
d="M8 15c1.89 0 3.475-.624 4.633-1.693l-2.272-1.762c-.624.42-1.42.674-2.361.674-1.82 0-3.366-1.228-3.92-2.883H1.75v1.808A6.993 6.993 0 0 0 8 15Z"
|
||||
/>
|
||||
<path
|
||||
fill="#FBBC05"
|
||||
d="M2.073 6.518A9.877 9.877 0 0 0 1 11c0 1.618.39 3.136 1.073 4.482C2.073 15.49 5.4 12.9 5.4 12.9c-.2-.6-.318-1.236-.318-1.9 0-.664.118-1.3.318-1.9L2.073 6.518Z"
|
||||
fill="currentColor"
|
||||
d="M4.08 9.33A4.195 4.195 0 0 1 3.857 8c0-.465.083-.91.223-1.33V4.863H1.75A6.914 6.914 0 0 0 1 8c0 1.133.274 2.195.75 3.137l1.815-1.412.515-.395Z"
|
||||
/>
|
||||
<path
|
||||
fill="#EA4335"
|
||||
d="M11 4.982c1.473 0 2.782.509 3.827 1.49l2.864-2.863C15.954 1.991 13.7 1 11 1 7.09 1 3.718 3.245 2.073 6.518L5.4 9.1c.79-2.364 3-4.118 5.6-4.118Z"
|
||||
fill="currentColor"
|
||||
d="M8 3.787c1.03 0 1.947.357 2.679 1.044l2.005-2.005C11.468 1.694 9.89 1 8 1a6.988 6.988 0 0 0-6.25 3.863L4.08 6.67C4.634 5.015 6.18 3.787 8 3.787Z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
2
packages/icons/src/__generated__/svg.ts
generated
2
packages/icons/src/__generated__/svg.ts
generated
@ -188,7 +188,7 @@ export const GearIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" vie
|
||||
|
||||
export const GithubIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" fill="currentColor" width="100%" height="100%" style="display: block;"><path fill-rule="evenodd" d="M11 1C5.475 1 1 5.475 1 11a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.288-.6-1.175-1.025-1.413-.35-.187-.85-.65-.013-.662.788-.013 1.35.725 1.538 1.025.9 1.512 2.337 1.087 2.912.825.088-.65.35-1.088.638-1.338-2.225-.25-4.55-1.112-4.55-4.937 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.274.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0 0 21 11c0-5.525-4.475-10-10-10Z" clip-rule="evenodd"/></svg>`;
|
||||
|
||||
export const GoogleIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" fill="currentColor" width="100%" height="100%" style="display: block;"><path fill="#4285F4" d="M11 9.182v3.873h5.382a4.611 4.611 0 0 1-2.01 3.009l3.246 2.518c1.891-1.745 2.982-4.31 2.982-7.355 0-.709-.064-1.39-.182-2.045H11Z"/><path fill="#34A853" d="m5.396 12.903-.732.56-2.591 2.019C3.718 18.746 7.09 21 11 21c2.7 0 4.963-.89 6.618-2.418l-3.246-2.518c-.89.6-2.027.963-3.372.963-2.6 0-4.81-1.754-5.6-4.118l-.004-.006Z"/><path fill="#FBBC05" d="M2.073 6.518A9.877 9.877 0 0 0 1 11c0 1.618.39 3.136 1.073 4.482C2.073 15.49 5.4 12.9 5.4 12.9c-.2-.6-.318-1.236-.318-1.9 0-.664.118-1.3.318-1.9L2.073 6.518Z"/><path fill="#EA4335" d="M11 4.982c1.473 0 2.782.509 3.827 1.49l2.864-2.863C15.954 1.991 13.7 1 11 1 7.09 1 3.718 3.245 2.073 6.518L5.4 9.1c.79-2.364 3-4.118 5.6-4.118Z"/></svg>`;
|
||||
export const GoogleIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path fill="currentColor" d="M14.72 8.16c0-.497-.045-.975-.127-1.433H8v2.711h3.767a3.228 3.228 0 0 1-1.406 2.107v1.762h2.272c1.323-1.222 2.087-3.016 2.087-5.148Z"/><path fill="currentColor" d="M8 15c1.89 0 3.475-.624 4.633-1.693l-2.272-1.762c-.624.42-1.42.674-2.361.674-1.82 0-3.366-1.228-3.92-2.883H1.75v1.808A6.993 6.993 0 0 0 8 15Z"/><path fill="currentColor" d="M4.08 9.33A4.195 4.195 0 0 1 3.857 8c0-.465.083-.91.223-1.33V4.863H1.75A6.914 6.914 0 0 0 1 8c0 1.133.274 2.195.75 3.137l1.815-1.412.515-.395Z"/><path fill="currentColor" d="M8 3.787c1.03 0 1.947.357 2.679 1.044l2.005-2.005C11.468 1.694 9.89 1 8 1a6.988 6.988 0 0 0-6.25 3.863L4.08 6.67C4.634 5.015 6.18 3.787 8 3.787Z"/></svg>`;
|
||||
|
||||
export const GrowIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4 8h4M6 10 4 8l2-2M12 8H8M10 6l2 2-2 2M2 14V2M14.003 14V2"/></svg>`;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user