diff --git a/package.json b/package.json
index f3679fc7700947ca896b274bafdb70e68f5b6927..d7c0caa0a9fa150fdca64dccd0bb31f0faaa40b4 100644
--- a/package.json
+++ b/package.json
@@ -53,9 +53,7 @@
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@tinymce/tinymce-react": "^3.12.6",
- "bulma": "^0.9.3",
"react": "^17.0.2",
- "react-datepicker": "^4.1.1",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
diff --git a/src/App.tsx b/src/App.tsx
index ed7869cca1cc27b3b8b83e62d411d7ad4f2dac5e..ecf842168b958ce4a1f87f34e0f8968f745a7325 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,11 +5,11 @@ import Routes from './components/Routes/Routes'
function App() {
return (
- <Layout>
- <BrowserRouter>
+ <BrowserRouter>
+ <Layout>
<Routes />
- </BrowserRouter>
- </Layout>
+ </Layout>
+ </BrowserRouter>
)
}
diff --git a/src/assets/icons/ecolyo-logo.svg b/src/assets/icons/ecolyo-logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..621cc029f36519cd39cb0fe7374214cc212b1f63
--- /dev/null
+++ b/src/assets/icons/ecolyo-logo.svg
@@ -0,0 +1,6 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M255.999 481.889C474.502 396.445 457.52 274.97 446.199 93.788C376.006 90.6997 313.738 69.0814 255.999 33.0508C198.26 69.0814 135.993 90.6997 65.8002 93.788C54.4788 274.97 37.4967 396.445 255.999 481.889Z" fill="#1B1C22"/>
+<path d="M256 0L241.197 9.23729C187.065 43.0172 129.418 62.9075 64.5724 65.7606L39.4287 66.8668L37.8561 92.0332C37.3892 99.5066 36.9038 106.942 36.4212 114.334C31.228 193.881 26.3573 268.489 48.2119 332.782C73.408 406.904 131.859 463.456 245.82 508.019L256 512V481.887C46.0642 399.793 53.5098 284.438 64.4576 114.823C64.9043 107.901 65.3569 100.89 65.8008 93.7859C135.993 90.6976 198.261 69.0793 256 33.0487V0Z" fill="#FFC600"/>
+<path d="M256 0L270.803 9.23729C324.935 43.0172 382.582 62.9075 447.428 65.7606L472.571 66.8668L474.144 92.0332C474.611 99.5066 475.096 106.942 475.579 114.334C480.772 193.881 485.643 268.489 463.788 332.782C438.592 406.904 380.141 463.456 266.18 508.019L256 512V481.887C465.936 399.793 458.49 284.438 447.542 114.823C447.096 107.901 446.643 100.89 446.199 93.7859C376.007 90.6976 313.739 69.0793 256 33.0487V0Z" fill="#DB8300"/>
+<path d="M186.954 176.453H196.887C200.854 176.453 204.659 178.014 207.464 180.791C210.269 183.569 211.845 187.337 211.845 191.265V341.625H171.996V191.265C171.996 187.337 173.572 183.569 176.377 180.791C179.183 178.014 182.987 176.453 186.954 176.453ZM255.971 249.669H265.904C269.871 249.669 273.676 251.229 276.481 254.007C279.286 256.785 280.862 260.552 280.862 264.481V341.625H241.013V264.481C241.013 260.552 242.589 256.785 245.394 254.007C248.199 251.229 252.004 249.669 255.971 249.669ZM329.101 221.346H339.034C343.001 221.346 346.806 222.907 349.611 225.685C352.416 228.463 353.992 232.23 353.992 236.158V341.625H314.143V236.158C314.143 232.23 315.719 228.463 318.524 225.685C321.329 222.907 325.134 221.346 329.101 221.346Z" fill="#FFC600"/>
+</svg>
diff --git a/src/assets/icons/logo.png b/src/assets/icons/logo.png
deleted file mode 100644
index 6e9f08491e80c9b5b19817c83ab15140f032525a..0000000000000000000000000000000000000000
Binary files a/src/assets/icons/logo.png and /dev/null differ
diff --git a/src/components/DateSelector/DateSelector.tsx b/src/components/DateSelector/DateSelector.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9cce4ff2ffc8d632929916ab2ab36727fb656b5f
--- /dev/null
+++ b/src/components/DateSelector/DateSelector.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import DatePicker from 'react-datepicker'
+import './dateSelector.scss'
+interface DateSelectorProps {
+ date: string
+ setDate: React.Dispatch<React.SetStateAction<string>>
+}
+
+const DateSelector: React.FC<DateSelectorProps> = ({
+ date,
+ setDate,
+}: DateSelectorProps) => {
+ const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ setDate(e.target.value)
+ }
+ return (
+ <div className="date-selector">
+ <div className="text">Edition du mois de : </div>
+ <input type="month" value={date} onChange={handleOnChange}></input>
+ </div>
+ )
+}
+
+export default DateSelector
diff --git a/src/components/DateSelector/dateSelector.scss b/src/components/DateSelector/dateSelector.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e9204bccea8fd0907859608f0c9c9090fc1b62c1
--- /dev/null
+++ b/src/components/DateSelector/dateSelector.scss
@@ -0,0 +1,29 @@
+@import '../../styles/config/colors';
+.date-selector {
+ display: flex;
+ align-items: center;
+ height: 4rem;
+ .text {
+ span {
+ color: $gold;
+ font-weight: 600;
+ margin: 0 0.4rem;
+ }
+ }
+ input[type='month'] {
+ display: block;
+ background: $text-grey;
+ border: none;
+ color: $dark-light;
+ padding: 0 0.5rem;
+ margin: 0 0.4rem;
+ font-size: 1rem;
+ max-width: 200px;
+ fill: $gold;
+ border-radius: 5px;
+ height: 30px;
+ &::-webkit-calendar-picker-indicator {
+ color: $gold;
+ }
+ }
+}
diff --git a/src/components/Editing/Editing.tsx b/src/components/Editing/Editing.tsx
index 68490cdd4d3156ff639758d0cf3e17afc2dc0aca..03528b3e559ff67e137ac476d37841933315fa31 100644
--- a/src/components/Editing/Editing.tsx
+++ b/src/components/Editing/Editing.tsx
@@ -1,32 +1,13 @@
-import React, { useState } from 'react'
-import DatePicker from 'react-datepicker'
+import React, { useEffect, useState } from 'react'
import 'react-datepicker/dist/react-datepicker.css'
import { Editor } from '@tinymce/tinymce-react'
+import DateSelector from '../DateSelector/DateSelector'
+import './editing.scss'
const Editing: React.FC = () => {
- const [date, setDate] = useState<Date>(new Date())
+ const [date, setDate] = useState<string>('')
const [header, setHeader] = useState<string>('')
const [quote, setQuote] = useState<string>('')
- const months = [
- 'Janvier',
- 'Février',
- 'Mars',
- 'Avril',
- 'Mai',
- 'Juin',
- 'Juillet',
- 'Août',
- 'Septembre',
- 'Octobre',
- 'Novembre',
- 'Décembre',
- ]
- const locale = {
- localize: {
- month: (n: number) => months[n],
- },
- formatLong: {},
- }
async function handleSave() {
try {
@@ -35,8 +16,8 @@ const Editing: React.FC = () => {
{
method: 'POST',
body: JSON.stringify({
- month: date.getMonth(),
- year: date.getFullYear(),
+ month: date.split('-')[0],
+ year: date.split('-')[1],
header: header,
quote: quote,
}),
@@ -53,64 +34,61 @@ const Editing: React.FC = () => {
}
}
+ useEffect(() => {
+ const today: string = new Date().toISOString()
+ const formatted: string = today.split('-').slice(0, 2).join('-')
+ setDate(formatted)
+ }, [])
return (
<>
- <DatePicker
- selected={date}
- onChange={(date: React.SetStateAction<Date>) => setDate(date)}
- dateFormat="MM/yyyy"
- showMonthYearPicker
- showFullMonthYearPicker
- locale={locale}
- />
- <section className="hero is-link">
- <div className="hero-body">
- <p className="title">Partie Marion</p>
- <p className="subtitle">
- Édition des informations et de la citation du mois
- </p>
- </div>
- </section>
-
- <section className="hero is-small is-info">
- <div className="hero-body">
- <p className="title">Informations du mois</p>
- <p className="subtitle"></p>
- </div>
- </section>
-
- <div>
- <Editor
- initialValue=""
- init={{
- menubar: false,
- toolbar:
- 'undo redo | bold italic underline | alignleft aligncenter alignright | code',
- }}
- value={header}
- onEditorChange={(newHeader, editor) => setHeader(newHeader)}
- />
+ <div className="header">
+ <p className="title">
+ Édition des informations et de la citation du mois
+ </p>
+ </div>
+ <div className="content">
+ <DateSelector date={date} setDate={setDate} />
<section className="hero is-small is-info">
<div className="hero-body">
- <p className="title">Citation du mois</p>
+ <p className="title">Informations du mois</p>
<p className="subtitle"></p>
</div>
</section>
- <Editor
- initialValue=""
- init={{
- menubar: false,
- toolbar:
- 'undo redo | bold italic underline | alignleft aligncenter alignright | code',
- }}
- onEditorChange={(newQuote, editor) => setQuote(newQuote)}
- />
+ <div>
+ <Editor
+ initialValue=""
+ init={{
+ menubar: false,
+ toolbar:
+ 'undo redo | bold italic underline | alignleft aligncenter alignright | code',
+ }}
+ value={header}
+ onEditorChange={(newHeader, editor) => setHeader(newHeader)}
+ />
+
+ <section className="hero is-small is-info">
+ <div className="hero-body">
+ <p className="title">Citation du mois</p>
+ <p className="subtitle"></p>
+ </div>
+ </section>
- <button className="button is-link" onClick={handleSave}>
- Sauvegarder
- </button>
+ <Editor
+ initialValue=""
+ init={{
+ menubar: false,
+ toolbar:
+ 'undo redo | bold italic underline | alignleft aligncenter alignright | code',
+ }}
+ onEditorChange={(newQuote, editor) => setQuote(newQuote)}
+ />
+
+ <button className="button is-link" onClick={handleSave}>
+ Sauvegarder
+ </button>
+ </div>
</div>
</>
)
diff --git a/src/components/Editing/editing.scss b/src/components/Editing/editing.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ea763643b8a42bff837e56f05b60709e9b605043
--- /dev/null
+++ b/src/components/Editing/editing.scss
@@ -0,0 +1,14 @@
+.header {
+ background: radial-gradient(
+ 74.83% 76.97% at 50% 13.64%,
+ #343641 0%,
+ #1b1c22 100%
+ );
+ height: 5rem;
+ box-shadow: 0px 5px 5px rgb(0 0 0 / 20%), 0px 3px 14px rgb(0 0 0 / 12%),
+ 0px 8px 10px rgb(0 0 0 / 14%);
+ padding: 1.7rem;
+}
+.content {
+ padding: 1rem;
+}
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index 72e3772cece6ead1f6064b3f20c9f59aa13e3741..eb7decbb65402ae327731714d158ef113ea47da9 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -10,9 +10,10 @@ interface LayoutProps {
const Layout: React.FC<LayoutProps> = ({ children }: LayoutProps) => {
return (
<div className={styles.root}>
- <Navbar />
- <div className={styles.wrapper}>
+ <div className={styles.menuWrapper}>
<Menu />
+ </div>
+ <div className={styles.wrapper}>
<main>{children}</main>
</div>
</div>
diff --git a/src/components/Layout/layout.module.scss b/src/components/Layout/layout.module.scss
index 3f0e2345974cbe408b1bb7d5df4ffe2fae34a2fd..c95548b12acdfe127f2b490284f5dffa8ae78bba 100644
--- a/src/components/Layout/layout.module.scss
+++ b/src/components/Layout/layout.module.scss
@@ -1,14 +1,26 @@
+@import '../../styles/config/layout';
+@import '../../styles/config/colors';
.root {
display: flex;
- flex-direction: column;
min-height: 100vh;
+ box-sizing: border-box;
+}
+.menuWrapper {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: $menu-width;
+ height: 100vh;
}
-
.wrapper {
+ flex: 1;
display: flex;
flex-direction: row;
- flex: 1;
+ margin-left: $menu-width;
+ box-shadow: 0px 5px 5px rgb(0 0 0 / 20%), 0px 3px 14px rgb(0 0 0 / 12%),
+ 0px 8px 10px rgb(0 0 0 / 14%);
+ background: $dark-light;
main {
- flex: 1;
+ width: 100%;
}
}
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index 1013998cd04523f1030858c71536205684f74add..65b188b6366e4196d9bce724ec270f29e16769d9 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -1,21 +1,36 @@
import React from 'react'
import routes from '../../constants/routes.json'
+import logo from '../../assets/icons/ecolyo-logo.svg'
+import './menu.scss'
+import { NavLink, Router, useHistory } from 'react-router-dom'
const Menu: React.FC = () => {
// TODO class is-active if link is activated
+ const history = useHistory()
return (
- <aside className="menu">
- <ul className="menu-list">
+ <nav className="menu">
+ <div className="logo-container">
+ <img src={logo} alt="Ecolyo logo" className="logo" />
+ </div>
+ <div className="menu-list">
{routes.map((route: any, index: number) => {
return (
- <li key={index}>
- <a href={route.path}>{route.label}</a>
- </li>
+ <NavLink key={index} to={route.path} activeClassName="active">
+ {route.label}
+ </NavLink>
)
})}
- </ul>
- </aside>
+ </div>
+ <div className="administration">
+ <NavLink to="/login" activeClassName="active">
+ Login
+ </NavLink>
+ <NavLink to="/login" activeClassName="active">
+ Signup
+ </NavLink>
+ </div>
+ </nav>
)
}
diff --git a/src/components/Menu/menu.scss b/src/components/Menu/menu.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f2ac09fb048930394db468e9ad66976d0317f52e
--- /dev/null
+++ b/src/components/Menu/menu.scss
@@ -0,0 +1,37 @@
+@import '../../styles/config/colors';
+.menu {
+ display: flex;
+ flex-direction: column;
+ height: inherit;
+ padding: 1rem;
+ box-shadow: 0px 5px 5px rgb(0 0 0 / 20%), 0px 3px 14px rgb(0 0 0 / 12%),
+ 0px 8px 10px rgb(0 0 0 / 14%);
+ border-top: unset;
+ border-right: unset;
+ background-color: $grey-dark;
+ .logo-container {
+ display: flex;
+ }
+ .logo {
+ margin: auto;
+ max-width: 4rem;
+ }
+ a {
+ display: block;
+ padding: 0.5rem 0;
+ text-decoration: none;
+ color: $text-grey;
+ &:hover {
+ color: $gold;
+ }
+ }
+ .active {
+ color: $gold;
+ }
+ .menu-list {
+ margin-top: 1.5rem;
+ }
+ .administration {
+ margin-top: auto;
+ }
+}
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index d57154afe67e3304b4f74c7507e7d04b792b6ba1..3c941759860a67d26d8a0a9dfd22c1c9d3942c35 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -1,28 +1,29 @@
import React from 'react'
-import logo from '../../assets/icons/logo.png'
+import './navbar.scss'
const Navbar: React.FC = () => {
return (
- <nav className="navbar" role="navigation" aria-label="main navigation">
- <div className="navbar-brand">
- <img src={logo} alt="Ecolyo logo" />
- <div className="navbar-menu">
- <div className="navbar-start"></div>
- <div className="navbar-end">
- <div className="navbar-item">
- <div className="buttons">
- <a href="/" className="button is-primary">
- <strong>Sign up</strong>
- </a>
- <a href="/" className="button is-light">
- Log in
- </a>
- </div>
- </div>
- </div>
- </div>
- </div>
- </nav>
+ // <nav className="navbar" role="navigation" aria-label="main navigation">
+ // <div className="navbar-brand">
+ // <div className="navbar-menu">
+ // <div className="navbar-start"></div>
+ // <div className="navbar-end">
+ // <div className="navbar-item">
+ // <div className="buttons">
+ // <a href="/" className="button is-primary">
+ // <strong>Sign up</strong>
+ // </a>
+ // <a href="/" className="button is-light">
+ // Log in
+ // </a>
+ // </div>
+ // </div>
+ // </div>
+ // </div>
+ // </div>
+ // </nav>
+
+ <></>
)
}
diff --git a/src/components/Navbar/navbar.scss b/src/components/Navbar/navbar.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ffb90dc183498428bdff4ee2f3165f9efe9273ed
--- /dev/null
+++ b/src/components/Navbar/navbar.scss
@@ -0,0 +1,11 @@
+@import '../../styles/config/colors';
+.navbar {
+ height: 6rem;
+ box-shadow: 0px 5px 5px rgb(0 0 0 / 20%), 0px 3px 14px rgb(0 0 0 / 12%),
+ 0px 8px 10px rgb(0 0 0 / 14%);
+ background: radial-gradient(
+ 74.83% 76.97% at 50% 13.64%,
+ #343641 0%,
+ #1b1c22 100%
+ );
+}
diff --git a/src/styles/config/_colors.scss b/src/styles/config/_colors.scss
index cbb90227bff2305e21e75d162e82d908b7791a11..de5a63a92fdd3b3a7f973c83621ba93f716ff453 100644
--- a/src/styles/config/_colors.scss
+++ b/src/styles/config/_colors.scss
@@ -1 +1,10 @@
$primary-color: #fff;
+$dark-background: radial-gradient(
+ 60.65% 30.62% at 50% 3.13%,
+ #2a2b30 0%,
+ #1b1c22 100%
+);
+$gold: #e3b82a;
+$dark-light: #1b1c22;
+$grey-dark: #25262b;
+$text-grey: #e0e0e0;
diff --git a/src/styles/config/_layout.scss b/src/styles/config/_layout.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8a3357ec5066f89eb9df355dfa62c54ec189b291
--- /dev/null
+++ b/src/styles/config/_layout.scss
@@ -0,0 +1 @@
+$menu-width: 8rem;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 69bb90e0804fbd41aaefd47154e2821962bd1307..cf4aeb0bc3a85e37fa636030f69ad5db0b572d23 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,12 +1,19 @@
@import 'config/breakpoints';
@import 'config/colors';
@import 'config/typography';
+@import 'config/layout';
// To customize bulma variables, we set them before importing bulma
-@import 'bulma/bulma.sass';
+// @import 'bulma/bulma.sass';
* {
margin: 0;
padding: 0;
box-sizing: border-box;
+ color: $text-grey;
+}
+.title {
+ color: $gold;
+ font-weight: 600;
+ font-size: 1.3rem;
}