Skip to content

Commit 0832462

Browse files
MothershipsMotherships
authored
[FE] Add the logo (provectus#1611)
* Changes favicon * Adds logo * Removes bulma from Version and makes it look just like in figma
1 parent 25d0098 commit 0832462

File tree

15 files changed

+134
-27
lines changed

15 files changed

+134
-27
lines changed

Diff for: ‎kafka-ui-react-app/public/favicon.ico

-106 KB
Binary file not shown.

Diff for: ‎kafka-ui-react-app/public/favicon/apple-touch-icon.png

4.15 KB
Loading

Diff for: ‎kafka-ui-react-app/public/favicon/icon-192.png

4.43 KB
Loading

Diff for: ‎kafka-ui-react-app/public/favicon/icon-512.png

13.5 KB
Loading

Diff for: ‎kafka-ui-react-app/public/favicon/icon.svg

+15
Loading

Diff for: ‎kafka-ui-react-app/public/index.html

+5-3
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" sizes="any"><!-- 32×32 -->
6+
<link rel="icon" href="%PUBLIC_URL%/favicon/icon.svg" type="image/svg+xml">
7+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon/apple-touch-icon.png"><!-- 180×180 -->
88
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
9+
10+
<meta name="viewport" content="width=device-width, initial-scale=1" />
911
<title>UI for Apache Kafka</title>
1012
<script type="text/javascript">
1113
window.basePath = "";

Diff for: ‎kafka-ui-react-app/public/manifest.json

+10-6
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
{
2-
"short_name": "React App",
3-
"name": "Create React App Sample",
2+
"name": "UI for Apache Kafka",
43
"icons": [
54
{
6-
"src": "favicon.ico",
7-
"sizes": "64x64 32x32 24x24 16x16",
8-
"type": "image/x-icon"
5+
"src": "/favicon/icon-192.png",
6+
"type": "image/png",
7+
"sizes": "192x192"
8+
},
9+
{
10+
"src": "/favicon/icon-512.png",
11+
"type": "image/png",
12+
"sizes": "512x512"
913
}
1014
],
1115
"start_url": ".",
1216
"display": "standalone",
1317
"theme_color": "#000000",
1418
"background_color": "#ffffff"
15-
}
19+
}

Diff for: ‎kafka-ui-react-app/src/components/App.styled.ts

+12-6
Original file line numberDiff line numberDiff line change
@@ -168,20 +168,26 @@ export const Span = styled.span(
168168

169169
export const Hyperlink = styled.a(
170170
({ theme }) => css`
171-
display: flex;
172171
position: relative;
172+
173+
display: flex;
173174
flex-grow: 0;
174175
flex-shrink: 0;
175176
align-items: center;
177+
gap: 8px;
178+
176179
margin: 0;
177-
color: ${theme.menu.color.active};
178-
font-size: 1.25rem;
179-
font-weight: 600;
180-
cursor: pointer;
181-
line-height: 1.5;
182180
padding: 0.5rem 0.75rem;
181+
182+
font-family: Inter, sans-serif;
183+
font-style: normal;
184+
font-weight: bold;
185+
font-size: 12px;
186+
line-height: 16px;
187+
color: ${theme.menu.color.active};
183188
text-decoration: none;
184189
word-break: break-word;
190+
cursor: pointer;
185191
`
186192
);
187193

Diff for: ‎kafka-ui-react-app/src/components/App.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
} from 'redux/reducers/clusters/clustersSlice';
1818

1919
import * as S from './App.styled';
20+
import Logo from './common/Logo/Logo';
2021

2122
const App: React.FC = () => {
2223
const dispatch = useAppDispatch();
@@ -57,7 +58,10 @@ const App: React.FC = () => {
5758
<S.Span role="separator" />
5859
</S.NavbarBurger>
5960

60-
<S.Hyperlink href="/ui">UI for Apache Kafka</S.Hyperlink>
61+
<S.Hyperlink href="/ui">
62+
<Logo />
63+
UI for Apache Kafka
64+
</S.Hyperlink>
6165

6266
<S.NavbarItem>
6367
{GIT_TAG && <Version tag={GIT_TAG} commit={GIT_COMMIT} />}

Diff for: ‎kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap

+8
Original file line numberDiff line numberDiff line change
@@ -431,6 +431,14 @@ exports[`Connectors ListItem matches snapshot 1`] = `
431431
"normal": "#171A1C",
432432
},
433433
},
434+
"version": Object {
435+
"currentVersion": Object {
436+
"color": "#ABB5BA",
437+
},
438+
"symbolWrapper": Object {
439+
"color": "#ABB5BA",
440+
},
441+
},
434442
"viewer": Object {
435443
"wrapper": "#f9fafa",
436444
},

Diff for: ‎kafka-ui-react-app/src/components/Version/Version.styled.ts

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import styled, { css } from 'styled-components';
2+
3+
export const Wrapper = styled.div`
4+
display: flex;
5+
align-items: center;
6+
`;
7+
8+
const textStyle = css`
9+
font-family: Inter, sans-serif;
10+
font-style: normal;
11+
font-weight: normal;
12+
font-size: 12px;
13+
line-height: 16px;
14+
`;
15+
16+
export const CurrentVersion = styled.span(
17+
({ theme }) => css`
18+
${textStyle}
19+
color: ${theme.version.currentVersion.color};
20+
margin-right: 0.25rem;
21+
`
22+
);
23+
24+
export const OutdatedWarning = styled.span`
25+
${textStyle}
26+
`;
27+
28+
export const SymbolWrapper = styled.span(
29+
({ theme }) => css`
30+
${textStyle}
31+
color: ${theme.version.symbolWrapper.color};
32+
`
33+
);
34+
35+
export const CurrentCommitLink = styled.a`
36+
${textStyle}
37+
`;

Diff for: ‎kafka-ui-react-app/src/components/Version/Version.tsx

+13-10
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { gitCommitPath } from 'lib/paths';
33
import { GIT_REPO_LATEST_RELEASE_LINK } from 'lib/constants';
44
import WarningIcon from 'components/common/Icons/WarningIcon';
55

6+
import * as S from './Version.styled';
67
import compareVersions from './compareVersions';
78

89
export interface VesionProps {
@@ -15,6 +16,7 @@ const Version: React.FC<VesionProps> = ({ tag, commit }) => {
1516
outdated: false,
1617
latestTag: '',
1718
});
19+
1820
useEffect(() => {
1921
fetch(GIT_REPO_LATEST_RELEASE_LINK)
2022
.then((response) => response.json())
@@ -29,30 +31,31 @@ const Version: React.FC<VesionProps> = ({ tag, commit }) => {
2931
const { outdated, latestTag } = latestVersionInfo;
3032

3133
return (
32-
<div className="is-size-8 has-text-grey">
33-
<span className="has-text-grey-light mr-1">Version:</span>
34-
<span className="mr-1">{tag}</span>
34+
<S.Wrapper>
35+
<S.CurrentVersion>{tag}</S.CurrentVersion>
36+
3537
{outdated && (
36-
<span
38+
<S.OutdatedWarning
3739
title={`Your app version is outdated. Current latest version is ${latestTag}`}
3840
>
3941
<WarningIcon />
40-
</span>
42+
</S.OutdatedWarning>
4143
)}
44+
4245
{commit && (
4346
<>
44-
<span>&#40;</span>
45-
<a
47+
<S.SymbolWrapper>&#40;</S.SymbolWrapper>
48+
<S.CurrentCommitLink
4649
title="Current commit"
4750
target="__blank"
4851
href={gitCommitPath(commit)}
4952
>
5053
{commit}
51-
</a>
52-
<span>&#41;</span>
54+
</S.CurrentCommitLink>
55+
<S.SymbolWrapper>&#41;</S.SymbolWrapper>
5356
</>
5457
)}
55-
</div>
58+
</S.Wrapper>
5659
);
5760
};
5861

Diff for: ‎kafka-ui-react-app/src/components/Version/__tests__/Version.spec.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ describe('Version', () => {
1111

1212
it('renders', () => {
1313
setupComponent({ tag });
14-
expect(screen.getByText('Version:')).toBeInTheDocument();
14+
expect(screen.getByText(tag)).toBeInTheDocument();
1515
});
1616

1717
it('shows current tag and commit', () => {

Diff for: ‎kafka-ui-react-app/src/components/common/Logo/Logo.tsx

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
3+
const Logo: React.FC = () => {
4+
return (
5+
<svg
6+
width="23"
7+
height="30"
8+
viewBox="0 0 23 30"
9+
fill="none"
10+
xmlns="http://www.w3.org/2000/svg"
11+
>
12+
<path
13+
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"
14+
fill="#4F4FFF"
15+
/>
16+
</svg>
17+
);
18+
};
19+
20+
export default Logo;

Diff for: ‎kafka-ui-react-app/src/theme/theme.ts

+8
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,14 @@ const theme = {
152152
},
153153
chevronIconColor: Colors.neutral[50],
154154
},
155+
version: {
156+
currentVersion: {
157+
color: Colors.neutral[30],
158+
},
159+
symbolWrapper: {
160+
color: Colors.neutral[30],
161+
},
162+
},
155163
schema: {
156164
backgroundColor: {
157165
tr: Colors.neutral[5],

0 commit comments

Comments
 (0)