diff --git a/app/globals.scss b/app/globals.scss index f9dcdb7..9d39b0e 100644 --- a/app/globals.scss +++ b/app/globals.scss @@ -8,13 +8,14 @@ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + user-select: none; } body { --navSize: 60px; position: relative; - display: grid; - grid-template-rows: calc(100svh - var(--navSize)) var(--navSize); + display: flex; + flex-direction: column; width: 100svw; height: 100svh; background-color: #d94253; diff --git a/app/page.jsx b/app/page.jsx index 96ca375..deae3a3 100644 --- a/app/page.jsx +++ b/app/page.jsx @@ -52,9 +52,7 @@ const Home = () => { height: '100%', }} mapboxAccessToken={process.env.MAPBOX_TOKEN} - mapStyle={ - 'mapbox://styles/unepicier/cm0o1bhc400gd01qkeubpb2za' - } + mapStyle={'mapbox://styles/mapbox/standard'} preserveDrawingBuffer > diff --git a/app/settings/page.jsx b/app/settings/page.jsx new file mode 100644 index 0000000..d8d1c3b --- /dev/null +++ b/app/settings/page.jsx @@ -0,0 +1,73 @@ +// --------------------------------------------------------------------------------------------------------------------- +//! Imports +// --------------------------------------------------------------------------------------------------------------------- + +// --------------------------------------------------- Components ------------------------------------------------------ +import Link from 'next/link'; +import Input from '@/components/Input/Input'; +// --------------------------------------------------------------------------------------------------------------------- + +// ------------------------------------------------- Assets & Styles --------------------------------------------------- +import ArrowRightIcon from '@/assets/ArrowRightIcon'; +import './styles.scss'; +// --------------------------------------------------------------------------------------------------------------------- + +const Settings = () => { + return ( +
+
+ + + +

Éditer le profil

+
+ +
+ + + +
+ + +
+
+ +
+ + +
+ ); +}; + +export default Settings; diff --git a/app/settings/styles.scss b/app/settings/styles.scss new file mode 100644 index 0000000..2b22227 --- /dev/null +++ b/app/settings/styles.scss @@ -0,0 +1,93 @@ +.settings { + flex-grow: 1; + display: flex; + flex-direction: column; + gap: 20px; + width: 100%; + background-color: #d94253; + + & > .header { + display: grid; + grid-template-columns: 25px 1fr; + align-items: center; + gap: 15px; + padding: 15px; + color: #ffffff; + box-shadow: 0 0 6px rgba(255, 255, 255, 0.2); + + & > .backButton { + display: flex; + justify-content: center; + align-items: center; + } + + & > .title { + font-size: 1.2rem; + } + } + + & > .form { + display: grid; + grid-template-rows: repeat(2, 1fr); + align-items: center; + gap: 20px; + padding: 20px; + padding-bottom: 0; + + & > .buttonsContainer { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + + & > .submitButton, + & > .resetButton { + display: flex; + justify-content: center; + align-items: center; + gap: 5px; + padding: 10px; + border: 1px solid #ffffff; + border-radius: 5px; + background-color: #ffffff; + font-size: 1rem; + color: #d94253; + cursor: pointer; + } + + & > .resetButton { + background-color: #d94253; + color: #ffffff; + } + } + } + + & > .separator { + display: block; + margin: 20px auto; + width: 90%; + height: 1px; + background-color: rgb(254, 254, 250); + background: linear-gradient( + 90deg, + rgba(254, 254, 250, 0) 0%, + rgba(254, 254, 250, 1) 10%, + rgba(254, 254, 250, 1) 90%, + rgba(254, 254, 250, 0) 100% + ); + } + + & > .deleteButton { + display: flex; + justify-content: center; + align-items: center; + gap: 5px; + margin: 0 20px; + padding: 10px; + border: 1px solid #d80135; + border-radius: 5px; + background-color: #d80135; + font-size: 1rem; + color: #ffffff; + cursor: pointer; + } +} diff --git a/app/statistics/hooks/useData.js b/app/statistics/hooks/useData.js new file mode 100644 index 0000000..730f911 --- /dev/null +++ b/app/statistics/hooks/useData.js @@ -0,0 +1,10 @@ +import { useState } from 'react'; + +export const useData = () => { + const [settingsOpened, setSettingsOpened] = useState(false); + + return { + settingsOpened, + setSettingsOpened, + }; +}; diff --git a/app/account/page.jsx b/app/statistics/page.jsx similarity index 74% rename from app/account/page.jsx rename to app/statistics/page.jsx index 50206b6..2dd52fc 100644 --- a/app/account/page.jsx +++ b/app/statistics/page.jsx @@ -1,3 +1,5 @@ +'use client'; + // --------------------------------------------------------------------------------------------------------------------- //! Imports // --------------------------------------------------------------------------------------------------------------------- @@ -9,11 +11,10 @@ import SlotCounter from 'react-slot-counter'; // ------------------------------------------------- Assets & Styles --------------------------------------------------- import SettingsIcon from '@/assets/SettingsIcon'; -import ArrowRightIcon from '@/assets/ArrowRightIcon'; import './styles.scss'; // --------------------------------------------------------------------------------------------------------------------- -const Account = () => { +const Statistics = () => { return (
@@ -31,28 +32,6 @@ const Account = () => {
-
- -

Followers

-
-
- -

Suivis

-
{

Loves total

-
- - -
); }; -export default Account; +export default Statistics; diff --git a/app/account/styles.scss b/app/statistics/styles.scss similarity index 95% rename from app/account/styles.scss rename to app/statistics/styles.scss index 0691dd5..3a26263 100644 --- a/app/account/styles.scss +++ b/app/statistics/styles.scss @@ -1,4 +1,6 @@ .accountContainer { + flex-grow: 1; + position: relative; display: flex; flex-direction: column; align-items: center; @@ -84,7 +86,7 @@ align-items: stretch; gap: 2px; width: 100%; - box-shadow: 0 0 6px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 6px rgba(255, 255, 255, 0.2); & > .button { display: flex; diff --git a/app/styles.scss b/app/styles.scss index f6f3e47..632f250 100644 --- a/app/styles.scss +++ b/app/styles.scss @@ -1,5 +1,6 @@ .mapContainer { position: relative; + flex-grow: 1; & > .dropLove { z-index: 1; @@ -16,7 +17,7 @@ border-radius: 300px; background-color: #d94253; color: #ffffff; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); + box-shadow: 0 2px 6px rgba(255, 255, 255, 0.6); } } diff --git a/assets/AccountIcon.jsx b/assets/EyeIcon.jsx similarity index 52% rename from assets/AccountIcon.jsx rename to assets/EyeIcon.jsx index 836b616..33e736b 100644 --- a/assets/AccountIcon.jsx +++ b/assets/EyeIcon.jsx @@ -1,4 +1,4 @@ -const AccountIcon = (props) => { +const EyeIcon = (props) => { return ( { {...props} > - { ); }; -export default AccountIcon; +export default EyeIcon; diff --git a/assets/EyeSlashIcon.jsx b/assets/EyeSlashIcon.jsx new file mode 100644 index 0000000..4f4a06b --- /dev/null +++ b/assets/EyeSlashIcon.jsx @@ -0,0 +1,15 @@ +const EyeSlashIcon = (props) => { + return ( + + + + + ); +}; + +export default EyeSlashIcon; diff --git a/assets/PeopleIcon.jsx b/assets/PeopleIcon.jsx deleted file mode 100644 index 589c4f9..0000000 --- a/assets/PeopleIcon.jsx +++ /dev/null @@ -1,43 +0,0 @@ -const PeopleIcon = (props) => { - return ( - - - - - - - ); -}; - -export default PeopleIcon; diff --git a/assets/StatsIcon.jsx b/assets/StatsIcon.jsx new file mode 100644 index 0000000..09d4b38 --- /dev/null +++ b/assets/StatsIcon.jsx @@ -0,0 +1,59 @@ +const StatsIcon = (props) => { + return ( + + + + + + + ); +}; + +export default StatsIcon; diff --git a/components/Input/Input.jsx b/components/Input/Input.jsx new file mode 100644 index 0000000..8805924 --- /dev/null +++ b/components/Input/Input.jsx @@ -0,0 +1,88 @@ +'use client'; + +// --------------------------------------------------------------------------------------------------------------------- +//! Imports +// --------------------------------------------------------------------------------------------------------------------- + +// ------------------------------------------------------ React -------------------------------------------------------- +import { forwardRef, useState } from 'react'; +// --------------------------------------------------------------------------------------------------------------------- + +// ------------------------------------------------- Assets & Styles --------------------------------------------------- +import EyeSlashIcon from '@/assets/EyeSlashIcon'; +import EyeIcon from '@/assets/EyeIcon'; +import './styles.scss'; +// --------------------------------------------------------------------------------------------------------------------- + +const Input = forwardRef(function InputComponent( + { + type = 'text', + label, + name, + value, + defaultValue, + autoComplete, + required = false, + onChange, + onKeyUp, + onKeyDown, + }, + ref +) { + const [isFocused, setIsFocused] = useState( + defaultValue || value ? true : false + ); + const [passwordVisibility, setPasswordVisibility] = useState(false); + + const defaultOnBlur = (ev) => { + if (ev.currentTarget.value != '') { + return; + } + + setIsFocused(false); + }; + + return ( +
+ setIsFocused(true)} + onBlur={defaultOnBlur} + /> + + {type == 'password' && ( + + )} +
+ ); +}); + +export default Input; diff --git a/components/Input/styles.scss b/components/Input/styles.scss new file mode 100644 index 0000000..a8ab716 --- /dev/null +++ b/components/Input/styles.scss @@ -0,0 +1,50 @@ +.inputContainer { + position: relative; + font-size: 1.1rem; + + & > .inputLabel { + position: absolute; + top: 48%; + left: 10px; + transform: translateY(-50%); + padding: 0 4px; + background-color: #d94253; + font-size: 1em; + font-weight: 300; + color: #ffffff; + transition: top 0.3s ease, font-size 0.3s ease; + pointer-events: none; + + &.focused { + top: 0; + font-size: 0.8em; + } + } + + & > .input { + padding: 10px 20px; + width: 100%; + border: 1px solid #ffffff; + border-radius: 5px; + background-color: #d94253; + font-size: 1em; + font-weight: 300; + color: #ffffff; + outline: none; + } + + & > .passwordToggleButton { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + padding: 7px; + width: calc(20px + 1em); + height: 100%; + border: none; + background-color: transparent; + color: #ffffff; + } +} diff --git a/components/Navbar/config.js b/components/Navbar/config.js index a8f8faa..93750a1 100644 --- a/components/Navbar/config.js +++ b/components/Navbar/config.js @@ -1,7 +1,6 @@ -import AccountIcon from '@/assets/AccountIcon'; +import StatsIcon from '@/assets/StatsIcon'; import HeartIcon from '@/assets/HeartIcon'; import MapIcon from '@/assets/MapIcon'; -import PeopleIcon from '@/assets/PeopleIcon'; const config = [ { @@ -15,14 +14,9 @@ const config = [ icon: HeartIcon, }, { - title: 'Partenaire', - link: '/partner', - icon: PeopleIcon, - }, - { - title: 'Profil', - link: '/account', - icon: AccountIcon, + title: 'Stats', + link: '/statistics', + icon: StatsIcon, }, ]; diff --git a/components/Navbar/styles.scss b/components/Navbar/styles.scss index 6b6c365..8c448ad 100644 --- a/components/Navbar/styles.scss +++ b/components/Navbar/styles.scss @@ -7,7 +7,7 @@ width: 100svw; height: var(--navSize); background-color: #d94253; - box-shadow: 0 0 6px rgba(0, 0, 0, 0.6); + box-shadow: 0 0 6px rgba(255, 255, 255, 0.6); & > .navButton { position: relative; @@ -39,7 +39,7 @@ width: 100%; height: 100%; border-radius: 50%; - box-shadow: 0 0 6px rgba(0, 0, 0, 0.6); + box-shadow: 0 0 6px rgba(255, 255, 255, 0.6); clip-path: inset(-6px -6px 42px -6px); } }