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 (
-    <h1 className="text-center lg:text-left leading-tight text-xl font-semibold">
-      {text}
-    </h1>
+    <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">
+        {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,18 +136,19 @@ function CreateNote() {
 
         {settings.additionalFeatures && (
           <div className="justify-self-start lg:justify-self-start">
-            <SettingsPlaceholder text={locals.AdditionalFeatures} />
-            {!!settings.openAiKey && (
-              <ButtonWithIcon
-                icon={DocumentTextIcon}
-                text={locals.AIComplete}
-                className="m-1"
-                w="w-full"
-                onClick={() => {
-                  Complete(setText);
-                }}
-              />
-            )}
+            <SettingsSection name={locals.AdditionalFeatures}>
+              {!!settings.openAiKey && (
+                <ButtonWithIcon
+                  icon={DocumentTextIcon}
+                  text={locals.AIComplete}
+                  className="m-1"
+                  w="w-full"
+                  onClick={() => {
+                    Complete(setText);
+                  }}
+                />
+              )}
+            </SettingsSection>
           </div>
         )}
       </div>

src/pages/settings.jsx

@@ -2,91 +2,91 @@ 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}
+          settingName="userName"
+        />
 
-      <SettingsTextInput
-        placeholder={locals.Name}
-        label={locals.UserName}
-        settingName="userName"
-      />
+        <SettingsTextInput
+          placeholder={locals.Url}
+          label={locals.PhotoUrl}
+          settingName="userPhoto"
+        />
 
-      <SettingsTextInput
-        placeholder={locals.Url}
-        label={locals.PhotoUrl}
-        settingName="userPhoto"
-      />
+        <SettingsTextInput
+          placeholder={locals.Status}
+          label={locals.UserStatus}
+          settingName="userStatus"
+        />
+      </SettingsSection>
 
-      <SettingsTextInput
-        placeholder={locals.Status}
-        label={locals.UserStatus}
-        settingName="userStatus"
-      />
+      <SettingsSection name={locals.Notes}>
+        <SettingsCheckBox
+          label={locals.EditPreview}
+          title={locals.EditPreviewWarn}
+          settingName="editPreview"
+        />
 
-      <SettingsPlaceholder text={locals.Notes} />
+        <SettingsCheckBox
+          label={locals.PublicNote}
+          title={locals.PublicNoteTitle}
+          settingName="publicNote"
+        />
 
-      <SettingsCheckBox
-        label={locals.EditPreview}
-        title={locals.EditPreviewWarn}
-        settingName="editPreview"
-      />
+        <SettingsCheckBox
+          label={locals.AdditionalFeatures}
+          settingName="additionalFeatures"
+        />
+      </SettingsSection>
 
-      <SettingsCheckBox
-        label={locals.PublicNote}
-        title={locals.PublicNoteTitle}
-        settingName="publicNote"
-      />
+      <SettingsSection name={locals.Interface}>
+        <SettingsSelectInput
+          label={locals.Language}
+          settingName="language"
+          options={[
+            {
+              value: "ru",
+              label: "Русский",
+            },
+            {
+              value: "en",
+              label: "English (US)",
+            },
+          ]}
+          onChange={(e) => {
+            window.locals =
+              Locales[window.settings.language] ||
+              Locales[navigator.language] ||
+              Locales[navigator.userLanguage] ||
+              Locales.en;
 
-      <SettingsCheckBox
-        label={locals.AdditionalFeatures}
-        settingName="additionalFeatures"
-      />
+            reRenderPage();
+          }}
+        />
+      </SettingsSection>
 
-      <SettingsPlaceholder text={locals.Interface} />
-
-      <SettingsSelectInput
-        label={locals.Language}
-        settingName="language"
-        options={[
-          {
-            value: "ru",
-            label: "Русский",
-          },
-          {
-            value: "en",
-            label: "English (US)",
-          },
-        ]}
-        onChange={(e) => {
-          window.locals =
-            Locales[window.settings.language] ||
-            Locales[navigator.language] ||
-            Locales[navigator.userLanguage] ||
-            Locales.en;
-
-          reRenderPage();
-        }}
-      />
-
-      <SettingsPlaceholder text={locals.ThirdPartyApi} />
-
-      <SettingsTextInput
-        placeholder={locals.Key}
-        label={locals.OpenAiKey}
-        settingName="openAiKey"
-        secret
-      />
+      <SettingsSection name={locals.ThirdPartyApi}>
+        <SettingsTextInput
+          placeholder={locals.Key}
+          label={locals.OpenAiKey}
+          settingName="openAiKey"
+          secret
+        />
+      </SettingsSection>
     </div>
   );
 }