bugfix - mobile responsiveness on blog and updated signin modal

Frontend/app/(admin)/blogs/[slug]/page.tsx

@@ -48,10 +48,10 @@ const PostPage = async (props: any) => {
     <main
       id="content"
       role="main"
-      className="h-full flex-grow flex flex-col bg-base-100"
+      className="h-full flex-grow flex flex-col bg-base-100 max-w-screen"
     >
       <Background>
-        <div className="flex flex-col h-full w-full md:max-w-3xl md:mx-auto">
+        <div className="flex flex-col h-full w-full md:max-w-3xl md:mx-auto max-w-screen">
           <Spacer className="pt-32" />
           <BlogContent post={post} />
         </div>

Frontend/sections/BlogContent.tsx

@@ -3,14 +3,18 @@ import Image from "next/image";
 
 function BlogContent({ post }: { post: any }) {
   return (
-    <div className="bg-base-200 px-8 py-12 rounded-lg">
+    <div className="bg-base-200 mx-4 lg:mx-0 px-8 py-12 rounded-lg">
-      <h1 className="text-3xl text-base-content">{post.title}</h1>
+      <h1 className="prose text-4xl font-bold text-base-content">
+        {post.title}
+      </h1>
       <div className="flex items-center gap-2">
         {/* Not sure if name is required */}
-        <p className="text-base-content">{post.author ?? ""}</p>
+        {post?.author && (
-        <span className="text-base-content">|</span>
+          <p className="text-base-content">{post.author ?? ""}</p>
+        )}
+        {post?.author && <span className="text-base-content">|</span>}
         <p className="text-base-content">
-          {new Date(post.date).toLocaleDateString()}
+          Last modified {new Date(post.updated).toLocaleDateString()}
         </p>
       </div>
 
@@ -31,7 +35,10 @@ function BlogContent({ post }: { post: any }) {
             }}
           />
         </div>
-        <div dangerouslySetInnerHTML={{ __html: post.content }}></div>
+        <div
+          className="w-full max-w-[74vw]"
+          dangerouslySetInnerHTML={{ __html: post.content }}
+        ></div>
       </article>
     </div>
   );

Frontend/sections/ModalSignIn/ModalSignIn.tsx

@@ -1,62 +1,80 @@
-"use client";
+import React from "react";
-
-import React, { useRef, useState } from "react";
-import ModalSignInForm, {
-  FormRefMethods,
-} from "@/sections/ModalSignIn/ModalSignInForm";
-import SuccessModal from "@/sections/SuccessModal";
-import LoadingModal from "@/sections/LoadingModal";
-import { ModalStatus } from "@/types";
 import Icon from "@/components/icon";
+import { useTheme } from "next-themes";
+import colors from "@/utils/colors";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { signInValidationSchema } from "@/utils/form";
 
 function ModalSignIn() {
-  const [status, setStatus] = useState<ModalStatus>(ModalStatus.Default);
+  const { theme } = useTheme();
-  const formRef = useRef<FormRefMethods>(null);
+  const color = colors[theme ?? "light"]["base-content"];
-  const handleCloseModal = () => {
+  const {
-    if (formRef.current) {
+    register,
-      formRef.current.resetForm();
+    handleSubmit,
-    }
+    formState: { errors },
-    setStatus(ModalStatus.Default);
+  } = useForm({
-  };
+    resolver: yupResolver(signInValidationSchema),
+  });
   return (
     <>
-      <input
+      <input type="checkbox" id="sign-in-modal" className="modal-toggle" />
-        type="checkbox"
-        id="sign-in-modal"
-        className="modal-toggle"
-        name=""
-      />
       <label htmlFor="sign-in-modal" className="modal cursor-pointer">
-        <label className="modal-box relative bg-gray-100  max-w-full md:max-w-[550px] py-4 px-3 md:p-6">
+        <label className="modal-box relative bg-base-100  max-w-full md:max-w-[550px] py-4 px-3 md:p-6">
           <div className="flex justify-end pb-2 select-none">
-            <label
+            <label htmlFor="sign-in-modal" className="cursor-pointer">
-              onClick={handleCloseModal}
+              <Icon name="Dismiss20Filled" size="medium" color={color} />
-              htmlFor="sign-in-modal"
-              className="cursor-pointer"
-            >
-              <Icon name="Dismiss20Filled" size="medium" />
             </label>
           </div>
-          <div className={status === ModalStatus.Default ? "block" : "hidden"}>
+          <div>
             <div
-              className="w-[100%] bg-gradient-to-r from-primary to-secondary px-6 pt-2 pb-6"
+              className="w-[100%] bg-gradient-to-r from-primary to-secondary px-6 pt-2 mt-3 pb-6 rounded-lg"
               data-aos="fade-up"
             >
-              <h3 className="pt-4 pb-2 text-lg md:text-3xl pt-6">
+              <h3 className="pb-1 text-3xl font-bold md:text-3xl pt-6">
-                {/* {textOnUse.title} */}
+                Welcome back!
               </h3>
-              <p className="text-xs md:text-base">
+              <p className="text-sm md:text-base">Lets kick some more ass?</p>
-                {/* {textOnUse.subTitle} */}
-              </p>
             </div>
             {/* <ModalSignInForm
               textOnUse={"textOnUse"}
               setStatus={setStatus}
               ref={formRef}
             /> */}
+            <form onSubmit={handleSubmit(() => {})} className="w-full md:w-2/3">
+              <div className="relative mt-6">
+                <input
+                  {...register("email")}
+                  id="SignInEmail"
+                  type="text"
+                  className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
+                  placeholder="Your email…"
+                  aria-label="Your email…"
+                  autoComplete="on"
+                />
+                <div className="text-start text-sm italic text-error-content">
+                  {errors.email?.message}&nbsp;
+                </div>
+              </div>
+              <div className="relative mt-1 mb-2">
+                <input
+                  {...register("password")}
+                  id="SignInPwd"
+                  type="password"
+                  className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
+                  placeholder="Your password..."
+                  aria-label="Your password..."
+                />
+                <div className="text-start text-sm italic text-error-content">
+                  {errors.password?.message}&nbsp;
+                </div>
+              </div>
+
+              <button type="submit" className="btn btn-primary">
+                Sign In
+              </button>
+            </form>
           </div>
-          {status === ModalStatus.Success && <SuccessModal />}
-          {status === ModalStatus.Loading && <LoadingModal />}
         </label>
       </label>
     </>