fix: responsive + dark mode fixes for collections

Author: danielgolden

src/components/HomepageCollection.js

@@ -2937,7 +2937,7 @@ const Footer = () => {
     <div className={styles.homepageCollection}>
       <h4 className={styles.title}>Instrumentation projects</h4>
       <p className={styles.description}>
-        Donec id elit non mi porta gravida at eget metus. Donec sed odio dui. <a href="#">Other highlighted projects</a>
+        Donec id elit non mi porta gravida at eget metus. Donec sed odio dui. <a href="/collections">Other highlighted projects</a>
       </p>
 
       <div className={`${styles.projectsContainer} ${projectsHovered && styles.projectsHovered}`} onMouseOver={() => {setProjectsHovered(true)}} onMouseOut={() => {setProjectsHovered(false)}}>

src/components/HomepageCollection.module.scss

@@ -162,8 +162,23 @@
 
 :global(.dark-mode) {
   .homepage-collection:before {
+    background: linear-gradient(0deg, rgba(0,0,0, 0) 23.26%, var(--color-neutrals-100));
+  }
 
-    background: linear-gradient(0deg, rgba(0,0,0, .2) 23.26%, var(--color-neutrals-100));
-
+  .projects-container {
+  
+    &:before,
+    &:after {
+      top: -10px;
+      background-image: url('../images/home-collection-mask-dark.png');
+    }
+  
+    &:after {
+      top: -15px;
+      left: inherit;
+      right: 0;
+      transform: rotateY(180deg) translateY(-19px);
+      filter: brightness(.97);
+    }
   }
 }

src/images/home-collection-mask-dark.png

@@ -95,19 +95,20 @@
     display: inline;
   }
 
-  .collection-listing:after {
-    content: "";
-    display: block;
-    width: 150px;
-    height: calc(100% + 25px);
-    position: absolute;
-    top: -1px;
-    right: -9px;
-    z-index: 1000;
-
-    
-    background: linear-gradient(270deg, #F4F5F5 34.6%, rgba(244, 245, 245, 0) 78.29%);
+  .collection-listing {
+    &:after {
+      content: "";
+      display: block;
+      width: 150px;
+      height: calc(100% + 25px);
+      position: absolute;
+      top: -1px;
+      right: -9px;
+      z-index: 1000; 
+      background: linear-gradient(270deg, var(--color-neutrals-100) 34.6%, rgba(244, 245, 245, 0) 78.29%);
+    }
   }
+  
 
   .page-heading {
     margin-bottom: 100px;
@@ -128,6 +129,12 @@
   }
 }
 
+.collection-project-count {
+  margin: 0 2px;
+  padding: 0 2px;
+  border-radius: 3px;
+}
+
 // ==============================================================
 // Responsive styles
 // ==============================================================
@@ -137,7 +144,23 @@
     padding: 0 28px;
   }    
 
-  // .collection-listing {}
+  .collections-page {
+    .collection-listing-header-section {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .collection-listing-header-section-heading {
+      display: block;
+      text-align: center;
+    }
+  
+    .collection-listing-header-section-description {
+      display: block;
+      text-align: center;
+      margin-bottom: 4px;
+    }
+  }  
 }
 
 @media screen and (max-width: 1024px) {
@@ -179,4 +202,20 @@
   .collection-listing-header-section-heading {
     margin-top: 20px;
   }
+
+  .collections-page .collection-listing:after {
+    display: none;
+  }
+
+  .collections-page div.collection-listing-container {
+    margin-top: 40px;
+
+    &:before {
+      transform: skewY(-2deg) translateY(-30px);
+    }
+  }
+
+  .collections-page .page-heading {
+    margin-bottom: 0px;
+  }
 }

src/pages/collection.module.scss

@@ -68,8 +68,8 @@ const CollectionPage = ({ data }) => {
                       Explore the open source repositories for New Relic agent technology
                     </p>
                   </div>
-                  <a href="#" className={styles.collectionsPageCollectionLink}>
-                    View all {collection[1].edges.length} projects 
+                  <a href={collection[0]} className={styles.collectionsPageCollectionLink}>
+                    View all <span className={styles.collectionProjectCount}>{collection[1].edges.length}</span> projects 
                     <ChevronRight />
                   </a>
                 </header>
@@ -84,7 +84,6 @@ const CollectionPage = ({ data }) => {
                         />
                       );
                     }
-
                   })}
                 </div>
               </div>