better layout + improvements

components/Modal/index.tsx

@@ -11,10 +11,10 @@ type Props = {
 
 export default function Modal({ toggleModal, className, children }: Props) {
   return (
-    <div className="overflow-y-auto py-2 fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 backdrop-blur-sm flex items-center fade-in z-30">
+    <div className="overflow-y-auto py-2 fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 backdrop-blur-sm flex justify-center items-center fade-in z-30">
       <ClickAwayHandler
         onClickOutside={toggleModal}
-        className={`w-fit m-auto mt-10 sm:mt-20 ${className}`}
+        className={`m-auto ${className}`}
       >
         <div className="slide-up relative border-sky-100 rounded-2xl border-solid border shadow-lg p-5 bg-white">
           <div

hooks/useInitialData.tsx

@@ -13,7 +13,7 @@ export default function useInitialData() {
   const { setAccount } = useAccountStore();
 
   useEffect(() => {
-    if (status === "authenticated") {
+    if (status === "authenticated" && data.user.isSubscriber) {
       setCollections();
       setTags();
       // setLinks();

layouts/CenteredForm.tsx

@@ -0,0 +1,32 @@
+import Image from "next/image";
+import React, { ReactNode } from "react";
+
+interface Props {
+  text?: string;
+  children: ReactNode;
+}
+
+export default function CenteredForm({ text, children }: Props) {
+  return (
+    <div className="absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center p-2">
+      <div className="m-auto flex flex-col gap-2">
+        <Image
+          src="/linkwarden.png"
+          width={518}
+          height={145}
+          alt="Linkwarden"
+          className="h-12 w-fit mx-auto"
+        />
+        {text ? (
+          <p className="text-lg sm:w-[30rem] w-80 mx-auto font-semibold text-black px-2 text-center">
+            {text}
+          </p>
+        ) : undefined}
+        {children}
+        <p className="text-center text-xs text-gray-500">
+          © {new Date().getFullYear()} Linkwarden. All rights reserved.
+        </p>
+      </div>
+    </div>
+  );
+}

pages/choose-username.tsx

@@ -6,6 +6,7 @@ import { toast } from "react-hot-toast";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import useAccountStore from "@/store/account";
+import CenteredForm from "@/layouts/CenteredForm";
 
 export default function Subscribe() {
   const [submitLoader, setSubmitLoader] = useState(false);
@@ -15,10 +16,6 @@ export default function Subscribe() {
 
   const { updateAccount, account } = useAccountStore();
 
-  useEffect(() => {
-    console.log(data?.user);
-  }, [status]);
-
   async function submitUsername() {
     setSubmitLoader(true);
 
@@ -41,16 +38,9 @@ export default function Subscribe() {
   }
 
   return (
-    <>
+    <CenteredForm>
-      <Image
+      <div className="p-2 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-2xl shadow-md border border-sky-100">
-        src="/linkwarden.png"
+        <p className="text-2xl text-center text-black font-bold">
-        width={518}
-        height={145}
-        alt="Linkwarden"
-        className="h-12 w-fit mx-auto mt-10"
-      />
-      <div className="p-2 mt-10 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-md border border-sky-100">
-        <p className="text-xl text-sky-700 w-fit font-bold">
           Choose a Username (Last step)
         </p>
 
@@ -91,9 +81,6 @@ export default function Subscribe() {
           Sign Out
         </div>
       </div>
-      <p className="text-center text-xs text-gray-500 my-10">
+    </CenteredForm>
-        © {new Date().getFullYear()} Linkwarden. All rights reserved.{" "}
-      </p>
-    </>
   );
 }

pages/confirmation.tsx

@@ -1,25 +1,27 @@
-import { signIn } from "next-auth/react";
+import CenteredForm from "@/layouts/CenteredForm";
+import Link from "next/link";
 import React from "react";
 
 export default function EmailConfirmaion() {
   return (
-    <div className="overflow-y-auto py-2 fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 backdrop-blur-sm flex items-center fade-in z-30">
+    <CenteredForm>
-      <div className="mx-auto p-3 text-center rounded-xl border border-sky-100 shadow-lg bg-gray-100 text-sky-800">
+      <div className="p-2 sm:w-[30rem] w-80 rounded-2xl shadow-md m-auto border border-sky-100 bg-slate-50 text-sky-800">
-        <p className="text-center text-2xl mb-2">Please check your email</p>
+        <p className="text-center text-xl font-bold mb-2 text-black">
+          Please check your Email
+        </p>
         <p>A sign in link has been sent to your email address.</p>
         <p>You can safely close this page.</p>
-        {/* <div
+
-          onClick={() =>
+        <hr className="my-5" />
-            signIn("email", {
+
-              email: email,
+        <p className="text-sm text-gray-500 ">
-              redirect: false,
+          If you didn't recieve anything, go to the{" "}
-            })
+          <Link href="/forgot" className="font-bold">
-          }
+            Password Recovery
-          className="mx-auto font-semibold mt-2 cursor-pointer w-fit"
+          </Link>{" "}
-        >
+          page and enter your Email to resend the sign in link.
-          Resend?
+        </p>
-        </div> */}
       </div>
-    </div>
+    </CenteredForm>
   );
 }

pages/forgot.tsx

@@ -1,4 +1,5 @@
 import SubmitButton from "@/components/SubmitButton";
+import CenteredForm from "@/layouts/CenteredForm";
 import { signIn } from "next-auth/react";
 import Image from "next/image";
 import Link from "next/link";
@@ -38,22 +39,19 @@ export default function Forgot() {
   }
 
   return (
-    <>
+    <CenteredForm>
-      <Image
+      <div className="p-2 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-2xl shadow-md border border-sky-100">
-        src="/linkwarden.png"
+        <p className="text-2xl text-black font-bold">Password Recovery</p>
-        width={518}
+        <div>
-        height={145}
+          <p className="text-md text-black">
-        alt="Linkwarden"
+            Enter your Email so we can send you a link to recover your account.
-        className="h-12 w-fit mx-auto mt-10"
+            Make sure to change your password in the profile settings
-      />
+            afterwards.
-      <div className="p-2 mt-10 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-md border border-sky-100">
+          </p>
-        <p className="text-xl text-sky-700 w-fit font-bold">Fogot Password?</p>
+          <p className="text-sm text-gray-500">
-        <p className="text-md text-gray-500 mt-1">
+            You wont get logged in if you haven't created an account yet.
-          Enter your Email so we can send you a link to recover your account.
+          </p>
-        </p>
+        </div>
-        <p className="text-md text-gray-500 mt-1">
-          Make sure to change your password in the profile settings afterwards.
-        </p>
         <div>
           <p className="text-sm text-sky-700 w-fit font-semibold mb-1">Email</p>
 
@@ -78,9 +76,6 @@ export default function Forgot() {
           </Link>
         </div>
       </div>
-      <p className="text-center text-xs text-gray-500 my-10">
+    </CenteredForm>
-        © {new Date().getFullYear()} Linkwarden. All rights reserved.{" "}
-      </p>
-    </>
   );
 }

pages/login.tsx

@@ -1,4 +1,5 @@
 import SubmitButton from "@/components/SubmitButton";
+import CenteredForm from "@/layouts/CenteredForm";
 import { signIn } from "next-auth/react";
 import Image from "next/image";
 import Link from "next/link";
@@ -45,21 +46,12 @@ export default function Login() {
   }
 
   return (
-    <>
+    <CenteredForm text="Sign in to your account">
-      <Image
+      <div className="p-2 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-2xl shadow-md border border-sky-100">
-        src="/linkwarden.png"
+        <p className="text-2xl text-black text-center font-bold">
-        width={518}
-        height={145}
-        alt="Linkwarden"
-        className="h-12 w-fit mx-auto mt-10"
-      />
-      <p className="text-xl font-semibold text-sky-700  px-2 text-center">
-        Sign in to your account
-      </p>
-      <div className="p-2 my-10 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-md border border-sky-100">
-        <p className="text-xl text-sky-700 w-fit font-bold">
           Enter your credentials
         </p>
+
         <div>
           <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
             Username
@@ -99,7 +91,7 @@ export default function Login() {
         <SubmitButton
           onClick={loginUser}
           label="Login"
-          className="mt-2 w-full text-center"
+          className=" w-full text-center"
           loading={submitLoader}
         />
         <div className="flex items-baseline gap-1 justify-center">
@@ -109,9 +101,6 @@ export default function Login() {
           </Link>
         </div>
       </div>
-      <p className="text-center text-xs text-gray-500 mb-10">
+    </CenteredForm>
-        © {new Date().getFullYear()} Linkwarden. All rights reserved.{" "}
-      </p>
-    </>
   );
 }

pages/register.tsx

@@ -4,6 +4,7 @@ import { toast } from "react-hot-toast";
 import SubmitButton from "@/components/SubmitButton";
 import { signIn } from "next-auth/react";
 import Image from "next/image";
+import CenteredForm from "@/layouts/CenteredForm";
 
 const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
 
@@ -89,23 +90,17 @@ export default function Register() {
   }
 
   return (
-    <>
+    <CenteredForm
-      <Image
+      text={
-        src="/linkwarden.png"
+        process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE
-        width={518}
+          ? `Start using our Premium Services with a ${
-        height={145}
-        alt="Linkwarden"
-        className="h-12 w-fit mx-auto mt-10"
-      />
-      <p className="text-center px-2 text-xl font-semibold text-sky-700">
-        {process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE
-          ? `Start using our premium services with a ${
               process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14
             }-day free trial!`
-          : "Create a new account"}
+          : "Create a new account"
-      </p>
+      }
-      <div className="p-2 mx-auto my-10 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-md border border-sky-100">
+    >
-        <p className="text-xl text-sky-700 w-fit font-bold">
+      <div className="p-2 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-2xl shadow-md border border-sky-100">
+        <p className="text-2xl text-black text-center font-bold">
           Enter your details
         </p>
         <div>
@@ -154,40 +149,38 @@ export default function Register() {
           </div>
         ) : undefined}
 
-        <div className="flex item-center gap-2">
+        <div className="w-full">
-          <div className="w-full">
+          <p className="text-sm text-sky-700 w-fit font-semibold  mb-1">
-            <p className="text-sm text-sky-700 w-fit font-semibold  mb-1">
+            Password
-              Password
+          </p>
-            </p>
 
-            <input
+          <input
-              type="password"
+            type="password"
-              placeholder="••••••••••••••"
+            placeholder="••••••••••••••"
-              value={form.password}
+            value={form.password}
-              onChange={(e) => setForm({ ...form, password: e.target.value })}
+            onChange={(e) => setForm({ ...form, password: e.target.value })}
-              className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
+            className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
-            />
+          />
-          </div>
+        </div>
 
-          <div className="w-full">
+        <div className="w-full">
-            <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
+          <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
-              Confirm Password
+            Confirm Password
-            </p>
+          </p>
 
-            <input
+          <input
-              type="password"
+            type="password"
-              placeholder="••••••••••••••"
+            placeholder="••••••••••••••"
-              value={form.passwordConfirmation}
+            value={form.passwordConfirmation}
-              onChange={(e) =>
+            onChange={(e) =>
-                setForm({ ...form, passwordConfirmation: e.target.value })
+              setForm({ ...form, passwordConfirmation: e.target.value })
-              }
+            }
-              className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
+            className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
-            />
+          />
-          </div>
         </div>
 
         {process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE ? (
-          <>
+          <div>
             <p className="text-xs text-gray-500">
               By signing up, you agree to our{" "}
               <Link href="https://linkwarden.app/tos" className="font-semibold">
@@ -212,7 +205,7 @@ export default function Register() {
               </Link>
               .
             </p>
-          </>
+          </div>
         ) : undefined}
 
         <SubmitButton
@@ -228,9 +221,6 @@ export default function Register() {
           </Link>
         </div>
       </div>
-      <p className="text-center text-xs text-gray-500 mb-10">
+    </CenteredForm>
-        © {new Date().getFullYear()} Linkwarden. All rights reserved.{" "}
-      </p>
-    </>
   );
 }

pages/subscribe.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
+import CenteredForm from "@/layouts/CenteredForm";
 
 export default function Subscribe() {
   const [submitLoader, setSubmitLoader] = useState(false);
@@ -20,29 +21,24 @@ export default function Subscribe() {
     const res = await fetch("/api/payment");
     const data = await res.json();
 
-    console.log(data);
     router.push(data.response);
   }
 
   return (
-    <>
+    <CenteredForm
-      <Image
+      text={`${
-        src="/linkwarden.png"
+        process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14
-        width={518}
+      }-Day free trial, then $
-        height={145}
+    ${process.env.NEXT_PUBLIC_PRICING}/month afterwards`}
-        alt="Linkwarden"
+    >
-        className="h-12 w-fit mx-auto mt-10"
+      <div className="p-2 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-2xl shadow-md border border-sky-100">
-      />
+        <p className="text-2xl text-center font-bold">
-      <p className="text-xl font-semibold text-sky-700 text-center px-2">
+          Subscribe to Linkwarden!
-        {process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14} days free trial, then
+        </p>
-        ${process.env.NEXT_PUBLIC_PRICING}/month afterwards
+
-      </p>
-      <div className="p-2 mt-10 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-md border border-sky-100">
         <div>
-          <p className="text-md text-gray-500 mt-1">
+          <p>You will be redirected to Stripe.</p>
-            You will be redirected to Stripe.
+          <p>
-          </p>
-          <p className="text-md text-gray-500 mt-1">
             Feel free to reach out to us at{" "}
             <a className="font-semibold" href="mailto:support@linkwarden.app">
               support@linkwarden.app
@@ -65,9 +61,6 @@ export default function Subscribe() {
           Sign Out
         </div>
       </div>
-      <p className="text-center text-xs text-gray-500 my-10">
+    </CenteredForm>
-        © {new Date().getFullYear()} Linkwarden. All rights reserved.{" "}
-      </p>
-    </>
   );
 }