github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-07-03 11:29:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Feature/UI/light theme (#44)

Browse Source 
* light theme

* css polish

* unused code

* css

* text shadow

* footer style
This commit is contained in:
lirazyehezkel 2021-05-11 17:35:21 +03:00 committed by GitHub
parent 06a25876b9
commit 129acae58e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 177 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
ui/src/App.sass
View File

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

3
ui/src/App.tsx
View File

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

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

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

22
ui/src/components/HarEntryViewer/HAREntrySections.module.sass
View File

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

2
ui/src/components/HarEntryViewer/HAREntrySections.tsx
View File

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

13
ui/src/components/HarEntryViewer/HAREntryViewer.module.sass
View File

@ -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
color: rgb(18, 19, 27)
background: $main-background-color
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

25
ui/src/components/HarPage.tsx
View File

@ -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",
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 (
<div className="HarPage">
<div style={{padding: "0 24px 24px 24px", display: "flex", alignItems: "center"}}>
<img style={{cursor: "pointer", marginRight: 15, height: 20}} alt="pause" src={connection === ConnectionStatus.Connected ? pauseIcon : playIcon} onClick={toggleConnection}/>
<div className="harPageHeader">
<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">

20
ui/src/components/SyntaxHighlighter/highlighterStyle.ts
View File

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

2
ui/src/components/SyntaxHighlighter/index.scss
View File

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

4
ui/src/components/SyntaxHighlighter/index.tsx
View File

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

7
ui/src/components/Tabs.tsx
View File

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

9
ui/src/components/assets/Mizu.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 4.7 KiB

8
ui/src/components/assets/pause.svg
View File

@ -1,3 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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>
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="30" height="30" rx="15" fill="#F7B202"/>
<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>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 283 B

11
ui/src/components/assets/play.svg
View File

@ -1,9 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" id="play" width="158" height="158" viewBox="0 0 158 158">
<defs>
<style>
.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 width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="30" height="30" rx="15" fill="#205CF5"/>
<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"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 757 B

After

Width:  |  Height:  |  Size: 434 B

1
ui/src/components/style/CollapsibleContainer.sass
View File

@ -19,7 +19,6 @@
padding-right: 2%
.CollapsibleContainer-Expanded
//background-color: rgba(98, 126, 247, 0.12)
min-height: 40px
.CollapsibleContainer-Title

8
ui/src/components/style/HarEntriesList.module.sass
View File

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

17
ui/src/components/style/HarEntry.module.sass
View File

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

2
ui/src/components/style/HarEntryDetailed.module.sass
View File

@ -4,6 +4,4 @@
.har
display: flex
overflow: scroll
//padding: .75rem .75rem 0 .75rem
height: calc(100% - 1.75rem)
//width: calc(100% - 2rem)

8
ui/src/components/style/HarFilters.module.sass
View File

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

50
ui/src/components/style/HarPage.sass
View File

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

6
ui/src/components/style/StatusCode.module.sass
View File

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

6
ui/src/components/style/misc.module.sass
View File

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

22
ui/src/components/style/variables.module.scss Normal file
View File

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

28
ui/src/index.sass
View File

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

1
ui/src/typings.d.ts vendored Normal file
View File

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