From ff951e8787904b623ec0c804fbdc38e076f26589 Mon Sep 17 00:00:00 2001
From: "guilhem.carron" <gcarron@grandlyon.com>
Date: Tue, 27 Jul 2021 10:15:58 +0200
Subject: [PATCH] Remove datePicker and bulma dependencies + add style
---
package.json | 2 -
src/App.tsx | 8 +-
src/assets/icons/ecolyo-logo.svg | 6 +
src/assets/icons/logo.png | Bin 7500 -> 0 bytes
src/components/DateSelector/DateSelector.tsx | 24 ++++
src/components/DateSelector/dateSelector.scss | 29 ++++
src/components/Editing/Editing.tsx | 124 +++++++-----------
src/components/Editing/editing.scss | 14 ++
src/components/Layout/Layout.tsx | 5 +-
src/components/Layout/layout.module.scss | 20 ++-
src/components/Menu/Menu.tsx | 29 +++-
src/components/Menu/menu.scss | 37 ++++++
src/components/Navbar/Navbar.tsx | 43 +++---
src/components/Navbar/navbar.scss | 11 ++
src/styles/config/_colors.scss | 9 ++
src/styles/config/_layout.scss | 1 +
src/styles/index.scss | 9 +-
17 files changed, 257 insertions(+), 114 deletions(-)
create mode 100644 src/assets/icons/ecolyo-logo.svg
delete mode 100644 src/assets/icons/logo.png
create mode 100644 src/components/DateSelector/DateSelector.tsx
create mode 100644 src/components/DateSelector/dateSelector.scss
create mode 100644 src/components/Editing/editing.scss
create mode 100644 src/components/Menu/menu.scss
create mode 100644 src/components/Navbar/navbar.scss
create mode 100644 src/styles/config/_layout.scss
diff --git a/package.json b/package.json
index f3679fc7..d7c0caa0 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 ed7869cc..ecf84216 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 00000000..621cc029
--- /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
GIT binary patch
literal 0
HcmV?d00001
literal 7500
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
WSUH!awdURc0000<MNUMnLSTa5-vFBc
diff --git a/src/components/DateSelector/DateSelector.tsx b/src/components/DateSelector/DateSelector.tsx
new file mode 100644
index 00000000..9cce4ff2
--- /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 00000000..e9204bcc
--- /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 68490cdd..03528b3e 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 00000000..ea763643
--- /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 72e3772c..eb7decbb 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 3f0e2345..c95548b1 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 1013998c..65b188b6 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 00000000..f2ac09fb
--- /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 d57154af..3c941759 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 00000000..ffb90dc1
--- /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 cbb90227..de5a63a9 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 00000000..8a3357ec
--- /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 69bb90e0..cf4aeb0b 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;
}
--
GitLab