extern/bruno
1
0
Fork 1
mirror of https://github.com/usebruno/bruno.git synced 2024-11-22 07:53:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: dark mode (tabs and request tabs)

Browse Source
This commit is contained in:
Anoop M D 2022-10-23 03:21:23 +05:30
parent 4718c77e3d
commit 23400a77f8
15 changed files with 82 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
View File

@ -8,11 +8,11 @@ const Wrapper = styled.div`
thead,
td {
border: 1px solid #efefef;
border: 1px solid ${(props) => props.theme.table.border};
}
thead {
color: #616161;
color: ${(props) => props.theme.table.thead.color};;
font-size: 0.8125rem;
user-select: none;
}

4
packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/StyledWrapper.js
View File

@ -8,11 +8,11 @@ const Wrapper = styled.div`
thead,
td {
border: 1px solid #efefef;
border: 1px solid ${(props) => props.theme.table.border};
}
thead {
color: #616161;
color: ${(props) => props.theme.table.thead.color};;
font-size: 0.8125rem;
user-select: none;
}

6
packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/StyledWrapper.js
View File

@ -35,8 +35,8 @@ const StyledWrapper = styled.div`
.react-tabs__tab--selected {
border: none;
color: #322e2c !important;
border-bottom: solid 2px var(--color-tab-active-border) !important;
color: ${(props) => props.theme.tabs.active.color} !important;
border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
border-color: var(--color-tab-active-border) !important;
background: inherit;
outline: none !important;
@ -50,7 +50,7 @@ const StyledWrapper = styled.div`
border: none;
outline: none !important;
box-shadow: none !important;
border-bottom: solid 2px var(--color-tab-active-border) !important;
border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
border-color: var(--color-tab-active-border) !important;
background: inherit;
outline: none !important;

4
packages/bruno-app/src/components/RequestPane/HttpRequestPane/StyledWrapper.js
View File

@ -20,8 +20,8 @@ const StyledWrapper = styled.div`
}
&.active {
color: #322e2c !important;
border-bottom: solid 2px var(--color-tab-active-border) !important;
color: ${(props) => props.theme.tabs.active.color} !important;
border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
}
}
}

4
packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js
View File

@ -8,11 +8,11 @@ const Wrapper = styled.div`
thead,
td {
border: 1px solid #efefef;
border: 1px solid ${(props) => props.theme.table.border};
}
thead {
color: #616161;
color: ${(props) => props.theme.table.thead.color};;
font-size: 0.8125rem;
user-select: none;
}

4
packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js
View File

@ -8,11 +8,11 @@ const Wrapper = styled.div`
thead,
td {
border: 1px solid #efefef;
border: 1px solid ${(props) => props.theme.table.border};
}
thead {
color: #616161;
color: ${(props) => props.theme.table.thead.color};;
font-size: 0.8125rem;
user-select: none;
}

4
packages/bruno-app/src/components/RequestPane/RequestHeaders/StyledWrapper.js
View File

@ -8,11 +8,11 @@ const Wrapper = styled.div`
thead,
td {
border: 1px solid #efefef;
border: 1px solid ${(props) => props.theme.table.border};
}
thead {
color: #616161;
color: ${(props) => props.theme.table.thead.color};;
font-size: 0.8125rem;
user-select: none;
}

4
packages/bruno-app/src/components/RequestTabPanel/StyledWrapper.js
View File

@ -18,11 +18,11 @@ const StyledWrapper = styled.div`
display: flex;
height: 100%;
width: 1px;
border-left: solid 1px var(--color-request-dragbar-background);
border-left: solid 1px ${(props) => props.theme.requestTabPanel.dragbar.border};
}
&:hover div.drag-request-border {
border-left: solid 1px var(--color-request-dragbar-background-active);
border-left: solid 1px ${(props) => props.theme.requestTabPanel.dragbar.activeBorder};
}
}
`;

6
packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js
View File

@ -19,7 +19,7 @@ const StyledWrapper = styled.div`
.close-icon {
display: none;
color: #9f9f9f;
color: ${(props) => props.theme.requestTabs.icon.color};
width: 8px;
padding-bottom: 6px;
padding-top: 6px;
@ -27,8 +27,8 @@ const StyledWrapper = styled.div`
&:hover,
&:hover .close-icon {
background-color: #eaeaea;
color: rgb(76 76 76);
color: ${(props) => props.theme.requestTabs.icon.hoverColor};
background-color: ${(props) => props.theme.requestTabs.icon.hoverBg};
}
.has-changes-icon {

2
packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
View File

@ -85,7 +85,7 @@ const RequestTab = ({ tab, collection }) => {
<span className="tab-method uppercase" style={{ color: getMethodColor(method), fontSize: 12 }}>
{method}
</span>
<span className="text-gray-700 ml-1 tab-name" title={item.name}>
<span className="ml-1 tab-name" title={item.name}>
{item.name}
</span>
</div>

15
packages/bruno-app/src/components/RequestTabs/StyledWrapper.js
View File

@ -1,7 +1,7 @@
import styled from 'styled-components';
const Wrapper = styled.div`
border-bottom: 1px solid var(--color-request-dragbar-background);
border-bottom: 1px solid ${(props) => props.theme.requestTabs.borromBorder};
ul {
padding: 0;
@ -28,7 +28,8 @@ const Wrapper = styled.div`
height: 38px;
margin-right: 6px;
background: #f7f7f7;
color: ${(props) => props.theme.requestTabs.color};
background: ${(props) => props.theme.requestTabs.bg};
border-radius: 0;
.tab-container {
@ -36,7 +37,7 @@ const Wrapper = styled.div`
}
&.active {
background: #e7e7e7;
background: ${(props) => props.theme.requestTabs.active.bg};
font-weight: 500;
}
@ -60,9 +61,9 @@ const Wrapper = styled.div`
padding: 3px 0px;
display: inline-flex;
justify-content: center;
color: rgb(117 117 117);
color: ${(props) => props.theme.requestTabs.shortTab.color};
background-color: ${(props) => props.theme.requestTabs.shortTab.bg};
position: relative;
background-color: white;
top: -1px;
> div {
@ -85,8 +86,8 @@ const Wrapper = styled.div`
&:hover {
> div {
background-color: #eaeaea;
color: rgb(76 76 76);
background-color: ${(props) => props.theme.requestTabs.shortTab.hoverBg};
color: ${(props) => props.theme.requestTabs.shortTab.hoverColor};
border-radius: 3px;
}
}

4
packages/bruno-app/src/components/ResponsePane/StyledWrapper.js
View File

@ -20,8 +20,8 @@ const StyledWrapper = styled.div`
}
&.active {
color: #322e2c !important;
border-bottom: solid 2px var(--color-tab-active-border) !important;
color: ${(props) => props.theme.tabs.active.color} !important;
border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
}
}
}

2
packages/bruno-app/src/components/Workspaces/WorkspaceSelector/StyledWrapper.js
View File

@ -3,7 +3,7 @@ import styled from 'styled-components';
const Wrapper = styled.div`
.current-workspace {
margin-inline: 0.5rem;
background-color: ${(props) => props.theme.sidebar.workspace.bg};
background-color: ${(props) => props.theme.sidebar.workspace.bg};
border-radius: 5px;
.caret {

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

@ -57,6 +57,10 @@ const darkTheme = {
url: {
bg: '#3D3D3D',
icon: 'rgb(204, 204, 204)'
},
dragbar: {
border: '#444',
activeBorder: '#8a8a8a'
}
},
@ -99,25 +103,29 @@ const darkTheme = {
},
tabs: {
color: '',
bg: '',
borromBorder: '',
active: {
color: '',
bg: '',
borromBorder: ''
color: '#ccc',
border: '#569cd6'
}
},
requestTabs: {
color: '',
bg: '',
borromBorder: '',
color: '#ccc',
bg: '#2A2D2F',
borromBorder: '#444',
icon: {
color: '#9f9f9f',
hoverColor: 'rgb(204, 204, 204)',
hoverBg: '#1e1e1e'
},
active: {
color: '',
bg: '',
borromBorder: ''
bg: '#3D3D3D'
},
shortTab: {
color: '#ccc',
bg: 'transparent',
hoverColor: '#ccc',
hoverBg: '#3D3D3D'
}
},
@ -126,7 +134,10 @@ const darkTheme = {
},
table: {
border: '',
border: '#333',
thead : {
color: 'rgb(204, 204, 204)'
}
},
'primary-text': '#ffffff',

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

@ -57,6 +57,10 @@ const lightTheme = {
url: {
bg: '#f3f3f3',
icon: '#515151'
},
dragbar: {
border: '#efefef',
activeBorder: 'rgb(200, 200, 200)'
}
},
@ -99,24 +103,29 @@ const lightTheme = {
},
tabs: {
color: '',
bg: '',
borromBorder: '',
active: {
color: '',
bg: '',
borromBorder: ''
color: '${(props) => props.theme.tabs.active.color}',
border: '#546de5'
}
},
requestTabs: {
color: '',
bg: '',
borromBorder: '',
color: 'rgb(52, 52, 52)',
bg: '#f7f7f7',
borromBorder: '#efefef',
icon: {
color: '#9f9f9f',
hoverColor: 'rgb(76 76 76)',
hoverBg: 'rgb(234, 234, 234)'
},
active: {
color: '',
bg: '',
borromBorder: ''
bg: '#e7e7e7'
},
shortTab: {
color: 'rgb(117 117 117)',
bg: 'white',
hoverColor: 'rgb(76 76 76)',
hoverBg: '#eaeaea'
}
},
@ -125,7 +134,10 @@ const lightTheme = {
},
table: {
border: '',
border: '#efefef',
thead : {
color: '#616161'
}
},
'primary-text': 'rgb(52 52 52)',