Improve Features section's layout (codesandbox#676)

* Update Features layout

* Remove unnecessary PureComponent

* Use explicit border-width

Author: donysukardi

packages/homepage/src/screens/home/Animation/Cubes.js

@@ -51,7 +51,7 @@ const SmallCube = styled(
 const OFFSETS = [84, 32, 54, 110];
 
 // eslint-disable-next-line react/no-multi-comp
-export default class Cubes extends React.PureComponent {
+export default class Cubes extends React.Component {
   els = {};
 
   constructor(props) {

packages/homepage/src/screens/home/ExtraFeatures/Feature.js

@@ -4,25 +4,43 @@ import styled from 'styled-components';
 import media from '../../../utils/media';
 
 const Container = styled.div`
-  display: flex;
-  flex-direction: column;
   position: relative;
-
-  align-items: center;
-  text-align: center;
-
   color: white;
+  padding: 1.5rem 1rem;
+  border: 0 solid rgba(255, 255, 255, 0.12);
+  border-top-width: 1px;
 
-  margin: 1rem;
+  &:first-child {
+    border-top-width: 0;
+  }
 
-  width: calc(25% - 2rem);
+  ${media.fromTablet`
+    width: calc(50%);
+    border-right-width: 1px;
 
-  ${media.tablet`
-    width: calc(50% - 2rem);
+    &:nth-child(-n+2) {
+      border-top-width: 0;
+    }
+  
+    &:nth-child(2n) {
+      border-right-width: 0;
+    }
   `};
 
-  ${media.phone`
-    width: 100%;
+  ${media.fromDesktop`
+    width: calc(25%);
+
+    &:nth-child(2n) {
+      border-right-width: 1px;
+    }
+    
+    &:nth-child(-n+4) {
+      border-top-width: 0;
+    }
+
+    &:nth-child(4n) {
+      border-right-width: 0;
+    }
   `};
 
   svg {
@@ -64,8 +82,8 @@ const Description = styled.div`
 
 const NewBadge = styled.div`
   position: absolute;
-  top: -0.9rem;
-  right: 5.2rem;
+  top: 1.25rem;
+  left: 3.6rem;
   padding: 0 5px;
   background-image: linear-gradient(
     45deg,
@@ -83,8 +101,8 @@ const NewBadge = styled.div`
 const PatronBadge = styled.a`
   display: block;
   position: absolute;
-  top: -0.9rem;
-  right: 4.2rem;
+  top: 1.25rem;
+  left: 3.6rem;
   padding: 0 5px;
   background-image: linear-gradient(-225deg, #ffc766 0%, #f6b053 100%);
 

packages/homepage/src/screens/home/ExtraFeatures/index.js

@@ -40,7 +40,7 @@ export default () => (
       <Centered horizontal>
         <Heading>There{"'"}s more</Heading>
         <SubHeading>
-          This was just the tip of the iceberg. There are many more things to
+          This is just the tip of the iceberg. There are many more things to
           explore, if you are missing anything you can always open an issue on{' '}
           <a
             style={{ color: 'white' }}

packages/homepage/src/utils/media.js

@@ -12,4 +12,16 @@ export default {
       ${css(...args)};
     }
   `,
+
+  fromTablet: (...args) => css`
+    @media (min-width: 660px) {
+      ${css(...args)};
+    }
+  `,
+
+  fromDesktop: (...args) => css`
+    @media (min-width: 1280px) {
+      ${css(...args)};
+    }
+  `,
 };