RI-7504: fix alignment of redis icon

redisinsight/ui/src/components/base/icons/iconRegistry.tsx

@@ -156,6 +156,7 @@ export {
   GoogleSigninIcon,
   SsoIcon,
   GithubIcon,
+  RedisLogoDarkMinIcon,
 } from '@redis-ui/icons/multicolor'
 
 // Common icons

redisinsight/ui/src/components/base/layout/sidebar/SideBarItemIcon.tsx

@@ -2,6 +2,6 @@ import React from 'react'
 
 import { RiSideBarItemIconProps, StyledIcon } from './sidebar-item-icon.styles'
 
-export const SideBarItemIcon = (props: RiSideBarItemIconProps) => (
-  <StyledIcon {...props} />
+export const SideBarItemIcon = ({centered, ...props}: RiSideBarItemIconProps) => (
+  <StyledIcon {...props} $centered={centered} />
 )

redisinsight/ui/src/components/base/layout/sidebar/sidebar-item-icon.styles.ts

@@ -1,19 +1,26 @@
 import { SideBar } from '@redis-ui/components'
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
 
 export type RiSideBarItemIconProps = Omit<
   React.ComponentProps<typeof SideBar.Item.Icon>,
   'width' | 'height'
 > & {
   width?: string
   height?: string
+  centered?: boolean
 }
 
-export const StyledIcon = styled(SideBar.Item.Icon)<RiSideBarItemIconProps>`
-  ${({ width = 'inherit' }) => css`
+export const StyledIcon = styled(SideBar.Item.Icon)<RiSideBarItemIconProps & {
+  $centered?: boolean
+}>`
+  ${({ width = 'inherit' }) => `
     width: ${width};
   `}
-  ${({ height = 'inherit' }) => css`
+  ${({ height = 'inherit' }) => `
     height: ${height};
   `}
+  ${({ $centered }) => $centered && `
+    justify-content: center;
+    align-items: center;
+  `}
 `

redisinsight/ui/src/components/navigation-menu/components/redis-logo/RedisLogo.tsx

@@ -1,4 +1,3 @@
-import cx from 'classnames'
 import React from 'react'
 import { useSelector } from 'react-redux'
 
@@ -12,22 +11,38 @@ import {
 import { getRouterLinkProps } from 'uiSrc/services'
 import { Pages } from 'uiSrc/constants'
 import { Link } from 'uiSrc/components/base/link/Link'
-import LogoSVG from 'uiSrc/assets/img/logo_small.svg?react'
-import styles from '../../styles.module.scss'
+import { RedisLogoDarkMinIcon } from 'uiSrc/components/base/icons'
+import styled from 'styled-components'
 
 type Props = {
   isRdiWorkspace: boolean
 }
 
+const RedisLogoIcon = styled.span`
+  height: 60px;
+  width: 100%;
+  @media only screen and (min-width: 768px) {
+    height: 72px;
+  }
+  svg {
+    width: 30px;
+    height: 34px;
+  }
+`
+
 export const RedisLogo = ({ isRdiWorkspace }: Props) => {
   const { envDependent } = useSelector(appFeatureFlagsFeaturesSelector)
   const { server } = useSelector(appInfoSelector)
 
   if (!envDependent?.flag) {
     return (
-      <span className={cx(styles.iconNavItem, styles.homeIcon)}>
-        <SideBarItemIcon aria-label="Redis Insight Homepage" icon={LogoSVG} />
-      </span>
+      <RedisLogoIcon>
+        <SideBarItemIcon height="50px" width="50px"
+          aria-label="Redis Insight Homepage"
+          icon={RedisLogoDarkMinIcon}
+          centered
+        />
+      </RedisLogoIcon>
     )
   }
 
@@ -49,7 +64,7 @@ export const RedisLogo = ({ isRdiWorkspace }: Props) => {
         }}
         style={{ marginBlock: '2rem', marginInline: 'auto' }}
       >
-        <SideBarItemIcon icon={LogoSVG} />
+        <SideBarItemIcon icon={RedisLogoDarkMinIcon} />
       </SideBarItem>
     </Link>
   )