From a13ab082cbbba5a7e824218b0c156751f4c9d24b Mon Sep 17 00:00:00 2001
From: Mike Starr <90465420+mikestarrdev@users.noreply.github.com>
Date: Fri, 15 Dec 2023 09:51:58 -0500
Subject: [PATCH] refactor css styles (#23)

---
 src/App.tsx                       | 83 ++++++++++++++++---------------
 src/components/Button.tsx         | 11 +++-
 src/components/Dialog.tsx         | 32 ++++++------
 src/components/Errors.tsx         |  4 +-
 src/components/Header.tsx         |  6 +--
 src/components/Select.tsx         |  4 +-
 src/components/Toggle.tsx         |  4 +-
 src/components/forms/JsonForm.tsx | 19 ++-----
 src/components/forms/UrlForm.tsx  | 12 +----
 src/utilities/validateJson.ts     |  4 +-
 10 files changed, 81 insertions(+), 98 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 680ab7c..7e2747f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -253,53 +253,56 @@ function App() {
       >
         <div
           className={twMerge(
-            'md:w-full lg:w-1/2 md:pt-4 md:pb-8 md:mr-2 bg-blueDark rounded-md pb-6 px-1',
+            'md:w-full lg:w-1/2',
+            'md:pt-4 md:pb-8 md:mr-2 bg-blueDark rounded-md pb-6 px-1',
             'border border-blueGray shadow-sm shadow-grayDark'
           )}
         >
-          <Toggle
-            inputType={inputType}
-            clickTypeJson={() => {
-              setInputType(InputType.JSON);
-              setIsNoErrors(false);
-              setIsEnableCheck(false);
-              setErrors([]);
-            }}
-            clickTypeUrl={() => {
-              setInputType(InputType.URL);
-              setIsNoErrors(false);
-              // we need to reset the following 2 values because they affect the behavior of `decompressedJson` in Dilog.tsx
-              setUrlString(undefined);
-              setIsEnableCheck(false);
-              setErrors([]);
-            }}
-          />
-
-          {inputType === InputType.JSON ? (
-            <JsonForm
-              handleSubmit={handleSubmit}
-              handleChangeTextArea={handleChangeTextAreaJson}
-              isEnableCheck={isEnableCheck}
-              isLoading={isLoadingCheck}
-              setIsEnableCheck={setIsEnableCheck}
-              setSelectedChainId={setSelectedChainId}
-            />
-          ) : (
-            <UrlForm
-              handleSubmit={handleSubmit}
-              handleChangeTextArea={handleChangeTextAreaUrl}
-              isEnableCheck={isEnableCheck}
-              isLoading={isLoadingCheck}
-              parsedJson={parsedJson}
-              decompressedJson={decompressedJson}
-              setDecompressedJson={setDecompressedJson}
+          <div className="w-full sm:w-4/5 md:w-full lg:w-[90%] m-auto">
+            <Toggle
+              inputType={inputType}
+              clickTypeJson={() => {
+                setInputType(InputType.JSON);
+                setIsNoErrors(false);
+                setIsEnableCheck(false);
+                setErrors([]);
+              }}
+              clickTypeUrl={() => {
+                setInputType(InputType.URL);
+                setIsNoErrors(false);
+                // reset the following 2 values because they affect the behavior of `decompressedJson` in Dialog.tsx
+                setUrlString(undefined);
+                setIsEnableCheck(false);
+                setErrors([]);
+              }}
             />
-          )}
+
+            {inputType === InputType.JSON ? (
+              <JsonForm
+                handleSubmit={handleSubmit}
+                handleChangeTextArea={handleChangeTextAreaJson}
+                isEnableCheck={isEnableCheck}
+                isLoading={isLoadingCheck}
+                setIsEnableCheck={setIsEnableCheck}
+                setSelectedChainId={setSelectedChainId}
+              />
+            ) : (
+              <UrlForm
+                handleSubmit={handleSubmit}
+                handleChangeTextArea={handleChangeTextAreaUrl}
+                isEnableCheck={isEnableCheck}
+                isLoading={isLoadingCheck}
+                parsedJson={parsedJson}
+                decompressedJson={decompressedJson}
+                setDecompressedJson={setDecompressedJson}
+              />
+            )}
+          </div>
         </div>
         <div
           className={twMerge(
-            'md:w-full md:pt-4 md:ml-2 md:mt-0',
-            'lg:w-1/2 mt-4 pt-4 pb-8 px-1 bg-blueDark text-lightGray',
+            'md:w-full lg:w-1/2 md:pt-4 md:ml-2 md:mt-0 mt-4 pt-4 pb-8 px-1',
+            'bg-blueDark text-lightGray',
             'border border-blueGray rounded-md shadow-sm shadow-grayDark'
           )}
         >
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 256347c..996cc94 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -4,16 +4,25 @@ export const Button = ({
   text,
   clickAction,
   className,
+  variant,
 }: {
   text: string;
   clickAction?: () => void;
   className?: string;
+  variant: 'toggle' | 'dialog';
 }) => {
+  const variants = {
+    toggle:
+      'flex flex-row space-x-2 w-full py-1.5 text-black text-sm font-semibold justify-center border-blueGray',
+    dialog:
+      'w-full mt-4 mx-auto py-3 px-4 text-white bg-blueGray border-darkgray border-1 rounded-sm font-medium text-lg uppercase',
+  };
+
   return (
     <button
       onClick={clickAction}
       className={twMerge(
-        'flex flex-row space-x-2 w-full py-1.5 text-black text-sm font-semibold justify-center border-blueGray',
+        variant === 'toggle' ? variants.toggle : variants.dialog,
         className
       )}
     >
diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx
index f050c68..e668a05 100644
--- a/src/components/Dialog.tsx
+++ b/src/components/Dialog.tsx
@@ -3,6 +3,7 @@ import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { ParsedJsonParams } from '../../types';
 import { formatJsonString } from '../utilities/formatJsonString';
+import { Button } from './Button';
 
 export const Dialog = ({
   inputButton,
@@ -23,10 +24,12 @@ export const Dialog = ({
     if (!decompressedJson) {
       return;
     }
-
     await navigator.clipboard.writeText(decompressedJson);
+    setOpen(false);
   };
 
+  const handleClose = () => setOpen(false);
+
   useEffect(() => {
     if (!parsedJson) {
       setDecompressedJson(undefined);
@@ -64,25 +67,18 @@ export const Dialog = ({
             </AlertDialog.Description>
             <div className="flex justify-end gap-[25px]">
               <AlertDialog.Cancel asChild>
-                <button
-                  onClick={() => handleCopyJson(decompressedJson)}
-                  className={twMerge(
-                    'w-full xs:w-[90%] sm:w-4/5 md:w-full lg:w-4/5',
-                    'mt-4 mx-auto py-3 px-4 text-white bg-blueGray border-darkgray border-1 rounded-sm font-medium text-lg uppercase'
-                  )}
-                >
-                  Copy JSON
-                </button>
+                <Button
+                  text="copy json"
+                  clickAction={() => handleCopyJson(decompressedJson)}
+                  variant="dialog"
+                />
               </AlertDialog.Cancel>
               <AlertDialog.Action asChild>
-                <button
-                  className={twMerge(
-                    'w-full xs:w-[90%] sm:w-4/5 md:w-full lg:w-4/5',
-                    'mt-4 mx-auto py-3 px-4 text-white bg-blueGray border-darkgray border-1 rounded-sm font-medium text-lg uppercase'
-                  )}
-                >
-                  Close
-                </button>
+                <Button
+                  text="close"
+                  clickAction={handleClose}
+                  variant="dialog"
+                />
               </AlertDialog.Action>
             </div>
           </AlertDialog.Content>
diff --git a/src/components/Errors.tsx b/src/components/Errors.tsx
index 37187f8..8228e14 100644
--- a/src/components/Errors.tsx
+++ b/src/components/Errors.tsx
@@ -23,7 +23,7 @@ export const Errors = ({
           <div
             id="errors-container"
             className={twMerge(
-              'xs:w-[90%] sm:w-4/5 w-full',
+              'w-full sm:w-4/5 md:w-full lg:w-[90%]',
               'mt-2 mx-auto p-4 lg:p-6 border bg-blueGray rounded-md',
               errors.length < 1 && !isNoErrors && 'border-none',
               errors.length > 0 && 'border-redAlert border-dashed',
@@ -31,7 +31,7 @@ export const Errors = ({
             )}
           >
             {!isNoErrors ? (
-              <ul className="list-none">{renderedErrors}</ul>
+              <ul className="list-none break-words">{renderedErrors}</ul>
             ) : (
               <h3 className="mb-1 text-lg font-semibold uppercase">
                 🎊 No errors found! 🎊
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 4ca07b8..e378560 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -25,11 +25,7 @@ export const Header = ({
         <img src={airswapLogo} alt="AirSwap logo" className="mr-3" />
         <h1>Server Debugger</h1>
       </div>
-      <div
-        className={twMerge(
-          'flex md:absolute md:right-0 mx-auto md:h-full md:py-2 text-sm font-light text-white uppercase'
-        )}
-      >
+      <div className="flex md:absolute md:right-0 mx-auto md:h-full md:py-2 text-sm font-light text-white uppercase">
         Protocol fee:{' '}
         {!isLoadingProtocolFee ? Number(protocolFee) || '7' : 'loading...'}
       </div>
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 8df78ac..f77f17a 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -47,9 +47,9 @@ export const Select = ({
       >
         <RadixSelect.Trigger
           className="flex items-center px-3 py-1 bg-blueGray border border-blueGray rounded-md font-semibold uppercase"
-          aria-label="chain"
+          aria-label="chain id"
         >
-          <RadixSelect.Value placeholder="chain" />
+          <RadixSelect.Value placeholder="chain id" />
           <RadixSelect.Icon className="ml-2">
             <div
               className={`${
diff --git a/src/components/Toggle.tsx b/src/components/Toggle.tsx
index 516f787..582b1f1 100644
--- a/src/components/Toggle.tsx
+++ b/src/components/Toggle.tsx
@@ -15,10 +15,11 @@ export const Toggle = ({
       <h3 className="mt-2 mb-4 text-md sm:text-lg font-semibold uppercase">
         Select server response type:
       </h3>
-      <div className="flex flex-row w-full xs:w-[90%] sm:w-4/5 md:w-full lg:w-4/5 mx-auto rounded-sm">
+      <div className="flex flex-row mx-auto rounded-sm">
         <Button
           text="JSON"
           clickAction={clickTypeJson}
+          variant="toggle"
           className={`${
             inputType === InputType.JSON
               ? 'text-white bg-blueGray'
@@ -28,6 +29,7 @@ export const Toggle = ({
         <Button
           text="URL"
           clickAction={clickTypeUrl}
+          variant="toggle"
           className={`${
             inputType === InputType.URL
               ? 'bg-blueGray text-white'
diff --git a/src/components/forms/JsonForm.tsx b/src/components/forms/JsonForm.tsx
index 872503b..aa8c808 100644
--- a/src/components/forms/JsonForm.tsx
+++ b/src/components/forms/JsonForm.tsx
@@ -1,6 +1,5 @@
 import { ChangeEvent, MouseEvent } from 'react';
 import { textareaPlaceholder } from '../../placeholders/textareaJsonPlaceholder';
-import { twMerge } from 'tailwind-merge';
 import { Select } from '../Select';
 import { chainIdOptions } from '../../utilities/chainIdOptions';
 
@@ -21,12 +20,7 @@ export const JsonForm = ({
 }) => {
   return (
     <form onSubmit={handleSubmit} className="flex flex-col m-auto w-full">
-      <div
-        className={twMerge(
-          'xs:w-[90%] sm:w-4/5 md:w-full lg:w-4/5',
-          'flex flex-row w-full justify-between items-center py-2 m-auto '
-        )}
-      >
+      <div className="flex flex-row w-full justify-between items-center py-2 m-auto ">
         <label
           htmlFor="jsonInput"
           className="ml-1 w-fit font-semibold uppercase "
@@ -47,11 +41,7 @@ export const JsonForm = ({
         placeholder={textareaPlaceholder}
         autoComplete="off"
         onChange={handleChangeTextArea}
-        className={twMerge(
-          'w-full xs:w-[90%] sm:w-4/5 md:w-full lg:w-4/5',
-          'mb-2 mx-auto p-5 min-h-[325px] bg-blueExtraDark border-blueGray border rounded-sm',
-          'placeholder:text-sm'
-        )}
+        className="w-full mb-2 mx-auto p-5 min-h-[325px] bg-blueExtraDark border-blueGray border rounded-sm placeholder:text-sm"
       />
       {isEnableCheck && (
         <div className="md:hidden italic opacity-40 font-medium">
@@ -63,10 +53,7 @@ export const JsonForm = ({
         type="submit"
         value={!isLoading ? 'Check errors' : 'Loading...'}
         disabled={isLoading}
-        className={twMerge(
-          'w-full xs:w-[90%] sm:w-4/5 md:w-full lg:w-4/5',
-          'mt-4 mx-auto py-3 px-4 text-white bg-blueAirSwap border-darkgray border-1 rounded-sm font-medium text-lg uppercase'
-        )}
+        className="w-full mt-4 mx-auto py-3 px-4 text-white bg-blueAirSwap border-darkgray border-1 rounded-sm font-medium text-lg uppercase"
       />
     </form>
   );
diff --git a/src/components/forms/UrlForm.tsx b/src/components/forms/UrlForm.tsx
index 6e21267..8d1ec2a 100644
--- a/src/components/forms/UrlForm.tsx
+++ b/src/components/forms/UrlForm.tsx
@@ -1,5 +1,4 @@
 import { ChangeEvent, Dispatch, MouseEvent, SetStateAction } from 'react';
-import { twMerge } from 'tailwind-merge';
 import { textareaUrlPlaceholder } from '../../placeholders/textareaUrlPlaceholder';
 import { Dialog } from '../Dialog';
 import { ParsedJsonParams } from '../../../types';
@@ -27,10 +26,7 @@ export const UrlForm = ({
       type="submit"
       value={!isLoading ? 'Check errors' : 'Loading...'}
       disabled={isLoading}
-      className={twMerge(
-        'w-full xs:w-[90%] sm:w-4/5 md:w-full lg:w-4/5',
-        'mt-4 mx-auto py-3 px-4 text-white bg-blueAirSwap border-darkgray border-1 rounded-sm font-medium text-lg uppercase'
-      )}
+      className="w-full mt-4 mx-auto py-3 px-4 text-white bg-blueAirSwap border-darkgray border-1 rounded-sm font-medium text-lg uppercase"
     />
   );
 
@@ -48,11 +44,7 @@ export const UrlForm = ({
         placeholder={textareaUrlPlaceholder}
         autoComplete="off"
         onChange={handleChangeTextArea}
-        className={twMerge(
-          'w-full xs:w-[90%] sm:w-4/5 md:w-full lg:w-4/5',
-          'mb-2 mx-auto p-5 min-h-[325px] bg-blueExtraDark border-blueGray border rounded-sm',
-          'placeholder:text-sm'
-        )}
+        className="w-full mb-2 mx-auto p-5 min-h-[325px] bg-blueExtraDark border-blueGray border rounded-sm placeholder:text-sm"
       />
       {isEnableCheck && (
         <div className="md:hidden italic opacity-40 font-medium">
diff --git a/src/utilities/validateJson.ts b/src/utilities/validateJson.ts
index 5c745ed..03a1c15 100644
--- a/src/utilities/validateJson.ts
+++ b/src/utilities/validateJson.ts
@@ -105,9 +105,7 @@ export const validateJson = ({
         errorsList.push('swapContract: must be a valid ERC20 address');
         // then check if address is correct
         if (json['swapContract'] !== swapContractAddress) {
-          errorsList.push(
-            `swapContract: address is not valid. Check for deployed contracts on https://about.airswap.io/technology/deployments.`
-          );
+          errorsList.push(`swapContract: SwapERC20 address is not valid.`);
         }
       }
     }