From 755126ddb2f1c23447fc170839327d22ee1cb67a Mon Sep 17 00:00:00 2001
From: Carine Dengler <git@carine-dengler.de>
Date: Wed, 3 Apr 2024 17:06:38 +0200
Subject: [PATCH] feat: use EPFL style

---
 web/frontend/src/assets/EPFL_Logo_184X53.svg  | 21 ++++++++++++++
 .../src/components/buttons/DownloadButton.tsx |  2 +-
 .../src/components/modal/ConfirmModal.tsx     |  2 +-
 .../src/components/modal/RedirectToModal.tsx  |  2 +-
 web/frontend/src/index.css                    |  5 ++--
 web/frontend/src/index.tsx                    |  2 +-
 web/frontend/src/layout/App.css               |  2 +-
 web/frontend/src/layout/ClientError.tsx       |  6 ++--
 web/frontend/src/layout/Flash.tsx             |  6 ++--
 web/frontend/src/layout/NavBar.tsx            | 28 ++++++++++++-------
 .../src/layout/components/Profile.tsx         |  2 +-
 .../src/layout/components/WarningModal.tsx    |  2 +-
 web/frontend/src/pages/About.tsx              |  4 +--
 web/frontend/src/pages/Home.tsx               |  7 ++---
 web/frontend/src/pages/Loading.tsx            |  2 +-
 web/frontend/src/pages/admin/AdminTable.tsx   |  4 +--
 web/frontend/src/pages/admin/DKGTable.tsx     |  2 +-
 web/frontend/src/pages/admin/ProxyRow.tsx     |  4 +--
 .../admin/components/AddAdminUserModal.tsx    |  8 +++---
 .../pages/admin/components/AddProxyModal.tsx  |  2 +-
 .../src/pages/admin/components/AdminModal.tsx |  2 +-
 .../pages/admin/components/EditProxyModal.tsx |  2 +-
 .../admin/components/RemoveAdminUserModal.tsx |  2 +-
 .../admin/components/RemoveProxyModal.tsx     |  2 +-
 web/frontend/src/pages/ballot/Show.tsx        |  4 +--
 web/frontend/src/pages/form/GroupedResult.tsx |  2 +-
 .../src/pages/form/IndividualResult.tsx       |  2 +-
 web/frontend/src/pages/form/Result.tsx        |  8 +++---
 .../components/ActionButtons/ActionButton.tsx |  2 +-
 .../components/ActionButtons/ResultButton.tsx |  2 +-
 .../components/ActionButtons/VoteButton.tsx   |  2 +-
 .../form/components/AddQuestionModal.tsx      |  4 +--
 .../form/components/ChooseProxyModal.tsx      |  8 +++---
 .../src/pages/form/components/FormForm.tsx    |  4 +--
 .../src/pages/form/components/FormRow.tsx     |  2 +-
 .../pages/form/components/FormTableFilter.tsx |  2 +-
 .../form/components/IndigoSpinnerIcon.tsx     |  2 +-
 .../src/pages/form/components/ProgressBar.tsx |  6 ++--
 .../form/components/RemoveElementModal.tsx    |  2 +-
 .../form/components/ResultExplanation.tsx     |  2 +-
 .../pages/form/components/SelectResult.tsx    |  2 +-
 .../pages/form/components/StatusTimeline.tsx  | 12 ++++----
 .../form/components/SubjectComponent.tsx      |  2 +-
 .../src/pages/form/components/Tabs.tsx        |  2 +-
 .../src/pages/form/components/UploadFile.tsx  |  2 +-
 .../form/components/utils/useChangeAction.tsx |  2 +-
 46 files changed, 111 insertions(+), 86 deletions(-)
 create mode 100644 web/frontend/src/assets/EPFL_Logo_184X53.svg

diff --git a/web/frontend/src/assets/EPFL_Logo_184X53.svg b/web/frontend/src/assets/EPFL_Logo_184X53.svg
new file mode 100644
index 000000000..f0f2074ae
--- /dev/null
+++ b/web/frontend/src/assets/EPFL_Logo_184X53.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 182.4 53" style="enable-background:new 0 0 182.4 53;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FF0000;}
+</style>
+<g>
+	<polygon class="st0" points="0,21.6 11.4,21.6 11.4,9.8 38.3,9.8 38.3,0 0,0 	"/>
+	<polygon class="st0" points="0,53 38.3,53 38.3,43.2 11.4,43.2 11.4,31.4 0,31.4 	"/>
+	<rect x="11.4" y="21.6" class="st0" width="24.6" height="9.8"/>
+	<path class="st0" d="M86,4.9c-1.5-1.5-3.4-2.6-5.7-3.5C78,0.4,75.1,0,71.8,0H48.1v53h11.4V31.4h12.2c3.3,0,6.1-0.4,8.5-1.3
+		c2.3-0.9,4.2-2.1,5.7-3.5c1.5-1.5,2.5-3.1,3.2-5s1-3.8,1-5.8s-0.3-4-1-5.8C88.5,8,87.4,6.3,86,4.9z M78,18.7
+		c-0.6,0.8-1.3,1.4-2.3,1.8c-0.9,0.4-2,0.7-3.3,0.9c-1.2,0.1-2.5,0.2-3.9,0.2h-9.1V9.8h9.1c1.3,0,2.6,0.1,3.9,0.2
+		c1.2,0.1,2.3,0.4,3.3,0.9c0.9,0.4,1.7,1,2.3,1.8c0.6,0.8,0.9,1.8,0.9,3S78.6,18,78,18.7z"/>
+	<polygon class="st0" points="155.5,43.2 155.5,0 144,0 144,53 182.4,53 182.4,43.2 	"/>
+	<polygon class="st0" points="97.4,21.6 108.9,21.6 108.9,9.8 135.8,9.8 135.8,0 97.4,0 	"/>
+	<rect x="97.4" y="31.4" class="st0" width="11.4" height="21.6"/>
+	<rect x="108.9" y="21.6" class="st0" width="24.6" height="9.8"/>
+</g>
+</svg>
diff --git a/web/frontend/src/components/buttons/DownloadButton.tsx b/web/frontend/src/components/buttons/DownloadButton.tsx
index 3f9a3ecfa..f60730652 100644
--- 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
index df679ed5a..b8b4ab766 100644
--- 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
index 88fca6b19..a17ce94db 100644
--- 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
index 36ddaf597..f3b1f1a81 100644
--- 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
index 112aee30a..dabfc523c 100644
--- 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
index 587fdfb4b..f2007544f 100644
--- 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
index 8040f9197..fc4a150fe 100644
--- 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,7 +35,7 @@ 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>
@@ -43,7 +43,7 @@ export default function ClientError({
                 {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
index 91bd3fd04..18b0f9dad 100644
--- 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
index 6b3055f62..a8d952b7c 100644
--- 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
index 0a481c559..9de847039 100644
--- 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
index 9b0257696..584b72df5 100644
--- 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
index eb326e875..c12a78043 100644
--- 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
index 7e53675d2..2fa2c1a31 100644
--- 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
index 7d7894b60..6212b9b16 100644
--- 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
index 925f16aed..f1a43ed42 100644
--- 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>
diff --git a/web/frontend/src/pages/admin/DKGTable.tsx b/web/frontend/src/pages/admin/DKGTable.tsx
index c09fb43fb..dd5bc651e 100644
--- a/web/frontend/src/pages/admin/DKGTable.tsx
+++ b/web/frontend/src/pages/admin/DKGTable.tsx
@@ -110,7 +110,7 @@ const DKGTable: FC<DKGTableProps> = ({ nodeProxyAddresses, setNodeProxyAddresses
             <button
               type="button"
               onClick={() => setShowAddProxy(true)}
-              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('addProxy')}
             </button>
           </span>
diff --git a/web/frontend/src/pages/admin/ProxyRow.tsx b/web/frontend/src/pages/admin/ProxyRow.tsx
index 152421203..455621ec2 100644
--- a/web/frontend/src/pages/admin/ProxyRow.tsx
+++ b/web/frontend/src/pages/admin/ProxyRow.tsx
@@ -36,7 +36,7 @@ const ProxyRow: FC<ProxyRowProps> = ({
 
       <td className="px-2 py-4 text-right">
         <div className="block sm:hidden">
-          <button onClick={handleEdit} className="font-medium text-indigo-600 hover:underline ">
+          <button onClick={handleEdit} className="font-medium text-[#ff0000] hover:underline ">
             {t('edit')}
           </button>
         </div>
@@ -46,7 +46,7 @@ const ProxyRow: FC<ProxyRowProps> = ({
           {t('delete')}
         </button>
         <div className="hidden sm:block">
-          <button onClick={handleEdit} className="font-medium text-indigo-600 hover:underline mr-4">
+          <button onClick={handleEdit} className="font-medium text-[#ff0000] hover:underline mr-4">
             {t('edit')}
           </button>
         </div>
diff --git a/web/frontend/src/pages/admin/components/AddAdminUserModal.tsx b/web/frontend/src/pages/admin/components/AddAdminUserModal.tsx
index 0ad7eb773..0b47dee90 100644
--- a/web/frontend/src/pages/admin/components/AddAdminUserModal.tsx
+++ b/web/frontend/src/pages/admin/components/AddAdminUserModal.tsx
@@ -90,7 +90,7 @@ const AddAdminUserModal: FC<AddAdminUserModalProps> = ({ open, setOpen, handleAd
       <div className="mt-2 pb-4">
         <Listbox value={selectedRole} onChange={setSelectedRole}>
           <div className="relative mt-1">
-            <Listbox.Button className="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left border focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
+            <Listbox.Button className="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left border focus:outline-none focus-visible:border-[#ff0000] focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
               <span className="block truncate">{selectedRole}</span>
               <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                 <SelectorIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
@@ -107,7 +107,7 @@ const AddAdminUserModal: FC<AddAdminUserModalProps> = ({ open, setOpen, handleAd
                     key={personIdx}
                     className={({ active }) =>
                       `relative cursor-default select-none py-2 pl-10 pr-4 ${
-                        active ? 'bg-indigo-100 text-indigo-900' : 'text-gray-900'
+                        active ? 'bg-[#ff0000] text-indigo-900' : 'text-gray-900'
                       }`
                     }
                     value={role}>
@@ -118,7 +118,7 @@ const AddAdminUserModal: FC<AddAdminUserModalProps> = ({ open, setOpen, handleAd
                           {role}
                         </span>
                         {selected ? (
-                          <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-indigo-600">
+                          <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-[#ff0000]">
                             <CheckIcon className="h-5 w-5" aria-hidden="true" />
                           </span>
                         ) : null}
@@ -137,7 +137,7 @@ const AddAdminUserModal: FC<AddAdminUserModalProps> = ({ open, setOpen, handleAd
   const actionButton = (
     <button
       type="button"
-      className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm"
+      className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-[#ff0000] text-base font-medium text-white hover:bg-[#b51f1f] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#ff0000] sm:col-start-2 sm:text-sm"
       onClick={handleAddUser}>
       {loading ? (
         <SpinnerIcon />
diff --git a/web/frontend/src/pages/admin/components/AddProxyModal.tsx b/web/frontend/src/pages/admin/components/AddProxyModal.tsx
index f65985c7a..f3f8f54a8 100644
--- a/web/frontend/src/pages/admin/components/AddProxyModal.tsx
+++ b/web/frontend/src/pages/admin/components/AddProxyModal.tsx
@@ -125,7 +125,7 @@ const AddProxyModal: FC<AddProxyModalProps> = ({ open, setOpen, handleAddProxy }
     <>
       <button
         type="button"
-        className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm"
+        className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-[#ff0000] text-base font-medium text-white hover:bg-[#b51f1f] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#ff0000] sm:col-start-2 sm:text-sm"
         onClick={handleAdd}>
         {loading ? <SpinnerIcon /> : <PlusIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />}
         {t('add')}
diff --git a/web/frontend/src/pages/admin/components/AdminModal.tsx b/web/frontend/src/pages/admin/components/AdminModal.tsx
index c35fb7252..26fc4eda9 100644
--- a/web/frontend/src/pages/admin/components/AdminModal.tsx
+++ b/web/frontend/src/pages/admin/components/AdminModal.tsx
@@ -59,7 +59,7 @@ const AdminModal: FC<AdminModalProps> = ({
                 {actionButton}
                 <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:col-start-1 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:col-start-1 sm:text-sm"
                   onClick={handleCancel}
                   ref={cancelButtonRef}>
                   {t('cancel')}
diff --git a/web/frontend/src/pages/admin/components/EditProxyModal.tsx b/web/frontend/src/pages/admin/components/EditProxyModal.tsx
index 8cec24d89..0d029e922 100644
--- a/web/frontend/src/pages/admin/components/EditProxyModal.tsx
+++ b/web/frontend/src/pages/admin/components/EditProxyModal.tsx
@@ -144,7 +144,7 @@ const EditProxyModal: FC<EditProxyModalProps> = ({
   const actionButton = (
     <button
       type="button"
-      className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm"
+      className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-[#ff0000] text-base font-medium text-white hover:bg-[#b51f1f] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#ff0000] sm:col-start-2 sm:text-sm"
       onClick={() => handleSave()}>
       {loading ? (
         <SpinnerIcon />
diff --git a/web/frontend/src/pages/admin/components/RemoveAdminUserModal.tsx b/web/frontend/src/pages/admin/components/RemoveAdminUserModal.tsx
index 7eac57484..d3e85dc71 100644
--- a/web/frontend/src/pages/admin/components/RemoveAdminUserModal.tsx
+++ b/web/frontend/src/pages/admin/components/RemoveAdminUserModal.tsx
@@ -77,7 +77,7 @@ const RemoveAdminUserModal: FC<RemoveAdminUserModalProps> = ({
   const actionButton = (
     <button
       type="button"
-      className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm"
+      className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-[#ff0000] text-base font-medium text-white hover:bg-[#b51f1f] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#ff0000] sm:col-start-2 sm:text-sm"
       onClick={handleDelete}>
       {loading ? (
         <SpinnerIcon />
diff --git a/web/frontend/src/pages/admin/components/RemoveProxyModal.tsx b/web/frontend/src/pages/admin/components/RemoveProxyModal.tsx
index 06c1e8067..5e558658f 100644
--- a/web/frontend/src/pages/admin/components/RemoveProxyModal.tsx
+++ b/web/frontend/src/pages/admin/components/RemoveProxyModal.tsx
@@ -71,7 +71,7 @@ const RemoveProxyModal: FC<RemoveProxyModalProps> = ({
   const actionButton = (
     <button
       type="button"
-      className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm"
+      className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-[#ff0000] text-base font-medium text-white hover:bg-[#b51f1f] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#ff0000] sm:col-start-2 sm:text-sm"
       onClick={handleDelete}>
       {loading ? (
         <SpinnerIcon />
diff --git a/web/frontend/src/pages/ballot/Show.tsx b/web/frontend/src/pages/ballot/Show.tsx
index 5aa8b1140..c61ce0b9c 100644
--- a/web/frontend/src/pages/ballot/Show.tsx
+++ b/web/frontend/src/pages/ballot/Show.tsx
@@ -147,7 +147,7 @@ const Ballot: FC = () => {
               <div className="flex mb-4 sm:mb-6">
                 <button
                   type="button"
-                  className="inline-flex items-center mr-2 sm:mr-4 px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-500 hover:bg-indigo-600"
+                  className="inline-flex items-center mr-2 sm:mr-4 px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[#ff0000] hover:bg-[#ff0000]"
                   onClick={handleClick}>
                   {castVoteLoading ? (
                     <SpinnerIcon />
@@ -159,7 +159,7 @@ const Ballot: FC = () => {
                 <button
                   type="button"
                   onClick={() => navigate(-1)}
-                  className=" text-gray-700 mr-2 items-center px-4 py-2 border rounded-md text-sm hover:text-indigo-500">
+                  className=" text-gray-700 mr-2 items-center px-4 py-2 border rounded-md text-sm hover:text-[#ff0000]">
                   {t('back')}
                 </button>
               </div>
diff --git a/web/frontend/src/pages/form/GroupedResult.tsx b/web/frontend/src/pages/form/GroupedResult.tsx
index cb3015027..aaf9f7b64 100644
--- a/web/frontend/src/pages/form/GroupedResult.tsx
+++ b/web/frontend/src/pages/form/GroupedResult.tsx
@@ -202,7 +202,7 @@ const GroupedResult: FC<GroupedResultProps> = ({ rankResult, selectResult, textR
         <button
           type="button"
           onClick={() => navigate(-1)}
-          className="text-gray-700 my-2 mr-2 items-center px-4 py-2 border rounded-md text-sm hover:text-indigo-500">
+          className="text-gray-700 my-2 mr-2 items-center px-4 py-2 border rounded-md text-sm hover:text-[#ff0000]">
           {t('back')}
         </button>
 
diff --git a/web/frontend/src/pages/form/IndividualResult.tsx b/web/frontend/src/pages/form/IndividualResult.tsx
index c130e1ca7..5e5c084e4 100644
--- a/web/frontend/src/pages/form/IndividualResult.tsx
+++ b/web/frontend/src/pages/form/IndividualResult.tsx
@@ -301,7 +301,7 @@ const IndividualResult: FC<IndividualResultProps> = ({
         <button
           type="button"
           onClick={() => navigate(-1)}
-          className="text-gray-700 my-2 mr-2 items-center px-4 py-2 border rounded-md text-sm hover:text-indigo-500">
+          className="text-gray-700 my-2 mr-2 items-center px-4 py-2 border rounded-md text-sm hover:text-[#ff0000]">
           {t('back')}
         </button>
 
diff --git a/web/frontend/src/pages/form/Result.tsx b/web/frontend/src/pages/form/Result.tsx
index 07a6f40cd..3a25d473c 100644
--- a/web/frontend/src/pages/form/Result.tsx
+++ b/web/frontend/src/pages/form/Result.tsx
@@ -109,8 +109,8 @@ const FormResult: FC = () => {
                     key="grouped"
                     className={({ selected }) =>
                       selected
-                        ? 'w-full focus:ring-0 rounded-lg py-2.5 text-sm font-medium leading-5 text-white bg-indigo-500 shadow'
-                        : 'w-full focus:ring-0 rounded-lg py-2.5 text-sm font-medium leading-5 text-gray-700 hover:bg-indigo-100 hover:text-indigo-500'
+                        ? 'w-full focus:ring-0 rounded-lg py-2.5 text-sm font-medium leading-5 text-white bg-[#ff0000] shadow'
+                        : 'w-full focus:ring-0 rounded-lg py-2.5 text-sm font-medium leading-5 text-gray-700 hover:bg-[#ff0000] hover:text-[#ff0000]'
                     }>
                     {t('resGroup')}
                   </Tab>
@@ -118,8 +118,8 @@ const FormResult: FC = () => {
                     key="individual"
                     className={({ selected }) =>
                       selected
-                        ? 'w-full focus:ring-0 rounded-lg py-2.5 text-sm font-medium leading-5 text-white bg-indigo-500 shadow'
-                        : 'w-full focus:ring-0 rounded-lg py-2.5 text-sm font-medium leading-5 text-gray-600 hover:bg-indigo-100 hover:text-indigo-500'
+                        ? 'w-full focus:ring-0 rounded-lg py-2.5 text-sm font-medium leading-5 text-white bg-[#ff0000] shadow'
+                        : 'w-full focus:ring-0 rounded-lg py-2.5 text-sm font-medium leading-5 text-gray-600 hover:bg-[#ff0000] hover:text-[#ff0000]'
                     }>
                     {t('resIndiv')}
                   </Tab>
diff --git a/web/frontend/src/pages/form/components/ActionButtons/ActionButton.tsx b/web/frontend/src/pages/form/components/ActionButtons/ActionButton.tsx
index 2b5dc3b90..788820505 100644
--- a/web/frontend/src/pages/form/components/ActionButtons/ActionButton.tsx
+++ b/web/frontend/src/pages/form/components/ActionButtons/ActionButton.tsx
@@ -11,7 +11,7 @@ type ActionButtonProps = {
 const ActionButton: FC<ActionButtonProps> = ({ handleClick, ongoing, ongoingText, children }) => {
   return !ongoing ? (
     <button onClick={handleClick}>
-      <div className="whitespace-nowrap inline-flex items-center justify-center px-4 py-1 mr-2 border border-gray-300 text-sm rounded-full font-medium text-gray-700 hover:text-indigo-500">
+      <div className="whitespace-nowrap inline-flex items-center justify-center px-4 py-1 mr-2 border border-gray-300 text-sm rounded-full font-medium text-gray-700 hover:text-[#ff0000]">
         {children}
       </div>
     </button>
diff --git a/web/frontend/src/pages/form/components/ActionButtons/ResultButton.tsx b/web/frontend/src/pages/form/components/ActionButtons/ResultButton.tsx
index 5ccdccaeb..1db697621 100644
--- a/web/frontend/src/pages/form/components/ActionButtons/ResultButton.tsx
+++ b/web/frontend/src/pages/form/components/ActionButtons/ResultButton.tsx
@@ -8,7 +8,7 @@ const ResultButton = ({ status, formID }) => {
   return (
     status === Status.ResultAvailable && (
       <Link to={`/forms/${formID}/result`}>
-        <div className="whitespace-nowrap inline-flex items-center justify-center px-4 py-1 mr-2 border border-gray-300 text-sm rounded-full font-medium text-gray-700 hover:text-indigo-500">
+        <div className="whitespace-nowrap inline-flex items-center justify-center px-4 py-1 mr-2 border border-gray-300 text-sm rounded-full font-medium text-gray-700 hover:text-[#ff0000]">
           <ChartSquareBarIcon className="sm:-ml-1 sm:mr-2 h-5 w-5" aria-hidden="true" />
           <div className="hidden sm:block">{t('seeResult')}</div>
         </div>
diff --git a/web/frontend/src/pages/form/components/ActionButtons/VoteButton.tsx b/web/frontend/src/pages/form/components/ActionButtons/VoteButton.tsx
index a36afbb64..c2ce6d925 100644
--- a/web/frontend/src/pages/form/components/ActionButtons/VoteButton.tsx
+++ b/web/frontend/src/pages/form/components/ActionButtons/VoteButton.tsx
@@ -15,7 +15,7 @@ const VoteButton = ({ status, formID }) => {
     isLogged && (
       <Link to={ROUTE_BALLOT_SHOW + '/' + formID}>
         <button>
-          <div className="whitespace-nowrap inline-flex items-center justify-center px-4 py-1 mr-2 border border-gray-300 text-sm rounded-full font-medium text-gray-700 hover:text-indigo-500">
+          <div className="whitespace-nowrap inline-flex items-center justify-center px-4 py-1 mr-2 border border-gray-300 text-sm rounded-full font-medium text-gray-700 hover:text-[#ff0000]">
             <PencilAltIcon className="sm:-ml-1 sm:mr-2 h-5 w-5" aria-hidden="true" />
             <div className="hidden sm:block">{t('vote')}</div>
           </div>
diff --git a/web/frontend/src/pages/form/components/AddQuestionModal.tsx b/web/frontend/src/pages/form/components/AddQuestionModal.tsx
index 50ec75bd4..edccfa4e6 100644
--- a/web/frontend/src/pages/form/components/AddQuestionModal.tsx
+++ b/web/frontend/src/pages/form/components/AddQuestionModal.tsx
@@ -440,14 +440,14 @@ const AddQuestionModal: FC<AddQuestionModalProps> = ({
                 <div className="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
                   <button
                     type="button"
-                    className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm"
+                    className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-[#ff0000] text-base font-medium text-white hover:bg-[#b51f1f] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#ff0000] sm:col-start-2 sm:text-sm"
                     onClick={handleSave}>
                     <CheckIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
                     {t('saveQuestion')}
                   </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:col-start-1 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:col-start-1 sm:text-sm"
                     onClick={handleClose}
                     ref={cancelButtonRef}>
                     {t('cancel')}
diff --git a/web/frontend/src/pages/form/components/ChooseProxyModal.tsx b/web/frontend/src/pages/form/components/ChooseProxyModal.tsx
index fe3bcc6c5..44ac6ec14 100644
--- a/web/frontend/src/pages/form/components/ChooseProxyModal.tsx
+++ b/web/frontend/src/pages/form/components/ChooseProxyModal.tsx
@@ -105,8 +105,8 @@ const ChooseProxyModal: FC<ChooseProxyModalProps> = ({
             <div className=" inline-block bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all my-8 align-middle max-w-lg w-full">
               <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                 <div className="sm:flex sm:items-start">
-                  <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 sm:mx-0 sm:h-10 sm:w-10">
-                    <CogIcon className="h-6 w-6 text-indigo-600" aria-hidden="true" />
+                  <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-[#ff0000] sm:mx-0 sm:h-10 sm:w-10">
+                    <CogIcon className="h-6 w-6 text-[#ff0000]" aria-hidden="true" />
                   </div>
                   <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                     <Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900">
@@ -122,13 +122,13 @@ const ChooseProxyModal: FC<ChooseProxyModalProps> = ({
               <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                 <button
                   type="button"
-                  className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm"
+                  className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-[#ff0000] text-base font-medium text-white hover:bg-[#b51f1f] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#ff0000] sm:ml-3 sm:w-auto sm:text-sm"
                   onClick={confirmChoice}>
                   {t('setupNode')}
                 </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('cancel')}
diff --git a/web/frontend/src/pages/form/components/FormForm.tsx b/web/frontend/src/pages/form/components/FormForm.tsx
index 7a21a5ae6..7d85e8cda 100644
--- a/web/frontend/src/pages/form/components/FormForm.tsx
+++ b/web/frontend/src/pages/form/components/FormForm.tsx
@@ -242,7 +242,7 @@ const FormForm: FC<FormFormProps> = () => {
                 </div>
                 <div className="ml-1">
                   <button
-                    className="hover:text-indigo-500 p-1 rounded-md"
+                    className="hover:text-[#ff0000] p-1 rounded-md"
                     onClick={() => setTitleChanging(true)}>
                     <PencilIcon className="m-1 h-3 w-3" aria-hidden="true" />
                   </button>
@@ -274,7 +274,7 @@ const FormForm: FC<FormFormProps> = () => {
         <div className="my-2">
           <button
             type="button"
-            className="inline-flex my-2 ml-2 items-center px-4 py-2 border border-transparent rounded-md  text-sm font-medium text-white bg-indigo-500 hover:bg-indigo-600"
+            className="inline-flex my-2 ml-2 items-center px-4 py-2 border border-transparent rounded-md  text-sm font-medium text-white bg-[#ff0000] hover:bg-[#ff0000]"
             onClick={createHandler}>
             {loading ? (
               <SpinnerIcon />
diff --git a/web/frontend/src/pages/form/components/FormRow.tsx b/web/frontend/src/pages/form/components/FormRow.tsx
index 7c0da7ae9..1e3f73f18 100644
--- a/web/frontend/src/pages/form/components/FormRow.tsx
+++ b/web/frontend/src/pages/form/components/FormRow.tsx
@@ -33,7 +33,7 @@ const FormRow: FC<FormRowProps> = ({ form }) => {
   return (
     <tr className="bg-white border-b hover:bg-gray-50 ">
       <td className="px-1.5 sm:px-6 py-4 font-medium text-gray-900 whitespace-nowrap truncate">
-        <Link className="text-gray-700 hover:text-indigo-500" to={`/forms/${form.FormID}`}>
+        <Link className="text-gray-700 hover:text-[#ff0000]" to={`/forms/${form.FormID}`}>
           <div className="max-w-[20vw] truncate">
             {formRowI18n.t('title', { ns: 'form', fallbackLng: 'en' })}
           </div>
diff --git a/web/frontend/src/pages/form/components/FormTableFilter.tsx b/web/frontend/src/pages/form/components/FormTableFilter.tsx
index 9a73afbeb..6b9ba0e02 100644
--- a/web/frontend/src/pages/form/components/FormTableFilter.tsx
+++ b/web/frontend/src/pages/form/components/FormTableFilter.tsx
@@ -144,7 +144,7 @@ const FormTableFilter: FC<FormTableFilterProps> = ({ setStatusToKeep }) => {
       <button
         type="button"
         onClick={() => handleClick(null, t('filterByStatus'))}
-        className="text-gray-700 my-2 mx-2 items-center px-4 py-2 border border-gray-300 rounded-md text-sm font-medium hover:text-indigo-500">
+        className="text-gray-700 my-2 mx-2 items-center px-4 py-2 border border-gray-300 rounded-md text-sm font-medium hover:text-[#ff0000]">
         {t('resetFilter')}
       </button>
     </>
diff --git a/web/frontend/src/pages/form/components/IndigoSpinnerIcon.tsx b/web/frontend/src/pages/form/components/IndigoSpinnerIcon.tsx
index b4f1cdecc..1ea90703e 100644
--- a/web/frontend/src/pages/form/components/IndigoSpinnerIcon.tsx
+++ b/web/frontend/src/pages/form/components/IndigoSpinnerIcon.tsx
@@ -1,7 +1,7 @@
 const IndigoSpinnerIcon = () => {
   return (
     <svg
-      className="animate-spin -ml-1 mr-3 h-5 w-5 text-indigo-500"
+      className="animate-spin -ml-1 mr-3 h-5 w-5 text-[#ff0000]"
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24">
diff --git a/web/frontend/src/pages/form/components/ProgressBar.tsx b/web/frontend/src/pages/form/components/ProgressBar.tsx
index 4fc8e1790..2eb93f06d 100644
--- a/web/frontend/src/pages/form/components/ProgressBar.tsx
+++ b/web/frontend/src/pages/form/components/ProgressBar.tsx
@@ -10,9 +10,9 @@ const ProgressBar: FC<ProgressBarProps> = ({ isBest, children }) => {
     <div className="sm:ml-1 md:ml-2 w-3/5 sm:w-4/5">
       <div className="h-min bg-white rounded-full mr-1 md:mr-2 w-full flex items-center">
         <div
-          className={`${!isBest && children !== '0.00' && 'bg-indigo-300'} ${
-            !isBest && children === '0.00' && 'bg-indigo-100'
-          } ${isBest && 'bg-indigo-500'}  flex-none mr-2 text-white h-2 sm:h-3 p-0.5 rounded-full`}
+          className={`${!isBest && children !== '0.00' && 'bg-[#ff0000]'} ${
+            !isBest && children === '0.00' && 'bg-[#ff0000]'
+          } ${isBest && 'bg-[#ff0000]'}  flex-none mr-2 text-white h-2 sm:h-3 p-0.5 rounded-full`}
           style={{ width: `${children}%` }}></div>
 
         <div className="text-gray-700 text-sm">{`${children}%`}</div>
diff --git a/web/frontend/src/pages/form/components/RemoveElementModal.tsx b/web/frontend/src/pages/form/components/RemoveElementModal.tsx
index f4540abd7..ca33c6ff7 100644
--- a/web/frontend/src/pages/form/components/RemoveElementModal.tsx
+++ b/web/frontend/src/pages/form/components/RemoveElementModal.tsx
@@ -83,7 +83,7 @@ const RemoveElementModal: FC<RemoveElementModalProps> = ({
                   </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/pages/form/components/ResultExplanation.tsx b/web/frontend/src/pages/form/components/ResultExplanation.tsx
index 10516ff0e..9b88a0db3 100644
--- a/web/frontend/src/pages/form/components/ResultExplanation.tsx
+++ b/web/frontend/src/pages/form/components/ResultExplanation.tsx
@@ -17,7 +17,7 @@ const ResultExplanation = () => {
                 ${open ? '' : 'text-opacity-90'}
                 group inline-flex items-center rounded-md px-3 py-2 text-base font-medium text-white hover:text-opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75`}>
                 <QuestionMarkCircleIcon
-                  className="-ml-1 mr-2 h-5 w-5 text-gray-500 hover:text-indigo-500"
+                  className="-ml-1 mr-2 h-5 w-5 text-gray-500 hover:text-[#ff0000]"
                   aria-hidden="true"
                 />
               </Popover.Button>
diff --git a/web/frontend/src/pages/form/components/SelectResult.tsx b/web/frontend/src/pages/form/components/SelectResult.tsx
index 8d2204e1c..0925869b4 100644
--- a/web/frontend/src/pages/form/components/SelectResult.tsx
+++ b/web/frontend/src/pages/form/components/SelectResult.tsx
@@ -54,7 +54,7 @@ export const IndividualSelectResult: FC<SelectResultProps> = ({ select, selectRe
         return (
           <React.Fragment key={`select_${index}`}>
             <div className="flex flex-row px-2 sm:px-4 break-words max-w-xs w-max">
-              <div className="h-4 w-4 mr-2 accent-indigo-500 ">{displayChoices(result, index)}</div>
+              <div className="h-4 w-4 mr-2 accent-[#ff0000] ">{displayChoices(result, index)}</div>
               <div>
                 {i18n.language === 'en' && select.ChoicesMap.get('en')[index]}
                 {i18n.language === 'fr' && select.ChoicesMap.get('fr')[index]}
diff --git a/web/frontend/src/pages/form/components/StatusTimeline.tsx b/web/frontend/src/pages/form/components/StatusTimeline.tsx
index 350e3b55c..e6b9eb18a 100644
--- a/web/frontend/src/pages/form/components/StatusTimeline.tsx
+++ b/web/frontend/src/pages/form/components/StatusTimeline.tsx
@@ -53,8 +53,8 @@ const StatusTimeline: FC<StatusTimelineProps> = ({ status, ongoingAction }) => {
     switch (state) {
       case 'complete':
         return (
-          <div className="group pl-4 py-2 flex flex-col border-l-4 border-indigo-600 hover:border-indigo-800 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4">
-            <span className="text-xs text-indigo-600 font-semibold tracking-wide uppercase group-hover:text-indigo-800">
+          <div className="group pl-4 py-2 flex flex-col border-l-4 border-[#ff0000] hover:border-indigo-800 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4">
+            <span className="text-xs text-[#ff0000] font-semibold tracking-wide uppercase group-hover:text-indigo-800">
               {t(step.name)}
             </span>
           </div>
@@ -62,9 +62,9 @@ const StatusTimeline: FC<StatusTimelineProps> = ({ status, ongoingAction }) => {
       case 'current':
         return (
           <div
-            className="pl-4 py-2 flex flex-col border-l-4 border-indigo-600 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4"
+            className="pl-4 py-2 flex flex-col border-l-4 border-[#ff0000] md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4"
             aria-current="step">
-            <span className="text-xs text-indigo-600 font-semibold tracking-wide uppercase">
+            <span className="text-xs text-[#ff0000] font-semibold tracking-wide uppercase">
               {t(step.name)}
             </span>
           </div>
@@ -73,9 +73,9 @@ const StatusTimeline: FC<StatusTimelineProps> = ({ status, ongoingAction }) => {
         if (ongoingAction === index) {
           return (
             <div
-              className="animate-pulse pl-4 py-2 flex flex-col border-l-4 border-indigo-400 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4"
+              className="animate-pulse pl-4 py-2 flex flex-col border-l-4 border-[#ff0000] md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4"
               aria-current="step">
-              <span className="text-xs text-indigo-400 font-semibold tracking-wide uppercase">
+              <span className="text-xs text-[#ff0000] font-semibold tracking-wide uppercase">
                 {t(step.ongoing)}
               </span>
             </div>
diff --git a/web/frontend/src/pages/form/components/SubjectComponent.tsx b/web/frontend/src/pages/form/components/SubjectComponent.tsx
index 6defdf28e..b95420656 100644
--- a/web/frontend/src/pages/form/components/SubjectComponent.tsx
+++ b/web/frontend/src/pages/form/components/SubjectComponent.tsx
@@ -360,7 +360,7 @@ const SubjectComponent: FC<SubjectComponentProps> = ({
                 </div>
                 <div className="ml-1 pr-10">
                   <button
-                    className="hover:text-indigo-500 p-1 rounded-md"
+                    className="hover:text-[#ff0000] p-1 rounded-md"
                     onClick={() => setTitleChanging(true)}>
                     <PencilIcon className="m-1 h-3 w-3" aria-hidden="true" />
                   </button>
diff --git a/web/frontend/src/pages/form/components/Tabs.tsx b/web/frontend/src/pages/form/components/Tabs.tsx
index 594160fe7..468b6de4a 100644
--- a/web/frontend/src/pages/form/components/Tabs.tsx
+++ b/web/frontend/src/pages/form/components/Tabs.tsx
@@ -20,7 +20,7 @@ const Tabs = ({ currentTab, setCurrentTab }) => {
               }}
               className={classNames(
                 name === currentTab
-                  ? 'border-indigo-500 text-indigo-600'
+                  ? 'border-[#ff0000] text-[#ff0000]'
                   : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
                 'w-1/4 py-4 px-1 text-center border-b-2 font-medium text-sm'
               )}
diff --git a/web/frontend/src/pages/form/components/UploadFile.tsx b/web/frontend/src/pages/form/components/UploadFile.tsx
index 675a8e0f4..e60248645 100644
--- a/web/frontend/src/pages/form/components/UploadFile.tsx
+++ b/web/frontend/src/pages/form/components/UploadFile.tsx
@@ -55,7 +55,7 @@ const UploadFile = ({ updateForm, setShowModal, setTextModal }) => {
         onChange={(e) => handleDrop(e.target.files[0])}
       />
       <label
-        className="ml-1 cursor-pointer font-medium text-indigo-600 hover:text-indigo-500"
+        className="ml-1 cursor-pointer font-medium text-[#ff0000] hover:text-[#ff0000]"
         htmlFor="uploadJSON">
         {t('uploadJSON')}
       </label>
diff --git a/web/frontend/src/pages/form/components/utils/useChangeAction.tsx b/web/frontend/src/pages/form/components/utils/useChangeAction.tsx
index 0cbb59dee..aafa83131 100644
--- a/web/frontend/src/pages/form/components/utils/useChangeAction.tsx
+++ b/web/frontend/src/pages/form/components/utils/useChangeAction.tsx
@@ -399,7 +399,7 @@ const useChangeAction = (
       return (
         <div>
           {t('notLoggedInActionText1')}
-          <button id="login-button" className="text-indigo-600" onClick={() => handleLogin(fctx)}>
+          <button id="login-button" className="text-[#ff0000]" onClick={() => handleLogin(fctx)}>
             {t('notLoggedInActionText2')}
           </button>
           {t('notLoggedInActionText3')}