From 41a9586920fa364eae234de7eb124fd132a0bafd Mon Sep 17 00:00:00 2001
From: fran-ink <171171801+fran-ink@users.noreply.github.com>
Date: Wed, 5 Feb 2025 11:16:10 -0500
Subject: [PATCH] fix: new layout wrong expansion, title color

---
 src/app/[locale]/_components/MainContent/MainContent.tsx   | 1 +
 src/app/[locale]/new/dashboard/_components/AppsContent.tsx | 2 +-
 src/app/[locale]/new/layout.tsx                            | 6 ++++--
 src/components/BigScallableTitle.tsx                       | 6 ++++--
 src/components/ColoredText.tsx                             | 2 +-
 5 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/app/[locale]/_components/MainContent/MainContent.tsx b/src/app/[locale]/_components/MainContent/MainContent.tsx
index 3875a5a..d455110 100644
--- a/src/app/[locale]/_components/MainContent/MainContent.tsx
+++ b/src/app/[locale]/_components/MainContent/MainContent.tsx
@@ -35,6 +35,7 @@ export const MainContent: React.FC<{
             disableRotating={disableRotating}
           />
         }
+        variant="reverse-purple"
       />
       <div className="flex flex-col items-center gap-5 sm:gap-6">
         <div className="flex gap-4 flex-col md:flex-row">
diff --git a/src/app/[locale]/new/dashboard/_components/AppsContent.tsx b/src/app/[locale]/new/dashboard/_components/AppsContent.tsx
index fa35cce..b8c0a87 100644
--- a/src/app/[locale]/new/dashboard/_components/AppsContent.tsx
+++ b/src/app/[locale]/new/dashboard/_components/AppsContent.tsx
@@ -154,7 +154,7 @@ export function AppsContent({ currentCategory }: AppsContentProps) {
 
   return (
     <>
-      <div className="flex flex-col gap-8 max-w-[2000px]">
+      <div className="flex flex-col gap-8 w-full max-w-[2000px]">
         {/* Floating section on desktop */}
         <div className="lg:fixed lg:flex left-[20%] right-[20%] top-8 justify-center flex-wrap gap-4 mx-4 z-10">
           <SearchInput
diff --git a/src/app/[locale]/new/layout.tsx b/src/app/[locale]/new/layout.tsx
index eb08edf..7ab324f 100644
--- a/src/app/[locale]/new/layout.tsx
+++ b/src/app/[locale]/new/layout.tsx
@@ -19,8 +19,10 @@ export default async function InfoLayout({
   return (
     <OnlyWithFeatureFlag flag="newNav">
       <RoutedLayout>
-        <div className="relative pt-24 sm:pt-0 overflow-hidden flex flex-col gap-8 hd:flex-1 hd:items-center">
-          <div className="flex flex-col">{children}</div>
+        <div className="relative pt-24 sm:pt-0 overflow-hidden flex flex-col gap-8 w-full items-center">
+          <div className="flex flex-col w-full justify-center items-center">
+            {children}
+          </div>
           <div>
             <Footer />
           </div>
diff --git a/src/components/BigScallableTitle.tsx b/src/components/BigScallableTitle.tsx
index 17daba0..472348c 100644
--- a/src/components/BigScallableTitle.tsx
+++ b/src/components/BigScallableTitle.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 import { classNames } from "@/util/classes";
 
-import { ColoredText } from "./ColoredText";
+import { ColoredText, ColoredTextProps } from "./ColoredText";
 
 export interface BigScalableTitleProps {
   title: React.ReactNode;
@@ -15,6 +15,7 @@ export interface BigScalableTitleProps {
    *  Community page title "Join the Ink Community" is 4vw
    * */
   ratio?: 2 | 4 | 8;
+  variant?: ColoredTextProps["variant"];
 }
 
 export const BigScalableTitle: React.FC<BigScalableTitleProps> = ({
@@ -22,6 +23,7 @@ export const BigScalableTitle: React.FC<BigScalableTitleProps> = ({
   subtitle,
   ratio = 8,
   align = "center",
+  variant = "purple",
 }) => {
   return (
     <div
@@ -40,7 +42,7 @@ export const BigScalableTitle: React.FC<BigScalableTitleProps> = ({
     >
       <ColoredText
         noisy
-        variant="reverse-purple"
+        variant={variant}
         className="font-medium antialiased"
         pulse="md"
       >
diff --git a/src/components/ColoredText.tsx b/src/components/ColoredText.tsx
index 6636e24..2a64f5c 100644
--- a/src/components/ColoredText.tsx
+++ b/src/components/ColoredText.tsx
@@ -2,7 +2,7 @@ import { PropsWithChildren } from "react";
 
 import { classNames } from "@/util/classes";
 
-interface ColoredTextProps extends PropsWithChildren {
+export interface ColoredTextProps extends PropsWithChildren {
   variant:
     | "purple"
     | "purple-light"