rayan/bruno
1
0
Fork 0
mirror of https://github.com/usebruno/bruno.git synced 2026-07-01 16:44:16 +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

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;
}
}