diff --git a/src/components/MonthlyNews/MonthlyNews.tsx b/src/components/MonthlyNews/MonthlyNews.tsx index a5befe0fc9cde841914ef405895bc3055ef34810..b3481458a6b30f488c0f11c093ab2fc4af15d2c6 100644 --- a/src/components/MonthlyNews/MonthlyNews.tsx +++ b/src/components/MonthlyNews/MonthlyNews.tsx @@ -34,7 +34,9 @@ const MonthlyNews: React.FC<MonthlyNewsProps> = ({ 'undo redo | bold italic underline | alignleft aligncenter alignright | code | ecolyoLink', }} value={header} - onEditorChange={(newHeader) => handleChange(newHeader, 'header')} + onEditorChange={(newHeader: string) => + handleChange(newHeader, 'header') + } /> <div className="subtitle"> <p className="title">Citation du mois</p> @@ -102,7 +104,7 @@ const MonthlyNews: React.FC<MonthlyNewsProps> = ({ }, }} value={quote} - onEditorChange={(newQuote) => handleChange(newQuote, 'quote')} + onEditorChange={(newQuote: string) => handleChange(newQuote, 'quote')} /> <div className="buttons"> <button className="btnCancel" onClick={onCancel}> diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx index 48b9084a78a3bcb8295f9ba6babd294e3062bfa5..a41458c379d7249eb4181c7c12c5d1e080de9e62 100644 --- a/src/components/Navbar/Navbar.tsx +++ b/src/components/Navbar/Navbar.tsx @@ -1,10 +1,7 @@ import React, { useContext } from 'react' import { NavLink } from 'react-router-dom' -import logo from '../../assets/icons/ecolyo-logo.svg' -import login from '../../assets/icons/login.svg' import editing from '../../assets/icons/editing.svg' import settings from '../../assets/icons/settings.svg' - import './navbar.scss' import { UserContext } from '../../hooks/userContext' import { useAuth } from '../../hooks/useAuth' @@ -14,8 +11,6 @@ const Navbar: React.FC = () => { const { logoutUser } = useAuth() return ( <div className="navbar"> - <img src={logo} alt="Ecolyo logo" className="logo" /> - <div className="menu-list"> <NavLink to={'/editing'} activeClassName="active"> <img src={editing} className="navbar-icon" alt="Editing icon" /> @@ -25,15 +20,12 @@ const Navbar: React.FC = () => { <img src={settings} className="navbar-icon" alt="Settings icon" /> Paramètres </NavLink> - {user ? ( - <p onClick={logoutUser}>Logout</p> - ) : ( - <NavLink to="/login" activeClassName="active"> - <img src={login} className="navbar-icon" alt="Login icon" /> - Login - </NavLink> - )} </div> + {user && ( + <button className="btnValid logButton" onClick={logoutUser}> + Logout + </button> + )} </div> ) } diff --git a/src/components/Navbar/navbar.scss b/src/components/Navbar/navbar.scss index b39e88051c760d2db58c9944698ee1b1c42d5057..78f8bc8988fac89c94c76cbae9026bed80928374 100644 --- a/src/components/Navbar/navbar.scss +++ b/src/components/Navbar/navbar.scss @@ -16,12 +16,6 @@ align-items: center; justify-content: center; } - .burger, - .logo { - width: 2rem; - left: 1rem; - position: absolute; - } a { text-decoration: none; display: flex; @@ -41,4 +35,10 @@ .navbar-icon { width: 1.3rem; } + .logButton { + width: 100px; + min-width: 0; + margin-left: auto; + margin-top: 0; + } } diff --git a/src/components/Poll/Poll.tsx b/src/components/Poll/Poll.tsx index 4ed6d85b09d050b36b0ce639869c355430a85baf..25c71fb08287e6decc8071a9171656bdad06ec2e 100644 --- a/src/components/Poll/Poll.tsx +++ b/src/components/Poll/Poll.tsx @@ -1,70 +1,69 @@ -import { Editor } from '@tinymce/tinymce-react' -import React, { ChangeEvent } from 'react' -import { ContentItems } from '../Editing/Editing' -import './poll.scss' - -interface PollProps { - question: string - link: string - handleChange: ( - value: string, - type: 'header' | 'quote' | 'question' | 'link' - ) => void - onSave: () => Promise<void> - onCancel: () => void - onDelete: (target: ContentItems) => void -} -const Poll: React.FC<PollProps> = ({ - question, - link, - handleChange, - onSave, - onCancel, - onDelete, -}: PollProps) => { - const handleChangeLink = (e: ChangeEvent<HTMLInputElement>) => { - handleChange(e.target.value, 'link') - } - - return ( - <div className="poll"> - <h2>Ajouter un sondage</h2> - - <p className="title">Lien</p> - <input - type="text" - className="input-dark" - value={link} - onChange={handleChangeLink} - /> - <div> - <p className="title">Question</p> - - <Editor - init={{ - menubar: false, - toolbar: - 'undo redo | bold italic underline | alignleft aligncenter alignright | code | ecolyoLink', - }} - value={question} - onEditorChange={(newQuestion, editor) => - handleChange(newQuestion, 'question') - } - /> - <div className="buttons"> - <button className="btnCancel" onClick={onCancel}> - Annuler - </button> - <button className="btnValid" onClick={onSave}> - Sauvegarder - </button> - <button className="btnDelete" onClick={() => onDelete('poll')}> - Supprimer - </button> - </div> - </div> - </div> - ) -} - -export default Poll +import { Editor } from '@tinymce/tinymce-react' +import React, { ChangeEvent } from 'react' +import { ContentItems } from '../Editing/Editing' +import './poll.scss' + +interface PollProps { + question: string + link: string + handleChange: ( + value: string, + type: 'header' | 'quote' | 'question' | 'link' + ) => void + onSave: () => Promise<void> + onCancel: () => void + onDelete: (target: ContentItems) => void +} +const Poll: React.FC<PollProps> = ({ + question, + link, + handleChange, + onSave, + onCancel, + onDelete, +}: PollProps) => { + const handleChangeLink = (e: ChangeEvent<HTMLInputElement>) => { + handleChange(e.target.value, 'link') + } + + return ( + <div className="poll"> + <h2>Ajouter un sondage</h2> + <p className="title">Lien</p> + <input + type="text" + className="input-dark" + value={link} + onChange={handleChangeLink} + /> + <div> + <p className="title">Question</p> + + <Editor + init={{ + menubar: false, + toolbar: + 'undo redo | bold italic underline | alignleft aligncenter alignright | code | ecolyoLink', + }} + value={question} + onEditorChange={(newQuestion: string) => + handleChange(newQuestion, 'question') + } + /> + <div className="buttons"> + <button className="btnCancel" onClick={onCancel}> + Annuler + </button> + <button className="btnValid" onClick={onSave}> + Sauvegarder + </button> + <button className="btnDelete" onClick={() => onDelete('poll')}> + Supprimer + </button> + </div> + </div> + </div> + ) +} + +export default Poll