Skip to content

Commit 2790de7

Browse files
winkletinklewinkletinkle
authored
Merge pull request #18 from launchmelunchme/ui-packages
ui packages
2 parents 2413d42 + aea7523 commit 2790de7

File tree

5 files changed

+98
-70
lines changed

5 files changed

+98
-70
lines changed

‎ui/src/components/ExtensionComponent/ExtensionComponent.js‎

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,11 @@ import React, { useState, useEffect } from "react";
22
import { Typography, Button, Tooltip } from "@mui/material";
33
import { createTheme, ThemeProvider } from "@mui/material/styles";
44
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
5-
// import ConsulIcon from '../../img/SVGs/consulIcon'
6-
// import IstioIcon from '../../img/SVGs/IstioIcon'
7-
// import KumaIcon from '../../img/SVGs/kumaIcon'
8-
// import LinkerdIcon from '../../img/SVGs/linkerdIcon'
95
import Tour from "../Walkthrough/Tour";
106
import { Avatar } from "@mui/material";
11-
// import NginxIcon from '../../img/SVGs/nginxIcon'
12-
// import AppmeshIcon from '../../img/SVGs/appmeshIcon'
13-
// import CiliumIcon from '../../img/SVGs/ciliumIcon'
14-
// import TraefikIcon from '../../img/SVGs/traefikIcon'
15-
import Kanvas from "../../img/SVGs/Kanvas";
7+
import KanvasWhite from "../../img/SVGs/kanvasWhite";
8+
import DocsIcon from "../../img/SVGs/docsIcon";
9+
import KanvasHorizontalLight from "../../img/SVGs/KanvasHorizontalLight";
1610
import KanvasIcon from "../../img/kanvas-logo/CustomKanvasLogo";
1711
import { DockerMuiThemeProvider } from "@docker/docker-mui-theme";
1812
import CssBaseline from "@mui/material/CssBaseline";
@@ -495,13 +489,15 @@ const ExtensionsComponent = () => {
495489
size="small"
496490
onClick={() => OpenDocs()}
497491
style={{
492+
backgroundColor: isDarkTheme ? "#393F49" : "#D7DADE",
498493
position: "absolute",
499-
top: "-8px",
500-
right: "55px",
494+
top: "1rem",
495+
right: "1rem",
501496
}}
502497
>
503-
Docs
498+
<DocsIcon width="24" height="24" CustomColor={isDarkTheme ? "white" : "#3C494F"} alt="Docs" />&nbsp;Docs
504499
</StyledButton>
500+
505501
</SistentThemeProviderWithoutBaseLine>
506502
{isLoggedIn && <Tour />}
507503
<div
@@ -511,9 +507,9 @@ const ExtensionsComponent = () => {
511507
}}
512508
>
513509
<div>
514-
<KanvasIcon CustomColor={isDarkTheme ? "white" : "#3C494F"} />
510+
<KanvasHorizontalLight width="600" height="auto" CustomColor={isDarkTheme ? "white" : "#3C494F"} />
515511

516-
<Typography sx={{ margin: "auto", paddingTop: "1rem" }}>
512+
<Typography sx={{ margin: "auto", paddingTop: "-1rem" }}>
517513
Design and operate your cloud native deployments with Kanvas.
518514
</Typography>
519515
</div>
@@ -545,11 +541,11 @@ const ExtensionsComponent = () => {
545541
{isHovered ? (
546542
<KanvasAnimation height={70} width={72} />
547543
) : (
548-
<Kanvas height={70} width={72} />
544+
<KanvasWhite height={70} width={72} />
549545
)}
550546
</div>
551547
) : (
552-
<Kanvas height={70} width={72} />
548+
<KanvasWhite height={70} width={72} />
553549
)}
554550
</a>
555551
{isLoggedIn ? (

‎ui/src/img/SVGs/Kanvas.js‎

Lines changed: 0 additions & 51 deletions
This file was deleted.

‎ui/src/img/SVGs/KanvasHorizontalLight.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from "react";
2+
3+
const KanvaHorizontalLight = ({ height = 500, width = 2300, ...props }) => {
4+
return (
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
viewBox="0 0 2300 500"
8+
height={height}
9+
width={width}
10+
fill="none"
11+
{...props}
12+
>
13+
<g>
14+
<path fill="#fff" d="M1408.37,385.9h-52.37v-186.66c0-2.07-.34-4.03-1.01-5.87-.67-1.84-1.58-3.45-2.72-4.83-1.15-1.39-2.49-2.47-4.02-3.28-1.53-.8-3.16-1.2-4.88-1.2h-208.73v-57.15h215.46c7.94,0,15.45,1.84,22.54,5.52,7.08,3.68,13.3,8.69,18.66,15.02,5.26,6.45,9.42,13.93,12.48,22.45,3.06,8.51,4.6,17.55,4.6,27.1v188.9ZM1206.72,385.9h-52.37v-184.3h52.37v184.3Z"/>
15+
<path fill="#fff" d="M1668.64,126.9l-105.44,259h-40.42l-105.44-259h53.48l72.17,179.06,72.17-179.06h53.48Z"/>
16+
<polygon fill="#fff" points="1716.79 126.93 1613.19 385.86 1670.03 385.86 1742.69 202.37 1795.11 336.32 1711.27 336.32 1691.94 385.86 1872.19 385.86 1768.59 126.93 1716.79 126.93"/>
17+
<path fill="#fff" d="M2153.29,318.21c0,9.32-1.55,18.08-4.64,26.25-3.09,8.29-7.33,15.49-12.73,21.57-5.4,6.12-11.64,10.94-18.72,14.51-7.19,3.57-14.82,5.35-22.91,5.35h-201.27v-54.56h201.27c3.2,0,5.89-1.27,8.09-3.81,2.2-2.53,3.29-5.64,3.29-9.32v-21.06c0-3.69-1.09-6.79-3.29-9.32-2.2-2.53-4.89-3.79-8.09-3.79h-142.28c-8.07,0-15.67-1.78-22.75-5.35-7.19-3.57-13.48-8.47-18.87-14.68-5.4-6.22-9.63-13.48-12.73-21.75-3.09-8.19-4.64-16.93-4.64-26.25v-21.06c0-9.32,1.55-18.14,4.64-26.42,3.09-8.19,7.33-15.37,12.73-21.59,5.38-6.22,11.68-11.11,18.87-14.68,7.09-3.57,14.68-5.35,22.75-5.35h201.28v54.9h-201.28c-3.19,0-5.89,1.27-8.07,3.81-2.2,2.53-3.3,5.64-3.3,9.32v21.06c0,3.69,1.11,6.79,3.3,9.32,2.18,2.53,4.89,3.79,8.07,3.79h142.28c8.09,0,15.72,1.78,22.91,5.35,7.09,3.57,13.33,8.47,18.72,14.68,5.4,6.22,9.63,13.42,12.73,21.59,3.09,8.29,4.64,17.09,4.64,26.42v21.06Z"/>
18+
<g>
19+
<polyline fill="#fff" points="857.78 126.9 785.04 126.9 647.49 242.37 647.49 127.04 596.37 127.04 596.37 385.9 647.49 385.9 647.49 311.2"/>
20+
<polygon fill="#fff" points="741.55 252.04 860.68 385.9 787.2 385.9 699.39 287.49 741.55 252.04"/>
21+
</g>
22+
<polygon fill="#fff" points="974.11 126.93 870.51 385.86 927.35 385.86 1000.01 202.37 1052.44 336.32 968.6 336.32 949.26 385.86 1129.51 385.86 1025.91 126.93 974.11 126.93"/>
23+
</g>
24+
<g>
25+
<polygon fill="#00d3a9" points="284.46 43.9 284.46 235.86 450.84 139.53 284.46 43.9"/>
26+
<polygon fill="#00d3a9" points="284.46 276.01 284.46 468.9 452.36 372.9 284.46 276.01"/>
27+
<polygon fill="#00b39f" points="260.51 234.54 260.51 45.51 96.18 139.71 260.51 234.54"/>
28+
<polygon fill="#00b39f" points="260.51 468 260.51 277.41 95.78 372.78 260.51 468"/>
29+
<polygon fill="#00b39f" points="463.77 351.83 463.77 159.73 297.59 255.94 463.77 351.83"/>
30+
<polygon fill="#00d3a9" points="82.32 159.37 82.32 352.89 249.73 255.97 82.32 159.37"/>
31+
</g>
32+
</svg>
33+
);
34+
};
35+
36+
export default KanvaHorizontalLight;

‎ui/src/img/SVGs/docsIcon.js‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,26 @@
11
import React from "react";
22

3-
const DocsIcon = ({ width, height }) => (
4-
<svg width={width} height={height} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" stylefont-size="unset" ><title>Documentation</title><path d="M416 221.25V416a48 48 0 01-48 48H144a48 48 0 01-48-48V96a48 48 0 0148-48h98.75a32 32 0 0122.62 9.37l141.26 141.26a32 32 0 019.37 22.62z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path><path d="M256 56v120a32 32 0 0032 32h120M176 288h160M176 368h160" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path></svg>
5-
3+
const DocsIcon = ({ width=32, height=32 }) => (
4+
<svg
5+
width={width}
6+
height={height}
7+
version="1.1"
8+
viewBox="0 0 52 52"
9+
fill="#fff"
10+
xmlns="http://www.w3.org/2000/svg"
11+
>
12+
<title>Documentation</title>
613

14+
<path d="M44.7,52H7.3c-.9,0-1.7-.8-1.7-1.7V1.7c0-.9.8-1.7,1.7-1.7h23.7c.4,0,.9.2,1.2.5l13.6,13.6c.3.3.5.7.5,1.2v35c0,.9-.8,1.7-1.7,1.7Z" fill="#00b39f"/>
15+
<path d="M32.3.5c-.3-.3-.7-.5-1.2-.5h-5.1v52h18.7c.9,0,1.7-.8,1.7-1.7V15.3c0-.4-.2-.9-.5-1.2L32.3.5Z" fill="#00b39f"/>
16+
<path d="M45.9,14.1L32.3.5c-.3-.3-.7-.5-1.2-.5h-1.7v15.3c0,.9.8,1.7,1.7,1.7h15.3v-1.7c0-.4-.2-.9-.5-1.2Z" fill="#00d3a9"/>
17+
<path d="M27.7,41.8h-13.6c-.9,0-1.7-.8-1.7-1.7s.8-1.7,1.7-1.7h13.6c.9,0,1.7.8,1.7,1.7s-.8,1.7-1.7,1.7Z" fill="#fff"/>
18+
<path d="M37.9,35H14.1c-.9,0-1.7-.8-1.7-1.7s.8-1.7,1.7-1.7h23.7c.9,0,1.7.8,1.7,1.7,0,.9-.8,1.7-1.7,1.7Z" fill="#fff"/>
19+
<path d="M37.9,28.3H14.1c-.9,0-1.7-.8-1.7-1.7s.8-1.7,1.7-1.7h23.7c.9,0,1.7.8,1.7,1.7,0,.9-.8,1.7-1.7,1.7Z" fill="#fff"/>
20+
<path d="M27.7,38.4h-1.7v3.4h1.7c.9,0,1.7-.8,1.7-1.7,0-.9-.8-1.7-1.7-1.7Z" fill="#c8fff4" isolation="isolate" opacity=".5"/>
21+
<path d="M37.9,31.7h-11.9v3.4h11.9c.9,0,1.7-.8,1.7-1.7,0-.9-.8-1.7-1.7-1.7Z" fill="#c8fff4" isolation="isolate" opacity=".5"/>
22+
<path d="M37.9,24.9h-11.9v3.4h11.9c.9,0,1.7-.8,1.7-1.7,0-.9-.8-1.7-1.7-1.7Z" fill="#c8fff4" isolation="isolate" opacity=".5"/>
23+
</svg>
724
);
825

926
export default DocsIcon;

‎ui/src/img/SVGs/kanvasWhite.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from "react";
2+
3+
const Kanvas = ({ height = 70, width = 72, ...props }) => {
4+
return (
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
viewBox="0 0 500 500"
8+
height={height}
9+
width={width}
10+
fill="none"
11+
{...props}
12+
>
13+
14+
<polygon fill="#fff" points="261.82 30.1 261.82 228.75 433.99 129.07 261.82 30.1"/>
15+
<polygon fill="#fff" points="261.82 270.3 261.82 469.9 435.56 370.56 261.82 270.3"/>
16+
<g opacity=".8">
17+
<polygon fill="#fff" points="237.03 227.38 237.03 31.77 66.97 129.25 237.03 227.38"/>
18+
</g>
19+
<g opacity=".8">
20+
<polygon fill="#fff" points="237.03 468.98 237.03 271.74 66.56 370.43 237.03 468.98"/>
21+
</g>
22+
<g opacity=".8">
23+
<polygon fill="#fff" points="447.37 348.75 447.37 149.97 275.4 249.52 447.37 348.75"/>
24+
</g>
25+
<polygon fill="#fff" points="52.63 149.59 52.63 349.85 225.87 249.56 52.63 149.59"/>
26+
</svg>
27+
);
28+
};
29+
30+
export default Kanvas;

0 commit comments

Comments
 (0)