From 858afdbf03de69fec1da6449e6a4a74ce3090466 Mon Sep 17 00:00:00 2001
From: lohit <lohit.jiddimani@gmail.com>
Date: Mon, 23 Sep 2024 11:32:03 +0530
Subject: [PATCH] feat: preferences sidebar restructure (#3170)

---
 .../{ => Display}/Font/StyledWrapper.js       |  0
 .../Preferences/{ => Display}/Font/index.js   |  4 +-
 .../{ => Display}/Theme/StyledWrapper.js      |  0
 .../Preferences/{ => Display}/Theme/index.js  |  0
 .../components/Preferences/Display/index.js   | 22 ++++++++++
 .../components/Preferences/General/index.js   |  2 +-
 .../Preferences/ProxySettings/index.js        |  2 +-
 .../components/Preferences/StyledWrapper.js   | 15 ++++---
 .../src/components/Preferences/index.js       | 42 ++++++++-----------
 9 files changed, 53 insertions(+), 34 deletions(-)
 rename packages/bruno-app/src/components/Preferences/{ => Display}/Font/StyledWrapper.js (100%)
 rename packages/bruno-app/src/components/Preferences/{ => Display}/Font/index.js (93%)
 rename packages/bruno-app/src/components/Preferences/{ => Display}/Theme/StyledWrapper.js (100%)
 rename packages/bruno-app/src/components/Preferences/{ => Display}/Theme/index.js (100%)
 create mode 100644 packages/bruno-app/src/components/Preferences/Display/index.js

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 }) => {
     <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"
diff --git a/packages/bruno-app/src/components/Preferences/Theme/StyledWrapper.js b/packages/bruno-app/src/components/Preferences/Display/Theme/StyledWrapper.js
similarity index 100%
rename from packages/bruno-app/src/components/Preferences/Theme/StyledWrapper.js
rename to packages/bruno-app/src/components/Preferences/Display/Theme/StyledWrapper.js
diff --git a/packages/bruno-app/src/components/Preferences/Theme/index.js b/packages/bruno-app/src/components/Preferences/Display/Theme/index.js
similarity index 100%
rename from packages/bruno-app/src/components/Preferences/Theme/index.js
rename to packages/bruno-app/src/components/Preferences/Display/Theme/index.js
diff --git a/packages/bruno-app/src/components/Preferences/Display/index.js b/packages/bruno-app/src/components/Preferences/Display/index.js
new file mode 100644
index 0000000000..bff2d04b94
--- /dev/null
+++ b/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;
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 (
     <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"
diff --git a/packages/bruno-app/src/components/Preferences/ProxySettings/index.js b/packages/bruno-app/src/components/Preferences/ProxySettings/index.js
index 3c27786eff..e7ac735c71 100644
--- a/packages/bruno-app/src/components/Preferences/ProxySettings/index.js
+++ b/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>
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 <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>
   );