Remove datePicker and bulma dependencies + add style

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",

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>
   )
 }
 

src/assets/icons/ecolyo-logo.svg

+<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>

src/components/DateSelector/DateSelector.tsx

+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

src/components/DateSelector/dateSelector.scss

+@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;
+    }
+  }
+}

src/components/Editing/Editing.tsx

-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>
     </>
   )

src/components/Editing/editing.scss

+.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;
+}

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>

src/components/Layout/layout.module.scss

+@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%;
   }
 }

src/components/Menu/Menu.tsx

 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>
   )
 }
 

src/components/Menu/menu.scss

+@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;
+  }
+}

src/components/Navbar/Navbar.tsx

 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>
+
+    <></>
   )
 }
 

src/components/Navbar/navbar.scss

+@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%
+  );
+}

src/styles/config/_colors.scss

 $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;

src/styles/config/_layout.scss

+$menu-width: 8rem;

src/styles/index.scss

 @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;
 }