fix: layout padding, tabs size and page heading font sizes (#1067)

apps/app/components/core/calendar-view/calendar-header.tsx

@@ -61,8 +61,8 @@ export const CalendarHeader: React.FC<Props> = ({
         <Popover className="flex h-full items-center justify-start rounded-lg">
           {({ open }) => (
             <>
-              <Popover.Button className={`group flex h-full items-start gap-1 text-brand-base`}>
-                <div className="flex  items-center   justify-center gap-2 text-2xl font-semibold">
+              <Popover.Button>
+                <div className="flex items-center justify-center gap-2 text-2xl font-semibold text-brand-base">
                   <span>{formatDate(currentDate, "Month")}</span>{" "}
                   <span>{formatDate(currentDate, "yyyy")}</span>
                 </div>

apps/app/components/core/calendar-view/calendar.tsx

@@ -162,9 +162,9 @@ export const CalendarView: React.FC<Props> = ({
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer || isCompleted;
 
   return calendarIssues ? (
-    <div className="mb-4 h-full">
+    <div className="h-full">
       <DragDropContext onDragEnd={onDragEnd}>
-        <div className="-m-2 h-full rounded-lg p-8 text-brand-secondary">
+        <div className="h-full rounded-lg p-8 text-brand-secondary">
           <CalendarHeader
             isMonthlyView={isMonthlyView}
             setIsMonthlyView={setIsMonthlyView}

apps/app/components/project/settings-header.tsx

@@ -1,10 +1,10 @@
 import SettingsNavbar from "layouts/settings-navbar";
 
 export const SettingsHeader = () => (
-  <div className="mb-12 space-y-6">
+  <div className="mb-8 space-y-6">
     <div>
-      <h3 className="text-3xl font-semibold">Project Settings</h3>
-      <p className="mt-1 text-brand-secondary">
+      <h3 className="text-2xl font-semibold">Project Settings</h3>
+      <p className="mt-1 text-sm text-brand-secondary">
         This information will be displayed to every member of the project.
       </p>
     </div>

apps/app/components/workspace/settings-header.tsx

@@ -1,10 +1,10 @@
 import SettingsNavbar from "layouts/settings-navbar";
 
 export const SettingsHeader = () => (
-  <div className="mb-12 space-y-6">
+  <div className="mb-8 space-y-6">
     <div>
-      <h3 className="text-3xl font-semibold">Workspace Settings</h3>
-      <p className="mt-1 text-brand-secondary">
+      <h3 className="text-2xl font-semibold">Workspace Settings</h3>
+      <p className="mt-1 text-sm text-brand-secondary">
         This information will be displayed to every member of the workspace.
       </p>
     </div>

apps/app/layouts/settings-navbar.tsx

@@ -97,14 +97,14 @@ const SettingsNavbar: React.FC<Props> = ({ profilePage = false }) => {
         <Link key={link.href} href={link.href}>
           <a>
             <div
-              className={`rounded-3xl border border-brand-base px-5 py-1.5 text-sm sm:px-7 sm:py-2 sm:text-base ${
+              className={`rounded-full border px-5 py-1.5 text-sm outline-none ${
                 (
                   link.label === "Import/Export"
                     ? router.asPath.includes(link.href)
                     : router.asPath === link.href
                 )
                   ? "border-brand-accent bg-brand-accent text-white"
-                  : "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1"
+                  : "border-brand-base bg-brand-base hover:bg-brand-surface-1"
               }`}
             >
               {link.label}

apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx

@@ -91,8 +91,7 @@ const ProjectModules: NextPage = () => {
         modules.length > 0 ? (
           <div className="space-y-5 p-8">
             <div className="flex flex-col gap-5">
-              <h3 className="text-3xl font-semibold text-brand-base">Modules</h3>
-
+              <h3 className="text-2xl font-semibold text-brand-base">Modules</h3>
               <div className="grid grid-cols-1 gap-9 sm:grid-cols-2 lg:grid-cols-3">
                 {modules.map((module) => (
                   <SingleModuleCard

apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx

@@ -195,8 +195,9 @@ const ProjectPages: NextPage = () => {
           </PrimaryButton>
         }
       >
-        <div className="space-y-4 p-8">
-          <form
+        <div className="space-y-5 p-8">
+          <h3 className="text-2xl font-semibold text-brand-base">Pages</h3>
+          {/* <form
             onSubmit={handleSubmit(createPage)}
             className="relative mb-12 flex items-center justify-between gap-2 rounded-[6px] border border-brand-base p-2 shadow"
           >
@@ -212,7 +213,7 @@ const ProjectPages: NextPage = () => {
                 {isSubmitting ? "Creating..." : "Create"}
               </PrimaryButton>
             )}
-          </form>
+          </form> */}
           <div>
             <Tab.Group
               defaultIndex={currentTabValue(pageTab)}

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx

@@ -106,7 +106,7 @@ const ControlSettings: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <form onSubmit={handleSubmit(onSubmit)} className="p-8 lg:px-24">
+      <form onSubmit={handleSubmit(onSubmit)} className="p-8">
         <SettingsHeader />
         <div className="space-y-8 sm:space-y-12">
           <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx

@@ -118,7 +118,7 @@ const EstimatesSettings: NextPage = () => {
           </Breadcrumbs>
         }
       >
-        <div className="p-8 lg:px-24">
+        <div className="p-8">
           <SettingsHeader />
           <section className="flex items-center justify-between">
             <h3 className="text-2xl font-semibold">Estimates</h3>
@@ -142,7 +142,7 @@ const EstimatesSettings: NextPage = () => {
           </section>
           {estimatesList ? (
             estimatesList.length > 0 ? (
-              <section className="mt-4 divide-y divide-brand-base rounded-xl border border-brand-base bg-brand-base px-6">
+              <section className="mt-5 divide-y divide-brand-base rounded-xl border border-brand-base bg-brand-base px-6">
                 {estimatesList.map((estimate) => (
                   <SingleEstimate
                     key={estimate.id}

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx

@@ -164,9 +164,9 @@ const FeaturesSettings: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <div className="p-8 lg:px-24">
+      <div className="p-8">
         <SettingsHeader />
-        <section className="space-y-8">
+        <section className="space-y-5">
           <h3 className="text-2xl font-semibold">Features</h3>
           <div className="space-y-5">
             {featuresList.map((feature) => (

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx

@@ -151,7 +151,7 @@ const GeneralSettings: NextPage = () => {
           router.push(`/${workspaceSlug}/projects`);
         }}
       />
-      <form onSubmit={handleSubmit(onSubmit)} className="p-8 lg:px-24">
+      <form onSubmit={handleSubmit(onSubmit)} className="p-8">
         <SettingsHeader />
         <div className="space-y-8 sm:space-y-12">
           <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx

@@ -54,7 +54,7 @@ const ProjectIntegrations: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <div className="p-8 lg:px-24">
+      <div className="p-8">
         <SettingsHeader />
         {workspaceIntegrations ? (
           workspaceIntegrations.length > 0 ? (

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx

@@ -102,7 +102,7 @@ const LabelsSettings: NextPage = () => {
           </Breadcrumbs>
         }
       >
-        <div className="p-8 lg:px-24">
+        <div className="p-8">
           <SettingsHeader />
           <section className="grid grid-cols-12 gap-10">
             <div className="col-span-12 sm:col-span-5">

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx

@@ -147,9 +147,9 @@ const MembersSettings: NextPage = () => {
           </Breadcrumbs>
         }
       >
-        <div className="p-8 lg:px-24">
+        <div className="p-8">
           <SettingsHeader />
-          <section className="space-y-8">
+          <section className="space-y-5">
             <div className="flex items-end justify-between gap-4">
               <h3 className="text-2xl font-semibold">Members</h3>
               <button

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx

@@ -67,7 +67,7 @@ const StatesSettings: NextPage = () => {
           </Breadcrumbs>
         }
       >
-        <div className="p-8 lg:px-24">
+        <div className="p-8">
           <SettingsHeader />
           <div className="grid grid-cols-12 gap-10">
             <div className="col-span-12 sm:col-span-5">

apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx

@@ -98,7 +98,7 @@ const ProjectViews: NextPage = () => {
       {views ? (
         views.length > 0 ? (
           <div className="space-y-5 p-8">
-            <h3 className="text-3xl font-semibold text-brand-base">Views</h3>
+            <h3 className="text-2xl font-semibold text-brand-base">Views</h3>
             <div className="divide-y divide-brand-base rounded-[10px] border border-brand-base">
               {views.map((view) => (
                 <SingleViewItem

apps/app/pages/[workspaceSlug]/settings/billing.tsx

@@ -39,11 +39,11 @@ const BillingSettings: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <div className="p-8 lg:px-24">
+      <div className="p-8">
         <SettingsHeader />
         <section className="space-y-8">
           <div>
-            <h3 className="text-3xl font-bold leading-6">Billing & Plans</h3>
+            <h3 className="text-2xl font-semibold leading-6">Billing & Plans</h3>
             <p className="mt-4 text-sm text-brand-secondary">[Free launch preview] plan Pro</p>
           </div>
           <div className="space-y-8 md:w-2/3">

apps/app/pages/[workspaceSlug]/settings/import-export.tsx

@@ -23,7 +23,7 @@ const ImportExport: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <div className="p-8 lg:px-24">
+      <div className="p-8">
         <SettingsHeader />
         <IntegrationGuide />
       </div>

apps/app/pages/[workspaceSlug]/settings/index.tsx

@@ -173,7 +173,7 @@ const WorkspaceSettings: NextPage = () => {
         }}
         data={activeWorkspace ?? null}
       />
-      <div className="p-8 lg:px-24">
+      <div className="p-8">
         <SettingsHeader />
         {activeWorkspace ? (
           <div className="space-y-8 sm:space-y-12">

apps/app/pages/[workspaceSlug]/settings/integrations.tsx

@@ -47,9 +47,9 @@ const WorkspaceIntegrations: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <div className="p-8 lg:px-24">
+      <div className="p-8">
         <SettingsHeader />
-        <section className="space-y-8">
+        <section className="space-y-5">
           <div className="flex flex-col items-start gap-3">
             <h3 className="text-2xl font-semibold">Integrations</h3>
             <div className="flex items-center gap-3 rounded-[10px] border border-brand-accent/75 bg-brand-accent/5 p-4 text-sm text-brand-base">

apps/app/pages/[workspaceSlug]/settings/members.tsx

@@ -145,9 +145,9 @@ const MembersSettings: NextPage = () => {
           </Breadcrumbs>
         }
       >
-        <div className="p-8 lg:px-24">
+        <div className="p-8">
           <SettingsHeader />
-          <section className="space-y-8">
+          <section className="space-y-5">
             <div className="flex items-end justify-between gap-4">
               <h3 className="text-2xl font-semibold">Members</h3>
               <button