diff --git a/front/package-lock.json b/front/package-lock.json index 7780ac3..5f7486a 100644 --- a/front/package-lock.json +++ b/front/package-lock.json @@ -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", diff --git a/front/package.json b/front/package.json index 7791ad5..3c3e4ae 100644 --- a/front/package.json +++ b/front/package.json @@ -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" } diff --git a/front/src/modules/auth/components/log-in/log-in.module.scss b/front/src/modules/auth/components/log-in/log-in.module.scss index 10e29d2..818e25c 100644 --- a/front/src/modules/auth/components/log-in/log-in.module.scss +++ b/front/src/modules/auth/components/log-in/log-in.module.scss @@ -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; } } diff --git a/front/src/modules/auth/components/log-in/log-in.widget.tsx b/front/src/modules/auth/components/log-in/log-in.widget.tsx index 02cfaf8..e9465e2 100644 --- a/front/src/modules/auth/components/log-in/log-in.widget.tsx +++ b/front/src/modules/auth/components/log-in/log-in.widget.tsx @@ -49,8 +49,16 @@ export const LogInWidget: React.FC = ({ afterSuccess }) => { return (
-

Log in

-
+
+

+ Welcome to this page! +

+

Use your credentials to log-in

+
+
+
+ {loginStatus === "error" ? ( +

+ Wrong credentials, try again +

+ ) : ( + <>Loading... + )} +
diff --git a/front/src/styles/main.scss b/front/src/styles/main.scss index 498a983..b2b5df3 100644 --- a/front/src/styles/main.scss +++ b/front/src/styles/main.scss @@ -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; } *,