refactor: switch spinnerbutton and spinner for nextui components (#792)

src/layouts/LoadingScreen.tsx

@@ -1,12 +1,12 @@
-import LoadingSpinner from "../components/LoadingSpinner/LoadingSpinner";
 import RaspiBlitzLogoDark from "@/assets/RaspiBlitz_Logo_Main_Negative.svg?react";
+import { Spinner } from "@nextui-org/react";
 
 // Loading Screen for the initial loading of the app
 export default function LoadingScreen() {
   return (
     <main className="flex h-screen w-screen flex-col items-center justify-center bg-gray-700">
       <RaspiBlitzLogoDark className="mb-5 h-12" />
-      <LoadingSpinner color="text-yellow-500" />
+      <Spinner size="lg" />
     </main>
   );
 }

src/layouts/PageLoadingScreen.tsx

@@ -1,4 +1,4 @@
-import LoadingSpinner from "../components/LoadingSpinner/LoadingSpinner";
+import { Spinner } from "@nextui-org/react";
 import { FC } from "react";
 
 // Loading Screen where sidebar is visible and usable
@@ -8,7 +8,7 @@ const PageLoadingScreen: FC = () => {
       className={`content-container page-container bg-gray-700 p-5 text-white transition-colors lg:pb-8 lg:pr-8 lg:pt-8`}
     >
       <section className="content-container flex items-center justify-center">
-        <LoadingSpinner color="text-yellow-500" />
+        <Spinner size="lg" />
       </section>
     </main>
   );

src/layouts/SkeletonLoadingScreen.tsx

@@ -1,4 +1,4 @@
-import LoadingSpinner from "@/components/LoadingSpinner/LoadingSpinner";
+import { Spinner } from "@nextui-org/react";
 
 // Loading Screen when sidebar is visible but not usable
 export default function SkeletonLoadingScreen() {
@@ -7,7 +7,7 @@ export default function SkeletonLoadingScreen() {
       <header className="fixed top-0 z-10 mx-auto flex h-16 w-full items-center justify-between border-b border-gray-300 bg-gray-800 px-8 text-gray-300 shadow-md transition-colors"></header>
       <nav className="content-container fixed mb-16 hidden w-full flex-col justify-between bg-gray-800 px-2 pt-8 shadow-lg transition-colors md:flex md:w-2/12"></nav>
       <main className="content-container page-container flex items-center justify-center bg-gray-700">
-        <LoadingSpinner color="text-yellow-500" />
+        <Spinner size="lg" />
       </main>
     </>
   );

src/pages/Home/ListChannelModal/Channel.tsx

@@ -1,8 +1,8 @@
-import ButtonWithSpinner from "@/components/ButtonWithSpinner/ButtonWithSpinner";
 import { AppContext, Unit } from "@/context/app-context";
 import { LightningChannel } from "@/models/lightning-channel";
 import { convertSatToBtc, convertToString } from "@/utils/format";
 import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
+import { Button } from "@nextui-org/react";
 import { FC, useContext, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -54,6 +54,7 @@ const Channel: FC<Props> = ({
         {showDetails && <ChevronUpIcon className="h-6 w-6" />}
         {!showDetails && <ChevronDownIcon className="h-6 w-6" />}
       </div>
+
       {showDetails && (
         <section className="flex flex-col gap-4 py-4">
           <article className="flex flex-col items-center justify-center md:flex-row md:justify-around">
@@ -82,38 +83,40 @@ const Channel: FC<Props> = ({
               </p>
             </div>
           </article>
+
           <article>
-            <button
-              className="bd-button mb-3 p-2"
-              disabled={confirm}
+            <Button
+              color="primary"
+              isDisabled={confirm}
               onClick={() => setConfirm(true)}
             >
               {t("home.close_channel")}
-            </button>
+            </Button>
 
             {/*TODO should be confirm modal*/}
             {confirm && (
               <div className="flex flex-col justify-center gap-4">
                 <span>{t("home.confirm_channel_close")}</span>
+
                 <div className="flex items-center justify-center gap-2">
                   <label htmlFor="forceClose">{t("home.force_close")}</label>
                   <input id="forceClose" type="checkbox" ref={forceCloseEl} />
                 </div>
+
                 <div className="flex justify-center gap-4">
-                  <button
+                  <Button
                     onClick={() => setConfirm(false)}
-                    disabled={isLoading}
-                    className="bd-button-red p-2"
+                    isDisabled={isLoading}
                   >
                     {t("setup.cancel")}
-                  </button>
-                  <ButtonWithSpinner
-                    loading={isLoading}
-                    className="bd-button p-2"
+                  </Button>
+                  <Button
+                    color="primary"
+                    isLoading={isLoading}
                     onClick={closeChannelHandler}
                   >
                     {t("setup.yes")}
-                  </ButtonWithSpinner>
+                  </Button>
                 </div>
               </div>
             )}