diff --git a/packages/bruno-app/src/components/Preferences/Font/StyledWrapper.js b/packages/bruno-app/src/components/Preferences/Display/Font/StyledWrapper.js similarity index 100% rename from packages/bruno-app/src/components/Preferences/Font/StyledWrapper.js rename to packages/bruno-app/src/components/Preferences/Display/Font/StyledWrapper.js diff --git a/packages/bruno-app/src/components/Preferences/Font/index.js b/packages/bruno-app/src/components/Preferences/Display/Font/index.js similarity index 93% rename from packages/bruno-app/src/components/Preferences/Font/index.js rename to packages/bruno-app/src/components/Preferences/Display/Font/index.js index ef6ac9f2f5..622ea08173 100644 --- a/packages/bruno-app/src/components/Preferences/Font/index.js +++ b/packages/bruno-app/src/components/Preferences/Display/Font/index.js @@ -39,7 +39,7 @@ const Font = ({ close }) => {
- + { />
- + { + return ( +
+
+ + Theme + + +
+
+
+ +
+
+ ); +}; + +export default Display; diff --git a/packages/bruno-app/src/components/Preferences/General/index.js b/packages/bruno-app/src/components/Preferences/General/index.js index 9855c27471..0d26c955d4 100644 --- a/packages/bruno-app/src/components/Preferences/General/index.js +++ b/packages/bruno-app/src/components/Preferences/General/index.js @@ -100,7 +100,7 @@ const General = ({ close }) => { return (
-
+
{ return ( -
+
diff --git a/packages/bruno-app/src/components/Preferences/StyledWrapper.js b/packages/bruno-app/src/components/Preferences/StyledWrapper.js index 9cb6e7f7ee..f43047925b 100644 --- a/packages/bruno-app/src/components/Preferences/StyledWrapper.js +++ b/packages/bruno-app/src/components/Preferences/StyledWrapper.js @@ -2,13 +2,12 @@ import styled from 'styled-components'; const StyledWrapper = styled.div` div.tabs { - margin-top: -0.5rem; - div.tab { - padding: 6px 0px; + width: 100%; + min-width: 120px; + padding: 7px 10px; border: none; border-bottom: solid 2px transparent; - margin-right: 1.25rem; color: var(--color-tab-inactive); cursor: pointer; @@ -22,8 +21,12 @@ const StyledWrapper = styled.div` } &.active { - color: ${(props) => props.theme.tabs.active.color} !important; - border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important; + color: ${(props) => props.theme.sidebar.color} !important; + background: ${(props) => props.theme.sidebar.collection.item.bg}; + + &:hover { + background: ${(props) => props.theme.sidebar.collection.item.bg} !important; + } } } } diff --git a/packages/bruno-app/src/components/Preferences/index.js b/packages/bruno-app/src/components/Preferences/index.js index 843fd8228d..03b1d9ef86 100644 --- a/packages/bruno-app/src/components/Preferences/index.js +++ b/packages/bruno-app/src/components/Preferences/index.js @@ -3,10 +3,9 @@ import classnames from 'classnames'; import React, { useState } from 'react'; import Support from './Support'; import General from './General'; -import Font from './Font'; -import Theme from './Theme'; import Proxy from './ProxySettings'; import StyledWrapper from './StyledWrapper'; +import Display from './Display/index'; const Preferences = ({ onClose }) => { const [tab, setTab] = useState('general'); @@ -27,41 +26,36 @@ const Preferences = ({ onClose }) => { return ; } - case 'theme': { - return ; + case 'display': { + return ; } case 'support': { return ; } - - case 'font': { - return ; - } } }; return ( -
-
setTab('general')}> - General -
-
setTab('theme')}> - Theme -
-
setTab('font')}> - Font -
-
setTab('proxy')}> - Proxy -
-
setTab('support')}> - Support +
+
+
setTab('general')}> + General +
+
setTab('display')}> + Display +
+
setTab('proxy')}> + Proxy +
+
setTab('support')}> + Support +
+
{getTabPanel(tab)}
-
{getTabPanel(tab)}
);