feat: preferences sidebar restructure (#3170)

packages/bruno-app/src/components/Preferences/Display/Font/index.js

@@ -39,7 +39,7 @@ const Font = ({ close }) => {
     <StyledWrapper>
       <div className="flex flex-row gap-2 w-full">
         <div className="w-4/5">
-          <label className="block font-medium">Code Editor Font</label>
+          <label className="block">Code Editor Font</label>
           <input
             type="text"
             className="block textbox mt-2 w-full"
@@ -52,7 +52,7 @@ const Font = ({ close }) => {
           />
         </div>
         <div className="w-1/5">
-          <label className="block font-medium">Font Size</label>
+          <label className="block">Font Size</label>
           <input
             type="number"
             className="block textbox mt-2 w-full"

packages/bruno-app/src/components/Preferences/Display/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import Font from './Font/index';
+import Theme from './Theme/index';
+
+const Display = ({ close }) => {
+  return (
+      <div className="flex flex-col my-2 gap-10 w-full">
+        <div className='w-full flex flex-col gap-2'>
+          <span>
+            Theme
+          </span>
+          <Theme close={close} />
+        </div>
+        <div className='h-[1px] bg-[#aaa5] w-full'></div>
+        <div className='w-fit flex flex-col gap-2'>
+          <Font close={close} />
+        </div>
+      </div>
+  );
+};
+
+export default Display;

packages/bruno-app/src/components/Preferences/General/index.js

@@ -100,7 +100,7 @@ const General = ({ close }) => {
   return (
     <StyledWrapper>
       <form className="bruno-form" onSubmit={formik.handleSubmit}>
-        <div className="flex items-center mt-2">
+        <div className="flex items-center my-2">
           <input
             id="sslVerification"
             type="checkbox"

packages/bruno-app/src/components/Preferences/ProxySettings/index.js

@@ -113,7 +113,7 @@ const ProxySettings = ({ close }) => {
   return (
     <StyledWrapper>
       <form className="bruno-form" onSubmit={formik.handleSubmit}>
-        <div className="mb-3 flex items-center">
+        <div className="mb-3 flex items-center mt-2">
           <label className="settings-label" htmlFor="protocol">
             Mode
           </label>

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

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 <Proxy close={onClose} />;
       }
 
-      case 'theme': {
-        return <Theme close={onClose} />;
+      case 'display': {
+        return <Display close={onClose} />;
       }
 
       case 'support': {
         return <Support />;
       }
-
-      case 'font': {
-        return <Font close={onClose} />;
-      }
     }
   };
 
   return (
     <StyledWrapper>
       <Modal size="lg" title="Preferences" handleCancel={onClose} hideFooter={true}>
-        <div className="flex items-center px-2 tabs" role="tablist">
-          <div className={getTabClassname('general')} role="tab" onClick={() => setTab('general')}>
-            General
-          </div>
-          <div className={getTabClassname('theme')} role="tab" onClick={() => setTab('theme')}>
-            Theme
-          </div>
-          <div className={getTabClassname('font')} role="tab" onClick={() => setTab('font')}>
-            Font
-          </div>
-          <div className={getTabClassname('proxy')} role="tab" onClick={() => setTab('proxy')}>
-            Proxy
-          </div>
-          <div className={getTabClassname('support')} role="tab" onClick={() => setTab('support')}>
-            Support
+        <div className='flex flex-row gap-2 mx-[-1rem] !my-[-1.5rem]'>
+          <div className="flex flex-col items-center tabs" role="tablist">
+            <div className={getTabClassname('general')} role="tab" onClick={() => setTab('general')}>
+              General
+            </div>
+            <div className={getTabClassname('display')} role="tab" onClick={() => setTab('display')}>
+              Display
+            </div>
+            <div className={getTabClassname('proxy')} role="tab" onClick={() => setTab('proxy')}>
+              Proxy
+            </div>
+            <div className={getTabClassname('support')} role="tab" onClick={() => setTab('support')}>
+              Support
+            </div>
           </div>
+          <section className="flex flex-grow px-2 pt-2 pb-6 tab-panel">{getTabPanel(tab)}</section>
         </div>
-        <section className="flex flex-grow px-2 mt-4 tab-panel">{getTabPanel(tab)}</section>
       </Modal>
     </StyledWrapper>
   );