mirror of
https://github.com/Sonny93/my-links.git
synced 2025-12-08 14:43:24 +00:00
feat: redesign login page
This commit is contained in:
Sonny
BIN
public/login-bg-final.webp
Normal file
BIN
public/login-bg-final.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 209 KiB |
BIN
public/login-bg.jpg
Normal file
BIN
public/login-bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 MiB |
BIN
public/logo-light.png
Normal file
BIN
public/logo-light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
47
public/logo-light.svg
Normal file
47
public/logo-light.svg
Normal file
@@ -0,0 +1,47 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg viewBox="0 0 500 165" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
|
||||
<g id="tight-bounds" transform="matrix(1.264159, 0, 0, 1.265787, 0, 0)" style="" bx:origin="0.499856 0.5">
|
||||
<svg viewBox="0 0 395.52 130.3536553275838" height="130.3536553275838" width="395.52">
|
||||
<g>
|
||||
<svg viewBox="0 0 609.8756479073379 200.99999999999997" height="130.3536553275838" width="395.52" transform="matrix(1.0990717554193026, 0, 0, 1.0219297409057617, -1464.3746338148903, -341.48333740234375)" bx:origin="-0.010232 -0.035228">
|
||||
<g>
|
||||
<rect width="8.33878379307346" height="200.99999999999997" x="222.27426506352492" y="0" stroke-width="0" fill-opacity="1" class="rect-o-0" data-fill-palette-color="primary" rx="1%" id="o-0" data-palette-color="#005aa5" style="fill: rgb(72, 162, 255);" stroke="transparent"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,252.44232580181685,0.4999999999999858)">
|
||||
<svg viewBox="0 0 357.43332210552103 200" height="200" width="357.43332210552103">
|
||||
<g id="textblocktransform">
|
||||
<svg viewBox="0 0 357.43332210552103 200" height="200" width="357.43332210552103" id="textblock">
|
||||
<g>
|
||||
<svg viewBox="0 0 357.43332210552103 200" height="200" width="357.43332210552103">
|
||||
<g transform="matrix(1,0,0,1,0,0)">
|
||||
<svg width="357.43332210552103" viewBox="3.7404773235321045 -36.008331298828125 142.35955810546875 76.29547882080078" height="200" data-palette-color="#005aa5">
|
||||
<svg/>
|
||||
<svg/>
|
||||
<g class="wordmark-text-0" data-fill-palette-color="primary" id="text-0">
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M39.3-3.35v0c-0.033 0.967-0.4 1.783-1.1 2.45-0.7 0.667-1.533 0.983-2.5 0.95-0.967-0.033-1.783-0.4-2.45-1.1-0.667-0.7-0.983-1.533-0.95-2.5v0c0.067-2.167 0.033-8.567-0.1-19.2v0c-2.467 3.1-4.9 6.417-7.3 9.95v0c-0.567 0.8-1.317 1.29-2.25 1.47-0.933 0.187-1.8 0.013-2.6-0.52v0c-0.1-0.067-0.183-0.133-0.25-0.2v0c-0.367-0.233-0.683-0.517-0.95-0.85v0l-7.7-9.7c0.033 0.067 0.043 3.257 0.03 9.57-0.02 6.32-0.03 9.497-0.03 9.53v0c0 0.967-0.34 1.79-1.02 2.47-0.687 0.687-1.513 1.03-2.48 1.03-0.967 0-1.79-0.343-2.47-1.03-0.687-0.68-1.03-1.503-1.03-2.47v0c0-1.4 0.007-3.75 0.02-7.05 0.02-3.3 0.03-5.85 0.03-7.65 0-1.8-0.033-4.033-0.1-6.7v0c-0.067-2.367-0.183-4.817-0.35-7.35v0c-0.067-0.967 0.217-1.817 0.85-2.55 0.633-0.733 1.433-1.133 2.4-1.2v0c0.5-0.033 0.967 0.033 1.4 0.2v0c0.933 0.133 1.683 0.583 2.25 1.35v0l11.1 13.95c3.6-5 7.267-9.5 11-13.5v0c0.7-1.2 1.733-1.783 3.1-1.75v0c0.967 0.033 1.783 0.4 2.45 1.1 0.667 0.7 0.983 1.533 0.95 2.5v0c-0.1 3.167-0.1 8.007 0 14.52 0.1 6.52 0.117 11.28 0.05 14.28zM54.6-3.3v0c0-0.833-0.007-1.977-0.02-3.43-0.02-1.447-0.03-2.587-0.03-3.42v0-2.85l-5-8.3c-2.467-4.033-4.3-7.183-5.5-9.45v0c-0.467-0.833-0.567-1.71-0.3-2.63 0.267-0.913 0.827-1.603 1.68-2.07 0.847-0.467 1.73-0.567 2.65-0.3 0.913 0.267 1.603 0.833 2.07 1.7v0c1.1 1.967 3.6 6.183 7.5 12.65v0l2.7-4.2 5.7-8.6c0.5-0.8 1.217-1.317 2.15-1.55 0.933-0.233 1.81-0.093 2.63 0.42 0.813 0.52 1.337 1.247 1.57 2.18 0.233 0.933 0.083 1.817-0.45 2.65v0c-0.2 0.333-2.133 3.267-5.8 8.8v0c-1.967 2.967-3.517 5.45-4.65 7.45v0c0.033 0.767 0.05 2.45 0.05 5.05 0 2.6 0.017 4.5 0.05 5.7v0c0.033 0.967-0.283 1.8-0.95 2.5-0.667 0.7-1.483 1.067-2.45 1.1-0.967 0.033-1.8-0.283-2.5-0.95-0.7-0.667-1.067-1.483-1.1-2.45z" fill-rule="nonzero" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal; fill: rgb(72, 162, 255);" data-fill-palette-color="primary" stroke="none"/>
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M7.9 39.93v0c-1.133-0.033-2.05-0.5-2.75-1.4v0c-0.667-0.667-1.017-1.483-1.05-2.45v0c-0.033-3.4-0.1-8.217-0.2-14.45v0l-0.15-14.05c0-0.967 0.333-1.793 1-2.48 0.667-0.68 1.483-1.027 2.45-1.04 0.967-0.02 1.793 0.303 2.48 0.97 0.68 0.667 1.037 1.483 1.07 2.45v0l0.15 13.1 0.15 12.6c1.633 0 4.01-0.017 7.13-0.05 3.113-0.033 5.403-0.05 6.87-0.05v0c0.967 0 1.793 0.323 2.48 0.97 0.68 0.653 1.02 1.447 1.02 2.38 0 0.933-0.34 1.74-1.02 2.42-0.687 0.687-1.513 1.03-2.48 1.03v0c-1.1 0-3.95 0.017-8.55 0.05v0c-4.633 0.033-7.5 0.033-8.6 0zM34.5 39.98v0c-0.967 0-1.8-0.327-2.5-0.98-0.7-0.647-1.067-1.453-1.1-2.42v0c0-0.867 0.277-1.643 0.83-2.33 0.547-0.68 1.237-1.087 2.07-1.22v0c0.033-5.8 0.017-13.15-0.05-22.05v0c-0.8-0.167-1.467-0.567-2-1.2-0.533-0.633-0.8-1.383-0.8-2.25v0c0-0.967 0.35-1.783 1.05-2.45 0.7-0.667 1.533-1 2.5-1v0l5.65 0.05c0.967 0 1.783 0.35 2.45 1.05 0.667 0.7 1 1.533 1 2.5v0c0 0.833-0.273 1.567-0.82 2.2-0.553 0.633-1.247 1.033-2.08 1.2v0c0.1 8.767 0.133 16.033 0.1 21.8v0c0.833 0.133 1.527 0.517 2.08 1.15 0.547 0.633 0.837 1.367 0.87 2.2v0c0 0.967-0.323 1.8-0.97 2.5-0.653 0.7-1.463 1.067-2.43 1.1v0zM76.15 39.63v0c-1.3 0.233-2.383-0.167-3.25-1.2v0c-2.233-2.633-5.05-6.533-8.45-11.7v0c-3.7-5.233-6.317-8.783-7.85-10.65v0c0.033 1.333 0.117 4.29 0.25 8.87 0.133 4.587 0.2 8.397 0.2 11.43v0c0 0.967-0.34 1.79-1.02 2.47-0.687 0.687-1.513 1.03-2.48 1.03-0.967 0-1.79-0.343-2.47-1.03-0.687-0.68-1.03-1.503-1.03-2.47v0c0-2.933-0.093-7.677-0.28-14.23-0.18-6.547-0.203-11.503-0.07-14.87v0c0.033-0.967 0.4-1.783 1.1-2.45 0.7-0.667 1.533-0.983 2.5-0.95v0c0.467 0.033 0.917 0.133 1.35 0.3v0c0.633 0.2 1.183 0.567 1.65 1.1v0c0.567 0.7 1.483 1.807 2.75 3.32 1.267 1.52 2.217 2.663 2.85 3.43v0c1.867 1.933 4.633 5.5 8.3 10.7v0l2.4 3.45c0.1-7.733 0.117-14.017 0.05-18.85v0c0-0.967 0.333-1.793 1-2.48 0.667-0.68 1.483-1.027 2.45-1.04 0.967-0.02 1.793 0.303 2.48 0.97 0.68 0.667 1.037 1.483 1.07 2.45v0c0.033 4.533-0.017 14.183-0.15 28.95v0c-0.033 0.933-0.367 1.723-1 2.37-0.633 0.653-1.417 1.013-2.35 1.08zM109.85 38.83l-11.25-14.45-4.2 3.45c0.1 2.7 0.217 5.617 0.35 8.75v0c0.033 0.933-0.273 1.757-0.92 2.47-0.653 0.72-1.453 1.107-2.4 1.16-0.953 0.047-1.787-0.257-2.5-0.91-0.72-0.647-1.113-1.453-1.18-2.42v0c-0.5-10.267-0.683-20.267-0.55-30v0c0.033-0.967 0.393-1.783 1.08-2.45 0.68-0.667 1.503-0.993 2.47-0.98 0.967 0.02 1.783 0.37 2.45 1.05 0.667 0.687 1 1.513 1 2.48v0c-0.067 4.233-0.067 8.217 0 11.95v0c5.233-4.467 10.083-9.217 14.55-14.25v0c0.667-0.7 1.477-1.067 2.43-1.1 0.947-0.033 1.78 0.283 2.5 0.95 0.713 0.667 1.087 1.473 1.12 2.42 0.033 0.953-0.283 1.797-0.95 2.53v0c-3.267 3.733-6.6 7.15-10 10.25v0l11.5 14.8c0.6 0.733 0.833 1.583 0.7 2.55v0c-0.1 0.967-0.523 1.75-1.27 2.35-0.753 0.6-1.613 0.843-2.58 0.73-0.967-0.12-1.75-0.563-2.35-1.33zM132.85 40.28v0c-2.567 0.067-4.883-0.333-6.95-1.2-2.067-0.867-3.7-2.133-4.9-3.8-1.2-1.667-1.8-3.6-1.8-5.8v0c0-1.333 0.383-2.377 1.15-3.13 0.767-0.747 1.633-1.12 2.6-1.12v0c0.967 0 1.75 0.34 2.35 1.02 0.6 0.687 0.9 1.447 0.9 2.28v0c0 0.833 0.05 1.527 0.15 2.08 0.1 0.547 0.35 1.053 0.75 1.52v0c0.767 0.933 2.717 1.4 5.85 1.4v0c1.7 0 3.15-0.35 4.35-1.05 1.2-0.7 1.8-1.7 1.8-3v0c0-0.867-0.7-1.7-2.1-2.5v0c-0.967-0.533-3.117-1.367-6.45-2.5v0c-3.633-1.2-6.367-2.593-8.2-4.18-1.833-1.58-2.75-3.737-2.75-6.47v0c0-2.1 0.6-3.933 1.8-5.5 1.2-1.567 2.777-2.767 4.73-3.6 1.947-0.833 4.02-1.25 6.22-1.25v0c2.267-0.067 4.45 0.3 6.55 1.1 2.1 0.8 3.793 1.94 5.08 3.42 1.28 1.487 1.92 3.163 1.92 5.03v0c0 1-0.367 1.857-1.1 2.57-0.733 0.72-1.583 1.08-2.55 1.08v0c-0.667 0-1.317-0.2-1.95-0.6-0.633-0.4-1.033-0.9-1.2-1.5v0c-0.2-0.8-0.49-1.417-0.87-1.85-0.387-0.433-0.897-0.833-1.53-1.2v0c-0.833-0.467-1.583-0.8-2.25-1-0.667-0.2-1.617-0.3-2.85-0.3v0c-1.467 0-2.673 0.273-3.62 0.82-0.953 0.553-1.43 1.263-1.43 2.13v0c0 1.1 0.543 2 1.63 2.7 1.08 0.7 2.603 1.367 4.57 2v0c3.8 1.267 6.333 2.25 7.6 2.95v0c2.1 1.167 3.583 2.4 4.45 3.7 0.867 1.3 1.3 2.933 1.3 4.9v0c0 2.1-0.633 3.973-1.9 5.62-1.267 1.653-2.923 2.937-4.97 3.85-2.053 0.92-4.18 1.38-6.38 1.38z" fill-rule="nonzero" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal; fill: rgb(72, 162, 255);" data-fill-palette-color="primary" stroke="none"/>
|
||||
</g>
|
||||
</svg>
|
||||
</g>
|
||||
</svg>
|
||||
</g>
|
||||
</svg>
|
||||
</g>
|
||||
</svg>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,0,0.5)">
|
||||
<svg viewBox="0 0 200.44498811830644 199.99999999999997" height="199.99999999999997" width="200.44498811830644">
|
||||
<g>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0.11100006103515625 100 99.77799987792969" enable-background="new 0 0 100 100" height="199.99999999999997" width="200.44498811830644" class="icon-icon-0" data-fill-palette-color="accent" id="icon-0">
|
||||
<path d="M53.406 36.706L43.25 36.707c0 5.521 4.547 9.999 10.156 9.999 9.07 0 16.592 7.522 16.592 16.592H70c0 9.07-7.522 16.592-16.592 16.592H0l31 19.999v-5c0-2.762 2.238-5 5-5h17.408v0.003C68.07 89.892 80 77.962 80 63.298 80 48.636 68.07 36.706 53.406 36.706z" data-fill-palette-color="accent" style="fill: rgb(72, 162, 255);"/>
|
||||
<path d="M46.592 63.294l10.157-0.001c0-5.521-4.548-9.999-10.157-9.999C37.521 53.294 30 45.771 30 36.702c0-9.07 7.522-16.591 16.592-16.591H100l-31-20v5c0 2.762-2.238 5-5 5H46.592v-0.003C31.93 10.108 20 22.038 20 36.702h-0.002C19.998 51.364 31.928 63.294 46.592 63.294z" data-fill-palette-color="accent" style="fill: rgb(72, 162, 255);"/>
|
||||
</svg>
|
||||
</g>
|
||||
</svg>
|
||||
</g>
|
||||
</svg>
|
||||
</g>
|
||||
</svg>
|
||||
<rect width="395.52" height="130.3536553275838" fill="none" stroke="none" visibility="hidden"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.6 KiB |
@@ -1,4 +1,4 @@
|
||||
import { ReactNode, useId } from "react";
|
||||
import { ReactNode } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { GrClose } from "react-icons/gr";
|
||||
|
||||
@@ -23,9 +23,8 @@ export default function Modal({
|
||||
noHeader = false,
|
||||
padding = "1em 1.5em",
|
||||
}: ModalProps) {
|
||||
const modalId = useId();
|
||||
const handleWrapperClick = (event) =>
|
||||
event.target.classList?.[0] === styles["modal-wrapper"] && close();
|
||||
event.target.classList?.[0] === styles["modal-wrapper"] && close && close();
|
||||
|
||||
return createPortal(
|
||||
<motion.div
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
import { motion } from "framer-motion";
|
||||
import { ReactNode } from "react";
|
||||
import { CSSProperties, ReactNode } from "react";
|
||||
|
||||
export default function PageTransition({
|
||||
className,
|
||||
children,
|
||||
style = {},
|
||||
}: {
|
||||
className: string;
|
||||
className?: string;
|
||||
children: ReactNode;
|
||||
style?: CSSProperties;
|
||||
}) {
|
||||
return (
|
||||
<motion.div
|
||||
@@ -18,6 +20,7 @@ export default function PageTransition({
|
||||
stiffness: 260,
|
||||
damping: 20,
|
||||
}}
|
||||
style={style}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
import { Provider } from "next-auth/providers";
|
||||
import { getProviders, signIn } from "next-auth/react";
|
||||
import { NextSeo } from "next-seo";
|
||||
import Image from "next/image";
|
||||
import { FcGoogle } from "react-icons/fc";
|
||||
|
||||
import ButtonLink from "components/ButtonLink";
|
||||
import MessageManager from "components/MessageManager/MessageManager";
|
||||
import PageTransition from "components/PageTransition";
|
||||
|
||||
@@ -9,28 +12,39 @@ import PATHS from "constants/paths";
|
||||
import getUser from "lib/user/getUser";
|
||||
import { getSession } from "utils/session";
|
||||
|
||||
import styles from "styles/form.module.scss";
|
||||
import styles from "styles/login.module.scss";
|
||||
|
||||
interface SignInProps {
|
||||
providers: Provider[];
|
||||
}
|
||||
export default function SignIn({ providers }: SignInProps) {
|
||||
return (
|
||||
<PageTransition className={styles["form-container"]}>
|
||||
<NextSeo title="Authentification" />
|
||||
<h2>Se connecter</h2>
|
||||
<MessageManager info="Authentification requise pour utiliser ce service" />
|
||||
<div className={styles["providers"]}>
|
||||
{Object.values(providers).map(({ name, id }) => (
|
||||
<button
|
||||
onClick={() => signIn(id, { callbackUrl: PATHS.HOME })}
|
||||
key={id}
|
||||
>
|
||||
Continuer avec {name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</PageTransition>
|
||||
<div className={styles["login-page"]}>
|
||||
<PageTransition className={styles["login-container"]}>
|
||||
<NextSeo title="Authentification" />
|
||||
<div className={styles["image-wrapper"]}>
|
||||
<Image
|
||||
src={"/logo-light.png"}
|
||||
width={300}
|
||||
height={100}
|
||||
alt="MyLinks's logo"
|
||||
/>
|
||||
</div>
|
||||
<div className={styles["form-wrapper"]}>
|
||||
<h1>Authentification</h1>
|
||||
<MessageManager info="Authentification requise pour utiliser ce service" />
|
||||
{Object.values(providers).map(({ name, id }) => (
|
||||
<ButtonLink
|
||||
onClick={() => signIn(id, { callbackUrl: PATHS.HOME })}
|
||||
className={styles["login-button"]}
|
||||
key={id}
|
||||
>
|
||||
<FcGoogle size={"1.5em"} /> Continuer avec {name}
|
||||
</ButtonLink>
|
||||
))}
|
||||
</div>
|
||||
</PageTransition>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -47,6 +61,6 @@ export async function getServerSideProps({ req, res }) {
|
||||
|
||||
const providers = await getProviders();
|
||||
return {
|
||||
props: { providers },
|
||||
props: { session, providers },
|
||||
};
|
||||
}
|
||||
|
||||
@@ -10,6 +10,7 @@ $light-grey: #f0eef6;
|
||||
$grey: #bbb;
|
||||
|
||||
$black: #333;
|
||||
$black-blur: rgba(0, 0, 0, 0.3);
|
||||
|
||||
$light-red: #ffbabab9;
|
||||
$red: #d8000c;
|
||||
|
||||
@@ -66,12 +66,12 @@ li {
|
||||
|
||||
/* width */
|
||||
::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
height: 0.45em;
|
||||
width: 0.45em;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: $light-grey;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,44 +1,76 @@
|
||||
@import "keyframes.scss";
|
||||
@import "colors.scss";
|
||||
|
||||
.wrapper {
|
||||
.login-page {
|
||||
height: 100%;
|
||||
width: 480px;
|
||||
width: 100%;
|
||||
background: url("http://localhost:3000/login-bg-final.webp");
|
||||
background-size: cover;
|
||||
background-position: bottom;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
animation: fadein 250ms both;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
& .providers {
|
||||
height: fit-content;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
.login-container {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
background-color: $black-blur;
|
||||
backdrop-filter: blur(0.35em);
|
||||
padding: 2.5em;
|
||||
border-radius: 5px;
|
||||
border: 1px solid $white;
|
||||
display: flex;
|
||||
gap: 2.5em;
|
||||
flex-direction: row;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.form-wrapper {
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
& h1 {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.login-button {
|
||||
width: 100%;
|
||||
color: $dark-blue;
|
||||
background-color: $white;
|
||||
padding: 0.5em;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
gap: 0.25em;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media (max-width: calc(768px + 4em)) {
|
||||
.login-page {
|
||||
padding: 1em;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
width: auto;
|
||||
white-space: break-spaces;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
& button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
& .error {
|
||||
height: fit-content;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
font-size: 0.9em;
|
||||
color: $red;
|
||||
background-color: $light-red;
|
||||
padding: 10px;
|
||||
border-radius: 3px;
|
||||
animation: fadein 250ms both;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.login {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user