fix: Settings styles

This commit is contained in:
Artemy 2023-04-04 17:15:25 +03:00
parent 2c07e71349
commit f3106daa4b
4 changed files with 97 additions and 92 deletions

View file

@ -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,
};

View file

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

View file

@ -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>

View file

@ -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>
);
}