0ct0pu5/kafka-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[FE] Add the logo (#1611)

Browse source 
* Changes favicon

* Adds logo

* Removes bulma from Version and makes it look just like in figma
This commit is contained in:
Damir Abdulganiev 2022-02-18 12:32:54 +03:00 • committed by GitHub
parent 25d00988ad
commit 0832462bfc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 134 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 110 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.1 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.4 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

15
kafka-ui-react-app/public/favicon/icon.svg Normal file
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>
Side by side

After

Width:  |  Height:  |  Size: 697 B

8
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 = "";

16
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"
}
}

18
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;
`
);

6
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
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
kafka-ui-react-app/src/components/Version/Version.styled.ts Normal file
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}
`;

23
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>
);
};

2
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
kafka-ui-react-app/src/components/common/Logo/Logo.tsx Normal file
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
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],