Merge pull request #141 from TowerOneka/style-fixes

Style fixes home page
NilFoundation · Dec 15, 2023 · ac03b36 · ac03b36
2 parents 763184f + 79a34bf
commit ac03b36
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 11 deletions.
diff --git a/site/src/components/common/HeadingSection/HeadingSection.tsx b/site/src/components/common/HeadingSection/HeadingSection.tsx
@@ -8,7 +8,13 @@ import { headingIcons } from './data'
 
 import s from './HeadingSection.module.scss'
 
-function HeadingSection({ className, title, description, socials }: InferProps<typeof HeadingSection.propTypes>) {
+function HeadingSection({
+  className,
+  descriptionClassName,
+  title,
+  description,
+  socials,
+}: InferProps<typeof HeadingSection.propTypes>) {
   const getIcons = useMemo(
     () =>
       headingIcons[socials as keyof typeof headingIcons]?.map((el) => (
@@ -20,14 +26,15 @@ function HeadingSection({ className, title, description, socials }: InferProps<t
   return (
     <div className={cx(s.root, className)}>
       <h2 className={s.title}>{title}</h2>
-      {description && <p className={s.description}>{description}</p>}
+      {description && <p className={cx(s.description, descriptionClassName)}>{description}</p>}
       {socials && <div className={s.icons}>{getIcons}</div>}
     </div>
   )
 }
 
 HeadingSection.propTypes = {
   className: string,
+  descriptionClassName: string,
   title: string.isRequired,
   description: string,
   socials: oneOf(['community', 'corporate']),

diff --git a/site/src/components/pages/Home/ZkProof/ZkProof.module.scss b/site/src/components/pages/Home/ZkProof/ZkProof.module.scss
@@ -21,7 +21,6 @@
   padding-bottom: size($spacing64);
 
   @include mobile {
-    padding-bottom: 0;
     padding-top: size($spacing48);
   }
 }
@@ -78,9 +77,13 @@
 .box {
   &:not(:last-child) {
     margin-bottom: size($spacing64);
+
+    @include mobile {
+      margin-bottom: size($spacing24);
+    }
   }
 
-  @include mobile {
-    margin-bottom: unset;
+  &:last-of-type {
+    margin-bottom: 0;
   }
 }
diff --git a/site/src/components/pages/ZkSharding/Cherries/Cherries.module.scss b/site/src/components/pages/ZkSharding/Cherries/Cherries.module.scss
@@ -138,6 +138,12 @@
   }
 }
 
+.headingDescription {
+  @include mobile {
+    width: auto;
+  }
+}
+
 .rightHeader {
   display: flex;
 

diff --git a/site/src/components/pages/ZkSharding/Cherries/Cherries.tsx b/site/src/components/pages/ZkSharding/Cherries/Cherries.tsx
@@ -21,7 +21,12 @@ const Cherries = ({ data: { title, description, content }, className }: Props) =
     <div className={cx(s.root, className)}>
       <div className={s.left}>
         <WhiteRectangle />
-        <HeadingSection className={s.heading} title={title} description={description} />
+        <HeadingSection
+          className={s.heading}
+          descriptionClassName={s.headingDescription}
+          title={title}
+          description={description}
+        />
         {!isMobile && <WhiteRectangle />}
       </div>
 

diff --git a/site/src/components/pages/ZkSharding/More/More.module.scss b/site/src/components/pages/ZkSharding/More/More.module.scss
@@ -111,10 +111,6 @@
   align-items: center;
 }
 
-.description {
-  color: $grey;
-}
-
 .heading {
   min-height: unset;
 
@@ -145,6 +141,12 @@
   }
 }
 
+.description {
+  @include mobile {
+    width: auto;
+  }
+}
+
 .list {
   display: flex;
   flex-wrap: wrap;

diff --git a/site/src/components/pages/ZkSharding/More/More.tsx b/site/src/components/pages/ZkSharding/More/More.tsx
@@ -23,7 +23,12 @@ const More = ({ data: { title, description, contentFooter, footer }, className }
     <div className={cx(s.root, className)}>
       <div className={s.left}>
         <WhiteRectangle />
-        <HeadingSection className={s.heading} title={title} description={description} />
+        <HeadingSection
+          className={s.heading}
+          descriptionClassName={s.description}
+          title={title}
+          description={description}
+        />
         {!isMobile && <WhiteRectangle />}
       </div>