We use cookies to ensure you get the best experience on our website
Home Explore Help
Register Sign In
0ct0pu5
/
kafka-ui
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

[FE] Add the logo (#1611)

* Changes favicon

* Adds logo

* Removes bulma from Version and makes it look just like in figma
Damir Abdulganiev 3 years ago
parent
25d00988ad
commit
0832462bfc
15 changed files with 134 additions and 27 deletions
Split View Show Diff Stats
  1. BIN
      kafka-ui-react-app/public/favicon.ico
  2. BIN
      kafka-ui-react-app/public/favicon/apple-touch-icon.png
  3. BIN
      kafka-ui-react-app/public/favicon/icon-192.png
  4. BIN
      kafka-ui-react-app/public/favicon/icon-512.png
  5. 15 0
      kafka-ui-react-app/public/favicon/icon.svg
  6. 5 3
      kafka-ui-react-app/public/index.html
  7. 10 6
      kafka-ui-react-app/public/manifest.json
  8. 12 6
      kafka-ui-react-app/src/components/App.styled.ts
  9. 5 1
      kafka-ui-react-app/src/components/App.tsx
  10. 8 0
      kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap
  11. 37 0
      kafka-ui-react-app/src/components/Version/Version.styled.ts
  12. 13 10
      kafka-ui-react-app/src/components/Version/Version.tsx
  13. 1 1
      kafka-ui-react-app/src/components/Version/__tests__/Version.spec.tsx
  14. 20 0
      kafka-ui-react-app/src/components/common/Logo/Logo.tsx
  15. 8 0
      kafka-ui-react-app/src/theme/theme.ts

BIN
kafka-ui-react-app/public/favicon.ico
View File


BIN
kafka-ui-react-app/public/favicon/apple-touch-icon.png
View File


BIN
kafka-ui-react-app/public/favicon/icon-192.png
View File


BIN
kafka-ui-react-app/public/favicon/icon-512.png
View File


+ 15 - 0
kafka-ui-react-app/public/favicon/icon.svg
View File 

@@ -0,0 +1,15 @@
 
+<svg width="32" height="32" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+  <style>
 
+    @media (prefers-color-scheme: dark) {
 
+      #faviconCircle {
 
+        fill: white;
 
+      }
 
+      #faviconLogo {
 
+        fill: #4F4FFF;
 
+      }
 
+    }
 
+  </style>
 
+
 
+  <circle id="faviconCircle" cx="8" cy="8.57983" r="8" fill="#4F4FFF"/>
 
+  <path id="faviconLogo" d="M4.75773 2.62842C4.75773 2.62842 7.29142 6.23837 11.7986 7.97159C11.7986 7.97159 14.8056 5.45572 11.8981 9.07271C8.99049 12.6897 4.5637 14.8803 4.75773 14.6111C5.33474 13.8107 7.23785 12.2813 6.26513 11.338C8.17454 9.48627 3.87891 8.26547 3.87891 8.26547C4.99205 5.85605 4.75773 2.62842 4.75773 2.62842Z" fill="white"/>
 
+</svg>

+ 5 - 3
kafka-ui-react-app/public/index.html
View File 

@@ -2,10 +2,12 @@
 
 <html lang="en">
 
   <head>
 
     <meta charset="utf-8" />
 
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" sizes="any"><!-- 32×32 -->
 
+    <link rel="icon" href="%PUBLIC_URL%/favicon/icon.svg" type="image/svg+xml">
 
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon/apple-touch-icon.png"><!-- 180×180 -->
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
+
 
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <title>UI for Apache Kafka</title>
 
     <script type="text/javascript">
 
       window.basePath = "";

+ 10 - 6
kafka-ui-react-app/public/manifest.json
View File 

@@ -1,15 +1,19 @@
 
 {
 
-  "short_name": "React App",
 
-  "name": "Create React App Sample",
 
+  "name": "UI for Apache Kafka",
 
   "icons": [
 
     {
 
-      "src": "favicon.ico",
 
-      "sizes": "64x64 32x32 24x24 16x16",
 
-      "type": "image/x-icon"
 
+      "src": "/favicon/icon-192.png",
 
+      "type": "image/png",
 
+      "sizes": "192x192"
 
+    },
 
+    {
 
+      "src": "/favicon/icon-512.png",
 
+      "type": "image/png",
 
+      "sizes": "512x512"
 
     }
 
   ],
 
   "start_url": ".",
 
   "display": "standalone",
 
   "theme_color": "#000000",
 
   "background_color": "#ffffff"
 
-}
 
+}

+ 12 - 6
kafka-ui-react-app/src/components/App.styled.ts
View File 

@@ -168,20 +168,26 @@ export const Span = styled.span(
 
 
 export const Hyperlink = styled.a(
 
   ({ theme }) => css`
 
-    display: flex;
 
     position: relative;
 
+
 
+    display: flex;
 
     flex-grow: 0;
 
     flex-shrink: 0;
 
     align-items: center;
 
+    gap: 8px;
 
+
 
     margin: 0;
 
-    color: ${theme.menu.color.active};
 
-    font-size: 1.25rem;
 
-    font-weight: 600;
 
-    cursor: pointer;
 
-    line-height: 1.5;
 
     padding: 0.5rem 0.75rem;
 
+
 
+    font-family: Inter, sans-serif;
 
+    font-style: normal;
 
+    font-weight: bold;
 
+    font-size: 12px;
 
+    line-height: 16px;
 
+    color: ${theme.menu.color.active};
 
     text-decoration: none;
 
     word-break: break-word;
 
+    cursor: pointer;
 
   `
 
 );

+ 5 - 1
kafka-ui-react-app/src/components/App.tsx
View File 

@@ -17,6 +17,7 @@ import {
 
 } from 'redux/reducers/clusters/clustersSlice';
 
 
 import * as S from './App.styled';
 
+import Logo from './common/Logo/Logo';
 
 
 const App: React.FC = () => {
 
   const dispatch = useAppDispatch();
 
@@ -57,7 +58,10 @@ const App: React.FC = () => {
 
               <S.Span role="separator" />
 
             </S.NavbarBurger>
 
 
-            <S.Hyperlink href="/ui">UI for Apache Kafka</S.Hyperlink>
 
+            <S.Hyperlink href="/ui">
 
+              <Logo />
 
+              UI for Apache Kafka
 
+            </S.Hyperlink>
 
 
             <S.NavbarItem>
 
               {GIT_TAG && <Version tag={GIT_TAG} commit={GIT_COMMIT} />}

+ 8 - 0
kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap
View File 

@@ -431,6 +431,14 @@ exports[`Connectors ListItem matches snapshot 1`] = `
 
           "normal": "#171A1C",
 
         },
 
       },
 
+      "version": Object {
 
+        "currentVersion": Object {
 
+          "color": "#ABB5BA",
 
+        },
 
+        "symbolWrapper": Object {
 
+          "color": "#ABB5BA",
 
+        },
 
+      },
 
       "viewer": Object {
 
         "wrapper": "#f9fafa",
 
       },

+ 37 - 0
kafka-ui-react-app/src/components/Version/Version.styled.ts
View File 

@@ -0,0 +1,37 @@
 
+import styled, { css } from 'styled-components';
 
+
 
+export const Wrapper = styled.div`
 
+  display: flex;
 
+  align-items: center;
 
+`;
 
+
 
+const textStyle = css`
 
+  font-family: Inter, sans-serif;
 
+  font-style: normal;
 
+  font-weight: normal;
 
+  font-size: 12px;
 
+  line-height: 16px;
 
+`;
 
+
 
+export const CurrentVersion = styled.span(
 
+  ({ theme }) => css`
 
+    ${textStyle}
 
+    color: ${theme.version.currentVersion.color};
 
+    margin-right: 0.25rem;
 
+  `
 
+);
 
+
 
+export const OutdatedWarning = styled.span`
 
+  ${textStyle}
 
+`;
 
+
 
+export const SymbolWrapper = styled.span(
 
+  ({ theme }) => css`
 
+    ${textStyle}
 
+    color: ${theme.version.symbolWrapper.color};
 
+  `
 
+);
 
+
 
+export const CurrentCommitLink = styled.a`
 
+  ${textStyle}
 
+`;

+ 13 - 10
kafka-ui-react-app/src/components/Version/Version.tsx
View File 

@@ -3,6 +3,7 @@ import { gitCommitPath } from 'lib/paths';
 
 import { GIT_REPO_LATEST_RELEASE_LINK } from 'lib/constants';
 
 import WarningIcon from 'components/common/Icons/WarningIcon';
 
 
+import * as S from './Version.styled';
 
 import compareVersions from './compareVersions';
 
 
 export interface VesionProps {
 
@@ -15,6 +16,7 @@ const Version: React.FC<VesionProps> = ({ tag, commit }) => {
 
     outdated: false,
 
     latestTag: '',
 
   });
 
+
 
   useEffect(() => {
 
     fetch(GIT_REPO_LATEST_RELEASE_LINK)
 
       .then((response) => response.json())
 
@@ -29,30 +31,31 @@ const Version: React.FC<VesionProps> = ({ tag, commit }) => {
 
   const { outdated, latestTag } = latestVersionInfo;
 
 
   return (
 
-    <div className="is-size-8 has-text-grey">
 
-      <span className="has-text-grey-light mr-1">Version:</span>
 
-      <span className="mr-1">{tag}</span>
 
+    <S.Wrapper>
 
+      <S.CurrentVersion>{tag}</S.CurrentVersion>
 
+
 
       {outdated && (
 
-        <span
 
+        <S.OutdatedWarning
 
           title={`Your app version is outdated. Current latest version is ${latestTag}`}
 
         >
 
           <WarningIcon />
 
-        </span>
 
+        </S.OutdatedWarning>
 
       )}
 
+
 
       {commit && (
 
         <>
 
-          <span>&#40;</span>
 
-          <a
 
+          <S.SymbolWrapper>&#40;</S.SymbolWrapper>
 
+          <S.CurrentCommitLink
 
             title="Current commit"
 
             target="__blank"
 
             href={gitCommitPath(commit)}
 
           >
 
             {commit}
 
-          </a>
 
-          <span>&#41;</span>
 
+          </S.CurrentCommitLink>
 
+          <S.SymbolWrapper>&#41;</S.SymbolWrapper>
 
         </>
 
       )}
 
-    </div>
 
+    </S.Wrapper>
 
   );
 
 };

+ 1 - 1
kafka-ui-react-app/src/components/Version/__tests__/Version.spec.tsx
View File 

@@ -11,7 +11,7 @@ describe('Version', () => {
 
 
   it('renders', () => {
 
     setupComponent({ tag });
 
-    expect(screen.getByText('Version:')).toBeInTheDocument();
 
+    expect(screen.getByText(tag)).toBeInTheDocument();
 
   });
 
 
   it('shows current tag and commit', () => {

+ 20 - 0
kafka-ui-react-app/src/components/common/Logo/Logo.tsx
View File 

@@ -0,0 +1,20 @@
 
+import React from 'react';
 
+
 
+const Logo: React.FC = () => {
 
+  return (
 
+    <svg
 
+      width="23"
 
+      height="30"
 
+      viewBox="0 0 23 30"
 
+      fill="none"
 
+      xmlns="http://www.w3.org/2000/svg"
 
+    >
 
+      <path
 
+        d="M2.17668 0C2.17668 0 8.45218 9.02115 19.6155 13.3524C19.6155 13.3524 27.0635 7.06532 19.862 16.1041C12.6605 25.1428 1.6961 30.617 2.17668 29.9444C3.60584 27.9442 8.31948 24.1222 5.91024 21.7649C10.6395 17.1375 0 14.0868 0 14.0868C2.75705 8.06572 2.17668 0 2.17668 0Z"
 
+        fill="#4F4FFF"
 
+      />
 
+    </svg>
 
+  );
 
+};
 
+
 
+export default Logo;

+ 8 - 0
kafka-ui-react-app/src/theme/theme.ts
View File 

@@ -152,6 +152,14 @@ const theme = {
 
     },
 
     chevronIconColor: Colors.neutral[50],
 
   },
 
+  version: {
 
+    currentVersion: {
 
+      color: Colors.neutral[30],
 
+    },
 
+    symbolWrapper: {
 
+      color: Colors.neutral[30],
 
+    },
 
+  },
 
   schema: {
 
     backgroundColor: {
 
       tr: Colors.neutral[5],

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5