Merge pull request #13 from Solstice-Hosting/alexx-partners-260424-2133

Some mobile fixes. Signup has better error messaging.

Author: ajjswift

pages/partners/dashboard.js

@@ -54,12 +54,13 @@ export default function PartnerDashboard() {
     return (
         <>
             <Header />
-            <main className="min-h-screen w-screen bg-gray-950 flex gap-8 flex-col p-24">
+            <main className="min-h-screen w-screen bg-gray-950 flex gap-8 flex-col p-8 lg:p-24">
                 <Suspense fallback="Loading...">
                     {partnerInfo.length > 0 && (
                     <>
                         <div className="w-10/12 flex flex-col gap-6">
-                            <h1 className="text-white font-extrabold text-4xl">Edit your Partnership Information</h1>
+                            <h1 className="text-white font-extrabold text-4xl hidden lg:block">Edit your Partnership Information</h1>
+                            <h1 className="text-white font-extrabold text-4xl block lg:hidden text-center w-full">Edit Info</h1>
                         </div>
                         <div className="flex flex-col gap-8 text-white">
                             {partnerInfo.map((partner) => (
@@ -111,9 +112,9 @@ function PartnerComp({ key, partner }) {
     return (
         <>
             <div className="w-full bg-gray-800 min-h-content rounded-lg border-2 border-gray-700 p-4 flex flex-col gap-8">
-                <div className="flex w-full justify-between items-center">
+                <div className="flex w-full justify-between items-center flex-col lg:flex-row">
                     <input
-                        className="bg-gray-700 rounded-lg text-white outline-none p-4 text-2xl font-extrabold w-1/2 border-2 border-gray-600"
+                        className="bg-gray-700 rounded-lg text-white outline-none p-4 text-2xl font-extrabold w-1/2 border-2 border-gray-600 text-center lg:text-left"
                         value={partnerName}
                         onChange={(e) => setPartnerName(e.target.value)}
                     />
@@ -131,7 +132,7 @@ function PartnerComp({ key, partner }) {
 
                     </textarea>
                 </div>
-                <div className="flex gap-4">
+                <div className="flex gap-4 flex-col lg:flex-row">
                     <div className="flex flex-col gap-2 w-full">
                         <span className="font-bold flex gap-4 items-center">Website <span className="font-normal text-gray-400">(optional)</span></span>
                         <input

pages/partners/index.js

@@ -39,13 +39,13 @@ export default function PartnerPage() {
             <Header />
             <main className="min-h-[80vh] w-full bg-gray-950">
                     <div className="flex flex-col gap-2 items-center p-4 lg:p-10 text-center">
-                        <h1 className="font-extrabold text-5xl text-gray-100 whitespace-nowrap">
+                        <h1 className="font-extrabold text-3xl lg:text-5xl text-gray-100 whitespace-nowrap">
                             <span className="hidden lg:block">Our</span>
                             <span className="bg-gradient-to-r from-orange-400 transition-all duration-200 to-purple-500 bg-clip-text text-transparent hover:saturate-150 hover:to-orange-400 hover:from-purple-500">
                                 Partners
                             </span>
                         </h1>
-                        <span className="text-2xl text-gray-50">All of the friends we&apos;ve made along the way.</span>
+                        <span className="text-lg lg:text-2xl text-gray-50">All of the friends we&apos;ve made along the way.</span>
                     </div>
                     <div
                         className="flex flex-col gap-10 px-10"
@@ -60,13 +60,14 @@ export default function PartnerPage() {
                                 alt={partner.title}
                             />
                             <div className="w-full flex flex-col justify-between h-full items-start gap-4">
-                                <h3 className="text-3xl font-extrabold text-white w-full flex gap-12 items-end">
-                                    {partner.title}  {(partner.account).includes(userId) && (<span className="font-semibold text-gray-400 text-lg italic"> Pssst... this is you!</span>)}
-                                </h3>
+                                <h3 className="text-3xl font-extrabold text-white w-full items-center flex gap-x-12 lg:items-end flex-col lg:flex-row">
+                                    {partner.title}  
+                                    {(partner.account).includes(userId) && (<span className="font-semibold text-gray-400 text-lg italic"> Pssst... this is you!</span>)}
+                                </h3> 
                                 <p className="w-full whitespace-pre-wrap text-white">
                                     {partner.memo}
                                 </p>
-                                <div className="flex gap-4">
+                                <div className="flex gap-4 w-full justify-center lg:justify-start">
                                     {partner.site &&
                                     (<Link href={`${partner.site ? partner.site : ''}`} target="_blank">
                                         <Button className="bg-gray-800 hover:bg-gray-700 h-full w-40">

pages/signup.js

@@ -48,14 +48,25 @@ export default function Login() {
                         }
                     }
                     catch (e) {
-                        setProperError("An account with this email already exists.");
+                        setProperError("An error occured whilst creating your account. Are your passwords the same?");
                     }
 
                 }
                 else {
                     setProperError(null);
                     setSuccess(null);
-                    setInfo('Username, Password or Email invalid.')
+                    if (!emailRegex.test(email)) {
+                        setInfo("Email address invalid.");
+                    }
+                    else if (password.length <= 2) {
+                        setInfo("Password is too short.");
+                    }
+                    else if (username.length <= 2) {
+                        setInfo("Username is too short.");
+                    }
+                    else {
+                        setInfo("An unknown error occured.");
+                    }
                 }
             }
 

pages/store/[page].js

@@ -55,7 +55,7 @@ export default function StorePage() {
             <Header />
             <div className="w-full flex items-center p-12 flex-col bg-gray-950 gap-8 min-h-screen">
                 <div className="flex flex-col gap-2 items-center p-4 lg:p-10 text-center">
-                    <h1 className="font-extrabold text-5xl text-gray-100 whitespace-nowrap">
+                    <h1 className="font-extrabold text-5xl text-gray-100 whitespace-wrap">
                         <span className="hidden lg:block">{categoryInformation?.categoryWhamWord}</span>
                         <span className="bg-gradient-to-r from-orange-400 transition-all duration-200 to-purple-500 bg-clip-text text-transparent hover:saturate-150 hover:to-orange-400 hover:from-purple-500">
                             {categoryInformation?.categoryNameLong}