sc-9903 Add new GDS logo to Nav Menu

web/gds-user-ui/src/components/Header/LandingHeader.tsx

@@ -38,7 +38,6 @@ const LandingHeader = (props: FlexProps): JSX.Element => {
     <Flex
       width="100%"
       position={'relative'}
-      p={{ base: 4, md: 8 }}
       bg={'transparent'}
       boxShadow="md"
       color={colors.system.blue}
@@ -49,7 +48,7 @@ const LandingHeader = (props: FlexProps): JSX.Element => {
             <Box>
               <NavLink to={'/'}>
                 <Link _active={{ outline: 'none' }} _focus={{ outline: 'none' }}>
-                  <Logo w={{ base: '50px', md: '100px' }} color={['colors.system.blue']} />
+                  <Logo w={{ base: '50px', md: '120px' }} color={['colors.system.blue']} />
                 </Link>
               </NavLink>
             </Box>

web/gds-user-ui/src/components/Sidebar/SidebarContent.tsx

@@ -7,21 +7,21 @@ import {
   Divider,
   VStack,
   Stack,
-  Heading,
   Link,
   Icon,
   Text,
   Collapse,
   List
 } from '@chakra-ui/react';
-import trisaLogo from '../../assets/trisa.svg';
+import trisaLogo from 'assets/TRISA-GDS.svg';
 import NavItem, { StyledNavItem } from './NavItem';
 import MenuItems from '../../utils/menu';
 import { MdContactSupport } from 'react-icons/md';
 import { IoLogoSlack } from 'react-icons/io';
 import { Fragment, useState } from 'react';
 import { Trans } from '@lingui/react';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
+import ChakraRouterLink from 'components/ChakraRouterLink';
 
 interface SidebarProps extends BoxProps {
   onClose: () => void;
@@ -40,12 +40,11 @@ const SidebarContent = ({ onClose, ...rest }: SidebarProps) => {
       h="full"
       {...rest}>
       <Flex h="20" alignItems="center" mx="8" my={2} justifyContent="space-between">
-        <Stack width="100%" direction={['row']}>
-          <LazyLoadImage src={trisaLogo} alt="GDS UI" />
-          <Heading size="sm" color="#FFFFFF" lineHeight={1.35}>
-            <Trans id="Global Directory Service">Global Directory Service</Trans>
-          </Heading>
-        </Stack>
+        <ChakraRouterLink to="/dashboard/overview">
+          <Stack width="100%" direction={['row']} height="200px">
+            <LazyLoadImage src={trisaLogo} alt="GDS UI" />
+          </Stack>
+        </ChakraRouterLink>
         <CloseButton display={{ base: 'flex', md: 'none' }} onClick={onClose} />
       </Flex>
       <VStack alignItems="flex-start" justifyContent="center" spacing={0}>

web/gds-user-ui/src/components/ui/Logo.tsx

@@ -1,13 +1,13 @@
 import { Box, BoxProps } from '@chakra-ui/react';
-import TrisaLogo from 'assets/trisa_logo.svg';
 import CkLazyLoadImage from 'components/LazyImage';
 import { Link } from 'react-router-dom';
+import TrisaLogo from 'assets/TRISA-GDS-black.png';
 
 export default function Logo(props: BoxProps) {
   return (
     <Box {...props}>
       <Link to="/">
-        <CkLazyLoadImage src={TrisaLogo} alt="Trisa logo" width="100px" height="50px" />
+        <CkLazyLoadImage src={TrisaLogo} alt="Trisa logo" />
       </Link>
     </Box>
   );