Feature/UI/light theme (#44)

* light theme

* css polish

* unused code

* css

* text shadow

* footer style

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: 10px
-      padding-top: 15px
+      font-size: 14px
-      font-size: 16px
+      font-weight: bold
+      color: $light-blue-color

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 (
       <div className="mizuApp">
         <div className="header">
-            <div className="title">MIZU</div>
+            <div className="title"><img src={logo} alt="logo"/></div>
             <div className="description">Traffic viewer for Kubernetes</div>
         </div>
         <HarPage/>

ui/src/components/HarEntryDetailed.tsx

@@ -42,7 +42,7 @@ const HarEntryTitle: React.FC<any> = ({har}) => {
             <EndpointPath method={method} path={url}/>
         </div>
         <div style={{margin: "0 24px", opacity: 0.5}}>{formatSize(bodySize)}</div>
-        <div style={{marginRight: 24}}>{status} {statusText}</div>
+        <div style={{marginRight: 24, opacity: 0.5}}>{status} {statusText}</div>
         <div style={{opacity: 0.5}}>{Math.round(receive)}ms</div>
     </div>;
 };

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-radius: 4px
-    border: solid 1px #344073
     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
+        background-color: $blue-color
-        color: white
+        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
+    border-top: 1px solid $light-blue-color
-    padding: 0 1rem 1rem 1rem
+    padding: 1rem
     background: none
 
     table

ui/src/components/HarEntryViewer/HAREntrySections.tsx

@@ -110,7 +110,7 @@ export const HAREntryBodySection: React.FC<HAREntryBodySectionProps> = ({
                 <div style={{paddingTop: 3}}>
                     <Checkbox checked={isWrapped} onToggle={() => {}}/>
                 </div>
-                <span style={{marginLeft: '.5rem', color: "white"}}>Wrap text</span>
+                <span style={{marginLeft: '.5rem'}}>Wrap text</span>
             </div>
 
             <SyntaxHighlighter

ui/src/components/HarEntryViewer/HAREntryViewer.module.sass

@@ -1,3 +1,5 @@
+@import "../style/variables.module"
+
 .harEntry
     font-family: "Source Sans Pro", Lucida Grande, Tahoma, sans-serif
     height: 100%
@@ -33,7 +35,6 @@
             border-left: 1px solid #627ef7
             margin-left: .3rem
             padding-left: .3rem
-            color: #627ef7
 
     .headerClickable
         cursor: pointer
@@ -43,15 +44,17 @@
         border-top-right-radius: 0
 
     .body
-        background: #090b14
+        background: $main-background-color
-        color: rgb(18, 19, 27)
+        color: $blue-gray
+        border-radius: 4px
+        padding: 10px
         .bodyHeader
             padding: 0 1rem
         .endpointURL
             font-size: .75rem
             display: block
-            color: #627ef7
+            color: $blue-color
             text-decoration: none
-            font-weight: 600
             margin-bottom: .5rem
             overflow-wrap: anywhere
+            padding: 5px 0

ui/src/components/HarPage.tsx

@@ -7,20 +7,22 @@ import styles from './style/HarEntriesList.module.sass';
 import {HAREntryDetailed} from "./HarEntryDetailed";
 import playIcon from './assets/play.svg';
 import pauseIcon from './assets/pause.svg';
+import variables from './style/variables.module.scss';
 
 const useLayoutStyles = makeStyles(() => ({
     details: {
         flex: "0 0 50%",
         width: "45vw",
         padding: "12px 24px",
-        backgroundColor: "#090b14",
+        borderRadius: 4,
-        borderLeft: "2px #11162a solid"
+        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 (
         <div className="HarPage">
-            <div style={{padding: "0 24px 24px 24px", display: "flex", alignItems: "center"}}>
+            <div className="harPageHeader">
-                <img style={{cursor: "pointer", marginRight: 15, height: 20}} alt="pause" src={connection === ConnectionStatus.Connected ? pauseIcon : playIcon} onClick={toggleConnection}/>
+                <img style={{cursor: "pointer", marginRight: 15, height: 30}} alt="pause" src={connection === ConnectionStatus.Connected ? pauseIcon : playIcon} onClick={toggleConnection}/>
                 <div className="connectionText">
                     {getConnectionTitle()}
-                    <div className={getConnectionStatusClass()}/>
+                    <div className={"indicatorContainer " + getConnectionStatusClass(true)}>
+                        <div className={"indicator " +  getConnectionStatusClass(false)} />
+                    </div>
                 </div>
             </div>
             {entries.length > 0 && <div className="HarPage-Container">

ui/src/components/SyntaxHighlighter/highlighterStyle.ts

@@ -1,7 +1,6 @@
-export const up9Style = {
+export const highlighterStyle = {
     "code[class*=\"language-\"]": {
-        "color": "#fff",
+        "color": "#494677",
-        "textShadow": "0 1px rgba(0, 0, 0, 0.3)",
         "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",
+        "color": "#494677",
-        "textShadow": "0 1px rgba(0, 0, 0, 0.3)",
         "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"

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

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<Props> = ({
                                                 code,
-                                                style = up9Style,
+                                                style = highlighterStyle,
                                                 showLineNumbers = true,
                                                 className,
                                                 language = 'python',

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": {

ui/src/components/assets/Mizu.svg

@@ -0,0 +1,9 @@
+<svg width="76" height="27" viewBox="0 0 76 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.7815 24.4646H10.6294L7.8724 18.1427C7.80596 17.9671 7.67309 17.6488 7.47379 17.1878C7.29664 16.7049 7.08626 16.1671 6.84267 15.5744C6.62123 14.9598 6.38871 14.3341 6.14512 13.6976C5.90153 13.061 5.68009 12.4793 5.48079 11.9524C5.48079 14.0921 5.45073 12.843 5.38113 14.9817C5.38113 16.2003 4.35138 17.1878 3.12209 17.1878H2.99204C1.62599 17.1878 0.546318 16.0398 0.641946 14.689L1.34453 4.76461C1.44787 3.30495 2.67255 2.17317 4.14867 2.17317H4.26044C5.45891 2.17317 6.53663 2.89646 6.98173 3.99949L11.4266 15.0146C11.5816 15.4098 11.7809 15.9695 12.0245 16.6939C12.2902 17.3963 12.5449 18.1646 12.7885 18.9988C13.0321 18.1866 13.2757 17.4293 13.5192 16.7268C13.785 16.0024 14.0064 15.4317 14.1836 15.0146L18.6486 3.94946C19.0815 2.87664 20.1297 2.17317 21.2954 2.17317C22.8044 2.17317 24.052 3.33897 24.141 4.83224L25.3112 24.4646H20.1626L19.9633 19.9866C19.9412 19.5695 19.919 19.0207 19.8969 18.3402C19.8969 17.6598 19.8969 16.9463 19.8969 16.2C19.8969 15.4317 19.8969 14.6744 19.8969 13.928C19.919 13.1598 19.9301 12.5012 19.9301 11.9524C19.7529 12.4134 19.5536 12.9402 19.3322 13.5329C19.1329 14.1037 18.9225 14.6634 18.7011 15.2122C18.4796 15.761 18.2692 16.2768 18.0699 16.7598C17.8706 17.2207 17.7156 17.5829 17.6049 17.8463L14.7815 24.4646Z" fill="#205CF5"/>
+<path d="M29.6958 23.7732C28.8321 22.917 28.5828 22.061 28.5828 20.8756V10.5366C28.5828 9.09997 29.7577 7.93537 31.2069 7.93537C32.6562 7.93537 33.831 9.09997 33.831 10.5366V19.3939C33.831 19.8988 33.9086 20.239 34.0636 20.4146C34.2186 20.5902 34.4511 20.678 34.7611 20.678C34.9383 20.678 38.0554 20.6671 38.2325 20.6451C38.4097 20.6012 38.155 20.6671 38.1993 20.6451L36.0898 23.8061C36.0676 23.828 35.968 23.8829 35.7908 23.9707C35.6137 24.0366 35.3812 24.1244 35.0933 24.2341C33.715 24.0037 32.6521 24.3 31.4714 24.4698C30.4266 24.4646 30.0944 24.1683 29.6958 23.7732ZM31.2734 0C32.2034 0 32.912 0.27439 33.3992 0.82317C33.8864 1.37195 34.13 2.06341 34.13 2.89756C34.13 3.75366 33.8753 4.46707 33.366 5.0378C32.8788 5.60854 32.137 5.8939 31.1405 5.8939C30.2104 5.8939 29.4907 5.61951 28.9814 5.07073C28.4942 4.5 28.2506 3.83049 28.2506 3.06219C28.2506 2.18415 28.5053 1.45976 29.0146 0.889025C29.5239 0.296342 30.2768 0 31.2734 0Z" fill="#205CF5"/>
+<path d="M37.0583 24.4646V21.5671L43.3695 11.8207C42.9487 11.8427 42.5501 11.8646 42.1736 11.8866C41.7972 11.8866 41.4207 11.8866 41.0443 11.8866H39.6112C38.6734 11.8866 37.8719 11.2173 37.7126 10.3013C37.5096 9.1341 38.4163 8.06707 39.6112 8.06707H47.0106C48.3935 8.06707 49.5146 9.17833 49.5146 10.5491C49.5146 11.0143 49.3827 11.4701 49.134 11.8646L43.5355 20.7439C43.8234 20.722 44.1002 20.711 44.366 20.711C44.6538 20.689 44.9528 20.678 45.2628 20.678H56.7332V24.4646H37.0583Z" fill="#205CF5"/>
+<path d="M60.5864 10.5366C60.5864 9.09997 61.7612 7.93537 63.2105 7.93537C64.6598 7.93537 65.8346 9.09997 65.8346 10.5366V16.5293C65.8346 17.8463 65.4039 23.6415 69.3567 23.7073C69.5338 24.5854 66.0903 23.5756 66.3339 24.1024C66.5997 24.739 65.2035 23.7073 66.1004 24.4646L69.3567 27C64.7727 27 63.0444 24.278 62.8451 23.9707C62.668 23.7293 62.4908 23.4219 62.3137 23.0488C62.1365 22.6537 62.0933 22.6976 61.9825 22.1927C61.4068 23.2244 61.0857 23.5722 59.9895 24.1024C59.2408 24.4646 57.9069 24.4646 56.7332 24.4646C55.8696 24.4646 54.3427 24.4646 53.8112 24.4646C53.2133 24.1793 52.9133 23.5976 52.5147 23.1146C52.1382 22.6098 51.8614 22.0061 51.6843 21.3037C51.5293 20.6012 51.4518 19.811 51.4518 18.9329V10.553C51.4518 9.10734 52.6341 7.93537 54.0925 7.93537C55.5509 7.93537 56.7332 9.10734 56.7332 10.553V18.2415C56.7332 19.0098 56.8218 19.6354 56.999 20.1183C57.1983 20.5793 57.5526 20.8098 58.0619 20.8098C58.682 20.8098 59.4581 20.5354 59.9895 19.7232C60.521 18.889 60.5864 17.6159 60.5864 16.1671V10.5366Z" fill="#205CF5"/>
+<path d="M31.4231 21.5671H37.7343V24.4646H31.4231V21.5671Z" fill="#205CF5"/>
+<path d="M4.6541 19.9084C4.21371 19.4117 3.57315 19.1634 2.73241 19.1634C1.83161 19.1634 1.15101 19.4316 0.690609 19.968C0.230203 20.4845 0 21.1401 0 21.9348C0 22.6301 0.220194 23.236 0.660582 23.7526C1.12099 24.2492 1.77156 24.4976 2.6123 24.4976C3.5131 24.4976 4.18369 24.2393 4.62408 23.7228C5.08448 23.2062 5.31468 22.5606 5.31468 21.7858C5.31468 21.0309 5.09449 20.4051 4.6541 19.9084Z" fill="#205CF5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M63.9755 17.8463C64.8928 17.8463 65.6364 18.5834 65.6364 19.4927C65.6364 22.0311 67.4118 23.7073 69.1573 23.7073C70.9029 23.7073 72.6783 22.0311 72.6783 19.4927C72.6783 18.5834 73.4219 17.8463 74.3392 17.8463C75.2564 17.8463 76 18.5834 76 19.4927C76 23.4281 73.1355 27 69.1573 27C65.1792 27 62.3147 23.4281 62.3147 19.4927C62.3147 18.5834 63.0583 17.8463 63.9755 17.8463Z" fill="#205CF5"/>
+</svg>

ui/src/components/assets/pause.svg

@@ -1,3 +1,5 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<rect width="30" height="30" rx="15" fill="#F7B202"/>
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 22 22" width="22" height="22"><defs><path d="M11 0C4.92 0 0 4.92 0 11C0 17.08 4.92 22 11 22C17.08 22 22 17.08 22 11C22 4.92 17.08 0 11 0Z" id="an9hysTx2"></path><path d="M11 1C5.48 1 1 5.48 1 11C1 16.52 5.48 21 11 21C16.52 21 21 16.52 21 11C21 5.48 16.52 1 11 1Z" id="hb6BxXbs"></path><path d="M8.27 7.03L9.98 7.03L9.98 14.97L8.27 14.97L8.27 7.03Z" id="g6umQPedLf"></path><path d="M11.64 7.03L13.35 7.03L13.35 14.97L11.64 14.97L11.64 7.03Z" id="c433t3qAh"></path></defs><g><g><g><use xlink:href="#an9hysTx2" opacity="1" fill="#000000" fill-opacity="0"></use><g><use xlink:href="#an9hysTx2" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="2" stroke-opacity="0"></use></g></g><g><use xlink:href="#hb6BxXbs" opacity="1" fill="#000000" fill-opacity="0"></use><g><use xlink:href="#hb6BxXbs" opacity="1" fill-opacity="0" stroke="#4253a5" stroke-width="2" stroke-opacity="1"></use></g></g><g><use xlink:href="#g6umQPedLf" opacity="1" fill="#627ef7" fill-opacity="1"></use></g><g><use xlink:href="#c433t3qAh" opacity="1" fill="#627ef7" fill-opacity="1"></use></g></g></g></svg>
+<rect x="11" y="9" width="2" height="11" rx="1" fill="white"/>
+<rect x="17" y="9" width="2" height="11" rx="1" fill="white"/>
+</svg>

ui/src/components/assets/play.svg

@@ -1,9 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="play" width="158" height="158" viewBox="0 0 158 158">
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <defs>
+<rect width="30" height="30" rx="15" fill="#205CF5"/>
-        <style>
+<path d="M17.0747 15L12.9876 12.6433V17.3567L17.0747 15ZM20 15C20 15.3167 19.8392 15.6335 19.5175 15.8189L12.5051 19.8624C11.8427 20.2444 11 19.7858 11 19.0435V10.9565C11 10.2142 11.8427 9.75564 12.5051 10.1376L19.5175 14.1811C19.8392 14.3665 20 14.6833 20 15Z" fill="white"/>
-            .cls-1{fill:#1b2036}.cls-2{fill:#fff}
-        </style>
-    </defs>
-    <path id="Icon_material-play-circle-filled" d="M79.133 3a76.133 76.133 0 1 0 76.133 76.133A76.161 76.161 0 0 0 79.133 3zM63.906 113.393v-68.52l45.68 34.26z" class="cls-1" data-name="Icon material-play-circle-filled" transform="translate(.457 -.133)"/>
-    <path id="Icon_material-play-circle-outline" d="M66.2 117.55L113.6 82 66.2 46.45zM82 3a79 79 0 1 0 79 79A79.029 79.029 0 0 0 82 3zm0 142.2A63.2 63.2 0 1 1 145.2 82 63.284 63.284 0 0 1 82 145.2z" class="cls-2" data-name="Icon material-play-circle-outline" transform="translate(-3 -3)"/>
 </svg>

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

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

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 $blue-color solid
-  border: 1px #ffffff61 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

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)

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

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
+.indicatorContainer
-    height: 10px
-    width: 10px
-    background-color: #1acd37
     border-radius: 50%
-    box-shadow: 0 0 3px 3px #1acd3787
+    padding: 2px
     margin-left: 10px
 
-.redIndicator
+.indicator
-    height: 10px
+    height: 8px
-    width: 10px
+    width: 8px
-    background-color: #ff3a30
     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)

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

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

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

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
+            font-weight: 600
-            color: white
+            background-color: $data-background-color
 
 // scroll-bar css
 
 ::-webkit-scrollbar
-  width: 8px
+  width: 6px
 
 ::-webkit-scrollbar-thumb
-  background-color: #272d44
+  background-color: $light-blue-color
-  border-radius: 16px
+  border-radius: 10px
 
 ::-webkit-scrollbar-button
   display: none
 
 ::-webkit-scrollbar-corner
   display: none
+

ui/src/typings.d.ts

@@ -0,0 +1 @@
+declare module '*.scss';