Get outta here prose!

package.json

@@ -16,7 +16,6 @@
     "@ably-labs/react-hooks": "^2.1.1",
     "@next-auth/prisma-adapter": "^1.0.7",
     "@prisma/client": "4.15.0",
-    "@tailwindcss/typography": "^0.5.9",
     "@tanstack/react-query": "^4.29.12",
     "@trpc/client": "10.29.1",
     "@trpc/next": "10.29.1",

src/components/Footer.tsx

@@ -7,7 +7,8 @@ const Footer: React.FC = () => {
       <div>
         <p>
           Made with{" "}
-          <GiTechnoHeart className="inline-block text-primary text-lg" /> by{" "}
+          <GiTechnoHeart className="inline-block text-primary text-lg animate-pulse" />{" "}
+          by{" "}
           <a
             className="link link-primary link-hover"
             href="https://atri.dad"

src/components/Navbar.tsx

@@ -46,7 +46,7 @@ const Navbar: React.FC<NavbarProps> = ({ title }) => {
           />
           <span className="hidden md:inline-flex">
             {title}
-            {env.NEXT_PUBLIC_APP_ENV === "development" && " >> DEV"}
+            {env.NEXT_PUBLIC_APP_ENV === "development" && " >> Staging"}
           </span>
         </Link>
       </div>

src/components/RoomList.tsx

@@ -5,7 +5,6 @@ import { api } from "~/utils/api";
 import { IoEnterOutline, IoTrashBinOutline } from "react-icons/io5";
 import { configureAbly, useChannel } from "@ably-labs/react-hooks";
 import { env } from "~/env.mjs";
-import Loading from "./Loading";
 import { useState } from "react";
 
 const RoomList: React.FC = () => {
@@ -50,7 +49,7 @@ const RoomList: React.FC = () => {
   };
 
   return (
-    <div className="prose flex flex-col items-center justify-center">
+    <div className="flex flex-col items-center justify-center gap-8">
       {/* Modal for Adding Rooms */}
       <input type="checkbox" id="new-room-modal" className="modal-toggle" />
       <div className="modal modal-bottom sm:modal-middle">
@@ -106,7 +105,7 @@ const RoomList: React.FC = () => {
             <tbody className="">
               {roomsFromDb?.map((room) => {
                 return (
-                  <tr key={room.id} className="hover">
+                  <tr key={room.id} className="hover border-white">
                     <td className="break-all max-w-[200px] md:max-w-[400px]">
                       {room.roomName}
                     </td>

src/pages/_app.tsx

@@ -8,7 +8,6 @@ import "~/styles/globals.css";
 import Navbar from "~/components/Navbar";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import Loading from "~/components/Loading";
 import Footer from "~/components/Footer";
 
 const MyApp: AppType<{ session: Session | null }> = ({

src/pages/admin/index.tsx

@@ -4,7 +4,6 @@ import { type GetServerSideProps } from "next";
 
 import { getServerAuthSession } from "../../server/auth";
 import { api } from "~/utils/api";
-import Loading from "~/components/Loading";
 import { IoTrashBinOutline } from "react-icons/io5";
 import { AiOutlineClear } from "react-icons/ai";
 import { FaShieldAlt } from "react-icons/fa";
@@ -46,7 +45,7 @@ const Admin: NextPage = () => {
         <meta name="description" content="Plan. Sprint. Repeat." />
       </Head>
       <div className="flex flex-col items-center justify-center text-center px-4 py-16 ">
-        <div className="flex flex-col items-center prose">
+        <div className="flex flex-col items-center">
           <AdminBody />
         </div>
       </div>
@@ -123,7 +122,7 @@ const AdminBody: React.FC = () => {
 
   return (
     <>
-      <h1>Admin Panel</h1>
+      <h1 className="text-4xl font-bold">Admin Panel</h1>
 
       <div className="stats stats-horizontal shadow bg-neutral m-4">
         <div className="stat">

src/pages/dashboard/index.tsx

@@ -35,7 +35,7 @@ const Home: NextPage = () => {
         <title>Sprint Padawan</title>
         <meta name="description" content="Plan. Sprint. Repeat." />
       </Head>
-      <div className="prose flex flex-col text-center items-center justify-center px-4 py-16">
+      <div className="flex flex-col text-center items-center justify-center px-4 py-16 gap-4">
         <HomePageBody />
       </div>
     </>
@@ -56,7 +56,7 @@ const HomePageBody: React.FC = () => {
 
   return (
     <>
-      <h1 className="flex flex-row flex-wrap text-center justify-center items-center gap-1 text-md mx-auto">
+      <h1 className="flex flex-row flex-wrap text-center justify-center items-center gap-1 text-4xl font-bold mx-auto">
         Hi, {sessionData?.user.name}!{" "}
         {sessionData?.user.role === "ADMIN" && (
           <FaShieldAlt className="inline-block text-primary" />

src/pages/index.tsx

@@ -8,7 +8,7 @@ const Home: NextPage = () => {
         <title>Sprint Padawan</title>
         <meta name="description" content="Plan. Sprint. Repeat." />
       </Head>
-      <div className="prose flex flex-col text-center items-center justify-center px-4 py-16">
+      <div className="flex flex-col text-center items-center justify-center px-4 py-16 gap-4">
         <HomePageBody />
       </div>
     </>
@@ -42,6 +42,18 @@ const HomePageBody: React.FC = () => {
         </span>
         .
       </h2>
+
+      <div className="card bg-secondary text-black font-bold text-left">
+        <div className="card-body">
+          <h2 className="card-title">Features:</h2>
+          <ul>
+            <li>🚀 Real-time votes!</li>
+            <li>🚀 Granual control of room name and vote scale!</li>
+            <li>🚀 CSV Reports for every room!</li>
+            <li>🚀 100% free and open-source... forever!</li>
+          </ul>
+        </div>
+      </div>
     </>
   );
 };

src/pages/profile/index.tsx

@@ -8,7 +8,6 @@ import { api } from "~/utils/api";
 import { signIn, useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import Loading from "~/components/Loading";
 import { FaGithub, FaGoogle } from "react-icons/fa";
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
@@ -38,7 +37,7 @@ const Profile: NextPage = () => {
         <meta name="description" content="Plan. Sprint. Repeat." />
       </Head>
       <div className="flex flex-col items-center justify-center text-center gap-12 px-4 py-16 ">
-        <div className="flex flex-col items-center prose">
+        <div className="flex flex-col items-center">
           <ProfileBody />
         </div>
       </div>

src/pages/room/[id].tsx

@@ -23,7 +23,6 @@ import {
 import { configureAbly, useChannel, usePresence } from "@ably-labs/react-hooks";
 import type { PresenceItem } from "~/utils/types";
 import { env } from "~/env.mjs";
-import Loading from "~/components/Loading";
 import { FaShieldAlt } from "react-icons/fa";
 import { RiVipCrownFill } from "react-icons/ri";
 import Link from "next/link";
@@ -485,15 +484,15 @@ const RoomBody: React.FC = () => {
     // Room does not exist
   } else {
     return (
-      <span className="prose text-center">
+      <span className="text-center">
-        <h1>4️⃣0️⃣4️⃣</h1>
+        <h1 className="text-5xl font-bold m-2">4️⃣0️⃣4️⃣</h1>
-        <h1>
+        <h1 className="text-5xl font-bold m-2">
           Oops! This room does not appear to exist, or may have been deleted! 😢
         </h1>
         <Link
           about="Back to home."
           href="/"
-          className="btn btn-secondary normal-case text-xl"
+          className="btn btn-secondary normal-case text-xl m-2"
         >
           Back to Home
         </Link>

tailwind.config.js

@@ -10,7 +10,7 @@ module.exports = {
   theme: {
     extend: {},
   },
-  plugins: [require("@tailwindcss/typography"), require("daisyui")],
+  plugins: [require("daisyui")],
   daisyui: {
     themes: [
       {