Feat/preferences UI polish (#6989)

* Preferences UI polish

* chore: cleanup

* chore: cleanup

* chore: removed unused classname

packages/bruno-app/src/components/Preferences/Beta/StyledWrapper.js

@@ -1,9 +1,10 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  .bruno-form {
-    padding: 1rem;
-  }
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
 
   .submit {
     margin-top: 1rem;
@@ -25,8 +26,6 @@ const StyledWrapper = styled.div`
   }
 
   .no-features-message {
-    text-align: center;
-    padding: 2rem;
     color: var(--color-gray-500);
     font-style: italic;
   }

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

@@ -93,12 +93,9 @@ const Beta = ({ close }) => {
 
   return (
     <StyledWrapper>
-      <form className="bruno-form" onSubmit={formik.handleSubmit}>
+      <div className="section-header">Beta Features</div>
+      <form onSubmit={formik.handleSubmit}>
         <div className="mb-6">
-          <div className="flex items-center mb-2">
-            <IconFlask size={20} className="mr-2 text-orange-500" />
-            <h2 className="text-lg font-medium">Beta Features</h2>
-          </div>
           <p className="text-gray-500 dark:text-gray-400 mb-4 text-wrap">
             Beta features are experimental previews that may change before full release. Try them and share feedback.
           </p>

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

@@ -3,9 +3,12 @@ import Font from './Font/index';
 
 const Display = ({ close }) => {
   return (
-    <div className="flex flex-col my-2 gap-10 w-full">
-      <div className="w-fit flex flex-col gap-2">
-        <Font close={close} />
+    <div className="flex flex-col gap-4 w-full">
+      <div className="section-header">Display</div>
+      <div className="flex flex-col mb-2 gap-10 w-full">
+        <div className="w-fit flex flex-col gap-2">
+          <Font close={close} />
+        </div>
       </div>
     </div>
   );

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

@@ -1,6 +1,11 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  
   color: ${(props) => props.theme.text};
 
   .text-link {
@@ -18,6 +23,10 @@ const StyledWrapper = styled.div`
       font-size: 0.8125rem;
     }
   }
+
+  .default-collection-location-input {
+    max-width: 28rem;
+  }
 `;
 
 export default StyledWrapper;

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

@@ -174,8 +174,9 @@ const General = () => {
 
   return (
     <StyledWrapper className="w-full">
+      <div className="section-header">General Settings</div>
       <form className="bruno-form" onSubmit={formik.handleSubmit}>
-        <div className="flex items-center my-2">
+        <div className="flex items-center mb-2">
           <input
             id="sslVerification"
             type="checkbox"

packages/bruno-app/src/components/Preferences/Keybindings/StyledWrapper.js

@@ -1,6 +1,11 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  
   table {
     width: 80%;
     border-collapse: collapse;

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

@@ -8,6 +8,7 @@ const Keybindings = ({ close }) => {
 
   return (
     <StyledWrapper className="w-full">
+      <div className="section-header">Keybindings</div>
       <div className="table-container">
         <table>
           <thead>

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

@@ -1,6 +1,11 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  
   .settings-label {
     width: 100px;
   }
@@ -37,6 +42,7 @@ const StyledWrapper = styled.div`
     .system-proxy-error-container {
       background: ${(props) => props.theme.status.danger.background};
       border: 1px solid ${(props) => props.theme.status.danger.border};
+      width: fit-content;
     }
 
     .system-proxy-error-text {

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

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

packages/bruno-app/src/components/Preferences/StyledWrapper.js

@@ -72,7 +72,7 @@ const StyledWrapper = styled.div`
     font-size: ${(props) => props.theme.font.size.sm};
     color: ${(props) => props.theme.colors.text.muted};
     font-weight: 500;
-    margin-bottom: 8px;
+    margin: 6px 0 8px 0;
     text-transform: uppercase;
     letter-spacing: 0.5px;
   }

packages/bruno-app/src/components/Preferences/Support/StyledWrapper.js

@@ -1,6 +1,11 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+
   color: ${(props) => props.theme.text};
   .rows {
     svg {

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

@@ -8,8 +8,9 @@ const Support = () => {
 
   return (
     <StyledWrapper>
+      <div className="section-header">Support</div>
       <div className="rows">
-        <div className="mt-2">
+        <div className="mb-2">
           <a href="https://docs.usebruno.com" target="_blank" className="flex items-end">
             <IconBook size={18} strokeWidth={2} />
             <span className="label ml-2">{t('COMMON.DOCUMENTATION')}</span>

packages/bruno-app/src/components/Preferences/Themes/StyledWrapper.js

@@ -3,7 +3,7 @@ import { rgba } from 'polished';
 
 const StyledWrapper = styled.div`
   .appearance-container {
-    padding: 8px 0 16px 0;
+    padding-bottom: 16px;
   }
         
   .theme-mode-option {