Content width improvements

codelitdev · Mar 17, 2024 · 5619c20 · 5619c20
1 parent 2db2c17
commit 5619c20
Show file tree

Hide file tree

Showing 23 changed files with 996 additions and 918 deletions.
diff --git a/apps/web/components/public/article.tsx b/apps/web/components/public/article.tsx
@@ -35,9 +35,9 @@ const Article = (props: ArticleProps) => {
     return (
         <div className="flex flex-col">
             <header>
-                <h1 className="text-4xl font-semibold mb-4">{course.title}</h1>
+                <h1 className="text-4xl font-semibold mb-8">{course.title}</h1>
                 {options.showAttribution && (
-                    <div className="flex flex-col mb-4">
+                    <div className="flex flex-col mb-8">
                         <Link href={`/profile/${course.creatorId}`}>
                             <p className="font-medium">{course.creatorName}</p>
                         </Link>

diff --git a/apps/web/graphql/courses/types/index.ts b/apps/web/graphql/courses/types/index.ts
@@ -167,7 +167,7 @@ const publicCoursesType = new GraphQLObjectType({
         title: { type: new GraphQLNonNull(GraphQLString) },
         costType: { type: courseCostType },
         cost: { type: new GraphQLNonNull(GraphQLFloat) },
-        description: { type: new GraphQLNonNull(GraphQLString) },
+        description: { type: GraphQLString },
         type: { type: new GraphQLNonNull(courseTypeFilters) },
         creatorName: { type: GraphQLString },
         updatedAt: { type: new GraphQLNonNull(GraphQLString) },

diff --git a/apps/web/pages/404.tsx b/apps/web/pages/404.tsx
@@ -22,9 +22,9 @@ function Custom404({ address }: { address: Address }) {
 
     return (
         <BaseLayout title={PAGE_TITLE_404} layout={layout}>
-            <div className="flex flex-col gap-4 h-screen justify-center items-center">
+            <div className="flex flex-col gap-4 h-screen justify-center items-center mx-auto lg:max-w-[1200px] w-full">
                 <Cross />
-                <h1 className="text-4xl font-semibold mb-4">
+                <h1 className="text-4xl font-semibold my-4 lg:my-8">
                     {PAGE_TITLE_404}
                 </h1>
             </div>

diff --git a/apps/web/pages/blog/[slug]/[id].tsx b/apps/web/pages/blog/[slug]/[id].tsx
@@ -34,7 +34,7 @@ const Post = ({ siteInfo, address, post, page }: PostProps) => {
             childrenOnTop={true}
         >
             {post && (
-                <div className="flex flex-col min-h-[80vh] gap-4 mb-8">
+                <div className="flex flex-col min-h-[80vh] gap-4 mb-8 lg:max-w-[640px] mx-auto">
                     <Head>
                         <meta
                             property="og:url"
@@ -58,7 +58,7 @@ const Post = ({ siteInfo, address, post, page }: PostProps) => {
                             />
                         )}
                     </Head>
-                    <div className="flex flex-col gap-4 p-4">
+                    <div className="flex flex-col gap-4 p-4 mt-8">
                         <Article course={post} options={articleOptions} />
                         <div className="">
                             <Link href="/blog" className="hover:underline">

diff --git a/apps/web/pages/blog/index.tsx b/apps/web/pages/blog/index.tsx
@@ -35,14 +35,18 @@ function Posts(props: PostsProps) {
 
     return (
         <BaseLayout title={path} layout={props.page.layout}>
-            <div className="flex flex-col p-4 gap-4">
-                <h1 className="text-4xl font-semibold">{path}</h1>
-                <Items
-                    showLoadMoreButton={true}
-                    generateQuery={generateQuery}
-                    initialItems={props.courses}
-                    posts={true}
-                />
+            <div className="mx-auto lg:max-w-[1200px] w-full">
+                <div className="flex flex-col p-4 gap-4">
+                    <h1 className="text-4xl font-semibold my-4 lg:my-8">
+                        {path}
+                    </h1>
+                    <Items
+                        showLoadMoreButton={true}
+                        generateQuery={generateQuery}
+                        initialItems={props.courses}
+                        posts={true}
+                    />
+                </div>
             </div>
         </BaseLayout>
     );

diff --git a/apps/web/pages/checkout/[pid].tsx b/apps/web/pages/checkout/[pid].tsx
@@ -28,30 +28,32 @@ function CheckoutProduct({ page, product, siteInfo }: CheckoutProductProps) {
 
     return (
         <BaseLayout layout={page.layout} title={CHECKOUT_PAGE_TITLE}>
-            <div className="flex flex-col p-4">
-                <h1 className="text-4xl font-semibold mb-4">
-                    {CHECKOUT_PAGE_TITLE}
-                </h1>
-                {!product && <>...</>}
-                {product && (
-                    <Section className="p-2">
-                        <h2 className="text-2xl mb-4">{product.title}</h2>
-                        <div className="flex font-semibold justify-between mb-8">
-                            <p>{CHECKOUT_PAGE_TOTAL}</p>
-                            <PriceTag
-                                cost={product.cost as number}
-                                freeCostCaption={FREE_COURSES_TEXT}
-                                currencyISOCode={
-                                    siteInfo.currencyISOCode as string
-                                }
-                            />
-                        </div>
-                        {router.query.id && <PurchaseStatus />}
-                        {!router.query.id && (
-                            <Checkout course={product as Course} />
-                        )}
-                    </Section>
-                )}
+            <div className="mx-auto lg:max-w-[1200px] w-full">
+                <div className="flex flex-col p-4 ">
+                    <h1 className="text-4xl font-semibold my-4 lg:my-8">
+                        {CHECKOUT_PAGE_TITLE}
+                    </h1>
+                    {!product && <>...</>}
+                    {product && (
+                        <Section className="p-2">
+                            <h2 className="text-2xl mb-4">{product.title}</h2>
+                            <div className="flex font-semibold justify-between mb-8">
+                                <p>{CHECKOUT_PAGE_TOTAL}</p>
+                                <PriceTag
+                                    cost={product.cost as number}
+                                    freeCostCaption={FREE_COURSES_TEXT}
+                                    currencyISOCode={
+                                        siteInfo.currencyISOCode as string
+                                    }
+                                />
+                            </div>
+                            {router.query.id && <PurchaseStatus />}
+                            {!router.query.id && (
+                                <Checkout course={product as Course} />
+                            )}
+                        </Section>
+                    )}
+                </div>
             </div>
         </BaseLayout>
     );

diff --git a/apps/web/pages/courses.tsx b/apps/web/pages/courses.tsx
@@ -38,8 +38,8 @@ const Courses = (props: CoursesProps) => {
 
     return (
         <BaseLayout title={path} layout={props.page.layout}>
-            <div className="flex flex-col p-4">
-                <h1 className="text-4xl font-semibold mb-4">{path}</h1>
+            <div className="flex flex-col p-4 mx-auto lg:max-w-[1200px]">
+                <h1 className="text-4xl font-semibold my-4 lg:my-8">{path}</h1>
                 <Items
                     showLoadMoreButton={true}
                     generateQuery={generateQuery}

diff --git a/apps/web/pages/login.tsx b/apps/web/pages/login.tsx
@@ -100,7 +100,7 @@ const Login = ({ page, auth, dispatch }: LoginProps) => {
 
     return (
         <BaseLayout title={LOGIN_SECTION_HEADER} layout={page.layout}>
-            <div className="flex justify-center grow items-center px-4">
+            <div className="flex justify-center grow items-center px-4 mx-auto lg:max-w-[1200px] w-full">
                 <div className="flex flex-col">
                     {error && (
                         <div className="bg-red-500 text-white px-2 py-1 rounded-md mb-4">

diff --git a/apps/web/pages/my-content.tsx b/apps/web/pages/my-content.tsx
@@ -79,8 +79,8 @@ function Account({ auth, page, profile, address }: AccountProps) {
 
     return (
         <BaseLayout layout={page.layout} title={MY_CONTENT_HEADER}>
-            <div className="flex flex-col min-h-screen">
-                <h1 className="text-4xl font-semibold mb-4 p-4">
+            <div className="flex flex-col min-h-screen mx-auto lg:max-w-[1200px] w-full">
+                <h1 className="text-4xl font-semibold p-4 my-4 lg:my-8">
                     {MY_CONTENT_HEADER}
                 </h1>
                 {!loaded && (

diff --git a/apps/web/pages/profile/index.tsx b/apps/web/pages/profile/index.tsx
@@ -163,60 +163,68 @@ function ProfileIndex({
 
     return (
         <BaseLayout layout={page.layout} title={PROFILE_PAGE_HEADER}>
-            <div className="flex flex-col p-4 gap-4">
-                <h1 className="text-4xl font-semibold">
-                    {PROFILE_PAGE_HEADER}
-                </h1>
-                <Form onSubmit={saveDetails}>
-                    <Section header={PROFILE_SECTION_DETAILS}>
-                        <FormField
-                            value={profile.email}
-                            label={PROFILE_SECTION_DETAILS_EMAIL}
-                            onChange={(event) => setName(event.target.value)}
-                            disabled={true}
-                        />
-
-                        <FormField
-                            name="name"
-                            value={name}
-                            label={PROFILE_SECTION_DETAILS_NAME}
-                            onChange={(event) => setName(event.target.value)}
-                        />
-                        <FormField
-                            name="bio"
-                            value={bio}
-                            onChange={(event) => setBio(event.target.value)}
-                            label={PROFILE_SECTION_DETAILS_BIO}
-                            multiline={true}
-                            maxRows={5}
-                        />
-                        <div>
-                            <Button
-                                onClick={saveDetails}
-                                disabled={
-                                    bio === (user && user.bio) &&
-                                    name === (user && user.name)
+            <div className="mx-auto lg:max-w-[1200px] w-full">
+                <div className="flex flex-col p-4 gap-4">
+                    <h1 className="text-4xl font-semibold my-4 lg:my-8">
+                        {PROFILE_PAGE_HEADER}
+                    </h1>
+                    <Form onSubmit={saveDetails}>
+                        <Section header={PROFILE_SECTION_DETAILS}>
+                            <FormField
+                                value={profile.email}
+                                label={PROFILE_SECTION_DETAILS_EMAIL}
+                                onChange={(event) =>
+                                    setName(event.target.value)
                                 }
-                            >
-                                {BUTTON_SAVE}
-                            </Button>
+                                disabled={true}
+                            />
+
+                            <FormField
+                                name="name"
+                                value={name}
+                                label={PROFILE_SECTION_DETAILS_NAME}
+                                onChange={(event) =>
+                                    setName(event.target.value)
+                                }
+                            />
+                            <FormField
+                                name="bio"
+                                value={bio}
+                                onChange={(event) => setBio(event.target.value)}
+                                label={PROFILE_SECTION_DETAILS_BIO}
+                                multiline={true}
+                                maxRows={5}
+                            />
+                            <div>
+                                <Button
+                                    onClick={saveDetails}
+                                    disabled={
+                                        bio === (user && user.bio) &&
+                                        name === (user && user.name)
+                                    }
+                                >
+                                    {BUTTON_SAVE}
+                                </Button>
+                            </div>
+                        </Section>
+                    </Form>
+                    <Section header={PROFILE_EMAIL_PREFERENCES}>
+                        <div className="flex justify-between">
+                            <p>
+                                {
+                                    PROFILE_EMAIL_PREFERENCES_NEWSLETTER_OPTION_TEXT
+                                }
+                            </p>
+                            <Checkbox
+                                disabled={networkActionState}
+                                checked={subscribedToUpdates}
+                                onChange={(value: boolean) =>
+                                    saveEmailPreference(value)
+                                }
+                            />
                         </div>
                     </Section>
-                </Form>
-                <Section header={PROFILE_EMAIL_PREFERENCES}>
-                    <div className="flex justify-between">
-                        <p>
-                            {PROFILE_EMAIL_PREFERENCES_NEWSLETTER_OPTION_TEXT}
-                        </p>
-                        <Checkbox
-                            disabled={networkActionState}
-                            checked={subscribedToUpdates}
-                            onChange={(value: boolean) =>
-                                saveEmailPreference(value)
-                            }
-                        />
-                    </div>
-                </Section>
+                </div>
             </div>
         </BaseLayout>
     );

diff --git a/apps/web/pages/tag/[tag].tsx b/apps/web/pages/tag/[tag].tsx
@@ -46,15 +46,17 @@ function Posts(props: PostsProps) {
             title={HEADER_BLOG_POSTS_SECTION}
             layout={props.page.layout}
         >
-            <div className="flex flex-col p-4">
-                <h1 className="text-4xl font-semibold mb-4">
-                    {`${HEADER_TAG_SECTION} '${tag}'`}
-                </h1>
-                <Items
-                    showLoadMoreButton={true}
-                    generateQuery={generateQueryWithTag}
-                    initialItems={props.courses}
-                />
+            <div className="mx-auto lg:max-w-[1200px] w-full">
+                <div className="flex flex-col p-4">
+                    <h1 className="text-4xl font-semibold my-4 lg:my-8">
+                        {`${HEADER_TAG_SECTION} '${tag}'`}
+                    </h1>
+                    <Items
+                        showLoadMoreButton={true}
+                        generateQuery={generateQueryWithTag}
+                        initialItems={props.courses}
+                    />
+                </div>
             </div>
         </BaseLayout>
     );