rayan/bruno
1
0
Fork 0
mirror of https://github.com/usebruno/bruno.git synced 2026-06-23 04:35:40 +00: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
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 {