fix: Settings styles

src/components/settingsInputs.jsx

@@ -1,5 +1,5 @@
 import { CheckBox } from "./checkbox";
-import { inputStyle } from "./styles";
+import { inputStyle, settingsAddInput } from "./styles";
 
 function SettingsCheckBox({ label, title, className, settingName, onClick }) {
   return (
@@ -27,12 +27,12 @@ function SettingsTextInput({
   secret,
 }) {
   return (
-    <div className="ml-2">
+    <div>
       <label className="block mb-2 text-base font-medium text-gray-700 dark:text-white">
         {label}
       </label>
       <input
-        className={`${inputStyle} m-2 ${className}`}
+        className={`${inputStyle} ${settingsAddInput} m-2 ${className}`}
         type={secret ? "password" : "text"}
         placeholder={placeholder}
         title={title}
@@ -55,12 +55,12 @@ function SettingsSelectInput({
   onChange,
 }) {
   return (
-    <div className="ml-2">
+    <div>
       <label className="block mb-2 text-base font-medium text-gray-700 dark:text-white">
         {label}
       </label>
       <select
-        className={`${inputStyle} m-2 ${className}`}
+        className={`${inputStyle} ${settingsAddInput} m-2 ${className}`}
         defaultValue={window.settings[settingName]}
         onChange={(e) => {
           window.settings[settingName] = e.target.value;
@@ -78,11 +78,14 @@ function SettingsSelectInput({
   );
 }
 
-function SettingsPlaceholder({ text }) {
+function SettingsSection({ name, children }) {
   return (
+    <div className="ml-0 lg:ml-6 mt-6 lg:mt-3">
       <h1 className="text-center lg:text-left leading-tight text-xl font-semibold">
-      {text}
+        {name}
       </h1>
+      <div className="ml-0 lg:ml-6 mt-6 lg:mt-3">{children}</div>
+    </div>
   );
 }
 
@@ -90,5 +93,5 @@ export {
   SettingsCheckBox,
   SettingsTextInput,
   SettingsSelectInput,
-  SettingsPlaceholder,
+  SettingsSection,
 };

src/components/styles.js

@@ -1,4 +1,5 @@
 let inputStyle =
-  "w-full form-control block px-3 py-1.5 text-base font-normal text-gray-700 dark:text-white bg-white dark:bg-zinc-900 bg-clip-padding border border-solid border-gray-300 rounded-lg transition ease-in-out focus:border-blue-600 focus:outline-none";
+  "form-control block px-3 py-1.5 text-base font-normal text-gray-700 dark:text-white bg-white dark:bg-zinc-900 bg-clip-padding border border-solid border-gray-300 rounded-lg transition ease-in-out focus:border-blue-600 focus:outline-none";
+let settingsAddInput = "w-full lg:w-1/4";
 
-export { inputStyle };
+export { inputStyle, settingsAddInput };

src/pages/create.jsx

@@ -17,7 +17,7 @@ import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import {
   SettingsCheckBox,
-  SettingsPlaceholder,
+  SettingsSection,
 } from "../components/settingsInputs";
 import { inputStyle } from "../components/styles";
 import { Complete } from "../components/openai";
@@ -136,7 +136,7 @@ function CreateNote() {
 
         {settings.additionalFeatures && (
           <div className="justify-self-start lg:justify-self-start">
-            <SettingsPlaceholder text={locals.AdditionalFeatures} />
+            <SettingsSection name={locals.AdditionalFeatures}>
               {!!settings.openAiKey && (
                 <ButtonWithIcon
                   icon={DocumentTextIcon}
@@ -148,6 +148,7 @@ function CreateNote() {
                   }}
                 />
               )}
+            </SettingsSection>
           </div>
         )}
       </div>

src/pages/settings.jsx

@@ -2,20 +2,19 @@ import {
   SettingsCheckBox,
   SettingsTextInput,
   SettingsSelectInput,
-  SettingsPlaceholder,
+  SettingsSection,
 } from "../components/settingsInputs";
 import { reRenderPage } from "../components/utils";
 import Locales from "../localisation/main";
 
 function Settings() {
   return (
-    <div className="">
+    <div>
       <h1 className="text-center lg:text-left leading-tight text-2xl font-bold">
         {locals.Settings}
       </h1>
 
-      <SettingsPlaceholder text={locals.User} />
-
+      <SettingsSection name={locals.User}>
         <SettingsTextInput
           placeholder={locals.Name}
           label={locals.UserName}
@@ -33,9 +32,9 @@ function Settings() {
           label={locals.UserStatus}
           settingName="userStatus"
         />
+      </SettingsSection>
 
-      <SettingsPlaceholder text={locals.Notes} />
-
+      <SettingsSection name={locals.Notes}>
         <SettingsCheckBox
           label={locals.EditPreview}
           title={locals.EditPreviewWarn}
@@ -52,9 +51,9 @@ function Settings() {
           label={locals.AdditionalFeatures}
           settingName="additionalFeatures"
         />
+      </SettingsSection>
 
-      <SettingsPlaceholder text={locals.Interface} />
-
+      <SettingsSection name={locals.Interface}>
         <SettingsSelectInput
           label={locals.Language}
           settingName="language"
@@ -78,15 +77,16 @@ function Settings() {
             reRenderPage();
           }}
         />
+      </SettingsSection>
 
-      <SettingsPlaceholder text={locals.ThirdPartyApi} />
-
+      <SettingsSection name={locals.ThirdPartyApi}>
         <SettingsTextInput
           placeholder={locals.Key}
           label={locals.OpenAiKey}
           settingName="openAiKey"
           secret
         />
+      </SettingsSection>
     </div>
   );
 }