Added Social icons (#2137)

* Added Social icons

* Removed unused import

* Icon name fixed

* package-lock.json reverted

* Delete package-lock.json

* Added colors to theme

* Social icons refactored

* Discord icon size fixed

* Discord icon color fixed

* Discord icon replaced with the new one

* Icons colors changed

* Social Network Links

Co-authored-by: Oleg Shuralev <workshur@gmail.com>

kafka-ui-react-app/src/components/App.styled.ts

@@ -2,6 +2,8 @@ import styled, { css } from 'styled-components';
 import { Link } from 'react-router-dom';
 
 import { Button } from './common/Button/Button';
+import GitIcon from './common/Icons/GitIcon';
+import DiscordIcon from './common/Icons/DiscordIcon';
 
 export const Layout = styled.div`
   min-width: 1200px;
@@ -75,7 +77,7 @@ export const Overlay = styled.div<{ $visible: boolean }>(
   ({ theme, $visible }) => css`
     height: calc(100vh - ${theme.layout.navBarHeight});
     z-index: 99;
-    visibility: 'hidden';
+    visibility: hidden;
     opacity: 0;
     -webkit-transition: all 0.5s ease;
     transition: all 0.5s ease;
@@ -87,7 +89,7 @@ export const Overlay = styled.div<{ $visible: boolean }>(
       @media screen and (max-width: 1023px) {
         bottom: 0;
         right: 0;
-        visibility: 'visible';
+        visibility: visible;
         opacity: 0.7;
         background-color: ${theme.layout.overlay.backgroundColor};
       }
@@ -97,6 +99,9 @@ export const Overlay = styled.div<{ $visible: boolean }>(
 
 export const Navbar = styled.nav(
   ({ theme }) => css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     border-bottom: 1px solid ${theme.layout.stuffBorderColor};
     position: fixed;
     top: 0;
@@ -110,13 +115,45 @@ export const Navbar = styled.nav(
 
 export const NavbarBrand = styled.div`
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   align-items: center !important;
   flex-shrink: 0;
-  align-items: stretch;
   min-height: 3.25rem;
 `;
 
+export const SocialLink = styled.a(
+  ({ theme: { layout, icons } }) => css`
+    display: block;
+    margin-top: 5px;
+    cursor: pointer;
+    fill: ${layout.socialLink.color};
+
+    &:hover {
+      ${DiscordIcon} {
+        fill: ${icons.discord.hover};
+      }
+      ${GitIcon} {
+        fill: ${icons.git.hover};
+      }
+    }
+    &:active {
+      ${DiscordIcon} {
+        fill: ${icons.discord.active};
+      }
+      ${GitIcon} {
+        fill: ${icons.git.active};
+      }
+    }
+  `
+);
+
+export const NavbarSocial = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 10px;
+`;
+
 export const NavbarItem = styled.div`
   display: flex;
   position: relative;
@@ -220,6 +257,6 @@ export const LogoutButton = styled(Button)(
 
 export const LogoutLink = styled(Link)(
   () => css`
-    margin-right: 16px;
+    margin-right: 2px;
   `
 );

kafka-ui-react-app/src/components/App.tsx

@@ -19,6 +19,8 @@ import {
 
 import * as S from './App.styled';
 import Logo from './common/Logo/Logo';
+import GitIcon from './common/Icons/GitIcon';
+import DiscordIcon from './common/Icons/DiscordIcon';
 
 const App: React.FC = () => {
   const dispatch = useAppDispatch();
@@ -64,12 +66,26 @@ const App: React.FC = () => {
                 {GIT_TAG && <Version tag={GIT_TAG} commit={GIT_COMMIT} />}
               </S.NavbarItem>
             </S.NavbarBrand>
+          </S.NavbarBrand>
+          <S.NavbarSocial>
             <S.LogoutLink to="/logout">
               <S.LogoutButton buttonType="primary" buttonSize="M">
                 Log out
               </S.LogoutButton>
             </S.LogoutLink>
-          </S.NavbarBrand>
+            <S.SocialLink
+              href="https://github.com/provectus/kafka-ui"
+              target="_blank"
+            >
+              <GitIcon />
+            </S.SocialLink>
+            <S.SocialLink
+              href="https://discord.com/invite/4DWzD7pGE5"
+              target="_blank"
+            >
+              <DiscordIcon />
+            </S.SocialLink>
+          </S.NavbarSocial>
         </S.Navbar>
 
         <S.Container>

kafka-ui-react-app/src/components/common/Icons/DiscordIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const DiscordIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    width="22"
+    height="18"
+    className={className}
+    viewBox="0 0 22 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M18.6239 1.60293C17.2217 0.92338 15.7181 0.422718 14.1459 0.135969C14.1173 0.130434 14.0887 0.144265 14.0739 0.171926C13.8805 0.535202 13.6663 1.00913 13.5163 1.38163C11.8254 1.11425 10.1431 1.11425 8.48679 1.38163C8.33676 1.00085 8.11478 0.535202 7.92053 0.171926C7.90578 0.145187 7.87718 0.131357 7.84855 0.135969C6.27725 0.421802 4.7736 0.922464 3.37052 1.60293C3.35838 1.60846 3.34797 1.61769 3.34106 1.62967C0.488942 6.13013 -0.292371 10.52 0.0909151 14.8554C0.0926494 14.8766 0.103922 14.8969 0.119532 14.9098C2.00127 16.3693 3.82406 17.2554 5.61301 17.8428C5.64164 17.852 5.67197 17.8409 5.69019 17.816C6.11337 17.2057 6.49059 16.5621 6.81402 15.8853C6.83311 15.8456 6.81489 15.7986 6.77588 15.7829C6.17754 15.5432 5.6078 15.2509 5.05975 14.919C5.0164 14.8923 5.01293 14.8268 5.05281 14.7954C5.16814 14.7041 5.2835 14.6092 5.39363 14.5133C5.41355 14.4958 5.44131 14.4921 5.46474 14.5031C9.06518 16.2394 12.9631 16.2394 16.521 14.5031C16.5445 14.4912 16.5722 14.4949 16.593 14.5124C16.7032 14.6083 16.8185 14.7041 16.9347 14.7954C16.9746 14.8268 16.972 14.8923 16.9286 14.919C16.3806 15.2574 15.8108 15.5432 15.2116 15.782C15.1726 15.7977 15.1553 15.8456 15.1744 15.8853C15.5047 16.5611 15.882 17.2047 16.2973 17.8151C16.3147 17.8409 16.3459 17.852 16.3745 17.8428C18.1721 17.2554 19.9949 16.3693 21.8766 14.9098C21.8931 14.8969 21.9035 14.8775 21.9053 14.8563C22.364 9.84408 21.1369 5.49024 18.6525 1.63058C18.6465 1.61769 18.6361 1.60846 18.6239 1.60293ZM7.35169 12.2156C6.26771 12.2156 5.37454 11.1645 5.37454 9.8736C5.37454 8.58274 6.25039 7.53164 7.35169 7.53164C8.46163 7.53164 9.34616 8.59197 9.32881 9.8736C9.32881 11.1645 8.45296 12.2156 7.35169 12.2156ZM14.6619 12.2156C13.5779 12.2156 12.6847 11.1645 12.6847 9.8736C12.6847 8.58274 13.5606 7.53164 14.6619 7.53164C15.7718 7.53164 16.6563 8.59197 16.639 9.8736C16.639 11.1645 15.7718 12.2156 14.6619 12.2156Z"
+      fillRule="evenodd"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export default styled(DiscordIcon)``;

kafka-ui-react-app/src/components/common/Icons/GitIcon.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const GitIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    width="20"
+    height="20"
+    className={className}
+    viewBox="0 0 1024 1024"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
+      transform="scale(64)"
+    />
+  </svg>
+);
+
+export default styled(GitIcon)``;

kafka-ui-react-app/src/theme/theme.ts

@@ -33,6 +33,7 @@ export const Colors = {
   brand: {
     '5': '#E8E8FC',
     '10': '#D1D1FA',
+    '15': '#B8BEF9',
     '20': '#A3A3F5',
     '50': '#4C4CFF',
     '60': '#1717CF',
@@ -54,6 +55,8 @@ export const Colors = {
     '20': '#bbdefb',
     '30': '#90caf9',
     '40': '#64b5f6',
+    '45': '#5865F2',
+    '50': '#5B67E3',
   },
 };
 
@@ -67,6 +70,9 @@ const theme = {
     overlay: {
       backgroundColor: Colors.neutral[50],
     },
+    socialLink: {
+      color: Colors.neutral[20],
+    },
   },
   panelColor: Colors.neutral[0],
   breadcrumb: Colors.neutral[30],
@@ -493,6 +499,14 @@ const theme = {
     closeModalIcon: Colors.neutral[25],
     savedIcon: Colors.brand[50],
     dropdownArrowIcon: Colors.neutral[30],
+    git: {
+      hover: Colors.neutral[70],
+      active: Colors.neutral[90],
+    },
+    discord: {
+      hover: Colors.brand[15],
+      active: Colors.blue[45],
+    },
   },
   viewer: {
     wrapper: Colors.neutral[3],