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

feat: dark model (modals)

Browse Source
This commit is contained in:
Anoop M D 2022-10-23 02:14:59 +05:30
parent 6be2818bfb
commit 4718c77e3d
6 changed files with 216 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/bruno-app/src/components/Modal/StyledWrapper.js
View File

@ -66,8 +66,8 @@ const Wrapper = styled.div`
justify-content: space-between;
align-items: center;
text-transform: uppercase;
color: rgb(86 86 86);
background-color: #f1f1f1;
color: ${(props) => props.theme.modal.title.color};
background-color: ${(props) => props.theme.modal.title.bg};
font-size: 0.75rem;
padding: 12px;
font-weight: 600;
@ -77,7 +77,7 @@ const Wrapper = styled.div`
.close {
font-size: 1.3rem;
line-height: 1;
color: #000;
color: ${(props) => props.theme.modal.iconColor};
text-shadow: 0 1px 0 #fff;
opacity: 0.5;
margin-top: -2px;
@ -90,7 +90,26 @@ const Wrapper = styled.div`
.bruno-modal-content {
flex-grow: 1;
background-color: #fff;
background-color: ${(props) => props.theme.modal.body.bg};
.textbox {
line-height: 1.42857143;
border: 1px solid #ccc;
padding: 0.45rem;
box-shadow: none;
border-radius: 0px;
outline: none;
box-shadow: none;
transition: border-color ease-in-out .1s;
border-radius: 3px;
background-color: ${(props) => props.theme.modal.input.bg};
border: 1px solid ${(props) => props.theme.modal.input.border};
&:focus {
border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
outline: none !important;
}
}
}
.bruno-modal-backdrop {
@ -117,7 +136,7 @@ const Wrapper = styled.div`
}
.bruno-modal-footer {
background-color: white;
background-color: ${(props) => props.theme.modal.body.bg};
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}

8
packages/bruno-app/src/components/Sidebar/NewRequest/StyledWrapper.js
View File

@ -2,9 +2,9 @@ import styled from 'styled-components';
const StyledWrapper = styled.div`
div.method-selector-container {
border: solid 1px var(--color-layout-border);
border: solid 1px ${(props) => props.theme.modal.input.border};
border-right: none;
background-color: var(--color-sidebar-background);
background-color: ${(props) => props.theme.modal.input.bg};
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
@ -15,15 +15,17 @@ const StyledWrapper = styled.div`
div.method-selector-container,
div.input-container {
background-color: ${(props) => props.theme.modal.input.bg};
height: 2.3rem;
}
div.input-container {
border: solid 1px var(--color-layout-border);
border: solid 1px ${(props) => props.theme.modal.input.border};
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
input {
background-color: ${(props) => props.theme.modal.input.bg};
outline: none;
box-shadow: none;

74
packages/bruno-app/src/globalStyles.js
View File

@ -6,24 +6,70 @@ const GlobalStyle = createGlobalStyle`
border-right: solid 1px var(--color-codemirror-border);
}
.bruno-form {
.textbox {
line-height: 1.42857143;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
padding: 0.45rem;
box-shadow: none;
border-radius: 0px;
.btn {
text-align: center;
white-space: nowrap;
outline: none;
box-shadow: none;
transition: border-color ease-in-out .1s;
border-radius: 3px;
&:focus {
border: solid 1px #8b8b8b !important;
outline: none !important;
}
.btn-sm {
padding: .215rem .6rem .215rem .6rem;
}
.btn-md {
padding: .4rem 1.1rem;
line-height: 1.47;
}
.btn-default {
&:active,
&:hover,
&:focus {
outline: none;
box-shadow: none;
}
}
.btn-close {
color: ${(props) => props.theme.button.close.color};
background: ${(props) => props.theme.button.close.bg};
border: solid 1px ${(props) => props.theme.button.close.border};;
&:hover,
&:focus {
outline: none;
box-shadow: none;
border: solid 1px #696969;
}
}
.btn-secondary {
color: ${(props) => props.theme.button.secondary.color};
background: ${(props) => props.theme.button.secondary.bg};
border: solid 1px ${(props) => props.theme.button.secondary.border};
.btn-icon {
color: #3f3f3f;
}
&:hover,
&:focus {
border-color: ${(props) => props.theme.button.secondary.hoverBorder};
outline: none;
box-shadow: none;
}
&:disabled {
color: #545454;
background: #efefef;
border: solid 1px rgb(234, 234, 234);
cursor: not-allowed;
}
&:disabled.btn-icon {
color: #545454;
}
}

88
packages/bruno-app/src/styles/_buttons.scss
View File

@ -1,89 +1 @@
.btn {
text-align: center;
white-space: nowrap;
outline: none;
box-shadow: none;
border-radius: 3px;
}
.btn-sm {
padding: .215rem .6rem .215rem .6rem;
}
.btn-md {
padding: .4rem 1.1rem;
line-height: 1.47;
}
.btn-default {
&:active,
&:hover,
&:focus {
outline: none;
box-shadow: none;
}
}
.btn-close {
color: #212529;
background: white;
border: solid 1px white;
&:hover,
&:focus {
outline: none;
box-shadow: none;
border: solid 1px #696969;
}
}
.btn-secondary {
color: #212529;
background: #e2e6ea;
border: solid 1px #dae0e5;
.btn-icon {
color: #3f3f3f;
}
&:hover,
&:focus {
border-color: #696969;
outline: none;
box-shadow: none;
}
&:disabled {
color: #545454;
background: #efefef;
border: solid 1px rgb(234, 234, 234);
cursor: not-allowed;
}
&:disabled.btn-icon {
color: #545454;
}
&.btn-gradient {
background: linear-gradient(#fff, #e0e0e0);
border: solid 1px rgb(191, 191, 191);
&:hover {
border: solid 1px rgb(179, 179, 179);
background: linear-gradient(#f6f6f6, #e0e0e0);
}
&:focus,
&:active {
border: solid 1px rgb(129, 129, 129);
outline: none;
box-shadow: 0 8px 6px -11px black;
}
&:disabled {
color: #545454;
background: linear-gradient(#fff, #ececec);
border: solid 1px rgb(234, 234, 234);
}
}
}

63
packages/bruno-app/src/themes/dark.js
View File

@ -66,6 +66,69 @@ const darkTheme = {
}
},
modal: {
title: {
color: '#ccc',
bg: 'rgb(48, 48, 49)',
iconColor: '#ccc'
},
body: {
color: '#ccc',
bg: 'rgb(48, 48, 49)',
},
input : {
bg: 'rgb(65, 65, 65)',
border: 'rgb(65, 65, 65)',
focusBorder: 'rgb(65, 65, 65)'
}
},
button: {
secondary: {
color: 'rgb(204, 204, 204)',
bg: '#0F395E',
border: '#0F395E',
hoverBorder: '#696969'
},
close: {
color: '#ccc',
bg: 'transparent',
border: 'transparent',
hoverBorder: ''
}
},
tabs: {
color: '',
bg: '',
borromBorder: '',
active: {
color: '',
bg: '',
borromBorder: ''
}
},
requestTabs: {
color: '',
bg: '',
borromBorder: '',
active: {
color: '',
bg: '',
borromBorder: ''
}
},
codemirror: {
},
table: {
border: '',
},
'primary-text': '#ffffff',
'secondary-text': '#929292',
'sidebar-collection-item-active-background': '#e1e1e1',

64
packages/bruno-app/src/themes/light.js
View File

@ -39,7 +39,7 @@ const lightTheme = {
dropdown: {
color: "rgb(48 48 48)",
iconColor: "rgb(75, 85, 99)",
bg: 'rgb(48, 48, 49)',
bg: '#fff',
hoverBg: '#e9e9e9',
shadow: 'rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px',
},
@ -66,6 +66,68 @@ const lightTheme = {
}
},
modal: {
title: {
color: 'rgb(86 86 86)',
bg: '#f1f1f1',
iconColor: 'black'
},
body: {
color: '#ccc',
bg: 'white',
},
input : {
bg: 'white',
border: '#ccc',
focusBorder: '#8b8b8b'
}
},
button: {
secondary: {
color: '#212529',
bg: '#e2e6ea',
border: '#dae0e5',
hoverBorder: '#696969'
},
close: {
color: '212529',
bg: 'white',
border: 'white',
hoverBorder: ''
}
},
tabs: {
color: '',
bg: '',
borromBorder: '',
active: {
color: '',
bg: '',
borromBorder: ''
}
},
requestTabs: {
color: '',
bg: '',
borromBorder: '',
active: {
color: '',
bg: '',
borromBorder: ''
}
},
codemirror: {
},
table: {
border: '',
},
'primary-text': 'rgb(52 52 52)',
'secondary-text': '#929292',
'sidebar-collection-item-active-background': '#e1e1e1',