Modify(Navbar.tsx): Remove links and version from nav bar, add new logo and adjustments

Author: Poleg Kashti

frontend/src/components/NavBar/NavBar.styled.ts

@@ -83,6 +83,12 @@ export const NavbarItem = styled.div`
   padding: 0.5rem 0.75rem;
 `;
 
+export const NavbarVersion = styled.div`
+  color: ${({ theme }) => theme.input.label.color};
+  font-size: 14px;
+  margin-left: auto;
+`;
+
 export const Hyperlink = styled(Link)(
   ({ theme }) => css`
     position: relative;
@@ -99,7 +105,7 @@ export const Hyperlink = styled(Link)(
     font-family: Inter, sans-serif;
     font-style: normal;
     font-weight: bold;
-    font-size: 22px;
+    font-size: 15px;
     line-height: 16px;
     color: ${theme.default.color.normal};
 

frontend/src/components/NavBar/NavBar.tsx

@@ -1,36 +1,21 @@
 import React, { useContext } from 'react';
 import Select from 'components/common/Select/Select';
 import Logo from 'components/common/Logo/Logo';
-import Version from 'components/Version/Version';
-import GitHubIcon from 'components/common/Icons/GitHubIcon';
-import DiscordIcon from 'components/common/Icons/DiscordIcon';
-import AutoIcon from 'components/common/Icons/AutoIcon';
 import SunIcon from 'components/common/Icons/SunIcon';
 import MoonIcon from 'components/common/Icons/MoonIcon';
 import { ThemeModeContext } from 'components/contexts/ThemeModeContext';
-import ProductHuntIcon from 'components/common/Icons/ProductHuntIcon';
 import { Button } from 'components/common/Button/Button';
 import MenuIcon from 'components/common/Icons/MenuIcon';
-
 import UserInfo from './UserInfo/UserInfo';
 import * as S from './NavBar.styled';
 
 interface Props {
   onBurgerClick: () => void;
 }
 
-export type ThemeDropDownValue = 'auto_theme' | 'light_theme' | 'dark_theme';
+export type ThemeDropDownValue = 'light_theme' | 'dark_theme';
 
 const options = [
-  {
-    label: (
-      <>
-        <AutoIcon />
-        <div>Auto theme</div>
-      </>
-    ),
-    value: 'auto_theme',
-  },
   {
     label: (
       <>
@@ -64,36 +49,19 @@ const NavBar: React.FC<Props> = ({ onBurgerClick }) => {
 
           <S.Hyperlink to="/">
             <Logo />
-            kafbat UI
+            Kafka by IDFcTS
           </S.Hyperlink>
 
-          <S.NavbarItem>
-            <Version />
-          </S.NavbarItem>
         </S.NavbarBrand>
       </S.NavbarBrand>
+      <S.NavbarVersion>Version: v1.1.4</S.NavbarVersion>
       <S.NavbarSocial>
         <Select
           options={options}
           value={themeMode}
           onChange={setThemeMode}
           isThemeMode
         />
-        <S.SocialLink href="https://github.com/kafbat/kafka-ui" target="_blank">
-          <GitHubIcon />
-        </S.SocialLink>
-        <S.SocialLink
-          href="https://discord.com/invite/4DWzD7pGE5"
-          target="_blank"
-        >
-          <DiscordIcon />
-        </S.SocialLink>
-        <S.SocialLink
-          href="https://producthunt.com/products/ui-for-apache-kafka"
-          target="_blank"
-        >
-          <ProductHuntIcon />
-        </S.SocialLink>
         <UserInfo />
       </S.NavbarSocial>
     </S.Navbar>

frontend/src/components/contexts/ThemeModeContext.tsx

@@ -10,26 +10,22 @@ interface ThemeModeContextProps {
 
 export const ThemeModeContext = React.createContext<ThemeModeContextProps>({
   isDarkMode: false,
-  themeMode: 'auto_theme',
+  themeMode: 'light_theme',
   setThemeMode: () => {},
 });
 
 export const ThemeModeProvider: FC<PropsWithChildren<unknown>> = ({
   children,
 }) => {
-  const matchDark = window.matchMedia('(prefers-color-scheme: dark)');
   const [themeMode, setThemeModeState] =
-    React.useState<ThemeDropDownValue>('auto_theme');
+    React.useState<ThemeDropDownValue>('light_theme');
 
   React.useLayoutEffect(() => {
     const mode = localStorage.getItem('mode');
-    setThemeModeState((mode as ThemeDropDownValue) ?? 'auto_theme');
+    setThemeModeState((mode as ThemeDropDownValue) ?? 'light_theme');
   }, [setThemeModeState]);
 
   const isDarkMode = React.useMemo(() => {
-    if (themeMode === 'auto_theme') {
-      return matchDark.matches;
-    }
     return themeMode === 'dark_theme';
   }, [themeMode]);