diff --git a/ui/src/App.sass b/ui/src/App.sass index e2f145845..564ee6c2b 100644 --- a/ui/src/App.sass +++ b/ui/src/App.sass @@ -1,9 +1,12 @@ +@import 'components/style/variables.module' + .mizuApp - background-color: #111629 + background-color: $main-background-color + color: $font-color width: 100% .header - height: 100px + height: 80px display: flex align-items: center padding-left: 24px @@ -12,8 +15,12 @@ font-size: 45px letter-spacing: 2px + img + height: 40px + .description margin-left: 10px - color: rgba(255,255,255,0.5) - padding-top: 15px - font-size: 16px \ No newline at end of file + padding-top: 10px + font-size: 14px + font-weight: bold + color: $light-blue-color \ No newline at end of file diff --git a/ui/src/App.tsx b/ui/src/App.tsx index 235f1670c..4195e558d 100644 --- a/ui/src/App.tsx +++ b/ui/src/App.tsx @@ -1,12 +1,13 @@ import React from 'react'; import {HarPage} from "./components/HarPage"; import './App.sass'; +import logo from './components/assets/Mizu.svg'; const App = () => { return (
-
MIZU
+
logo
Traffic viewer for Kubernetes
diff --git a/ui/src/components/HarEntryDetailed.tsx b/ui/src/components/HarEntryDetailed.tsx index 58d994a29..fe5c4543f 100644 --- a/ui/src/components/HarEntryDetailed.tsx +++ b/ui/src/components/HarEntryDetailed.tsx @@ -42,7 +42,7 @@ const HarEntryTitle: React.FC = ({har}) => {
{formatSize(bodySize)}
-
{status} {statusText}
+
{status} {statusText}
{Math.round(receive)}ms
; }; diff --git a/ui/src/components/HarEntryViewer/HAREntrySections.module.sass b/ui/src/components/HarEntryViewer/HAREntrySections.module.sass index 4c21cb0b1..8e56935cf 100644 --- a/ui/src/components/HarEntryViewer/HAREntrySections.module.sass +++ b/ui/src/components/HarEntryViewer/HAREntrySections.module.sass @@ -1,8 +1,9 @@ +@import '../style/variables.module' + .title display: flex align-items: center font-weight: 800 - color: white .button display: flex @@ -10,18 +11,18 @@ justify-content: space-around width: .75rem height: .75rem - border-radius: .25rem - border: solid 1px #344073 + border-radius: 4px font-size: .75rem line-height: 0.92 margin-right: .5rem font-weight: 800 - color: #627ef7 + color: $blue-color + background-color: $light-blue-color &.expanded @extend .button line-height: .75rem - background: #344073 - color: white + background-color: $blue-color + color: $main-background-color .dataLine font-weight: 600 @@ -31,7 +32,7 @@ .dataKey text-transform: capitalize - color: white + color: $blue-gray margin: 0 0.5rem 0 0 text-align: right overflow: hidden @@ -40,8 +41,9 @@ max-width: 15rem .dataValue - color: rgba(255, 255, 255, 0.5) + color: $blue-gray margin: 0 + font-weight: normal > span:first-child word-break: break-all max-width: calc(100% - 1.5rem) @@ -61,8 +63,8 @@ width: 100% .collapsibleContainer - border-top: 1px solid #171C30 - padding: 0 1rem 1rem 1rem + border-top: 1px solid $light-blue-color + padding: 1rem background: none table diff --git a/ui/src/components/HarEntryViewer/HAREntrySections.tsx b/ui/src/components/HarEntryViewer/HAREntrySections.tsx index b69ad88ba..28505b6fc 100644 --- a/ui/src/components/HarEntryViewer/HAREntrySections.tsx +++ b/ui/src/components/HarEntryViewer/HAREntrySections.tsx @@ -110,7 +110,7 @@ export const HAREntryBodySection: React.FC = ({
{}}/>
- Wrap text + Wrap text ({ details: { flex: "0 0 50%", width: "45vw", padding: "12px 24px", - backgroundColor: "#090b14", - borderLeft: "2px #11162a solid" + borderRadius: 4, + marginTop: 15, + background: variables.headerBackgoundColor }, harViewer: { display: 'flex', overflowY: 'auto', - height: "calc(100% - 58px)", + height: "calc(100% - 70px)", padding: 5, paddingBottom: 0 } @@ -90,14 +92,15 @@ export const HarPage: React.FC = () => { setConnection(connection === ConnectionStatus.Connected ? ConnectionStatus.Paused : ConnectionStatus.Connected ); } - const getConnectionStatusClass = () => { + const getConnectionStatusClass = (isContainer) => { + const container = isContainer ? "Container" : ""; switch (connection) { case ConnectionStatus.Paused: - return "orangeIndicator"; + return "orangeIndicator" + container; case ConnectionStatus.Connected: - return "greenIndicator" + return "greenIndicator" + container; default: - return "redIndicator"; + return "redIndicator" + container; } } @@ -114,11 +117,13 @@ export const HarPage: React.FC = () => { return (
-
- pause +
+ pause
{getConnectionTitle()} -
+
+
+
{entries.length > 0 &&
diff --git a/ui/src/components/SyntaxHighlighter/highlighterStyle.ts b/ui/src/components/SyntaxHighlighter/highlighterStyle.ts index f73b5e728..a5be67b25 100644 --- a/ui/src/components/SyntaxHighlighter/highlighterStyle.ts +++ b/ui/src/components/SyntaxHighlighter/highlighterStyle.ts @@ -1,7 +1,6 @@ -export const up9Style = { +export const highlighterStyle = { "code[class*=\"language-\"]": { - "color": "#fff", - "textShadow": "0 1px rgba(0, 0, 0, 0.3)", + "color": "#494677", "fontFamily": "Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace", "direction": "ltr", "textAlign": "left", @@ -19,8 +18,7 @@ export const up9Style = { "hyphens": "none" }, "pre[class*=\"language-\"]": { - "color": "#fff", - "textShadow": "0 1px rgba(0, 0, 0, 0.3)", + "color": "#494677", "fontFamily": "Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace", "direction": "ltr", "textAlign": "left", @@ -39,10 +37,10 @@ export const up9Style = { "margin": ".5em 0", "overflow": "auto", "borderRadius": "0.3em", - "background": "rgb(38, 46, 77)" + "background": "#F7F9FC" }, ":not(pre) > code[class*=\"language-\"]": { - "background": "rgb(38, 46, 77)", + "background": "#F7F9FC", "padding": ".1em", "borderRadius": ".3em" }, @@ -50,16 +48,16 @@ export const up9Style = { "color": "#5d6aa0" }, "prolog": { - "color": "#fff" + "color": "#494677" }, "doctype": { - "color": "#fff" + "color": "#494677" }, "cdata": { - "color": "#fff" + "color": "#494677" }, "punctuation": { - "color": "#fff" + "color": "#494677" }, ".namespace": { "Opacity": ".7" diff --git a/ui/src/components/SyntaxHighlighter/index.scss b/ui/src/components/SyntaxHighlighter/index.scss index ec983a215..623c71509 100644 --- a/ui/src/components/SyntaxHighlighter/index.scss +++ b/ui/src/components/SyntaxHighlighter/index.scss @@ -12,7 +12,7 @@ &:first-child { margin-right: 0.75rem; - background: rgb(41, 48, 83); + background: #F7F9FC; .react-syntax-highlighter-line-number { color: rgb(98, 126, 247); diff --git a/ui/src/components/SyntaxHighlighter/index.tsx b/ui/src/components/SyntaxHighlighter/index.tsx index 037fd0fc0..3b2efe644 100644 --- a/ui/src/components/SyntaxHighlighter/index.tsx +++ b/ui/src/components/SyntaxHighlighter/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {Prism as SyntaxHighlighterContainer} from 'react-syntax-highlighter'; -import {up9Style} from './highlighterStyle' +import {highlighterStyle} from './highlighterStyle' import './index.scss'; interface Props { @@ -14,7 +14,7 @@ interface Props { export const SyntaxHighlighter: React.FC = ({ code, - style = up9Style, + style = highlighterStyle, showLineNumbers = true, className, language = 'python', diff --git a/ui/src/components/Tabs.tsx b/ui/src/components/Tabs.tsx index b78cdbe64..14f4e60e5 100644 --- a/ui/src/components/Tabs.tsx +++ b/ui/src/components/Tabs.tsx @@ -1,6 +1,7 @@ import Tooltip from "./Tooltip"; import React from "react"; import {makeStyles} from '@material-ui/core/styles'; +import variables from './style/variables.module.scss'; interface Tab { tab: string, @@ -30,7 +31,7 @@ const useTabsStyles = makeStyles((theme) => ({ tab: { display: 'inline-block', textTransform: 'uppercase', - color: theme.palette.primary.main, + color: variables.blueColor, cursor: 'pointer', }, @@ -40,9 +41,9 @@ const useTabsStyles = makeStyles((theme) => ({ active: { fontWeight: theme.typography.fontWeightBold, - color: theme.palette.common.white, + color: variables.fontColor, cursor: 'unset', - borderBottom: "2px solid " + theme.palette.common.white, + borderBottom: "2px solid " + variables.fontColor, paddingBottom: 6, "&.dark": { diff --git a/ui/src/components/assets/Mizu.svg b/ui/src/components/assets/Mizu.svg new file mode 100644 index 000000000..d9b0bda3e --- /dev/null +++ b/ui/src/components/assets/Mizu.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/ui/src/components/assets/pause.svg b/ui/src/components/assets/pause.svg index bb8b5599d..c83cac7db 100644 --- a/ui/src/components/assets/pause.svg +++ b/ui/src/components/assets/pause.svg @@ -1,3 +1,5 @@ - - - \ No newline at end of file + + + + + diff --git a/ui/src/components/assets/play.svg b/ui/src/components/assets/play.svg index 66b964f6e..a623aa817 100644 --- a/ui/src/components/assets/play.svg +++ b/ui/src/components/assets/play.svg @@ -1,9 +1,4 @@ - - - - - - + + + diff --git a/ui/src/components/style/CollapsibleContainer.sass b/ui/src/components/style/CollapsibleContainer.sass index 1c5e6b9af..0a473da8c 100644 --- a/ui/src/components/style/CollapsibleContainer.sass +++ b/ui/src/components/style/CollapsibleContainer.sass @@ -19,7 +19,6 @@ padding-right: 2% .CollapsibleContainer-Expanded - //background-color: rgba(98, 126, 247, 0.12) min-height: 40px .CollapsibleContainer-Title diff --git a/ui/src/components/style/HarEntriesList.module.sass b/ui/src/components/style/HarEntriesList.module.sass index a26deccf7..97006b86f 100644 --- a/ui/src/components/style/HarEntriesList.module.sass +++ b/ui/src/components/style/HarEntriesList.module.sass @@ -1,3 +1,5 @@ +@import "variables.module" + .list overflow: scroll display: flex @@ -12,12 +14,11 @@ overflow: hidden flex-grow: 1 padding-top: 20px - background-color: #090b14 .footer display: flex justify-content: space-between - border-top: 1px solid rgba(255,255,255,0.5) + border-top: 1px solid #BCC6DD align-items: center padding-top: 10px margin-right: 15px @@ -45,8 +46,7 @@ .noMoreDataAvailable text-align: center font-weight: 600 - color: rgba(255,255,255,0.75) - + color: $secondary-font-color .fetchButtonContainer width: 100% display: flex diff --git a/ui/src/components/style/HarEntry.module.sass b/ui/src/components/style/HarEntry.module.sass index 33bc1c446..4f1a8185b 100644 --- a/ui/src/components/style/HarEntry.module.sass +++ b/ui/src/components/style/HarEntry.module.sass @@ -1,6 +1,8 @@ +@import 'variables.module' + .row display: flex - background: #1c2133 + background: $main-background-color min-height: 46px max-height: 46px align-items: center @@ -8,7 +10,7 @@ border-radius: 4px cursor: pointer border: solid 1px transparent - margin-right: 5px + margin-right: 10px &:not(:first-child) margin-top: 10px @@ -16,14 +18,16 @@ border: solid 1px lighten(#4253a5, 20%) .rowSelected - background: #293053 - border: 1px #ffffff61 solid + border: 1px $blue-color solid + border-left: 5px $blue-color solid + margin-left: 10px + margin-right: 3px .service text-overflow: ellipsis overflow: hidden white-space: nowrap - color: rgba(255, 255, 255, 0.5) + color: $secondary-font-color padding-left: 4px padding-top: 3px padding-right: 10px @@ -32,13 +36,12 @@ .timestamp font-size: 12px - color: rgba(255, 255, 255, 0.5) + color: $secondary-font-color padding-left: 8px padding-right: 8px flex-shrink: 0 .endpointServiceContainer - color: white display: flex flex-direction: column overflow: hidden diff --git a/ui/src/components/style/HarEntryDetailed.module.sass b/ui/src/components/style/HarEntryDetailed.module.sass index fb4a2342e..0bd23ce9a 100644 --- a/ui/src/components/style/HarEntryDetailed.module.sass +++ b/ui/src/components/style/HarEntryDetailed.module.sass @@ -4,6 +4,4 @@ .har display: flex overflow: scroll - //padding: .75rem .75rem 0 .75rem height: calc(100% - 1.75rem) - //width: calc(100% - 2rem) \ No newline at end of file diff --git a/ui/src/components/style/HarFilters.module.sass b/ui/src/components/style/HarFilters.module.sass index 53cfbcfab..75849eb8d 100644 --- a/ui/src/components/style/HarFilters.module.sass +++ b/ui/src/components/style/HarFilters.module.sass @@ -1,3 +1,5 @@ +@import "variables.module" + .container display: flex flex-direction: row @@ -6,6 +8,8 @@ overflow-y: hidden overflow-x: auto padding: .5rem 0 + border-bottom: 1px solid #BCC6DD + margin-right: 20px .filterLabel color: #8f9bb2 @@ -24,9 +28,9 @@ .filterText input padding: 4px 12px - background: #171922 + background: $main-background-color border-radius: 12px font-size: 12px - color: white + border: 1px solid #BCC6DD fieldset border: none diff --git a/ui/src/components/style/HarPage.sass b/ui/src/components/style/HarPage.sass index 31b6978ae..90f8b5aea 100644 --- a/ui/src/components/style/HarPage.sass +++ b/ui/src/components/style/HarPage.sass @@ -1,12 +1,19 @@ +@import 'variables.module.scss' + .HarPage width: 100% display: flex flex-direction: column - border-radius: 8px overflow: hidden flex-grow: 1 height: calc(100vh - 100px) + .harPageHeader + padding: 20px 24px + display: flex + align-items: center + background-color: $header-background-color + .HarPage-Header display: flex height: 2.5% @@ -55,50 +62,51 @@ display: flex flex-grow: 1 overflow: hidden - background-color: #090b14 + background-color: $data-background-color .HarPage-ListContainer display: flex flex-grow: 1 overflow: hidden - padding: 0 24px + padding-left: 24px flex-direction: column .HarPage-DetailContainer - //flex-grow: 1 width: 45vw background-color: #171c30 flex: 0 0 50% padding: 12px 24px -.greenIndicator - height: 10px - width: 10px - background-color: #1acd37 +.indicatorContainer border-radius: 50% - box-shadow: 0 0 3px 3px #1acd3787 + padding: 2px margin-left: 10px -.redIndicator - height: 10px - width: 10px - background-color: #ff3a30 +.indicator + height: 8px + width: 8px border-radius: 50% - box-shadow: 0 0 3px 3px #ff3a3073 - margin-left: 10px + +.greenIndicatorContainer + border: 2px #6fcf9770 solid + +.greenIndicator + background-color: #27AE60 + +.orangeIndicatorContainer + border: 2px #fabd5970 solid .orangeIndicator background-color: #ffb530 - height: 10px - width: 10px - border-radius: 50% - box-shadow: 0 0 3px 3px #ffb33073 - margin-left: 10px +.redIndicatorContainer + border: 2px #ff3a3045 solid + +.redIndicator + background-color: #ff3a30 .connectionText display: flex align-items: center height: 17px font-size: 16px - color: rgba(255,255,255,0.75) diff --git a/ui/src/components/style/StatusCode.module.sass b/ui/src/components/style/StatusCode.module.sass index f37404bad..4a1c7499e 100644 --- a/ui/src/components/style/StatusCode.module.sass +++ b/ui/src/components/style/StatusCode.module.sass @@ -1,3 +1,5 @@ +@import 'variables.module' + .base border-radius: 4px width: 42px @@ -13,9 +15,9 @@ color: black .success - background: #358645 + background: $success-color color: white .failure - background: #ff3a30 + background: $failure-color color: white \ No newline at end of file diff --git a/ui/src/components/style/misc.module.sass b/ui/src/components/style/misc.module.sass index d4e975dc3..59f883d99 100644 --- a/ui/src/components/style/misc.module.sass +++ b/ui/src/components/style/misc.module.sass @@ -1,16 +1,16 @@ +@import 'variables.module' + .protocol border-radius: 4px - border: solid 1px #bcc6dd60 + border: solid 1px $secondary-font-color margin-left: 4px padding: 2px 5px - color: #ffffff88 text-transform: uppercase font-family: "Source Sans Pro", sans-serif font-size: 11px font-weight: bold &.method - color: white margin-right: 10px &.filterPlate diff --git a/ui/src/components/style/variables.module.scss b/ui/src/components/style/variables.module.scss new file mode 100644 index 000000000..d1152084c --- /dev/null +++ b/ui/src/components/style/variables.module.scss @@ -0,0 +1,22 @@ +$main-background-color: white; +$header-background-color: #F7F9FC; +$data-background-color: #E9EBF8; +$font-color: #0C0B1A; +$secondary-font-color: rgba(0,0,0,0.5); +$blue-color: #205CF5; +$light-blue-color: #BCCEFD; +$success-color: #27AE60; +$failure-color: #EB5757; +$blue-gray: #494677; + +:export { + mainBackgroundColor: $main-background-color; + headerBackgoundColor: $header-background-color; + fontColor: $font-color; + secondaryFontColor: $secondary-font-color; + blueColor: $blue-color; + lightBlueColor: $light-blue-color; + successColor: $success-color; + failureColor: $failure-color; + blueGray: $blue-gray; +} \ No newline at end of file diff --git a/ui/src/index.sass b/ui/src/index.sass index dd1fb1858..b230a5c51 100644 --- a/ui/src/index.sass +++ b/ui/src/index.sass @@ -1,3 +1,5 @@ +@import 'src/components/style/variables.module' + html, body height: 100% @@ -60,12 +62,12 @@ button cursor: pointer min-width: 2rem font-weight: normal - border: solid 0 padding: 3px 16px 4px 12px + border: 1px solid #BCC6DD .MuiInputBase-input border-radius: 20px - background-color: rgba(255, 255, 255, 0.06) + background-color: $main-background-color cursor: pointer padding-top: 0 padding-bottom: 0 @@ -77,8 +79,6 @@ button text-align: left line-height: 1.25 min-height: initial - &:focus - background-color: rgba(255, 255, 255, 0.06) !important .MuiSelect-icon top: 50% transform: translateY(-50%) @@ -94,7 +94,6 @@ button white-space: nowrap width: 100px text-overflow: ellipsis - color: white .selectLabel margin-right: 8px @@ -110,7 +109,9 @@ button * Paper/List/Menu list ***/ .MuiPaper-root - background-color: #344073 !important + margin-top: 5px + color: $blue-gray + border: 1px solid #BCC6DD &.MuiPaper-rounded border-radius: 4px @@ -119,32 +120,29 @@ button &.MuiMenu-list border-radius: 4px box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.5) - color: #a0b2ff .MuiListItem-root &.MuiMenuItem-root padding: 14px font-size: 11px - font-weight: 600 font-stretch: normal font-style: normal line-height: 1.25 - &:not(:last-child) - border-bottom: 1px solid rgb(53, 65, 114) &.Mui-selected - background-color: #3f519a6e - color: white + font-weight: 600 + background-color: $data-background-color // scroll-bar css ::-webkit-scrollbar - width: 8px + width: 6px ::-webkit-scrollbar-thumb - background-color: #272d44 - border-radius: 16px + background-color: $light-blue-color + border-radius: 10px ::-webkit-scrollbar-button display: none ::-webkit-scrollbar-corner display: none + diff --git a/ui/src/typings.d.ts b/ui/src/typings.d.ts new file mode 100644 index 000000000..caaba6a2b --- /dev/null +++ b/ui/src/typings.d.ts @@ -0,0 +1 @@ +declare module '*.scss'; \ No newline at end of file