github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-08-02 00:57:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI/tra 4406 add an information icon (#913)

Browse Source 
* information icon added

* new icon and position

* icon changed

* new Ver

* space removed

Co-authored-by: Adam Kol <adam@up9.com>
Co-authored-by: Leon <>
This commit is contained in:
leon-up9 2022-03-23 14:54:51 +02:00 committed by GitHub
parent a5c35d7d90
commit 2513e9099f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 36 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui-common/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@up9/mizu-common",
"version": "1.0.132",
"version": "1.0.133",
"description": "Made with create-react-library",
"author": "",
"license": "MIT",

21
ui-common/src/components/UI/InformationIcon.tsx Normal file
View File

@ -0,0 +1,21 @@
import React, { CSSProperties } from "react";
import infoImg from 'assets/info.svg';
import styles from "./style/InformationIcon.module.sass"
const DEFUALT_LINK = "https://getmizu.io/docs"
export interface InformationIconProps{
link?: string,
style? : CSSProperties
}
export const InformationIcon: React.FC<InformationIconProps> = ({link,style}) => {
return <React.Fragment>
<a href={DEFUALT_LINK ? DEFUALT_LINK : link} style={style} className={styles.flex}>
<img className="headerIcon" src={infoImg} alt="Info icon"/>
</a>
</React.Fragment>
}

6
ui-common/src/components/UI/assets/info.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#627EF7"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 10.1C12.5522 10.1 13 10.5477 13 11.1V14.6H13.8C14.3522 14.6 14.8 15.0477 14.8 15.6C14.8 16.1523 14.3522 16.6 13.8 16.6H10.2C9.64767 16.6 9.19995 16.1523 9.19995 15.6C9.19995 15.0477 9.64767 14.6 10.2 14.6H11V11.1C11 10.5477 11.4477 10.1 12 10.1Z" fill="#627EF7"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13 11C13 11.5523 12.5523 12 12 12L10 12C9.44772 12 9 11.5523 9 11C9 10.4477 9.44772 10 10 10L12 10C12.5523 10 13 10.4477 13 11Z" fill="#627EF7"/>
<circle cx="12" cy="8" r="1" fill="#627EF7"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 954 B

5
ui-common/src/components/UI/index.ts
View File

@ -5,7 +5,8 @@ import Tooltip from "./Tooltip";
import Checkbox from "./Checkbox"
import { StatusBar } from "./StatusBar";
import CustomModal from "./CustomModal";
import { InformationIcon } from "./InformationIcon";
export {LoadingOverlay,Select,Tabs,Tooltip,Checkbox,CustomModal}
export {StatusBar}
export {LoadingOverlay,Select,Tabs,Tooltip,Checkbox,CustomModal,InformationIcon}
export {StatusBar}

2
ui-common/src/components/UI/style/InformationIcon.module.sass Normal file
View File

@ -0,0 +1,2 @@
.flex
display: flex

2
ui/package.json
View File

@ -13,7 +13,7 @@
"@types/jest": "^26.0.22",
"@types/node": "^12.20.10",
"@uiw/react-textarea-code-editor": "^1.4.12",
"@up9/mizu-common": "1.0.131",
"@up9/mizu-common": "1.0.133",
"axios": "^0.25.0",
"core-js": "^3.20.2",
"craco-babel-loader": "^1.0.3",

2
ui/src/components/Header/Header.tsx
View File

@ -3,6 +3,7 @@ import {AuthPresentation} from "../AuthPresentation/AuthPresentation";
import {AnalyzeButton} from "@up9/mizu-common"
import logo from '../assets/Mizu-logo.svg';
import './Header.sass';
import {UI} from "@up9/mizu-common"
interface HeaderProps {
analyzeStatus: any
@ -15,6 +16,7 @@ export const Header: React.FC<HeaderProps> = ({analyzeStatus}) => {
</div>
<div style={{display: "flex", alignItems: "center"}}>
{analyzeStatus?.isAnalyzing && <AnalyzeButton analyzeStatus={analyzeStatus}/>}
<UI.InformationIcon/>
<AuthPresentation/>
</div>
</div>;