Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: use EPFL style #388

Open
wants to merge 1 commit into
base: c4dt-main
Choose a base branch
from
Open

feat: use EPFL style #388

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions web/frontend/src/assets/EPFL_Logo_184X53.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion web/frontend/src/components/buttons/DownloadButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion web/frontend/src/components/modal/ConfirmModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')}
Expand Down
2 changes: 1 addition & 1 deletion web/frontend/src/components/modal/RedirectToModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 2 additions & 3 deletions web/frontend/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
2 changes: 1 addition & 1 deletion web/frontend/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion web/frontend/src/layout/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.App {
font-family: sans-serif;
font-family: Arial, sans-serif;
color: rgb(71, 71, 71);
background-color: white;
position: relative;
Expand Down
6 changes: 3 additions & 3 deletions web/frontend/src/layout/ClientError.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
)}
Expand Down
6 changes: 2 additions & 4 deletions web/frontend/src/layout/Flash.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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'
Expand Down
28 changes: 18 additions & 10 deletions web/frontend/src/layout/NavBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion web/frontend/src/layout/components/Profile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
2 changes: 1 addition & 1 deletion web/frontend/src/layout/components/WarningModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions web/frontend/src/pages/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand Down
7 changes: 3 additions & 4 deletions web/frontend/src/pages/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion web/frontend/src/pages/Loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
4 changes: 2 additions & 2 deletions web/frontend/src/pages/admin/AdminTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
Loading
Loading