1 small UI updates from Graasp to LNCO platform

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 (
     <StyledContainer id={id}>
-      <GraaspLogo height={100} sx={{ fill: theme.palette.primary.main }} />
+      <GraaspLogo height={100} />
       <div>
         <StyledTypography variant='h4' align='center'>
           {redirectionText ?? 'You are being redirected…'}

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 (
     <StyledContainer id={id}>
-      <GraaspLogo height={170} sx={{ fill: theme.palette.primary.main }} />
+      <GraaspLogo height={100} />
       <div>
         <StyledLinearProgress />
       </div>

src/GraaspLogo/EpflLogo.tsx

@@ -0,0 +1,26 @@
+type Props = {
+  height: number;
+};
+
+const EPFLLogo = ({ height }: Props): JSX.Element => (
+  <svg
+    id='logo_epfl_2019'
+    data-name='logo epfl 2019'
+    xmlns='http://www.w3.org/2000/svg'
+    height={height}
+    style={{ fill: 'red' }}
+    viewBox='0 0 182.4 53'
+  >
+    <title>epfl-logo-new</title>
+    <polygon points='0 21.6 11.43 21.6 11.43 9.8 38.34 9.8 38.34 0 0 0 0 21.6' />
+    <polygon points='0 53 38.34 53 38.34 43.2 11.43 43.2 11.43 31.4 0 31.4 0 53' />
+    <rect x='11.43' y='21.6' width='24.61' height='9.8' />
+    <path d='M86,4.87a16.12,16.12,0,0,0-5.68-3.53A23.76,23.76,0,0,0,71.82,0H48.14V53H59.57V31.4H71.82a23.76,23.76,0,0,0,8.46-1.34A16.12,16.12,0,0,0,86,26.53a13.43,13.43,0,0,0,3.19-5,17.38,17.38,0,0,0,0-11.62A13.52,13.52,0,0,0,86,4.87ZM78,18.73a5.7,5.7,0,0,1-2.26,1.8,11.33,11.33,0,0,1-3.27.85,32,32,0,0,1-3.86.22H59.57V9.8h9.05a32,32,0,0,1,3.86.22,11,11,0,0,1,3.27.86A5.59,5.59,0,0,1,78,12.67a5,5,0,0,1,.86,3A5,5,0,0,1,78,18.73Z' />
+    <polygon points='155.47 43.2 155.47 0 144.04 0 144.04 53 182.38 53 182.38 43.2 155.47 43.2' />
+    <polygon points='97.42 21.6 108.85 21.6 108.85 9.8 135.76 9.8 135.76 0 97.42 0 97.42 21.6' />
+    <rect x='97.42' y='31.4' width='11.43' height='21.6' />
+    <rect x='108.85' y='21.6' width='24.61' height='9.8' />
+  </svg>
+);
+
+export default EPFLLogo;

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 (
-    <svg
-      xmlns='http://www.w3.org/2000/svg'
-      viewBox='0 0 512 512'
-      height={height}
-    >
-      <path
-        style={{ fill: 'currentcolor', ...sx }}
-        d='M172.381 169.33C172.763 169.676 173.977 170.642 175.521 170.569C179.754 170.387 182.702 163.082 183.743 160.55C188.757 148.455 195.088 137.052 201.437 125.741C211.759 107.325 220.866 86.5958 248.551 50.3098C259.584 35.8285 257.45 38.2145 270.634 25.9372C277.451 19.58 284.824 14.0971 293.272 10.5815C302.327 6.81077 311.417 7.32082 318.338 14.8257C325.312 22.3851 322.519 31.5658 319.119 40.1453C316.569 46.6116 313.342 50.6557 307.791 57.7416C303.94 62.6597 302.553 64.2627 299.569 68.0882C295.822 72.879 290.705 80.1103 285.396 90.0378C264.805 129.203 250.199 158.108 247.405 164.52C246.52 166.542 244.186 173.107 244.785 175.457C245.383 177.808 247.567 178.763 249.105 179.33C253.16 180.824 256.252 174.575 258.038 170.787C283.729 116.612 288.621 98.9077 325.346 52.6768C333.534 42.3668 343.855 28.5412 352.997 19.1791C359.485 12.5304 366.823 6.8655 375.132 2.94902C385.367 -1.87809 398.238 -0.712281 403.321 5.95458C405.264 8.50477 406.426 11.0731 406.999 13.6234C408.525 20.4725 406.409 27.0846 402.385 34.3528C394.977 47.7049 385.471 55.8653 382.574 58.434C373.935 66.0846 366.476 77.3052 351.574 99.7458C324.738 140.128 310.896 185.67 316.898 189.912C317.088 190.057 317.817 190.495 318.736 190.476C323.628 190.367 326.976 177.289 327.983 173.645C329.474 168.253 337.836 152.497 354.558 120.983C364.88 101.547 371.368 89.3244 383.372 75.2087C395.22 61.2921 411.249 42.6404 426.81 46.337C433.853 48.0128 440.289 54.2791 442.648 61.6017C443.498 64.2247 445.302 70.7825 440.583 83.4056C434.772 98.9071 425.856 105.756 417.182 115.883C410.868 123.261 405.178 134.591 393.798 157.25C385.576 173.626 375.601 195.647 366.199 222.827C365.436 225.487 363.423 232.955 357.421 236.999C349.529 242.318 339.38 238.875 335.529 237.728C313.065 231.024 289.143 237.618 272.246 242.281C272.246 242.281 236.321 252.19 210.943 284.578C201.333 296.819 195.417 309.825 194.481 311.974C190.907 320.207 186.796 330.627 185.391 345.018C182.615 373.562 193.578 395.31 215.8 411.032C252.28 436.826 307.255 430.796 334.003 403.928C338.357 399.557 347.776 390.103 346.701 378.19C345.885 369.191 339.242 360.357 331.002 356.95C316.482 350.939 307.843 366.277 282.013 367.661C272.558 368.171 257.38 368.991 248.447 357.843C238.142 344.965 244.717 324.527 245.116 323.306C248.256 313.833 253.946 307.913 257.033 305.126C265.863 298.751 284.442 287.184 310.201 284.816C321.685 283.759 344.93 281.574 367.498 296.529C399.815 317.968 405.261 356.769 405.869 361.649C411.75 408.735 379.484 444.091 366.44 458.356C339.726 487.592 309.612 497.557 292.663 502.929C277.605 507.702 231.202 521.637 177.963 501.144C144.188 488.138 123.547 467.371 119.016 462.747C105.069 448.466 93.655 431.58 85.2777 412.837C81.5479 404.476 73.0827 383.965 69.6133 350.43C61.2693 269.789 86.6134 191.643 115.219 148.129C126.321 131.226 147.502 97.5267 156.973 87.3064C162.732 81.0949 169.897 72.3879 188.266 61.5313C193.852 58.2343 199.663 55.2832 206.029 54.6459C210.661 54.1905 214.113 55.5566 216.056 58.2343C218.207 61.2034 218.12 65.3202 217.201 69.5097C213.506 86.3592 196.714 107.379 185.593 126.816C175.359 144.667 167.708 165.067 172.375 169.332L172.381 169.33Z'
-      />
-    </svg>
+    <>
+      <img alt='LNCO Logo' height={height} src='/lnco-logo.png' />
+    </>
   );
 };
 

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 }) => ({

src/Main/LogoHeader.tsx

@@ -8,14 +8,15 @@ const LogoHeader = (): JSX.Element => (
     alignItems='center'
     textTransform='none'
     color='inherit'
+    sx={{ marginRight: '8px' }}
   >
-    <GraaspLogo height={40} sx={{ fill: 'white' }} />
+    <GraaspLogo height={50} />
     <Typography
       sx={{ display: { xs: 'none', sm: 'block' } }}
       color='currentcolor'
       variant='h6'
     >
-      Graasp
+      LNCO.ai
     </Typography>
   </Stack>
 );

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);
   },
 };

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<Platform, (props: IconProps) => JSX.Element> = {
   [Platform.Builder]: BuildIcon,
   [Platform.Player]: PlayIcon,
-  [Platform.Library]: LibraryIcon,
   [Platform.Analytics]: AnalyticsIcon,
 };
 

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}`,
   };

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';

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',
           },
         },
       },

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 (