From 423ff76644e12c34eff2aac7126b9187b2c7dedd Mon Sep 17 00:00:00 2001
From: escapedcat <github@htmlcss.de>
Date: Sun, 2 Jul 2023 15:50:55 +0800
Subject: [PATCH 1/3] feat(dropdown): adjust styling

---
 src/components/Toggle.tsx    | 4 +++-
 src/layouts/DropdownMenu.tsx | 2 +-
 src/layouts/Header.tsx       | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/Toggle.tsx b/src/components/Toggle.tsx
index 5e4c59dc..a4198218 100644
--- a/src/components/Toggle.tsx
+++ b/src/components/Toggle.tsx
@@ -12,7 +12,9 @@ const Toggle: FC<Props> = ({ toggleText, active, toggleFn }) => {
 
   return (
     <div className="flex w-full items-center justify-center" onClick={toggleFn}>
-      <div className="w-2/3">{toggleText}&nbsp;</div>
+      <div className="w-2/3 cursor-default pl-8 text-left">
+        {toggleText}&nbsp;
+      </div>
       <div className="w-1/3">
         <div
           className={`flex h-3 w-10 items-center rounded-full duration-300 ease-in-out ${color}`}
diff --git a/src/layouts/DropdownMenu.tsx b/src/layouts/DropdownMenu.tsx
index fb8b4e56..6ae6c773 100644
--- a/src/layouts/DropdownMenu.tsx
+++ b/src/layouts/DropdownMenu.tsx
@@ -17,7 +17,7 @@ const DropdownMenu = forwardRef<HTMLDivElement>((_, ref) => {
   return (
     <div
       ref={ref}
-      className="absolute top-14 right-5 z-10 flex w-56 rounded-lg border border-black bg-white dark:border-gray-300 dark:bg-gray-800"
+      className="absolute right-5 top-14 z-10 flex w-56 rounded-lg border border-black bg-white shadow-lg  dark:border-gray-300 dark:bg-gray-800"
     >
       <div className="flex w-full flex-col items-center justify-center text-center">
         <div className="w-full py-4">
diff --git a/src/layouts/Header.tsx b/src/layouts/Header.tsx
index c704f434..e6c991bd 100644
--- a/src/layouts/Header.tsx
+++ b/src/layouts/Header.tsx
@@ -49,7 +49,7 @@ const Header: FC = () => {
         <Bars3Icon
           ref={menu}
           onClick={showDropdownHandler}
-          className="h-8 w-8"
+          className="h-8 w-8 cursor-pointer hover:text-yellow-400"
         />
         {showDropdown && <DropdownMenu ref={dropdown} />}
       </div>

From fdcdc136dd27bf74ac545470bf7f2fe1debb6567 Mon Sep 17 00:00:00 2001
From: escapedcat <github@htmlcss.de>
Date: Sun, 2 Jul 2023 16:05:26 +0800
Subject: [PATCH 2/3] feat(transaction): adjust styling

---
 src/pages/Home/TransactionCard/SingleTransaction.tsx | 9 +++------
 src/pages/Home/TransactionCard/TransactionCard.tsx   | 4 ++--
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/pages/Home/TransactionCard/SingleTransaction.tsx b/src/pages/Home/TransactionCard/SingleTransaction.tsx
index 3f01bffb..fad0b649 100644
--- a/src/pages/Home/TransactionCard/SingleTransaction.tsx
+++ b/src/pages/Home/TransactionCard/SingleTransaction.tsx
@@ -50,7 +50,7 @@ export const SingleTransaction: FC<Props> = ({ transaction, onClick }) => {
 
   return (
     <li
-      className="flex h-24 cursor-pointer flex-col justify-center px-0 py-2 text-center hover:bg-gray-300 dark:hover:bg-gray-500 md:px-4"
+      className="flex h-24 cursor-pointer flex-col justify-center border-b border-gray-200 px-0 py-2 text-center hover:bg-gray-100 dark:border-gray-400 dark:hover:bg-gray-700 md:px-4"
       onClick={onClick}
     >
       <div className="flex w-full items-center justify-center">
@@ -62,10 +62,10 @@ export const SingleTransaction: FC<Props> = ({ transaction, onClick }) => {
             confirmations={num_confs ? num_confs : undefined}
           />
         </div>
-        <time className="w-5/12 text-sm" dateTime={isoString}>
+        <time className="w-5/12 text-left text-sm" dateTime={isoString}>
           {formattedDate}
         </time>
-        <p className={`inline-block w-8/12 ${color}`}>
+        <p className={`inline-block w-8/12 text-right ${color}`}>
           {sign}
           {formattedAmount} {unit}
         </p>
@@ -73,9 +73,6 @@ export const SingleTransaction: FC<Props> = ({ transaction, onClick }) => {
       <div className="w-full overflow-hidden overflow-ellipsis whitespace-nowrap text-center italic">
         {comment || "Transaction"}
       </div>
-      <div className="mx-auto h-1 w-full pt-4">
-        <div className="border border-b border-gray-200 dark:border-gray-400" />
-      </div>
     </li>
   );
 };
diff --git a/src/pages/Home/TransactionCard/TransactionCard.tsx b/src/pages/Home/TransactionCard/TransactionCard.tsx
index 49499637..deee9190 100644
--- a/src/pages/Home/TransactionCard/TransactionCard.tsx
+++ b/src/pages/Home/TransactionCard/TransactionCard.tsx
@@ -113,13 +113,13 @@ const TransactionCard: FC<Props> = ({
             <button
               onClick={pageBackwardHandler}
               disabled={page === 0}
-              className="flex rounded bg-black p-2 text-white hover:bg-gray-700 disabled:opacity-50"
+              className="flex rounded bg-black p-2 text-white hover:bg-gray-700 disabled:opacity-50 disabled:hover:bg-black"
             >
               <ArrowDownIcon className="h-6 w-6 rotate-90 transform" />
             </button>
 
             <button
-              className="flex rounded bg-black p-2 text-white hover:bg-gray-700 disabled:opacity-50"
+              className="flex rounded bg-black p-2 text-white hover:bg-gray-700 disabled:opacity-50 disabled:hover:bg-black"
               onClick={pageForwardHandler}
               disabled={page * MAX_ITEMS + MAX_ITEMS >= transactions.length}
             >

From fb168d82ed756c8b765e374996c7f9a85507fb31 Mon Sep 17 00:00:00 2001
From: escapedcat <github@htmlcss.de>
Date: Sun, 2 Jul 2023 16:13:33 +0800
Subject: [PATCH 3/3] feat(connection): align icons

---
 src/pages/Home/ConnectionCard.tsx | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/pages/Home/ConnectionCard.tsx b/src/pages/Home/ConnectionCard.tsx
index a8882f0d..304e3d36 100644
--- a/src/pages/Home/ConnectionCard.tsx
+++ b/src/pages/Home/ConnectionCard.tsx
@@ -143,10 +143,10 @@ export const ConnectionCard: FC = () => {
             </h6>
             <div className="flex">
               <a
-                className={`${
+                className={`w-8/12 ${
                   showAddress
-                    ? "w-10/12 overflow-hidden overflow-ellipsis text-blue-400 underline"
-                    : "text-blur w-10/12"
+                    ? "overflow-hidden overflow-ellipsis text-blue-400 underline"
+                    : "text-blur"
                 }`}
                 title={`${nodeId}`}
                 href={`ssh://${nodeId}`}
@@ -155,6 +155,14 @@ export const ConnectionCard: FC = () => {
               >
                 {showAddress ? nodeId : HIDDEN_TEXT}
               </a>
+              <QrCodeIcon
+                className="inline-flex h-6 w-2/12 cursor-pointer justify-self-end"
+                onClick={showModalHandler}
+                data-tooltip-id="qr-tooltip"
+              />
+              <Tooltip id="qr-tooltip">
+                <div>{t("home.show_qr")}</div>
+              </Tooltip>
               <ClipboardDocumentCheckIcon
                 className="inline-flex h-6 w-2/12 cursor-pointer justify-self-end"
                 onClick={copyNodeId}
@@ -167,14 +175,6 @@ export const ConnectionCard: FC = () => {
                     : t("wallet.copy_clipboard")}
                 </div>
               </Tooltip>
-              <QrCodeIcon
-                className="inline-flex h-6 w-2/12 cursor-pointer justify-self-end"
-                onClick={showModalHandler}
-                data-tooltip-id="qr-tooltip"
-              />
-              <Tooltip id="qr-tooltip">
-                <div>{t("home.show_qr")}</div>
-              </Tooltip>
             </div>
           </article>
         )}