implement design notes - padding and semibold

stellar · Dec 20, 2024 · c9558bd · c9558bd
1 parent c53069d
commit c9558bd
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 37 deletions.
diff --git a/src/components/Homepage/DeveloperResources/index.tsx b/src/components/Homepage/DeveloperResources/index.tsx
@@ -69,7 +69,7 @@ function DeveloperResourcesFeature({title, description, link}) {
   return (
     <div className='col col--6 padding--md'>
       <div className={clsx(styles.DeveloperResourcesFeature, 'padding--lg')}>
-        <Heading as="h3">{title}</Heading>
+        <Heading as="h3" className='text--semibold'>{title}</Heading>
         <p>{description}</p>
         <Link className='button button--outline button--primary' {...link.props} />
       </div>
@@ -80,7 +80,7 @@ function DeveloperResourcesFeature({title, description, link}) {
 function DocsContribution() {
   return (
     <>
-      <Heading as="h3">
+      <Heading as="h3" className='text--semibold'>
         <Translate
           id='component.Homepage.DocsContribution.Heading'>
           Contribute to the docs and leave feedback
@@ -129,21 +129,19 @@ export default function DeveloperResources() {
 
   return (
     <section className='margin-vert--lg'>
-      <div className="container">
-          {partitionedBoxes.map((twoBoxes) => (
-            <div className='row'>
-              {twoBoxes.map((props, idx) => (
-                <DeveloperResourcesFeature key={idx} {...props} />
-              ))}
-            </div>
+      {partitionedBoxes.map((twoBoxes) => (
+        <div className='row'>
+          {twoBoxes.map((props, idx) => (
+            <DeveloperResourcesFeature key={idx} {...props} />
           ))}
-          <div className='row'>
-            <div className='col padding--md'>
-              <div className={clsx(styles.DeveloperResourcesFeature, 'padding--lg')}>
-                <DocsContribution />
-              </div>
-            </div>
+        </div>
+      ))}
+      <div className='row'>
+        <div className='col padding--md'>
+          <div className={clsx(styles.DeveloperResourcesFeature, 'padding--lg')}>
+            <DocsContribution />
           </div>
+        </div>
       </div>
     </section>
   )

diff --git a/src/components/Homepage/NavigatingTheDocs/index.tsx b/src/components/Homepage/NavigatingTheDocs/index.tsx
@@ -135,7 +135,7 @@ function NavigatingDocsFeature({title, description, link}) {
   return (
     <div className='col col--6 padding--md'>
       <div className={clsx(styles.NavigatingDocsFeature, 'padding--lg')}>
-        <Heading as="h3">{title}</Heading>
+        <Heading as="h3" className='text--semibold'>{title}</Heading>
         <p>{description}</p>
         <Link className='button button--outline button--primary' {...link.props} />
       </div>
@@ -148,15 +148,13 @@ export default function NavigatingTheDocs() {
 
   return (
     <section className='margin-vert--lg'>
-      <div className="container">
-          {partitionedBoxes.map((twoBoxes) => (
-            <div className='row'>
-              {twoBoxes.map((props, idx) => (
-                <NavigatingDocsFeature key={idx} {...props} />
-              ))}
-            </div>
+      {partitionedBoxes.map((twoBoxes) => (
+        <div className='row'>
+          {twoBoxes.map((props, idx) => (
+            <NavigatingDocsFeature key={idx} {...props} />
           ))}
-      </div>
+        </div>
+      ))}
     </section>
   )
 }
diff --git a/src/components/Homepage/WayfindingBoxes/index.tsx b/src/components/Homepage/WayfindingBoxes/index.tsx
@@ -118,27 +118,23 @@ const WayfindingWays: WayfindingItem[] = [
 function WayfindingFeature({image, title, description, link}) {
   return (
     <div className={clsx('col col--4')}>
-      <div className="padding-horiz--md">
-        <div>
-          <Link {...link.props} className={styles.boxIconLink}><img src={image} className={styles.boxIcon} role="img" /></Link>
-        </div>
-        <Heading as="h3">{title}</Heading>
-        <p>{description}</p>
-        <p className="margin-bottom--lg"><Link className="button button--outline button--primary" {...link.props} /></p>
+      <div>
+        <Link {...link.props} className={styles.boxIconLink}><img src={image} className={styles.boxIcon} role="img" /></Link>
       </div>
+      <Heading as="h3" className='text--semibold'>{title}</Heading>
+      <p>{description}</p>
+      <p className="margin-bottom--lg"><Link className="button button--outline button--primary" {...link.props} /></p>
     </div>
   );
 }
 
 export default function WayfindingBoxes() {
   return (
     <section className='margin-vert--lg'>
-      <div className="container">
-        <div className="row">
-          {WayfindingWays.map((props, idx) => (
-            <WayfindingFeature key={idx} {...props} />
-          ))}
-        </div>
+      <div className="row">
+        {WayfindingWays.map((props, idx) => (
+          <WayfindingFeature key={idx} {...props} />
+        ))}
       </div>
     </section>
   );