feat: use EPFL style

dedis · Apr 3, 2024 · 755126d · 755126d
1 parent 739a78b
commit 755126d
Show file tree

Hide file tree

Showing 46 changed files with 111 additions and 86 deletions.
diff --git a/web/frontend/src/assets/EPFL_Logo_184X53.svg b/web/frontend/src/assets/EPFL_Logo_184X53.svg
diff --git a/web/frontend/src/components/buttons/DownloadButton.tsx b/web/frontend/src/components/buttons/DownloadButton.tsx
@@ -10,7 +10,7 @@ const DownloadButton: FC<DownloadButtonProps> = ({ exportData, children }) => {
   return (
     <button
       type="button"
-      className="flex my-2 mx-2 items-center px-4 py-2 border rounded-md text-sm font-medium hover:text-indigo-500"
+      className="flex my-2 mx-2 items-center px-4 py-2 border rounded-md text-sm font-medium hover:text-[#ff0000]"
       onClick={exportData}>
       <CloudDownloadIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
       {children}

diff --git a/web/frontend/src/components/modal/ConfirmModal.tsx b/web/frontend/src/components/modal/ConfirmModal.tsx
@@ -83,7 +83,7 @@ const ConfirmModal: FC<ConfirmModalProps> = ({
                   </button>
                   <button
                     type="button"
-                    className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+                    className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#ff0000] sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                     onClick={closeModal}
                     ref={cancelButtonRef}>
                     {t('no')}

diff --git a/web/frontend/src/components/modal/RedirectToModal.tsx b/web/frontend/src/components/modal/RedirectToModal.tsx
@@ -67,7 +67,7 @@ const RedirectToModal: FC<RedirectToModalProps> = ({
               <div className="mt-4">
                 <button
                   type="button"
-                  className="inline-flex justify-center px-4 py-2 text-sm font-medium text-white bg-indigo-500 border border-transparent rounded-md hover:bg-indigo-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-indigo-500"
+                  className="inline-flex justify-center px-4 py-2 text-sm font-medium text-white bg-[#ff0000] border border-transparent rounded-md hover:bg-[#ff0000] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[#ff0000]"
                   onClick={closeModal}>
                   {buttonRightText}
                 </button>

diff --git a/web/frontend/src/index.css b/web/frontend/src/index.css
@@ -4,12 +4,11 @@
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
-    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-family: Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: Arial, monospace;
 }
diff --git a/web/frontend/src/index.tsx b/web/frontend/src/index.tsx
@@ -121,7 +121,7 @@ const Loading: FC = () => {
         <div className="text-center pb-2">
           <svg
             role="status"
-            className="inline w-16 h-16 mr-2 text-gray-200 animate-spin dark:text-gray-400 fill-indigo-600"
+            className="inline w-16 h-16 mr-2 text-gray-200 animate-spin dark:text-gray-400 fill-[#ff0000]"
             viewBox="0 0 100 101"
             fill="none"
             xmlns="http://www.w3.org/2000/svg">

diff --git a/web/frontend/src/layout/App.css b/web/frontend/src/layout/App.css
@@ -1,5 +1,5 @@
 .App {
-  font-family: sans-serif;
+  font-family: Arial, sans-serif;
   color: rgb(71, 71, 71);
   background-color: white;
   position: relative;

diff --git a/web/frontend/src/layout/ClientError.tsx b/web/frontend/src/layout/ClientError.tsx
@@ -20,7 +20,7 @@ export default function ClientError({
       <div className="bg-white min-h-full font-sans px-4 py-16 sm:px-6 sm:py-24 md:grid md:place-items-center lg:px-8">
         <div className="max-w-max mx-auto">
           <main className="sm:flex">
-            <p className="text-4xl font-extrabold text-indigo-600 sm:text-5xl">{statusCode}</p>
+            <p className="text-4xl font-extrabold text-[#ff0000] sm:text-5xl">{statusCode}</p>
             <div className="sm:ml-6">
               <div className="sm:border-l sm:border-gray-200 sm:pl-6">
                 <h1 className="text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
@@ -35,15 +35,15 @@ export default function ClientError({
                 {statusCode === 401 && (
                   <button
                     id="login-button"
-                    className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                    className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-[#ff0000] hover:bg-[#b51f1f] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#ff0000]"
                     onClick={() => handleLogin(fctx)}>
                     {t('login')}
                   </button>
                 )}
                 {statusCode !== 401 && (
                   <Link
                     to={ROUTE_HOME}
-                    className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                    className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-[#ff0000] hover:bg-[#b51f1f] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#ff0000]">
                     {t('goHome')}
                   </Link>
                 )}

diff --git a/web/frontend/src/layout/Flash.tsx b/web/frontend/src/layout/Flash.tsx
@@ -17,7 +17,7 @@ const Flash = () => {
         <div
           key={msg.id}
           className={`relative
-                      ${msg.getLevel() === FlashLevel.Info && 'bg-indigo-500'} 
+                      ${msg.getLevel() === FlashLevel.Info && 'bg-[#ff0000]'} 
                       ${msg.getLevel() === FlashLevel.Warning && 'bg-orange-500'} 
                       ${msg.getLevel() === FlashLevel.Error && 'bg-red-500'}`}>
           <div
@@ -33,9 +33,7 @@ const Flash = () => {
             <button
               type="button"
               className={`ml-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex h-8 w-8 
-                ${
-                  msg.getLevel() === FlashLevel.Info && 'focus:ring-indigo-400 hover:bg-indigo-600'
-                } 
+                ${msg.getLevel() === FlashLevel.Info && 'focus:ring-[#ff0000] hover:bg-[#ff0000]'} 
                 ${
                   msg.getLevel() === FlashLevel.Warning &&
                   'focus:ring-orange-400 hover:bg-orange-600'

diff --git a/web/frontend/src/layout/NavBar.tsx b/web/frontend/src/layout/NavBar.tsx
@@ -21,6 +21,7 @@ import { availableLanguages } from 'language/Configuration';
 import { LanguageSelector } from '../language';
 
 import logo from '../assets/logo.png';
+import { ReactComponent as EPFLLogo } from '../assets/EPFL_Logo_184X53.svg';
 import { Popover, Transition } from '@headlessui/react';
 import { LoginIcon, LogoutIcon, MenuIcon, XIcon } from '@heroicons/react/outline';
 import { PlusIcon } from '@heroicons/react/solid';
@@ -34,7 +35,7 @@ const ACTION_LIST = 'list';
 const MobileMenu = ({ authCtx, handleLogout, fctx, t }) => (
   <Popover>
     <div className="-mr-2 -my-2 md:hidden">
-      <Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
+      <Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-[#ff0000]">
         <span className="sr-only">Open menu</span>
         <MenuIcon className="h-6 w-6" aria-hidden="true" />
       </Popover.Button>
@@ -54,7 +55,7 @@ const MobileMenu = ({ authCtx, handleLogout, fctx, t }) => (
           <div className="pt-5 pb-6 px-5">
             <div className="flex items-center justify-between">
               <div className="-mr-2">
-                <Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
+                <Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-[#ff0000]">
                   <span className="sr-only">Close menu</span>
                   <XIcon className="h-6 w-6" aria-hidden="true" />
                 </Popover.Button>
@@ -97,7 +98,7 @@ const MobileMenu = ({ authCtx, handleLogout, fctx, t }) => (
             <div className="pt-4">
               {authCtx.isLogged && authCtx.isAllowed(SUBJECT_ELECTION, ACTION_CREATE) && (
                 <NavLink to={ROUTE_FORM_CREATE}>
-                  <Popover.Button className="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700">
+                  <Popover.Button className="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-[#ff0000] hover:bg-[#b51f1f]">
                     <PlusIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
                     {t('navBarCreateForm')}
                   </Popover.Button>
@@ -139,7 +140,7 @@ const MobileMenu = ({ authCtx, handleLogout, fctx, t }) => (
                 </div>
               ) : (
                 <div onClick={() => handleLogin(fctx)}>
-                  <Popover.Button className="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700">
+                  <Popover.Button className="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-[#ff0000] hover:bg-[#b51f1f]">
                     <LoginIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
                     {t('login')}
                   </Popover.Button>
@@ -157,7 +158,7 @@ const RightSideNavBar = ({ authCtx, handleLogout, fctx, t }) => (
   <div className="absolute hidden inset-y-0 right-0 flex items-center pr-2 md:static md:inset-auto md:flex md:ml-6 md:pr-0">
     {authCtx.isLogged && authCtx.isAllowed(SUBJECT_ELECTION, ACTION_CREATE) && (
       <NavLink title={t('navBarCreateForm')} to={ROUTE_FORM_CREATE}>
-        <div className="whitespace-nowrap inline-flex items-center justify-center px-4 py-2 border-2 border-indigo-500 rounded-md shadow-sm text-base font-medium text-indigo-500 bg-white hover:bg-indigo-500 hover:text-white">
+        <div className="whitespace-nowrap inline-flex items-center justify-center px-4 py-2 border-2 border-[#ff0000] rounded-md shadow-sm text-base font-medium text-[#ff0000] bg-white hover:bg-[#ff0000] hover:text-white">
           <PlusIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
           {t('navBarCreateForm')}
         </div>
@@ -170,9 +171,16 @@ const RightSideNavBar = ({ authCtx, handleLogout, fctx, t }) => (
 
 const LeftSideNavBar = ({ authCtx, t }) => (
   <div className="flex-1 flex items-center justify-center md:justify-start">
-    <div className="flex-shrink-0 flex items-center">
+    <div
+      data-testid="leftSideNavBarEPFLLogo"
+      className="flex-shrink-0 flex items-start"
+      style={{ marginRight: 'auto' }}>
+      <a href="https://epfl.ch">
+        <EPFLLogo className="h-10 w-auto" />
+      </a>
+    </div>
+    <div data-testid="leftSideNavBarLogo" className="flex-shrink-0 flex items-center">
       <NavLink to={ROUTE_HOME}>
-        <img className="block lg:hidden h-10 w-auto" src={logo} alt="Workflow" />
         <img className="hidden lg:block h-10 w-auto" src={logo} alt="Workflow" />
       </NavLink>
     </div>
@@ -181,15 +189,15 @@ const LeftSideNavBar = ({ authCtx, t }) => (
         <NavLink
           to={ROUTE_FORM_INDEX}
           title={t('navBarStatus')}
-          className={'text-black text-lg hover:text-indigo-700'}>
+          className={'text-black text-lg hover:text-[#b51f1f]'}>
           {t('navBarStatus')}
         </NavLink>
         {authCtx.isLogged && authCtx.isAllowed(SUBJECT_ROLES, ACTION_LIST) && (
-          <NavLink to={ROUTE_ADMIN} className={'text-black text-lg hover:text-indigo-700'}>
+          <NavLink to={ROUTE_ADMIN} className={'text-black text-lg hover:text-[#b51f1f]'}>
             Admin
           </NavLink>
         )}
-        <NavLink to={ROUTE_ABOUT} className={'text-black text-lg hover:text-indigo-700'}>
+        <NavLink to={ROUTE_ABOUT} className={'text-black text-lg hover:text-[#b51f1f]'}>
           {t('navBarAbout')}
         </NavLink>
       </div>

diff --git a/web/frontend/src/layout/components/Profile.tsx b/web/frontend/src/layout/components/Profile.tsx
@@ -51,7 +51,7 @@ const Profile: FC<ProfileProps> = ({ authCtx, handleLogout, handleLogin, fctx })
   ) : (
     <button
       onClick={() => handleLogin(fctx)}
-      className="whitespace-nowrap inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700">
+      className="whitespace-nowrap inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-[#ff0000] hover:bg-[#b51f1f]">
       {t('login')}
     </button>
   );

diff --git a/web/frontend/src/layout/components/WarningModal.tsx b/web/frontend/src/layout/components/WarningModal.tsx
@@ -26,7 +26,7 @@ const WarningModal: FC<WarningModalProps> = ({ message, isShown, setIsShown, act
             <div className="mt-4 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
               <button
                 type="button"
-                className="inline-flex justify-center px-4 py-2 text-sm font-medium text-white bg-indigo-500 border border-transparent rounded-md hover:bg-gray-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-indigo-500"
+                className="inline-flex justify-center px-4 py-2 text-sm font-medium text-white bg-[#ff0000] border border-transparent rounded-md hover:bg-gray-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[#ff0000]"
                 onClick={() => setIsShown(false)}>
                 {t('cancel')}
               </button>

diff --git a/web/frontend/src/pages/About.tsx b/web/frontend/src/pages/About.tsx
@@ -8,7 +8,7 @@ const About: FC = () => {
     <div className="py-14 overflow-hidden">
       <div className="max-w-7xl mx-auto px-4 space-y-8 sm:px-6 lg:px-8">
         <div className="text-base max-w-prose mx-auto lg:max-w-none">
-          <h2 className="text-base text-indigo-600 font-semibold tracking-wide uppercase">
+          <h2 className="text-base text-[#ff0000] font-semibold tracking-wide uppercase">
             {t('aboutPlatform')}
           </h2>
           <p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
@@ -30,7 +30,7 @@ const About: FC = () => {
               <div className="rounded-md shadow ml-4">
                 <a
                   href="https://dedis.github.io/d-voting/#/"
-                  className="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50">
+                  className="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-[#ff0000] bg-white hover:bg-gray-50">
                   {t('learnMore')}
                 </a>
               </div>

diff --git a/web/frontend/src/pages/Home.tsx b/web/frontend/src/pages/Home.tsx
@@ -15,11 +15,10 @@ const Home: FC = () => {
             <div className="mt-20">
               <div>
                 <a href="https://github.com/c4dt/d-voting" className="inline-flex space-x-4">
-                  <span className="rounded bg-indigo-50 px-2.5 py-1 text-xs font-semibold text-indigo-600 tracking-wide uppercase">
+                  <span className="rounded bg-indigo-50 px-2.5 py-1 text-xs font-semibold text-[#ff0000] tracking-wide uppercase">
                     {t('homeWhatsNew')}
                   </span>
-                  <span className="inline-flex items-center text-sm font-medium text-indigo-600 space-x-1">
-                    <span>{t('homeJustShippedVersion')} 1.0.0</span>
+                  <span className="inline-flex items-center text-sm font-medium text-[#ff0000] space-x-1">
                     <ChevronRightIcon className="h-5 w-5" aria-hidden="true" />
                   </span>
                 </a>
@@ -33,7 +32,7 @@ const Home: FC = () => {
               <div className="mt-12 sm:max-w-lg sm:w-full sm:flex">
                 <div className="mt-4 sm:mt-0 sm:ml-3">
                   <Link to={ROUTE_FORM_INDEX}>
-                    <button className="block w-full rounded-md border border-transparent px-5 py-3 bg-indigo-600 text-base font-medium text-white shadow hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:px-10">
+                    <button className="block w-full rounded-md border border-transparent px-5 py-3 bg-[#ff0000] text-base font-medium text-white shadow hover:bg-[#b51f1f] focus:outline-none focus:ring-2 focus:ring-[#ff0000] focus:ring-offset-2 sm:px-10">
                       Get Started
                     </button>
                   </Link>

diff --git a/web/frontend/src/pages/Loading.tsx b/web/frontend/src/pages/Loading.tsx
@@ -8,7 +8,7 @@ const Loading: FC = () => {
       <div className="text-center pb-2">
         <svg
           role="status"
-          className="inline w-16 h-16 mr-2 text-gray-200 animate-spin dark:text-gray-400 fill-indigo-600"
+          className="inline w-16 h-16 mr-2 text-gray-200 animate-spin dark:text-gray-400 fill-[#ff0000]"
           viewBox="0 0 100 101"
           fill="none"
           xmlns="http://www.w3.org/2000/svg">

diff --git a/web/frontend/src/pages/admin/AdminTable.tsx b/web/frontend/src/pages/admin/AdminTable.tsx
@@ -92,7 +92,7 @@ const AdminTable: FC<AdminTableProps> = ({ users, setUsers }) => {
             <button
               type="button"
               onClick={openModal}
-              className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">
+              className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[#ff0000] hover:bg-[#b51f1f]">
               {t('addUser')}
             </button>
           </span>
@@ -124,7 +124,7 @@ const AdminTable: FC<AdminTableProps> = ({ users, setUsers }) => {
                   <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{user.role}</td>
                   <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                     <div
-                      className="cursor-pointer text-indigo-600 hover:text-indigo-900"
+                      className="cursor-pointer text-[#ff0000] hover:text-indigo-900"
                       onClick={() => handleDelete(user.sciper)}>
                       {t('delete')}
                     </div>