newsletter form page and submit tool form steps

Prototypr · Feb 28, 2024 · ea1634d · ea1634d
1 parent 483b525
commit ea1634d
Show file tree

Hide file tree

Showing 21 changed files with 293 additions and 175 deletions.
diff --git a/components/EditorNav.js b/components/EditorNav.js
@@ -77,10 +77,10 @@ export default function EditorNav({ editorInstance,showWriteButton,activeNav, ed
     <div
       id="main-nav"
       as="nav"
-      className={`bg-white fixed w-full top-0 border-b border-1 border-gray-100 backdrop-blur`}
+      className={`bg-white z-50 fixed w-full top-0 border-b border-1 shadow-sm border-gray-100`}
       style={{
-        background: `rgba(255, 255, 255, ${0.9})`,
-        zIndex:99
+        // background: `rgba(255, 255, 255, ${0.9})`,
+        // zIndex:99
       }}
     >
       <>

diff --git a/components/MiniEditor/MiniEditor.js b/components/MiniEditor/MiniEditor.js
@@ -9,7 +9,7 @@ import Link from '@tiptap/extension-link'
 
 import MenuBar from './MenuBar';
 
-export default ({setDescription, initialContent='', height=250, placeholder, disabled}) => {
+export default ({setDescription, initialContent='', height=250, placeholder, disabled, showToolbar}) => {
   const editor = useEditor({
     extensions: [
       StarterKit,
@@ -35,8 +35,8 @@ export default ({setDescription, initialContent='', height=250, placeholder, dis
   })
 
   return (
-    <div className="border blog-content border-gray-300 pt-12 rounded-lg py-4 relative -mt-2">
-      <MenuBar editor={editor} />
+    <div className={`${showToolbar!==false?'pt-12 py-4':''} border border-gray-300 rounded-lg relative -mt-2`}>
+     {showToolbar!==false? <MenuBar editor={editor} />:''}
       <div style={{minHeight:height,maxHeight:400}} className="pt-4 px-5 overflow-auto">
         <EditorContent disabled={disabled} editor={editor} />
       </div>

diff --git a/components/navbar-menu-mobile.js b/components/navbar-menu-mobile.js
@@ -195,7 +195,12 @@ export const NavigationMenuDemo = ({
             <div className="bg-gray-200 hover:shadow border border-1 ml-2 rounded-full my-auto w-8 h-8 cursor-pointer"></div>
           ) : (
             <NavigationMenuButton href="/newsletter">
+              <div className="flex">
+              hi
+              <div>
               {intl.formatMessage({ id: "navbar.menu.title4" })}
+              </div>
+              </div>
             </NavigationMenuButton>
           )}
           <div className="ml-3">

diff --git a/components/newsletter/IssueList.js b/components/newsletter/IssueList.js
@@ -2,12 +2,12 @@ import React from "react";
 import dynamic from "next/dynamic";
 const IssueItem = dynamic(() => import("@/components/newsletter/IssueItem"));
 import { useIntl } from 'react-intl';
-export default function IssueList({ posts = [], marginTop }) {
+export default function IssueList({ posts = [], marginTop ,currentPage}) {
   const intl = useIntl();
   return (
-    <section className={`pt-2 px-3 xl:px-0 ${!marginTop?'':marginTop}`}>
+    <section className={`pt-2 px-3 xl:px-6 ${!marginTop?'':marginTop}`}>
       <h2 className="font-medium font-semibold text-xl text-title-1 mb-6">
-        {intl.formatMessage({ id: "newsletter.issue" })}
+        {currentPage?`Page ${currentPage}`:intl.formatMessage({ id: "newsletter.issue" })}
       </h2>
       <div className="grid lg:grid-cols-2 grid-cols-1 gap-10 mb-20">
         {

diff --git a/components/newsletter/SignupHomepage.js b/components/newsletter/SignupHomepage.js
@@ -94,33 +94,38 @@ function HookForm(props) {
   return (
     <div>
       <form className={`${props.className}`} onSubmit={handleSubmit(onSubmit)}>
-        <div className="sm:flex-1 sm:max-w-sm w-full">
-          <label htmlFor="Email" className="sr-only	">
-            <FormattedMessage id="intro.input.placeholder" />
-          </label>
-          <input
-            id="Email"
-            //   type="text"
-            placeholder={intl.formatMessage({ id: "intro.input.placeholder" })}
-            {...register("emailRequired", {
-              required: true,
-              pattern: /^\S+@\S+$/i,
-            })}
-            className="w-full max-w-sm p-3 py-2.5 rounded-2xl mb-4 border border-1 border-blue-600"
-          ></input>
-          {/* <input
-            id="Email"
-            style={{ fontSize: ".875rem" }}
-            type="text"
-            placeholder={intl.formatMessage({ id: "intro.input.placeholder" })}
-            name="email"
-            {...register("emailRequired", {
-              required: true,
-              pattern: /^\S+@\S+$/i,
-            })}
-            // ref={...register({ required: true, pattern: /^\S+@\S+$/i })}
-            className="border-transparent border-solid border-2 border-gradient-br-blue-darkblue-gray-50 hover:border-gradient-tl-blue-darkblue-gray-50 gradient-border-3 w-full h-full p-3 text-gray-800 bg-white rounded-lg"
-          /> */}
+        <div className="flex mb-4">  
+          <div className="mr-3 max-w-sm w-full">
+            <label htmlFor="Email" className="sr-only	">
+              <FormattedMessage id="intro.input.placeholder" />
+            </label>
+            <input
+              id="Email"
+              //   type="text"
+              placeholder={intl.formatMessage({ id: "intro.input.placeholder" })}
+              {...register("emailRequired", {
+                required: true,
+                pattern: /^\S+@\S+$/i,
+              })}
+              className="w-full max-w-sm p-3 py-2.5 rounded-full border border-1 border-blue-600"
+            ></input>
+            {/* <input
+              id="Email"
+              style={{ fontSize: ".875rem" }}
+              type="text"
+              placeholder={intl.formatMessage({ id: "intro.input.placeholder" })}
+              name="email"
+              {...register("emailRequired", {
+                required: true,
+                pattern: /^\S+@\S+$/i,
+              })}
+              // ref={...register({ required: true, pattern: /^\S+@\S+$/i })}
+              className="border-transparent border-solid border-2 border-gradient-br-blue-darkblue-gray-50 hover:border-gradient-tl-blue-darkblue-gray-50 gradient-border-3 w-full h-full p-3 text-gray-800 bg-white rounded-lg"
+            /> */}
+          </div>
+          <Button className="rounded-full flex-none px-5 font-medium py-3 leading-none bg-blue-600 hover:bg-blue-500" variant={"confirmBig"}>
+          Subscribe
+          </Button>
         </div>
         {/* <input type="checkbox" placeholder="Consent" name="consent" ref={register({ required: true })} /> */}
         {errors.consent && errors.consent.type === "required" && (
@@ -139,19 +144,17 @@ function HookForm(props) {
           />
         </div>
         {/* <div className="flex flex-col ml-2"> */}
-        <Button className="rounded-full px-5 font-medium py-3 leading-none bg-blue-600 hover:bg-blue-500" variant={"confirmBig"}>
-          Sign up
-        </Button>
+
         {/* </div> */}
       </form>
       <div className=" w-10/12 font-inter">
         {errors.emailRequired && errors.emailRequired.type === "required" && (
-          <p className="text-white text-sm mt-2 text-left px-4 py-3 bg-red-400 border rounded-xl">
+          <p className="text-red-700 text-sm mt-2 text-left px-4 w-fit py-3 bg-red-100 rounded-xl">
             <FormattedMessage id="signup.input.validation" />
           </p>
         )}
         {errors.emailRequired && errors.emailRequired.type === "pattern" && (
-          <p className="text-white text-sm mt-2 text-left px-4 py-3 bg-red-400 border rounded-xl">
+          <p className="text-red-700 text-sm mt-2 text-left w-fit px-4 py-3 bg-red-100 rounded-xl">
             <FormattedMessage id="signup.input.error" />
           </p>
         )}

diff --git a/components/people/ProfilePageLayout.js b/components/people/ProfilePageLayout.js
@@ -126,12 +126,12 @@ const ProfilePageLayout = ({
                 </div>
                 <div className="flex flex-col z-20 relative justify-center">
                   <h1 className="text-2xl font-semibold leading-normal text-black/90">
-                      {`${author?.firstName ? author?.firstName:''} ${author?.lastName ? author?.lastName:''}
-                      ${(!author?.firstName && !author?.lastName) ? author?.name:''}`}
+                      {`${author?.firstName ? author?.firstName:'New'} ${author?.lastName ? author?.lastName:'User'}
+                      ${((!author?.firstName && !author?.lastName) && author?.name) ? author?.name:''}`}
                       </h1>
-                      {author.role && (
+                      {author.bio && (
                         <h3 className="text-lg mb-3 font-normal leading-normal text-black/80">
-                          {author.role}
+                          {author.bio?author.bio:'No description'}
                         </h3>
                       )} 
                       {/* TAGS (no point showing them) */}

diff --git a/components/sign-in/LoginForm.jsx b/components/sign-in/LoginForm.jsx
@@ -62,7 +62,7 @@ return(
     </p>
     <p className="my-4 mb-8">
 
-    Prototypr content is open to all, but only invited members can publish. Get an invite from current members or submit an application form to <span className="text-underline">join as a contributor</span>.
+    Prototypr content is open to all, but only invited members can create posts. Get an invite from current members or submit an application form to <span className="text-underline">join as a creator</span>.
     </p>
     {/* <div className="max-w-[90%] md:max-w-[340px] flex flex-col"> */}
     {showInputForm == false ? (
@@ -78,7 +78,7 @@ return(
           <div className="flex text-white">
              <TicketIcon/>
           <div className="ml-2.5 my-auto text-base inline-block ">
-           Join with Invite Code
+           Join with an invite
           </div>
           </div>
         </Button>

diff --git a/components/sign-in/LoginSide.jsx b/components/sign-in/LoginSide.jsx
@@ -1,15 +1,15 @@
 import {Sparkle} from 'phosphor-react'
-const LoginSide = ({ user, title }) => {
+const LoginSide = ({ user, title, showArrow }) => {
   return (
     <div className="flex flex-col w-full h-full relative">
 
 
        {/* <img src='/static/images/toolbox/squares.svg' className="opacity-20 absolute w-full h-full object-cover top-0 left-0"/> */}
       <div className="z-10 relative max-w-[420px] -mt-4 mx-auto flex flex-col h-full justify-center">
         <div className="relative">
-        <svg className="absolute left-0 -scale-x-100 -ml-[18vw] bottom-0 -mb-[240px]"width="360" height="323" viewBox="0 0 360 323" fill="none" xmlns="http://www.w3.org/2000/svg">
+        {showArrow!==false?<svg className="absolute left-0 -scale-x-100 -ml-[18vw] bottom-0 -mb-[240px]"width="360" height="323" viewBox="0 0 360 323" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M341.516 142.568C342.382 141.155 344.229 140.711 345.641 141.576C347.054 142.442 347.499 144.288 346.633 145.701L341.516 142.568ZM155.689 135L155.559 132.003L155.56 132.003L155.689 135ZM194.721 237.947L192.649 235.778L192.649 235.778L194.721 237.947ZM27.6653 119.144C27.5385 117.492 28.7748 116.05 30.4268 115.923C32.0788 115.796 33.5209 117.033 33.6477 118.685L27.6653 119.144ZM352.818 167.075C353.097 168.708 352 170.259 350.367 170.538C348.734 170.818 347.184 169.721 346.904 168.088L352.818 167.075ZM345.502 142.138L345.376 139.141C346.884 139.078 348.204 140.144 348.458 141.632L345.502 142.138ZM319.376 145.693C317.723 145.591 316.465 144.167 316.568 142.513C316.67 140.86 318.094 139.602 319.748 139.705L319.376 145.693ZM344.075 144.135C346.633 145.701 346.633 145.703 346.632 145.704C346.631 145.705 346.63 145.707 346.628 145.709C346.626 145.713 346.622 145.719 346.618 145.727C346.609 145.741 346.596 145.762 346.579 145.789C346.546 145.843 346.497 145.922 346.433 146.024C346.305 146.228 346.116 146.527 345.868 146.914C345.372 147.688 344.639 148.813 343.681 150.235C341.764 153.079 338.945 157.11 335.318 161.891C328.069 171.446 317.567 184.027 304.568 196.095C278.707 220.107 242.254 242.724 201.587 234.031L202.841 228.164C240.527 236.22 275.005 215.356 300.486 191.698C313.158 179.933 323.43 167.633 330.538 158.265C334.089 153.584 336.843 149.645 338.705 146.882C339.636 145.5 340.344 144.414 340.817 143.676C341.053 143.308 341.23 143.027 341.348 142.84C341.406 142.746 341.45 142.676 341.478 142.631C341.492 142.608 341.502 142.591 341.509 142.581C341.512 142.575 341.514 142.572 341.515 142.57C341.516 142.569 341.516 142.568 341.517 142.568C341.517 142.568 341.516 142.568 344.075 144.135ZM201.587 234.031C161.406 225.442 140.343 201.031 133.935 178.13C130.75 166.748 131.165 155.626 134.847 147.094C138.569 138.47 145.709 132.431 155.559 132.003L155.819 137.998C148.675 138.308 143.34 142.556 140.356 149.471C137.332 156.478 136.812 166.148 139.713 176.513C145.475 197.103 164.669 220.004 202.841 228.164L201.587 234.031ZM155.56 132.003C164.977 131.597 175.008 135.675 183.937 142.307C192.906 148.97 201.033 158.401 206.67 169.197C217.963 190.825 219.443 218.488 196.793 240.117L192.649 235.778C212.832 216.504 211.787 191.96 201.352 171.974C196.125 161.964 188.587 153.236 180.359 147.124C172.09 140.982 163.392 137.671 155.818 137.998L155.56 132.003ZM196.793 240.117C185.254 251.138 169.106 254.764 151.7 252.797C134.298 250.831 115.357 243.264 97.6766 231.503C62.3528 208.004 31.3613 167.269 27.6653 119.144L33.6477 118.685C37.1683 164.525 66.8 203.756 101 226.507C118.081 237.87 136.127 244.999 152.374 246.835C168.617 248.671 182.779 245.205 192.649 235.778L196.793 240.117ZM346.904 168.088L342.545 142.645L348.458 141.632L352.818 167.075L346.904 168.088ZM345.502 142.138C345.627 145.136 345.627 145.136 345.627 145.136C345.627 145.136 345.626 145.136 345.626 145.136C345.625 145.136 345.624 145.136 345.623 145.136C345.62 145.136 345.617 145.136 345.611 145.136C345.601 145.137 345.586 145.137 345.566 145.138C345.526 145.14 345.467 145.142 345.389 145.146C345.234 145.152 345.006 145.161 344.715 145.173C344.133 145.196 343.295 145.229 342.275 145.268C340.234 145.345 337.459 145.445 334.524 145.535C328.738 145.713 322.083 145.861 319.376 145.693L319.748 139.705C322.108 139.851 328.423 139.719 334.34 139.538C337.256 139.448 340.016 139.349 342.048 139.272C343.063 139.234 343.896 139.201 344.475 139.178C344.764 139.166 344.99 139.157 345.143 139.151C345.219 139.148 345.278 139.145 345.317 139.143C345.337 139.143 345.352 139.142 345.361 139.142C345.366 139.141 345.37 139.141 345.372 139.141C345.374 139.141 345.375 139.141 345.375 139.141C345.375 139.141 345.376 139.141 345.376 139.141C345.376 139.141 345.376 139.141 345.502 142.138Z" fill="#3EA7F3"/>
-</svg>
+</svg>:null}
           {/* <a href="/"> */}
               <Sparkle size={44}/>
             {/* <div className="w-16 h-16 p-4 bg-white rounded-2xl">

diff --git a/components/toolbox/forms/DescriptionExcerptForm.js b/components/toolbox/forms/DescriptionExcerptForm.js
@@ -117,11 +117,11 @@ const [disabled, setDisabled] = useState(false);
     return(
         <div className="max-w-2xl pt-6 pb-20 w-full">
             <div className="my-2 mb-6 ">
-            <h1 className="text-2xl font-bold mx-auto mb-2">Add your description</h1>
+            <h1 className="text-2xl font-semibold mx-auto mb-2">Add your description</h1>
             <p className="text-gray-600">Write a longer description, and a short excerpt.</p>
             </div>
             <form
-            className="p-8 shadow-sm bg-white rounded-xl"
+            className="mt-6"
             onSubmit={(e) => {
             e.preventDefault();
             if ((errors && isEmptyObject(errors)) || !errors) {
@@ -141,7 +141,7 @@ const [disabled, setDisabled] = useState(false);
                 </label>
                 <div className="bg-white rounded-xl">
                     <MiniEditor
-                    placeholder="Example: Need a new landing page? Look no further – ‘Unicorn Platform 3’ is here! One of the best landing page builders around just got better. Version 3 has loads of new features: 🤑 Stripe payments, 📊 Google Sheets, ✍️ Blogging (beta), and tonnes more. Everything you need for your SaaS, mobile app page, or tech startup. It’s also an Indie-made product, built by Alexander Isora and co."
+                    placeholder="Example: Need a new landing page? Look no further – ‘Unicorn Platform 3’ is here! One of the best landing page builders around just got better. Version 3 has loads of new features: Stripe payments, Google Sheets, blogging, and tonnes more. Everything you need for your SaaS, mobile app page, or tech startup. It’s also an Indie-made product, built by Alexander Isora and co."
                     title=""
                     initialContent={content?content:''}
                     disabled={isSubmitting}
@@ -153,11 +153,12 @@ const [disabled, setDisabled] = useState(false);
                 {formik.errors.content && <span className="text-red-600 text-xs">{formik.errors.content}</span>}
 
                 <label className="text-md font-medium mt-4">
-                  Excerpt
+                  Tagline
                 </label>
                 <div className="bg-white rounded-xl">
                     <MiniEditor
-                    height={100}
+                    height={84}
+                    showToolbar={false}
                     initialContent={excerpt?excerpt:''} 
                     title=""
                     disabled={isSubmitting}
@@ -176,7 +177,7 @@ const [disabled, setDisabled] = useState(false);
                 variant={"confirmMedium"}
                 type="submit"
                 disabled={isSubmitting}
-                className="disabled:bg-gray-300 disabled:cursor-not-allowed"
+                className="p-4 bg-blue-700 text-white font-semibold rounded-full disabled:bg-gray-300 disabled:cursor-not-allowed"
                 >
                 {isSubmitting?
                 <div className="mx-auto w-[100px] flex justify-center">

diff --git a/components/toolbox/forms/MediaForm.js b/components/toolbox/forms/MediaForm.js
@@ -208,11 +208,11 @@ const [disabled, setDisabled] = useState(false);
     return(
         <div className="max-w-2xl pt-6 pb-20 w-full">
             <div className="my-2 mb-6">
-            <h1 className="text-2xl font-bold mx-auto mb-2">Add media</h1>
+            <h1 className="text-2xl font-semibold mx-auto mb-2">Add media</h1>
             <p className="text-gray-600">Upload your logo and multiple gallery images.</p>
             </div>
             <form
-            className="p-8 shadow-sm bg-white rounded-xl"
+            className="mt-6"
             onSubmit={(e) => {
             e.preventDefault();
             if ((errors && isEmptyObject(errors)) || !errors) {
@@ -270,14 +270,14 @@ const [disabled, setDisabled] = useState(false);
                 variant={"confirmMedium"}
                 type="submit"
                 disabled={isSubmitting}
-                className="p-4 bg-blue-700 text-white font-semibold rounded-lg disabled:bg-gray-300 disabled:cursor-not-allowed"
+                className="p-4 bg-blue-700 text-white font-semibold rounded-full disabled:bg-gray-300 disabled:cursor-not-allowed"
                 >
                 {isSubmitting?
                 <div className="mx-auto w-5">
                 <Spinner size="sm" className="text-black" />
                 </div>
                 :
-                `Save and Continue`}
+                `Save and Submit`}
                 </Button>
                 <div
                 onClick={onPrevious}