dqnid/full-stack-archetype
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(login): login form styled

Browse Source
This commit is contained in:
Daniel Heras Quesada
2024-08-27 22:02:38 +02:00
parent 2c4c0e00a8
commit e000dbc92e
5 changed files with 178 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
front/package-lock.json generated
View File

@@ -20,6 +20,7 @@
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.2.3",
"prettier": "3.3.3",
"sass": "^1.77.8",
"typescript": "^5"
}
@@ -3495,6 +3496,21 @@
"node": ">= 0.8.0"
}
},
"node_modules/prettier": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
"integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
"dev": true,
"bin": {
"prettier": "bin/prettier.cjs"
},
"engines": {
"node": ">=14"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/pretty-format": {
"version": "3.8.0",
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz",

1
front/package.json
View File

@@ -21,6 +21,7 @@
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.2.3",
"prettier": "3.3.3",
"sass": "^1.77.8",
"typescript": "^5"
}

147
front/src/modules/auth/components/log-in/log-in.module.scss
View File

@@ -1,87 +1,109 @@
.container {
max-width: 20em;
max-width: 50em;
height: fit-content;
display: flex;
flex-direction: column;
gap: 1em;
flex-direction: row;
font-size: 1.6rem;
font-size: 1.4rem;
overflow: hidden;
border-radius: 0.4rem;
background-image: linear-gradient(
16deg,
rgba(var(--color-primary-rgb), 0.3),
rgba(var(--color-primary-rgb), 0.2)
);
border: 2px solid rgba(var(--color-grey-90-rgb), 0.4);
background-color: var(--color-white);
background-color: rgba(var(--color-test), 0.4);
.heading {
font-size: 3.4rem;
text-align: center;
background-color: #e5e5f7;
.side__illustration {
display: flex;
flex-direction: column;
justify-content: space-between;
max-width: 16em;
box-sizing: content-box;
opacity: 0.8;
text-shadow: rgba(var(--color-grey-10), 0.3);
padding: 2rem 2rem;
padding: 2rem 4rem 2rem;
--s: 100px;
--c1: rgba(var(--color-grey-70-rgb), 0.4);
--c2: var(--color-white);
--s: 80px;
background:
repeating-conic-gradient(
from 30deg,
#0000 0 120deg,
var(--color-white) 0 180deg
)
calc(0.5 * var(--s)) calc(0.5 * var(--s) * 0.577),
repeating-conic-gradient(
from 30deg,
var(--color-grey-30) 0 60deg,
var(--color-grey-90) 0 120deg,
var(--color-white) 0 180deg
);
background-size: var(--s) calc(var(--s) * 0.577);
--_g: #0000 90deg, var(--c1) 0;
background: conic-gradient(from 90deg at 2px 2px, var(--_g)),
conic-gradient(from 90deg at 1px 1px, var(--_g)), var(--c2);
background-size:
var(--s) var(--s),
calc(var(--s) / 5) calc(var(--s) / 5);
background-position: -2px -2px;
& > h1 {
font-size: 3.4rem;
font-weight: bold;
text-align: left;
padding-right: 2rem;
& > span {
position: relative;
&::after {
content: "";
position: absolute;
height: 40%;
width: 110%;
top: 70%;
left: -5%;
z-index: -1;
background-color: var(--color-primary);
}
}
}
& > h4 {
font-size: 1.4rem;
text-align: right;
padding-left: 2rem;
}
}
.form {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5em;
gap: 1em;
padding: 1.5em 4rem 2.5em;
padding: 3.5em 2.5em;
background: rgba(var(--color-grey-90-rgb), 0.4);
&__group {
display: flex;
flex-direction: column;
font-size: 1.6rem;
gap: 0.2em;
}
&__label {
font-size: inherit;
margin-left: 0.8em;
color: var(--color-grey-10);
color: rgba(var(--color-grey-60-rgb), 0.8);
transition: all 0.3s;
}
&__input {
font-size: inherit;
padding: 0.8em;
color: var(--color-foreground);
background: rgba(var(--color-primary-rgb), 0.5);
background-color: transparent;
border: none;
border-bottom: 2px solid transparent;
border-bottom: 2px solid var(--color-grey-70);
border-radius: 2px;
transition: all 0.2s;
&::placeholder {
color: var(--color-grey-10);
opacity: 1;
color: rgba(var(--color-grey-60-rgb), 0.8);
}
&:focus {
@@ -97,21 +119,30 @@
}
&__actions {
width: fit-content;
margin-top: 1em;
width: 100%;
display: flex;
flex-direction: column;
gap: 0.5em;
& .submit__button {
font-size: 2rem;
all: unset;
width: fit-content;
font-size: 1.4rem;
text-transform: uppercase;
padding: 0.5em 1em;
border-radius: 2px;
align-self: center;
border: none;
color: var(--color-foreground);
background-color: var(--color-primary);
color: var(--color-black);
border: 2px solid var(--color-primary);
transition: all 0.2s;
&:hover {
color: var(--color-white);
background-color: var(--color-primary);
cursor: pointer;
transform: translateY(-2px);
box-shadow: 0 2px 6px rgba(var(--color-primary-dark-rgb), 0.4);
@@ -122,5 +153,27 @@ color: var(--color-foreground);
}
}
}
&__message {
opacity: 0;
height: 2.5rem;
align-self: flex-start;
transition: opacity 0.3s ease-in;
&--wrong {
color: var(--color-error);
}
}
}
}
.form--error {
.form__input {
border-bottom: 2px solid var(--color-error);
}
.form__message {
opacity: 1;
}
}

23
front/src/modules/auth/components/log-in/log-in.widget.tsx
View File

@@ -49,8 +49,16 @@ export const LogInWidget: React.FC<LogInWidgetsProps> = ({ afterSuccess }) => {
return (
<div className={styles.container}>
<h1 className={styles["heading"]}>Log in</h1>
<form className={styles.form} onSubmit={submit}>
<div className={styles["side__illustration"]}>
<h1>
Welcome to this <span>page!</span>
</h1>
<h4>Use your credentials to log-in</h4>
</div>
<form
className={`${styles.form} ${loginStatus === "error" && styles["form--error"]} ${loginStatus === "check" && styles["form--loading"]}`}
onSubmit={submit}
>
<div className={`${styles["form__group"]}`}>
<label htmlFor="username" className={styles["form__label"]}>
username
@@ -78,8 +86,17 @@ export const LogInWidget: React.FC<LogInWidgetsProps> = ({ afterSuccess }) => {
/>
</div>
<div className={styles["form__actions"]}>
<div className={styles["form__message"]}>
{loginStatus === "error" ? (
<p className={styles["form__message--wrong"]}>
Wrong credentials, try again
</p>
) : (
<>Loading...</>
)}
</div>
<button type="submit" className={styles["submit__button"]}>
Submit
Log-in
</button>
</div>
</form>

59
front/src/styles/main.scss
View File

@@ -8,34 +8,57 @@
--color-grey-10: #171717;
--color-grey-30: #242424;
--color-grey-60: #363636;
--color-grey-90: #bbbbbb;
--color-grey-90-rgb: 153, 153, 153;
--color-grey-70: #bbbbbb;
--color-grey-90: #e9ecef;
--color-primary: #274c77;
--color-primary-light: #a3cef1;
--color-primary-dark: #052f5f;
--color-error: #e63946;
// -------- RGB variants -------- //
--color-white-rgb: 250, 250, 250;
--color-black-rgb: 16, 16, 16;
--color-grey-10-rgb: 23, 23, 23;
--color-grey-30-rgb: 36, 36, 36;
--color-grey-60-rgb: 54, 54, 54;
--color-grey-70-rgb: 187, 187, 187;
--color-grey-90-rgb: 233, 236, 239;
--color-primary: #9c89b8;
--color-primary-light: #b8bedd;
--color-primary-dark: #56577d;
--color-primary-rgb: 156, 137, 184;
--color-primary-light-rgb: 184, 190, 221;
--color-primary-dark-rgb: 86, 87, 125;
--color-primary-rgb: 39, 76, 119;
--color-primary-light-rgb: 163, 206, 241;
--color-primary-dark-rgb: 5, 47, 95;
}
[data-theme="dark"] {
--color-white: #101010;
--color-black: #fafafa;
--color-grey-dark: #dee2e6;
--color-grey-medium: #adb5bd;
--color-grey-light: #495057;
--color-grey-dark-rgb: 222, 226, 230;
--color-grey-10: #bbbbbb;
--color-grey-30: #363636;
--color-grey-60: #242424;
--color-grey-10: #e9ecef;
--color-grey-30: #bbbbbb;
--color-grey-70: #242424;
--color-grey-60: #363636;
--color-grey-90: #171717;
--color-primary: #274c77;
--color-primary-light: #052f5f;
--color-primary-dark: #a3cef1;
// -------- RGB variants -------- //
--color-white-rgb: 16, 16, 16;
--color-black-rgb: 250, 250, 250;
--color-grey-10-rgb: 233, 236, 239;
--color-grey-30-rgb: 187, 187, 187;
--color-grey-60-rgb: 54, 54, 54;
--color-grey-70-rgb: 36, 36, 36;
--color-grey-90-rgb: 23, 23, 23;
--color-grey-10-rgb: 153, 153, 153;
--color-primary-rgb: 39, 76, 119;
--color-primary-light-rgb: 5, 47, 95;
--color-primary-dark-rgb: 163, 206, 241;
}
*,