chore: style updates

This commit is contained in:
Anoop M D 2022-01-25 03:41:35 +05:30
parent 178b92f975
commit 6812494d6b
9 changed files with 38 additions and 18 deletions

View File

@ -2,7 +2,7 @@ import styled from 'styled-components';
const StyledWrapper = styled.div`
div.CodeMirror {
border: solid 1px #e1e1e1;
border: solid 1px var(--color-codemirror-border);
height: 96%;
}

View File

@ -4,21 +4,21 @@ const Wrapper = styled.div`
height: 2.3rem;
div.method-selector {
border: solid 1px #cfcfcf;
border: solid 1px var(--color-layout-border);
border-right: none;
background-color: #f3f3f3;
background-color: var(--color-sidebar-background);
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
div.input-container {
border: solid 1px #cfcfcf;
background-color: #f3f3f3;
border: solid 1px var(--color-layout-border);
background-color: var(--color-sidebar-background);
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
input {
background-color: #f3f3f3;
background-color: var(--color-sidebar-background);
outline: none;
box-shadow: none;

View File

@ -107,7 +107,7 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
<div
className="pb-4 px-4"
style={{
borderBottom: 'solid 1px #e1e1e1'
borderBottom: 'solid 1px var(--color-layout-border)'
}}
>
<div className="pt-2 text-gray-600">{item.name}</div>

View File

@ -6,7 +6,7 @@ const Wrapper = styled.div`
padding: 0;
margin: 0 0 10px;
padding-left: 1rem;
border-bottom: 1px solid #cfcfcf;
border-bottom: 1px solid var(--color-layout-border);
li {
display: inline-flex;
@ -31,7 +31,7 @@ const Wrapper = styled.div`
}
&.active {
border-color: #cfcfcf;
border-color: var(--color-layout-border);
background: #fff;
border-radius: 5px 5px 0 0;

View File

@ -49,7 +49,7 @@ const RequestTabs = ({actions, dispatch, activeRequestTabId, requestTabs}) => {
};
return (
<StyledWrapper className="mt-3 flex items-center">
<StyledWrapper className="mt-2 flex items-center">
{requestTabs && requestTabs.length ? (
<ul role="tablist">
{requestTabs && requestTabs.length ? requestTabs.map((rt, index) => {

View File

@ -2,7 +2,7 @@ import styled from 'styled-components';
const StyledWrapper = styled.div`
div.CodeMirror {
border: solid 1px #e1e1e1;
border: solid 1px var(--color-codemirror-border);
}
div.overlay{

View File

@ -2,7 +2,8 @@ import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
.CodeMirror-gutters {
background-color: #f6f8fa;
background-color: var(--color-codemirror-background);
border-right: solid 1px var(--color-codemirror-border);
}
.grafnode-form {

View File

@ -9,7 +9,7 @@ const Wrapper = styled.div`
aside {
min-width: 230px;
width: 230px;
border-right: solid 1px #e1e1e1;
border-right: solid 1px var(--color-layout-border);
background-color: #F6F8FA;
}
@ -25,7 +25,7 @@ const Wrapper = styled.div`
width: 1px;
padding: 0;
cursor: col-resize;
background: #e1e1e1;
background: var(--color-request-dragbar-background);
&:hover {
background: silver;

View File

@ -1,3 +1,15 @@
:root {
--color-brand: #546de5;
--color-sidebar-collection-item-focused-indent-border: #7b8de3;
--color-sidebar-background: #f6f8fa;
--color-request-dragbar-background: #e2e2e2;
--color-tab-active-border: #4d4d4d;
--color-layout-border: #dedede;
--color-codemirror-border: #efefef;
--color-codemirror-background: #f6f8fa;
}
html, body {
margin: 0;
padding: 0;
@ -15,8 +27,15 @@ body {
font-size: 0.875rem;
}
:root {
--color-brand: #546de5;
--color-sidebar-collection-item-focused-indent-border: #7b8de3;
--color-tab-active-border: #4d4d4d;
body::-webkit-scrollbar, .CodeMirror-vscrollbar::-webkit-scrollbar {
width: 0.6rem;
}
body::-webkit-scrollbar-track, .CodeMirror-vscrollbar::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
body::-webkit-scrollbar-thumb, .CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
background-color: #cdcdcd;
border-radius: 5rem;
}