frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

🏗️ Settings styling tweaks

Browse Source
This commit is contained in:
Rishi Ghan
2024-01-10 21:58:50 -05:00
parent b75862398d
commit 9884da06ef
2 changed files with 105 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/client/components/ComicDetail/EditMetadataPanel.tsx
View File

@@ -58,90 +58,59 @@ export const EditMetadataPanel = (props): ReactElement => {
<label className="label">Issue Details</label> <label className="label">Issue Details</label>
</div> </div>
<div className="field-body"> <div className="field-body">
<div className="field">
<p className="control is-expanded has-icons-left">
<Field <Field
name="issue_name" name="issue_name"
component="input" component="input"
className="input" className="appearance-none w-full dark:bg-slate-400 bg-slate-100 h-10 rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
initialValue={data.name} initialValue={data.name}
placeholder={"Issue Name"} placeholder={"Issue Name"}
/> />
<span className="icon is-small is-left">
<i className="fa-solid fa-user-ninja"></i>
</span>
</p>
</div>
</div> </div>
</div> </div>
{/* Issue Number and year */} {/* Issue Number and year */}
<div className="field is-horizontal"> <div className="mt-4 flex flex-row gap-2">
<div className="field-label"></div> <div>
<div className="field-body"> <div className="text-sm">Issue Number</div>
<div className="field">
<p className="control has-icons-left">
<Field <Field
name="issue_number" name="issue_number"
component="input" component="input"
className="input" className="dark:bg-slate-400 w-20 bg-slate-100 py-2 px-2 rounded-md border-gray-300 h-10 dark:text-slate-200 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
placeholder="Issue Number" placeholder="Issue Number"
/> />
<span className="icon is-small is-left"> <p className="text-xs">Do not enter the first zero</p>
<i className="fa-solid fa-hashtag"></i>
</span>
</p>
<p className="help">Do not enter the first zero</p>
</div> </div>
<div>
{/* year */} {/* year */}
<div className="field"> <div className="text-sm">Issue Year</div>
<p className="control">
<Field <Field
name="issue_year" name="issue_year"
component="input" component="input"
className="input" className="dark:bg-slate-400 w-20 bg-slate-100 py-2 px-2 rounded-md border-gray-300 h-10 dark:text-slate-200 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
/> />
</p>
</div> </div>
<div>
<div className="text-sm">Page Count</div>
<Field
name="page_count"
component="input"
className="dark:bg-slate-400 w-20 bg-slate-100 py-2 px-2 rounded-md border-gray-300 h-10 dark:text-slate-200 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
placeholder="Page Count"
/>
</div> </div>
</div> </div>
{/* page count */} {/* page count */}
<div className="field is-horizontal">
<div className="field-label"></div>
<div className="field-body">
<div className="field">
<p className="control has-icons-left">
<Field
name="page_count"
component="input"
className="input"
placeholder="Page Count"
/>
<span className="icon is-small is-left">
<i className="fa-solid fa-note-sticky"></i>
</span>
</p>
</div>
</div>
</div>
{/* Description */} {/* Description */}
<div className="field is-horizontal"> <div className="mt-2">
<div className="field-label is-normal"> <label className="text-sm">Description</label>
<label className="label">Description</label>
</div>
<div className="field-body">
<div className="field">
<p className="control is-expanded has-icons-left">
<Field <Field
name={"description"} name={"description"}
className="textarea" className="dark:bg-slate-400 w-full min-h-24 bg-slate-100 py-2 px-2 rounded-md border-gray-300 h-10 dark:text-slate-200 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
component={TextareaAutosizeAdapter} component={TextareaAutosizeAdapter}
placeholder={"Description"} placeholder={"Description"}
/> />
</p>
</div>
</div>
</div> </div>
<hr size="1" /> <hr size="1" />

9
src/client/components/Settings/Settings.tsx
View File

@@ -11,6 +11,7 @@ interface ISettingsProps {}
export const Settings = (props: ISettingsProps): ReactElement => { export const Settings = (props: ISettingsProps): ReactElement => {
const [active, setActive] = useState("gen-db"); const [active, setActive] = useState("gen-db");
console.log(active);
const settingsContent = [ const settingsContent = [
{ {
id: "adc-hubs", id: "adc-hubs",
@@ -67,7 +68,8 @@ export const Settings = (props: ISettingsProps): ReactElement => {
</div> </div>
</div> </div>
</header> </header>
<div className="flex flex-cols max-w-screen-xl mx-auto"> <div className="flex flex-row">
<div className="inset-y-0 w-80 bg-gray-800 text-white h-screen overflow-y-auto">
<aside className="px-4 py-4 sm:px-6 sm:py-8 lg:px-8"> <aside className="px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
{map(settingsObject, (settingObject, idx) => { {map(settingsObject, (settingObject, idx) => {
return ( return (
@@ -124,10 +126,11 @@ export const Settings = (props: ISettingsProps): ReactElement => {
); );
})} })}
</aside> </aside>
</div>
{/* content for settings */} {/* content for settings */}
<div className="max-w-screen-xl"> <div className="flex mx-12">
<div className="content"> <div className="">
{map(settingsContent, ({ id, content }) => {map(settingsContent, ({ id, content }) =>
active === id ? content : null, active === id ? content : null,
)} )}