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

* 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 <>

ui-common/package.json

@@ -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",

ui-common/src/components/UI/InformationIcon.tsx

@@ -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>
+}
+
+

ui-common/src/components/UI/assets/info.svg

@@ -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>

ui-common/src/components/UI/index.ts

@@ -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}

ui-common/src/components/UI/style/InformationIcon.module.sass

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

ui/package.json

@@ -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",

ui/src/components/Header/Header.tsx

@@ -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>;