Merge pull request #101 from Vizzuality/fix-static-pages-paddings-mobile

[N/A] Improve static pages' sections' paddings on mobile
Vizzuality · Nov 29, 2023 · e9cfcc5 · e9cfcc5
2 parents 0e822c7 + d4cf895
commit e9cfcc5
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 8 deletions.
diff --git a/frontend/src/components/static-pages/section/index.tsx b/frontend/src/components/static-pages/section/index.tsx
@@ -29,7 +29,7 @@ export type SectionProps = PropsWithChildren<{
 const Section = forwardRef<HTMLDivElement, SectionProps>(({ borderTop = true, children }, ref) => (
   <div
     ref={ref}
-    className={cn('w-full border-black py-6 md:mx-auto md:mb-20 md:max-w-7xl', {
+    className={cn('w-full border-black py-6 px-8 md:mx-auto md:mb-20 md:max-w-7xl md:px-0', {
       'border-t': borderTop,
     })}
   >

diff --git a/frontend/src/containers/about/logos-grid/index.tsx b/frontend/src/containers/about/logos-grid/index.tsx
@@ -19,11 +19,12 @@ const logosGridVariants = cva('', {
 });
 
 type LogosGridProps = VariantProps<typeof logosGridVariants> & {
+  className?: string;
   type: 'team' | 'funders';
 };
 
-const LogosGrid: React.FC<LogosGridProps> = ({ type, columns }) => (
-  <div className={cn('grid gap-4 md:grid-cols-2', logosGridVariants({ columns }))}>
+const LogosGrid: React.FC<LogosGridProps> = ({ className, type, columns }) => (
+  <div className={cn(className, 'grid gap-4 md:grid-cols-2', logosGridVariants({ columns }))}>
     {LOGOS[type].map(({ logo, alt, link, description, width, height }) => (
       <div key={logo} className="flex flex-col gap-4 pr-4">
         <span className="flex flex-1 items-center justify-center md:justify-start">

diff --git a/frontend/src/layouts/static-page.tsx b/frontend/src/layouts/static-page.tsx
@@ -27,7 +27,7 @@ const Sidebar: React.FC<SidebarProps> = ({ sections }) => {
   };
 
   return (
-    <div className="mb-4 min-w-[200px] md:mb-0">
+    <div className="-mb-6 min-w-[200px] px-8 md:mb-0 md:px-0">
       <nav className="sticky top-10 bottom-3 my-10 flex flex-col gap-3 font-mono text-sm">
         {Object.entries(sections).map(([key, { name }]) => {
           return (

diff --git a/frontend/src/pages/about/index.tsx b/frontend/src/pages/about/index.tsx
@@ -126,7 +126,9 @@ const About: React.FC = () => {
             >
               <Logo logo="protectedPlanet" />
             </TwoColSubsection>
+          </SectionContent>
 
+          <SectionContent>
             <TwoColSubsection
               itemNum={2}
               itemTotal={3}
@@ -143,7 +145,9 @@ const About: React.FC = () => {
             >
               <Logo logo="marineProtectionAtlas" />
             </TwoColSubsection>
+          </SectionContent>
 
+          <SectionContent>
             <TwoColSubsection
               itemNum={3}
               itemTotal={3}
@@ -203,14 +207,14 @@ const About: React.FC = () => {
             the dedicated individuals who bring expertise and commitment to the 30x30 Project
           </SectionDescription>
 
-          <TwoColSubsection title="Team" />
           <SectionContent>
-            <LogosGrid type="team" columns={4} />
+            <TwoColSubsection title="Team" />
+            <LogosGrid className="md:mt-8" type="team" columns={4} />
           </SectionContent>
 
-          <TwoColSubsection title="Funders" />
           <SectionContent>
-            <LogosGrid type="funders" columns={2} />
+            <TwoColSubsection title="Funders" />
+            <LogosGrid className="md:mt-8" type="funders" columns={2} />
           </SectionContent>
         </Section>
       </Content>