Fix: update deprecated button group (daisy ui) to join

src/components/BeerBreweryComments/EditCommentBody.tsx

@@ -121,10 +121,10 @@ const EditCommentBody: FC<EditCommentBodyProps> = ({
                 ))}
               </Rating>
             </div>
-            <div className="btn-group btn-group-horizontal">
+            <div className="join">
               <button
                 type="button"
-                className="btn-xs btn lg:btn-sm"
+                className="btn-xs join-item btn lg:btn-sm"
                 disabled={isSubmitting || isDeleting}
                 onClick={() => {
                   setInEditMode(false);
@@ -135,13 +135,13 @@ const EditCommentBody: FC<EditCommentBodyProps> = ({
               <button
                 type="submit"
                 disabled={isSubmitting || isDeleting}
-                className="btn-xs btn lg:btn-sm"
+                className="btn-xs join-item btn lg:btn-sm"
               >
                 Save
               </button>
               <button
                 type="button"
-                className="btn-xs btn lg:btn-sm"
+                className="btn-xs join-item btn lg:btn-sm"
                 onClick={onDelete}
                 disabled={isDeleting || formState.isSubmitting}
               >

src/components/BeerIndex/BeerIndexPaginationBar.tsx

@@ -1,32 +0,0 @@
-import Link from 'next/link';
-import { FaArrowLeft, FaArrowRight } from 'react-icons/fa';
-import { FC } from 'react';
-
-interface PaginationProps {
-  pageNum: number;
-  pageCount: number;
-}
-
-const BeerIndexPaginationBar: FC<PaginationProps> = ({ pageCount, pageNum }) => {
-  return (
-    <div className="btn-group">
-      <Link
-        className={`btn ${pageNum === 1 ? 'btn-disabled' : ''}`}
-        href={{ pathname: '/beers', query: { page_num: pageNum - 1 } }}
-        scroll={false}
-      >
-        <FaArrowLeft />
-      </Link>
-      <button className="btn">Page {pageNum}</button>
-      <Link
-        className={`btn ${pageNum === pageCount ? 'btn-disabled' : ''}`}
-        href={{ pathname: '/beers', query: { page_num: pageNum + 1 } }}
-        scroll={false}
-      >
-        <FaArrowRight />
-      </Link>
-    </div>
-  );
-};
-
-export default BeerIndexPaginationBar;

src/components/ui/Navbar.tsx

@@ -12,11 +12,11 @@ const DesktopLinks: FC = () => {
 
   return (
     <div className="block flex-none">
-      <ul className="menu menu-horizontal menu-sm px-1">
+      <ul className="menu menu-horizontal menu-sm">
         {pages.map((page) => {
           return (
             <li key={page.slug} >
-              <Link tabIndex={0} href={page.slug}>
+              <Link tabIndex={0} href={page.slug} className="hover:bg-primary-focus">
                 <span
                   className={`text-lg uppercase ${
                     currentURL === page.slug ? 'font-black' : 'font-medium'
@@ -64,7 +64,7 @@ const Navbar = () => {
   const { theme, setTheme } = useTheme();
 
   return (
-    <nav className="navbar sticky top-0 z-50 bg-primary text-primary-content">
+    <div className="navbar sticky top-0 z-50 bg-primary text-primary-content">
       <div className="flex-1">
         <Link className="btn-ghost btn normal-case" href="/">
           <span className="cursor-pointer text-lg font-bold">The Biergarten App</span>
@@ -98,7 +98,7 @@ const Navbar = () => {
         </div>
       </div>
       <div>{isDesktopView ? <DesktopLinks /> : <MobileLinks />}</div>
-    </nav>
+    </div>
   );
 };
 export default Navbar;