From 9884da06efa385275e6e617bcda65d4a752b1ff2 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Wed, 10 Jan 2024 21:58:50 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=97=EF=B8=8F=20Settings=20styling=20tw?=
 =?UTF-8?q?eaks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ComicDetail/EditMetadataPanel.tsx         | 117 +++++++----------
 src/client/components/Settings/Settings.tsx   | 121 +++++++++---------
 2 files changed, 105 insertions(+), 133 deletions(-)

diff --git a/src/client/components/ComicDetail/EditMetadataPanel.tsx b/src/client/components/ComicDetail/EditMetadataPanel.tsx
index 8111a98..0e359c8 100644
--- a/src/client/components/ComicDetail/EditMetadataPanel.tsx
+++ b/src/client/components/ComicDetail/EditMetadataPanel.tsx
@@ -58,90 +58,59 @@ export const EditMetadataPanel = (props): ReactElement => {
                 <label className="label">Issue Details</label>
               </div>
               <div className="field-body">
-                <div className="field">
-                  <p className="control is-expanded has-icons-left">
-                    <Field
-                      name="issue_name"
-                      component="input"
-                      className="input"
-                      initialValue={data.name}
-                      placeholder={"Issue Name"}
-                    />
-                    <span className="icon is-small is-left">
-                      <i className="fa-solid fa-user-ninja"></i>
-                    </span>
-                  </p>
-                </div>
+                <Field
+                  name="issue_name"
+                  component="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}
+                  placeholder={"Issue Name"}
+                />
               </div>
             </div>
             {/* Issue Number and year */}
-            <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="issue_number"
-                      component="input"
-                      className="input"
-                      placeholder="Issue Number"
-                    />
-                    <span className="icon is-small is-left">
-                      <i className="fa-solid fa-hashtag"></i>
-                    </span>
-                  </p>
-                  <p className="help">Do not enter the first zero</p>
-                </div>
+            <div className="mt-4 flex flex-row gap-2">
+              <div>
+                <div className="text-sm">Issue Number</div>
+                <Field
+                  name="issue_number"
+                  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="Issue Number"
+                />
+                <p className="text-xs">Do not enter the first zero</p>
+              </div>
+              <div>
                 {/* year */}
-                <div className="field">
-                  <p className="control">
-                    <Field
-                      name="issue_year"
-                      component="input"
-                      className="input"
-                    />
-                  </p>
-                </div>
+                <div className="text-sm">Issue Year</div>
+                <Field
+                  name="issue_year"
+                  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"
+                />
+              </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>
 
             {/* 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 */}
-            <div className="field is-horizontal">
-              <div className="field-label is-normal">
-                <label className="label">Description</label>
-              </div>
-              <div className="field-body">
-                <div className="field">
-                  <p className="control is-expanded has-icons-left">
-                    <Field
-                      name={"description"}
-                      className="textarea"
-                      component={TextareaAutosizeAdapter}
-                      placeholder={"Description"}
-                    />
-                  </p>
-                </div>
-              </div>
+            <div className="mt-2">
+              <label className="text-sm">Description</label>
+              <Field
+                name={"description"}
+                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}
+                placeholder={"Description"}
+              />
             </div>
 
             <hr size="1" />
diff --git a/src/client/components/Settings/Settings.tsx b/src/client/components/Settings/Settings.tsx
index 2d001e8..22e1e30 100644
--- a/src/client/components/Settings/Settings.tsx
+++ b/src/client/components/Settings/Settings.tsx
@@ -11,6 +11,7 @@ interface ISettingsProps {}
 
 export const Settings = (props: ISettingsProps): ReactElement => {
   const [active, setActive] = useState("gen-db");
+  console.log(active);
   const settingsContent = [
     {
       id: "adc-hubs",
@@ -67,67 +68,69 @@ export const Settings = (props: ISettingsProps): ReactElement => {
             </div>
           </div>
         </header>
-        <div className="flex flex-cols max-w-screen-xl mx-auto">
-          <aside className="px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
-            {map(settingsObject, (settingObject, idx) => {
-              return (
-                <div
-                  className="w-64 py-2 text-slate-700 dark:text-slate-400"
-                  key={idx}
-                >
-                  <h3 className="text-l pb-2">
-                    {settingObject.category.toUpperCase()}
-                  </h3>
-                  {/* First level children */}
-                  {!isUndefined(settingObject.children) ? (
-                    <ul key={settingObject.id}>
-                      {map(settingObject.children, (item, idx) => {
-                        return (
-                          <li key={idx} className="mb-2">
-                            <a
-                              className={
-                                item.id.toString() === active
-                                  ? "is-active flex items-center"
-                                  : "flex items-center"
-                              }
-                              onClick={() => setActive(item.id.toString())}
-                            >
-                              {item.displayName}
-                            </a>
-                            {/* Second level children */}
-                            {!isUndefined(item.children) ? (
-                              <ul className="pl-4 mt-2">
-                                {map(item.children, (item, idx) => (
-                                  <li key={item.id} className="mb-2">
-                                    <a
-                                      className={
-                                        item.id.toString() === active
-                                          ? "is-active flex items-center"
-                                          : "flex items-center"
-                                      }
-                                      onClick={() =>
-                                        setActive(item.id.toString())
-                                      }
-                                    >
-                                      {item.displayName}
-                                    </a>
-                                  </li>
-                                ))}
-                              </ul>
-                            ) : null}
-                          </li>
-                        );
-                      })}
-                    </ul>
-                  ) : null}
-                </div>
-              );
-            })}
-          </aside>
+        <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">
+              {map(settingsObject, (settingObject, idx) => {
+                return (
+                  <div
+                    className="w-64 py-2 text-slate-700 dark:text-slate-400"
+                    key={idx}
+                  >
+                    <h3 className="text-l pb-2">
+                      {settingObject.category.toUpperCase()}
+                    </h3>
+                    {/* First level children */}
+                    {!isUndefined(settingObject.children) ? (
+                      <ul key={settingObject.id}>
+                        {map(settingObject.children, (item, idx) => {
+                          return (
+                            <li key={idx} className="mb-2">
+                              <a
+                                className={
+                                  item.id.toString() === active
+                                    ? "is-active flex items-center"
+                                    : "flex items-center"
+                                }
+                                onClick={() => setActive(item.id.toString())}
+                              >
+                                {item.displayName}
+                              </a>
+                              {/* Second level children */}
+                              {!isUndefined(item.children) ? (
+                                <ul className="pl-4 mt-2">
+                                  {map(item.children, (item, idx) => (
+                                    <li key={item.id} className="mb-2">
+                                      <a
+                                        className={
+                                          item.id.toString() === active
+                                            ? "is-active flex items-center"
+                                            : "flex items-center"
+                                        }
+                                        onClick={() =>
+                                          setActive(item.id.toString())
+                                        }
+                                      >
+                                        {item.displayName}
+                                      </a>
+                                    </li>
+                                  ))}
+                                </ul>
+                              ) : null}
+                            </li>
+                          );
+                        })}
+                      </ul>
+                    ) : null}
+                  </div>
+                );
+              })}
+            </aside>
+          </div>
 
           {/* content for settings */}
-          <div className="max-w-screen-xl">
-            <div className="content">
+          <div className="flex mx-12">
+            <div className="">
               {map(settingsContent, ({ id, content }) =>
                 active === id ? content : null,
               )}