fix: back button and heading size (#6768)

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

apps/web/components/apps/App.tsx

@@ -331,7 +331,7 @@ export default function App(props: {
   const { t } = useLocale();
 
   return (
-    <Shell large isPublic heading={t("app_store")} backPath="/apps" withoutSeo>
+    <Shell smallHeading isPublic heading={t("app_store")} backPath="/apps" withoutSeo>
       <HeadSeo
         title={props.name}
         description={props.description}

apps/web/pages/apps/categories/[category].tsx

@@ -19,6 +19,7 @@ export default function Apps({ apps }: InferGetStaticPropsType<typeof getStaticP
       <Shell
         isPublic
         backPath="/apps"
+        smallHeading
         heading={
           <>
             <Link
@@ -33,8 +34,7 @@ export default function Apps({ apps }: InferGetStaticPropsType<typeof getStaticP
               </span>
             )}
           </>
-        }
-        large>
+        }>
         <div className="mb-16">
           <div className="grid-col-1 grid grid-cols-1 gap-3 md:grid-cols-3">
             {apps.map((app) => {

packages/features/shell/Shell.tsx

@@ -188,6 +188,7 @@ type LayoutProps = {
   withoutSeo?: boolean;
   // Gives the ability to include actions to the right of the heading
   actions?: JSX.Element;
+  smallHeading?: boolean;
 };
 
 const CustomBrandingContainer = () => {
@@ -785,7 +786,8 @@ export function ShellMain(props: LayoutProps) {
   const { isLocaleReady } = useLocale();
   return (
     <>
-      <div className="mb-6 flex sm:mt-0 lg:mb-10">
+      <div
+        className={classNames("mb-6 flex items-center sm:mt-0", props.smallHeading ? "lg:mb-7" : "lg:mb-10")}>
         {!!props.backPath && (
           <Button
             variant="icon"
@@ -795,7 +797,7 @@ export function ShellMain(props: LayoutProps) {
             }
             StartIcon={FiArrowLeft}
             aria-label="Go Back"
-            className="ltr:mr-2 rtl:ml-2"
+            className="mt-1 ltr:mr-2 rtl:ml-2"
           />
         )}
         {props.heading && (
@@ -803,7 +805,11 @@ export function ShellMain(props: LayoutProps) {
             {props.HeadingLeftIcon && <div className="ltr:mr-4">{props.HeadingLeftIcon}</div>}
             <div className={classNames("w-full ltr:mr-4 rtl:ml-4 sm:block", props.headerClassName)}>
               {props.heading && (
-                <h1 className="font-cal max-w-28 sm:max-w-72 md:max-w-80 mt-1 hidden truncate text-2xl font-semibold tracking-wide text-black sm:block xl:max-w-full">
+                <h1
+                  className={classNames(
+                    "font-cal max-w-28 sm:max-w-72 md:max-w-80 mt-1 hidden truncate  font-semibold tracking-wide text-black sm:block xl:max-w-full",
+                    props.smallHeading ? "text-base" : "text-2xl"
+                  )}>
                   {!isLocaleReady ? <SkeletonText invisible /> : props.heading}
                 </h1>
               )}