From 7a1a98f6bf228bfb074203f6ead13d6ba9769457 Mon Sep 17 00:00:00 2001 From: Yannick Mijsters Date: Fri, 27 Sep 2024 12:07:51 +0200 Subject: [PATCH] feat: update colors and add epfl logo to fit LNCO.ai theme --- src/Authorization/RedirectionContent.tsx | 6 ++--- .../CustomInitialLoader.tsx | 4 +-- src/GraaspLogo/EpflLogo.tsx | 26 +++++++++++++++++++ src/GraaspLogo/GraaspLogo.tsx | 21 ++++----------- src/Header/Header.tsx | 2 +- src/Main/LogoHeader.tsx | 5 ++-- src/PlatformSwitch/PlatformSwitch.stories.tsx | 13 ---------- src/PlatformSwitch/PlatformSwitch.tsx | 8 +----- src/PlatformSwitch/hooks.ts | 6 ----- src/index.ts | 1 + src/theme.ts | 24 ++++++++--------- src/upload/FileDropper/FileDropper.tsx | 8 +++--- 12 files changed, 57 insertions(+), 67 deletions(-) create mode 100644 src/GraaspLogo/EpflLogo.tsx diff --git a/src/Authorization/RedirectionContent.tsx b/src/Authorization/RedirectionContent.tsx index 16a75c2d5..e89819ba4 100644 --- a/src/Authorization/RedirectionContent.tsx +++ b/src/Authorization/RedirectionContent.tsx @@ -1,4 +1,4 @@ -import { Container, Typography, styled, useTheme } from '@mui/material'; +import { Container, Typography, styled } from '@mui/material'; import { Link, LinkProps } from 'react-router-dom'; @@ -35,11 +35,9 @@ const RedirectionContent = ({ redirectionLinkText, id, }: Props): JSX.Element => { - const theme = useTheme(); - return ( - +
{redirectionText ?? 'You are being redirected…'} diff --git a/src/CustomInitialLoader/CustomInitialLoader.tsx b/src/CustomInitialLoader/CustomInitialLoader.tsx index 900aa3cc2..93a5b201a 100644 --- a/src/CustomInitialLoader/CustomInitialLoader.tsx +++ b/src/CustomInitialLoader/CustomInitialLoader.tsx @@ -3,7 +3,6 @@ import { LinearProgress, linearProgressClasses, styled, - useTheme, } from '@mui/material'; import GraaspLogo from '../GraaspLogo/GraaspLogo.js'; @@ -34,10 +33,9 @@ const StyledLinearProgress = styled(LinearProgress)(({ theme }) => ({ })); const CustomInitialLoader = ({ id }: CustomInitialLoaderProps): JSX.Element => { - const theme = useTheme(); return ( - +
diff --git a/src/GraaspLogo/EpflLogo.tsx b/src/GraaspLogo/EpflLogo.tsx new file mode 100644 index 000000000..5a18c1845 --- /dev/null +++ b/src/GraaspLogo/EpflLogo.tsx @@ -0,0 +1,26 @@ +type Props = { + height: number; +}; + +const EPFLLogo = ({ height }: Props): JSX.Element => ( + + epfl-logo-new + + + + + + + + + +); + +export default EPFLLogo; diff --git a/src/GraaspLogo/GraaspLogo.tsx b/src/GraaspLogo/GraaspLogo.tsx index beb91b7d5..3ca6c216a 100644 --- a/src/GraaspLogo/GraaspLogo.tsx +++ b/src/GraaspLogo/GraaspLogo.tsx @@ -1,23 +1,12 @@ -type GraaspLogoProps = { +type Props = { height: number; - /** - * sx contains 'fill' which defines a color for the logo - * */ - sx?: { fill: string }; }; -const GraaspLogo = ({ height, sx }: GraaspLogoProps): JSX.Element => { +const GraaspLogo = ({ height }: Props): JSX.Element => { return ( - - - + <> + LNCO Logo + ); }; diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx index 147e9c923..f2f69b2da 100644 --- a/src/Header/Header.tsx +++ b/src/Header/Header.tsx @@ -19,7 +19,7 @@ const OPEN_DRAWER_LABEL = 'Open Drawer'; const CLOSE_DRAWER_LABEL = 'Close Drawer'; export const buildHeaderGradient = (color: string): string => - `linear-gradient(90deg, ${PRIMARY_COLOR} 0%, ${PRIMARY_COLOR} 35%, ${color} 100%);`; + `linear-gradient(90deg, #111 0%, #111 35%, ${color} 100%);`; const StyledIconButton = styled(IconButton)( ({ theme, isSidebarOpen }: { theme: Theme; isSidebarOpen?: boolean }) => ({ diff --git a/src/Main/LogoHeader.tsx b/src/Main/LogoHeader.tsx index 86333a28f..3fa66521c 100644 --- a/src/Main/LogoHeader.tsx +++ b/src/Main/LogoHeader.tsx @@ -8,14 +8,15 @@ const LogoHeader = (): JSX.Element => ( alignItems='center' textTransform='none' color='inherit' + sx={{ marginRight: '8px' }} > - + - Graasp + LNCO.ai ); diff --git a/src/PlatformSwitch/PlatformSwitch.stories.tsx b/src/PlatformSwitch/PlatformSwitch.stories.tsx index 69727cf10..fc5297eab 100644 --- a/src/PlatformSwitch/PlatformSwitch.stories.tsx +++ b/src/PlatformSwitch/PlatformSwitch.stories.tsx @@ -21,9 +21,6 @@ const MOCK_PLATFORM_PROPS = { [Platform.Player]: { href: 'player', }, - [Platform.Library]: { - href: 'library', - }, [Platform.Analytics]: { href: 'analytics', }, @@ -59,7 +56,6 @@ export const Light: Story = { checkHref(canvas, Platform.Builder, args.platformsProps); checkHref(canvas, Platform.Player, args.platformsProps); checkHref(canvas, Platform.Analytics, args.platformsProps); - checkHref(canvas, Platform.Library, args.platformsProps); }, }; @@ -78,7 +74,6 @@ export const Dark: Story = { checkHref(canvas, Platform.Builder, args.platformsProps); checkHref(canvas, Platform.Player, args.platformsProps); checkHref(canvas, Platform.Analytics, args.platformsProps); - checkHref(canvas, Platform.Library, args.platformsProps); }, }; @@ -97,7 +92,6 @@ export const Disabled: Story = { const canvas = within(canvasElement); checkHref(canvas, Platform.Builder, args.platformsProps); checkHref(canvas, Platform.Player, args.platformsProps); - checkHref(canvas, Platform.Library, args.platformsProps); // disabled const button = await canvas.findByTestId(Platform.Analytics); @@ -123,10 +117,6 @@ export const CustomTooltips: Story = { Player: { tooltip: 'Platform 2', }, - Library: { - disabled: true, - tooltip: 'Platform 3', - }, Analytics: { tooltip: 'Platform 4', placement: 'right', @@ -138,7 +128,6 @@ export const CustomTooltips: Story = { checkHref(canvas, Platform.Builder, args.platformsProps); checkHref(canvas, Platform.Player, args.platformsProps); checkHref(canvas, Platform.Analytics, args.platformsProps); - checkHref(canvas, Platform.Library, args.platformsProps); }, }; @@ -159,7 +148,6 @@ export const Mobile: Story = { await userEvent.hover(button as Element); await canvas.findByLabelText(Platform.Player); await canvas.findByLabelText(Platform.Builder); - await canvas.findByLabelText(Platform.Library); await canvas.findByLabelText(Platform.Analytics); }, }; @@ -181,7 +169,6 @@ export const CustomIconForMobile: Story = { await userEvent.hover(button as Element); await canvas.findByLabelText(Platform.Player); await canvas.findByLabelText(Platform.Builder); - await canvas.findByLabelText(Platform.Library); await canvas.findByLabelText(Platform.Analytics); }, }; diff --git a/src/PlatformSwitch/PlatformSwitch.tsx b/src/PlatformSwitch/PlatformSwitch.tsx index 016d0a83f..fef7d420a 100644 --- a/src/PlatformSwitch/PlatformSwitch.tsx +++ b/src/PlatformSwitch/PlatformSwitch.tsx @@ -9,12 +9,7 @@ import { useTheme, } from '@mui/material'; -import { - AnalyticsIcon, - BuildIcon, - LibraryIcon, - PlayIcon, -} from '../icons/index.js'; +import { AnalyticsIcon, BuildIcon, PlayIcon } from '../icons/index.js'; import { PRIMARY_COLOR, SECONDARY_COLOR } from '../theme.js'; import { Platform } from './hooks.js'; @@ -79,7 +74,6 @@ type IconProps = { const PlatformIcons: Record JSX.Element> = { [Platform.Builder]: BuildIcon, [Platform.Player]: PlayIcon, - [Platform.Library]: LibraryIcon, [Platform.Analytics]: AnalyticsIcon, }; diff --git a/src/PlatformSwitch/hooks.ts b/src/PlatformSwitch/hooks.ts index 0b196bd15..00b62ce9c 100644 --- a/src/PlatformSwitch/hooks.ts +++ b/src/PlatformSwitch/hooks.ts @@ -2,7 +2,6 @@ export enum Platform { Builder = 'Builder', Player = 'Player', - Library = 'Library', Analytics = 'Analytics', } @@ -34,11 +33,6 @@ export function defaultHostsMapper( `${origin}/items/${itemId}`, [Platform.Player]: (origin: string, itemId: string) => `${origin}/${itemId}`, - [Platform.Library]: (origin: string, _itemId: string) => - // for now redirect to library home - // in the future we may want to redirect to itemId and - // redirect to home only if it is not published from there - `${origin}`, [Platform.Analytics]: (origin: string, itemId: string) => `${origin}/items/${itemId}`, }; diff --git a/src/index.ts b/src/index.ts index 9b0acb788..ee129b7bc 100644 --- a/src/index.ts +++ b/src/index.ts @@ -35,6 +35,7 @@ export { default as Main } from './Main/Main.js'; export { default as withCollapse } from './Collapse/withCollapse.js'; export { default as GraaspLogo } from './GraaspLogo/GraaspLogo.js'; +export { default as EpflLogo } from './GraaspLogo/EpflLogo.js'; export { default as ItemLoginAuthorization } from './itemLogin/ItemLoginAuthorization.js'; export { default as ForbiddenContent } from './itemLogin/ForbiddenContent.js'; diff --git a/src/theme.ts b/src/theme.ts index 5d1bb517c..d8656227b 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -7,7 +7,7 @@ import { import { Context } from '@graasp/sdk'; -export const PRIMARY_COLOR = '#5050d2'; +export const PRIMARY_COLOR = '#000000'; export const SECONDARY_COLOR = '#FFFFFF'; /** @@ -25,22 +25,22 @@ export const DEFAULT_ACTIVE_ACTION_COLOR = '#777578'; * For example in card thumbnails. */ export const DEFAULT_LIGHT_PRIMARY_COLOR = { - main: 'hsl(249, 100%, 94%)', - dark: 'hsl(249, 100%, 90%)', + main: '#ebeaea', + dark: '#cbcaca', } as const; /** - * Very light purple color used as the default background color. + * Very light red color used as the default background color. * Alternative to the pure white default */ -export const DEFAULT_BACKGROUND_COLOR = '#fafaff'; +export const DEFAULT_BACKGROUND_COLOR = '#fffefe'; export const AccentColors: { [K in Context]: string } = { - [Context.Builder]: '#00C38B', - [Context.Player]: '#56B0F8', - [Context.Library]: '#C658D0', - [Context.Analytics]: '#FA5B7D', - [Context.Account]: '#F2C955', + [Context.Builder]: '#a3a3a3', + [Context.Player]: '#a3a3a3', + [Context.Analytics]: '#a3a3a3', + [Context.Account]: '#a3a3a3', + [Context.Library]: '#a3a3a3', [Context.Auth]: PRIMARY_COLOR, [Context.Unknown]: PRIMARY_COLOR, } as const; @@ -104,8 +104,8 @@ export const createGraaspTheme = ({ MuiAvatar: { styleOverrides: { root: { - color: 'white', - backgroundColor: '#bcbcbc', + color: '#bcbcbc', + backgroundColor: 'white', }, }, }, diff --git a/src/upload/FileDropper/FileDropper.tsx b/src/upload/FileDropper/FileDropper.tsx index 21899b9da..fc665fd0c 100644 --- a/src/upload/FileDropper/FileDropper.tsx +++ b/src/upload/FileDropper/FileDropper.tsx @@ -12,6 +12,8 @@ import { import { DndProvider, DropTargetMonitor, useDrop } from 'react-dnd'; import { HTML5Backend, NativeTypes } from 'react-dnd-html5-backend'; +import { DEFAULT_LIGHT_PRIMARY_COLOR } from '@/theme.js'; + import UploadFileButton, { UploadFileButtonProps, } from '../UploadFileButton/UploadFileButton.js'; @@ -95,11 +97,11 @@ const FileDropperComponent = ({ }); const isActive = canDrop && isOver; - let bgColor = '#eeeefa'; + let bgColor: string = DEFAULT_LIGHT_PRIMARY_COLOR.main; if (isActive) { - bgColor = '#dcdcf6'; + bgColor = DEFAULT_LIGHT_PRIMARY_COLOR.dark; } else if (!canDrop && isOver) { - bgColor = '#ffbaba'; + bgColor = '#bababa'; } return (