From 2741082c84f15dd08895b8503bd499e6d6e94c14 Mon Sep 17 00:00:00 2001
From: rusconn <rusconn3@gmail.com>
Date: Thu, 28 Mar 2024 18:08:33 +0900
Subject: [PATCH] refactor!: refine spacings

BREAKING CAHNGE: some spaces changed
---
 app/converters/json-yaml/page.tsx     | 11 +++---
 app/converters/number-base/page.tsx   | 28 ++++++++-------
 app/encoders-decoders/base64/page.tsx | 14 ++++----
 app/encoders-decoders/html/page.tsx   | 14 ++++----
 app/encoders-decoders/jwt/page.tsx    | 14 ++++----
 app/encoders-decoders/url/page.tsx    | 14 ++++----
 app/formatters/json/page.tsx          |  7 ++--
 app/generators/hash/page.tsx          | 52 ++++++++++++++-------------
 app/generators/uuid/page.tsx          |  4 +--
 components/configurations.tsx         |  2 +-
 components/page-root-section.tsx      |  6 ++--
 components/page-section.tsx           | 10 +++---
 components/sidebar/tool-groups.tsx    |  2 +-
 components/tool-card.tsx              | 10 +++---
 14 files changed, 99 insertions(+), 89 deletions(-)

diff --git a/app/converters/json-yaml/page.tsx b/app/converters/json-yaml/page.tsx
index b4ba77b..2066d4b 100644
--- a/app/converters/json-yaml/page.tsx
+++ b/app/converters/json-yaml/page.tsx
@@ -127,18 +127,15 @@ export default function Page() {
   );
 
   return (
-    <PageRootSection
-      className="flex h-full flex-col"
-      title={toolGroups.converters.tools.jsonYaml.longTitle}
-    >
-      <PageSection className="mb-6 mt-0" title="Configuration">
+    <PageRootSection className="h-full" title={toolGroups.converters.tools.jsonYaml.longTitle}>
+      <PageSection title="Configuration">
         <Configurations list={[indentationConfig]} />
       </PageSection>
       <div className="flex flex-1 flex-col gap-x-4 gap-y-5 lg:flex-row">
-        <PageSection className="mt-0 min-h-[200px] flex-1" title="Json" control={jsonControl}>
+        <PageSection className="min-h-[200px] flex-1" title="Json" control={jsonControl}>
           <Editor language="json" value={form.json} onChange={onJsonChange} />
         </PageSection>
-        <PageSection className="mt-0 min-h-[200px] flex-1" title="Yaml" control={yamlControl}>
+        <PageSection className="min-h-[200px] flex-1" title="Yaml" control={yamlControl}>
           <Editor language="yaml" value={form.yaml} onChange={onYamlChange} />
         </PageSection>
       </div>
diff --git a/app/converters/number-base/page.tsx b/app/converters/number-base/page.tsx
index 04be9a9..093284e 100644
--- a/app/converters/number-base/page.tsx
+++ b/app/converters/number-base/page.tsx
@@ -85,21 +85,23 @@ export default function Page() {
 
   return (
     <PageRootSection title={toolGroups.converters.tools.numberBase.longTitle}>
-      <PageSection className="mb-6" title="Configuration">
+      <PageSection title="Configuration">
         <Configurations list={[formatNumberConfig]} />
       </PageSection>
-      <PageSection title="Decimal" control={decControl}>
-        <Input value={dec} onChange={onDecChange} />
-      </PageSection>
-      <PageSection title="Hexadecimal" control={hexControl}>
-        <Input value={hex} onChange={onHexChange} />
-      </PageSection>
-      <PageSection title="Octal" control={octControl}>
-        <Input value={oct} onChange={onOctChange} />
-      </PageSection>
-      <PageSection title="Binary" control={binControl}>
-        <Input value={bin} onChange={onBinChange} />
-      </PageSection>
+      <div className="flex flex-col gap-3">
+        <PageSection title="Decimal" control={decControl}>
+          <Input value={dec} onChange={onDecChange} />
+        </PageSection>
+        <PageSection title="Hexadecimal" control={hexControl}>
+          <Input value={hex} onChange={onHexChange} />
+        </PageSection>
+        <PageSection title="Octal" control={octControl}>
+          <Input value={oct} onChange={onOctChange} />
+        </PageSection>
+        <PageSection title="Binary" control={binControl}>
+          <Input value={bin} onChange={onBinChange} />
+        </PageSection>
+      </div>
     </PageRootSection>
   );
 }
diff --git a/app/encoders-decoders/base64/page.tsx b/app/encoders-decoders/base64/page.tsx
index 04d3376..881fe15 100644
--- a/app/encoders-decoders/base64/page.tsx
+++ b/app/encoders-decoders/base64/page.tsx
@@ -68,12 +68,14 @@ export default function Page() {
 
   return (
     <PageRootSection title={toolGroups.encodersDecoders.tools.base64.longTitle}>
-      <PageSection title="Decoded" control={decodedControl}>
-        <Textarea value={form.decoded} onChange={onDecodedChange} rows={10} />
-      </PageSection>
-      <PageSection title="Encoded" control={encodedControl}>
-        <Textarea value={form.encoded} onChange={onEncodedChange} rows={10} />
-      </PageSection>
+      <div className="flex flex-col gap-3">
+        <PageSection title="Decoded" control={decodedControl}>
+          <Textarea value={form.decoded} onChange={onDecodedChange} rows={10} />
+        </PageSection>
+        <PageSection title="Encoded" control={encodedControl}>
+          <Textarea value={form.encoded} onChange={onEncodedChange} rows={10} />
+        </PageSection>
+      </div>
     </PageRootSection>
   );
 }
diff --git a/app/encoders-decoders/html/page.tsx b/app/encoders-decoders/html/page.tsx
index c4defff..c8cc22d 100644
--- a/app/encoders-decoders/html/page.tsx
+++ b/app/encoders-decoders/html/page.tsx
@@ -66,12 +66,14 @@ export default function Page() {
 
   return (
     <PageRootSection title={toolGroups.encodersDecoders.tools.html.longTitle}>
-      <PageSection title="Decoded" control={decodedControl}>
-        <Textarea value={form.decoded} onChange={onDecodedChange} rows={10} />
-      </PageSection>
-      <PageSection title="Encoded" control={encodedControl}>
-        <Textarea value={form.encoded} onChange={onEncodedChange} rows={10} />
-      </PageSection>
+      <div className="flex flex-col gap-3">
+        <PageSection title="Decoded" control={decodedControl}>
+          <Textarea value={form.decoded} onChange={onDecodedChange} rows={10} />
+        </PageSection>
+        <PageSection title="Encoded" control={encodedControl}>
+          <Textarea value={form.encoded} onChange={onEncodedChange} rows={10} />
+        </PageSection>
+      </div>
     </PageRootSection>
   );
 }
diff --git a/app/encoders-decoders/jwt/page.tsx b/app/encoders-decoders/jwt/page.tsx
index 014aba9..1532e5d 100644
--- a/app/encoders-decoders/jwt/page.tsx
+++ b/app/encoders-decoders/jwt/page.tsx
@@ -47,12 +47,14 @@ export default function Page() {
       <PageSection title="Jwt Token" control={jwtTokenControl}>
         <Textarea value={jwt} onChange={onJwtChange} rows={3} />
       </PageSection>
-      <PageSection title="Header" control={heaederControl}>
-        <Editor height={180} language="json" value={header} options={{ readOnly: true }} />
-      </PageSection>
-      <PageSection title="Payload" control={payloadControl}>
-        <Editor height={180} language="json" value={payload} options={{ readOnly: true }} />
-      </PageSection>
+      <div className="flex flex-col gap-3">
+        <PageSection title="Header" control={heaederControl}>
+          <Editor height={180} language="json" value={header} options={{ readOnly: true }} />
+        </PageSection>
+        <PageSection title="Payload" control={payloadControl}>
+          <Editor height={180} language="json" value={payload} options={{ readOnly: true }} />
+        </PageSection>
+      </div>
     </PageRootSection>
   );
 }
diff --git a/app/encoders-decoders/url/page.tsx b/app/encoders-decoders/url/page.tsx
index 1fb2c38..6d826fb 100644
--- a/app/encoders-decoders/url/page.tsx
+++ b/app/encoders-decoders/url/page.tsx
@@ -66,12 +66,14 @@ export default function Page() {
 
   return (
     <PageRootSection title={toolGroups.encodersDecoders.tools.url.longTitle}>
-      <PageSection title="Decoded" control={decodedControl}>
-        <Textarea value={form.decoded} onChange={onDecodedChange} rows={10} />
-      </PageSection>
-      <PageSection title="Encoded" control={encodedControl}>
-        <Textarea value={form.encoded} onChange={onEncodedChange} rows={10} />
-      </PageSection>
+      <div className="flex flex-col gap-3">
+        <PageSection title="Decoded" control={decodedControl}>
+          <Textarea value={form.decoded} onChange={onDecodedChange} rows={10} />
+        </PageSection>
+        <PageSection title="Encoded" control={encodedControl}>
+          <Textarea value={form.encoded} onChange={onEncodedChange} rows={10} />
+        </PageSection>
+      </div>
     </PageRootSection>
   );
 }
diff --git a/app/formatters/json/page.tsx b/app/formatters/json/page.tsx
index e4d0d99..c352e06 100644
--- a/app/formatters/json/page.tsx
+++ b/app/formatters/json/page.tsx
@@ -69,11 +69,8 @@ export default function Page() {
   const outputControl = <ControlMenu list={[outputCopyButton]} />;
 
   return (
-    <PageRootSection
-      className="flex h-full flex-col"
-      title={toolGroups.formatters.tools.json.longTitle}
-    >
-      <PageSection className="mt-0" title="Configuration">
+    <PageRootSection className="h-full" title={toolGroups.formatters.tools.json.longTitle}>
+      <PageSection title="Configuration">
         <Configurations list={[indentationConfig]} />
       </PageSection>
       <div className="flex flex-1 flex-col gap-x-4 gap-y-5 lg:flex-row">
diff --git a/app/generators/hash/page.tsx b/app/generators/hash/page.tsx
index 44bd38b..7ac38d9 100644
--- a/app/generators/hash/page.tsx
+++ b/app/generators/hash/page.tsx
@@ -69,33 +69,35 @@ export default function Page() {
       <PageSection title="Configuration">
         <Configurations list={[uppercaseConfig]} />
       </PageSection>
-      <PageSection className="my-4" title="Input" control={inputControl}>
+      <PageSection className="-mt-2" title="Input" control={inputControl}>
         <Textarea value={input} onChange={onInputChange} rows={5} />
       </PageSection>
-      <PageSection title="MD5">
-        <div className="flex gap-2">
-          <Input className="flex-1" value={md5} readOnly />
-          <ControlMenu list={[md5CopyButton]} />
-        </div>
-      </PageSection>
-      <PageSection title="SHA1">
-        <div className="flex gap-2">
-          <Input className="flex-1" value={sha1} readOnly />
-          <ControlMenu list={[sha1CopyButton]} />
-        </div>
-      </PageSection>
-      <PageSection title="SHA256">
-        <div className="flex gap-2">
-          <Input className="flex-1" value={sha256} readOnly />
-          <ControlMenu list={[sha256CopyButton]} />
-        </div>
-      </PageSection>
-      <PageSection title="SHA512">
-        <div className="flex gap-2">
-          <Input className="flex-1" value={sha512} readOnly />
-          <ControlMenu list={[sha512CopyButton]} />
-        </div>
-      </PageSection>
+      <div className="flex flex-col gap-3">
+        <PageSection title="MD5">
+          <div className="flex gap-2">
+            <Input className="flex-1" value={md5} readOnly />
+            <ControlMenu list={[md5CopyButton]} />
+          </div>
+        </PageSection>
+        <PageSection title="SHA1">
+          <div className="flex gap-2">
+            <Input className="flex-1" value={sha1} readOnly />
+            <ControlMenu list={[sha1CopyButton]} />
+          </div>
+        </PageSection>
+        <PageSection title="SHA256">
+          <div className="flex gap-2">
+            <Input className="flex-1" value={sha256} readOnly />
+            <ControlMenu list={[sha256CopyButton]} />
+          </div>
+        </PageSection>
+        <PageSection title="SHA512">
+          <div className="flex gap-2">
+            <Input className="flex-1" value={sha512} readOnly />
+            <ControlMenu list={[sha512CopyButton]} />
+          </div>
+        </PageSection>
+      </div>
     </PageRootSection>
   );
 }
diff --git a/app/generators/uuid/page.tsx b/app/generators/uuid/page.tsx
index 0a4b00b..abe996c 100644
--- a/app/generators/uuid/page.tsx
+++ b/app/generators/uuid/page.tsx
@@ -126,7 +126,7 @@ export default function Page() {
       <PageSection title="Configuration">
         <Configurations list={[hyphensConfig, uppercaseConfig, uuidVersionConfig]} />
       </PageSection>
-      <PageSection className="mt-6" title="Generate">
+      <PageSection title="Generate">
         <div className="flex items-center gap-2">
           <Button variant="secondary" onClick={onGenerateClick}>
             Generate UUID(s)
@@ -140,7 +140,7 @@ export default function Page() {
           />
         </div>
       </PageSection>
-      <PageSection title="UUID(s)" control={uuidsControl}>
+      <PageSection className="-mt-3" title="UUID(s)" control={uuidsControl}>
         <Textarea {...{ ref }} value={uuidsString} rows={10} readOnly />
       </PageSection>
     </PageRootSection>
diff --git a/components/configurations.tsx b/components/configurations.tsx
index 278faae..609c744 100644
--- a/components/configurations.tsx
+++ b/components/configurations.tsx
@@ -7,7 +7,7 @@ type Props = {
 
 function RawConfigurations({ list }: Props) {
   return (
-    <ul className="space-y-1.5">
+    <ul className="flex flex-col gap-1.5">
       {list.map((config, i) => (
         // re-render does not change the order
         // eslint-disable-next-line react/no-array-index-key
diff --git a/components/page-root-section.tsx b/components/page-root-section.tsx
index 07edd93..103c138 100644
--- a/components/page-root-section.tsx
+++ b/components/page-root-section.tsx
@@ -1,3 +1,5 @@
+import { cn } from "@/lib/style";
+
 type Props = {
   className?: string;
   children: React.ReactNode;
@@ -6,8 +8,8 @@ type Props = {
 
 export function PageRootSection({ className, children, title }: Props) {
   return (
-    <section {...{ className }}>
-      <h1 className="mb-6 text-2xl">{title}</h1>
+    <section className={cn("flex flex-col gap-6", className)}>
+      <h1 className="text-2xl">{title}</h1>
       {children}
     </section>
   );
diff --git a/components/page-section.tsx b/components/page-section.tsx
index 56f5ed7..63441e5 100644
--- a/components/page-section.tsx
+++ b/components/page-section.tsx
@@ -9,14 +9,14 @@ type Props = {
 
 export function PageSection({ className, children, title, control }: Props) {
   return (
-    <section className={cn("mt-3 flex flex-col", className)}>
+    <section className={cn("flex flex-col gap-1.5", className)}>
       {control ? (
-        <div className="mb-1.5 flex w-full items-end">
-          <h2 className="text-base">{title}</h2>
-          <div className="ml-auto">{control}</div>
+        <div className="flex justify-between">
+          <h2 className="self-end text-base">{title}</h2>
+          <div>{control}</div>
         </div>
       ) : (
-        <h2 className="mb-1.5 text-base">{title}</h2>
+        <h2 className="text-base">{title}</h2>
       )}
       {children}
     </section>
diff --git a/components/sidebar/tool-groups.tsx b/components/sidebar/tool-groups.tsx
index 3f96f16..50afa14 100644
--- a/components/sidebar/tool-groups.tsx
+++ b/components/sidebar/tool-groups.tsx
@@ -24,7 +24,7 @@ export function ToolGroups() {
 
   return (
     <Accordion.Root type="multiple" value={expandedGroups} onValueChange={setExpandedGroups}>
-      <ul className="space-y-1">
+      <ul className="flex flex-col gap-1">
         {Object.values(toolGroups).map(group => (
           <li key={group.href}>
             <ToolGroup {...group} isOpend={expandedGroups.includes(group.href)} />
diff --git a/components/tool-card.tsx b/components/tool-card.tsx
index 25a02cd..fd5a626 100644
--- a/components/tool-card.tsx
+++ b/components/tool-card.tsx
@@ -7,14 +7,16 @@ export type ToolCardProps = Pick<Tool, "Icon" | "longTitle" | "description" | "h
 export function ToolCard({ Icon, longTitle, description, href }: ToolCardProps) {
   return (
     <Link className="rounded" {...{ href }}>
-      <div className="group flex h-80 w-44 flex-col items-center overflow-hidden rounded border bg-card p-5 pt-0 text-card-foreground hover:bg-card-hover">
-        <div className="flex h-44 shrink-0 items-center">
+      <div className="group flex h-80 w-44 flex-col items-center gap-5 overflow-hidden rounded border bg-card p-5 text-card-foreground hover:bg-card-hover">
+        <div className="flex flex-col p-5">
           <div className="rounded bg-card-icon p-4 group-hover:bg-card-icon-hover">
             <Icon size={64} />
           </div>
         </div>
-        <h2 className="w-full font-semibold">{longTitle}</h2>
-        <p className="mt-1.5 w-full text-xs text-card-muted-foreground">{description}</p>
+        <div className="flex flex-1 flex-col gap-1.5">
+          <h2 className="font-semibold">{longTitle}</h2>
+          <p className="text-xs text-card-muted-foreground">{description}</p>
+        </div>
       </div>
     </Link>
   );