Feat/minor styling

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}`}

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">

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>

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>
         )}

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,20 +62,17 @@ 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>
       </div>
       <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>
   );
 };

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}
             >