holm/bruno
1
0
Fork 0
forked from extern/bruno
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: using css vars for brand and tab border color

Browse Source
This commit is contained in:
Anoop M D 2022-01-22 21:36:28 +05:30
parent 070a34883a
commit efaa9aed21
7 changed files with 20 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/grafnode-components/src/components/GraphQLRequestPane/StyledWrapper.js
View File

@ -32,8 +32,8 @@ const StyledWrapper = styled.div`
.react-tabs__tab--selected {
border: none;
color: #322e2c !important;
border-bottom: solid 2px #8e44ad !important;
border-color: #8e44ad !important;
border-bottom: solid 2px var(--color-tab-active-border) !important;
border-color: var(--color-tab-active-border) !important;
background: inherit;
outline: none !important;
box-shadow: none !important;
@ -42,8 +42,8 @@ const StyledWrapper = styled.div`
border: none;
outline: none !important;
box-shadow: none !important;
border-bottom: solid 2px #8e44ad !important;
border-color: #8e44ad !important;
border-bottom: solid 2px var(--color-tab-active-border) !important;
border-color: var(--color-tab-active-border) !important;
background: inherit;
outline: none !important;
box-shadow: none !important;

8
packages/grafnode-components/src/components/HttpRequestPane/StyledWrapper.js
View File

@ -32,8 +32,8 @@ const StyledWrapper = styled.div`
.react-tabs__tab--selected {
border: none;
color: #322e2c !important;
border-bottom: solid 2px #8e44ad !important;
border-color: #8e44ad !important;
border-bottom: solid 2px var(--color-tab-active-border) !important;
border-color: var(--color-tab-active-border) !important;
background: inherit;
outline: none !important;
box-shadow: none !important;
@ -42,8 +42,8 @@ const StyledWrapper = styled.div`
border: none;
outline: none !important;
box-shadow: none !important;
border-bottom: solid 2px #8e44ad !important;
border-color: #8e44ad !important;
border-bottom: solid 2px var(--color-tab-active-border) !important;
border-color: var(--color-tab-active-border) !important;
background: inherit;
outline: none !important;
box-shadow: none !important;

2
packages/grafnode-components/src/components/QueryUrl/index.js
View File

@ -90,7 +90,7 @@ const QueryUrl = ({value, onChange, handleRun, collections}) => {
/>
</div>
<button
style={{backgroundColor: '#8e44ad'}}
style={{backgroundColor: 'var(--color-brand)'}}
className="flex items-center h-full text-white active:bg-blue-600 font-bold text-xs px-4 py-2 ml-2 uppercase rounded shadow hover:shadow-md outline-none focus:outline-none ease-linear transition-all duration-150"
onClick={handleRun}
>

2
packages/grafnode-components/src/components/ResponsePane/StyledWrapper.js
View File

@ -17,7 +17,7 @@ const StyledWrapper = styled.div`
&.active {
color: #322e2c !important;
border-bottom: solid 2px #8e44ad !important;
border-bottom: solid 2px var(--color-tab-active-border) !important;
}
}
}

2
packages/grafnode-components/src/components/SaveRequest/index.js
View File

@ -25,7 +25,7 @@ const SaveRequestButton = ({folders}) => {
return (
<StyledWrapper className="flex items-center">
<button
style={{backgroundColor: '#8e44ad'}}
style={{backgroundColor: 'var(--color-brand)'}}
className="flex items-center h-full text-white active:bg-blue-600 font-bold text-xs px-4 py-2 ml-2 uppercase rounded shadow hover:shadow-md outline-none focus:outline-none ease-linear transition-all duration-150"
onClick={() => {
setOpenSaveRequestModal(true);

6
packages/grafnode-components/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js
View File

@ -32,11 +32,11 @@ const Wrapper = styled.div`
}
&.item-focused-in-tab {
background: #2383e0;
background: var(--color-brand);
color: white;
&:hover {
background: #2383e0 !important;
background: var(--color-brand) !important;
color: white !important;
}
@ -45,7 +45,7 @@ const Wrapper = styled.div`
}
.indent-block {
border-right: solid 1px #6faaea;
border-right: solid 1px var(--color-sidebar-collection-item-focused-indent-border);
}
}

6
packages/grafnode-run/src/styles/globals.css
View File

@ -13,4 +13,10 @@ html, body {
body {
font-size: 0.875rem;
}
:root {
--color-brand: #546de5;
--color-sidebar-collection-item-focused-indent-border: #7b8de3;
--color-tab-active-border: #4d4d4d;
}