Initial tweaks (#7)

* chore: remove unneeded media category

* refactor: better timing on the debounce

* style: removed border on catagory selector

* style: no horizontal scroll on desktop

* style: margin bottom for dapp list

* fix: better solution for dapp list margins

* style: margin tweaks

src/common/components/DappListItem/DappListItem.module.scss

@@ -4,7 +4,7 @@
   font-family: $font;
   background: $background;
   display: flex;
-  margin: calculateRem(11) calculateRem(16) 0 calculateRem(16);
+  margin: 0 calculateRem(16) calculateRem(11) calculateRem(16);
 }
 
 .header {

src/common/data/categories.js

@@ -1,8 +1,7 @@
 export const EXCHANGES = 'EXCHANGES'
 export const MARKETPLACES = 'MARKETPLACES'
+export const COLLECTIBLES = 'COLLECTIBLES'
 export const GAMES = 'GAMES'
 export const SOCIAL_NETWORKS = 'SOCIAL_NETWORKS'
-export const MEDIA = 'MEDIA'
 export const UTILITIES = 'UTILITIES'
 export const OTHER = 'OTHER'
-export const COLLECTIBLES = 'COLLECTIBLES'

src/common/data/dapps.js

@@ -280,7 +280,7 @@ const Dapps = [
     url: 'http://livepeer.tv/',
     description: 'Decentralized video broadcasting',
     image: null,
-    category: Categories.MEDIA,
+    category: Categories.SOCIAL_NETWORKS,
     dateAdded: null,
   },
   {

src/common/utils/categories.test.js

@@ -11,6 +11,10 @@ describe('categories', () => {
         key: 'MARKETPLACES',
         value: 'Marketplaces',
       },
+      {
+        key: 'COLLECTIBLES',
+        value: 'Collectibles',
+      },
       {
         key: 'GAMES',
         value: 'Games',
@@ -19,10 +23,6 @@ describe('categories', () => {
         key: 'SOCIAL_NETWORKS',
         value: 'Social Networks',
       },
-      {
-        key: 'MEDIA',
-        value: 'Media',
-      },
       {
         key: 'UTILITIES',
         value: 'Utilities',
@@ -31,10 +31,6 @@ describe('categories', () => {
         key: 'OTHER',
         value: 'Other',
       },
-      {
-        key: 'COLLECTIBLES',
-        value: 'Collectibles',
-      },
     ])
   })
 })

src/modules/CategorySelector/CategorySelector.module.scss

@@ -70,6 +70,7 @@
   width: calc(100% - 32px);
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1),
     0px 2px 6px rgba(136, 122, 249, 0.2);
+  border: none;
   border-radius: 8px;
   color: $background;
   font-family: $font;

src/modules/Dapps/Dapps.jsx

@@ -18,7 +18,7 @@ class Dapps extends React.Component {
 
   componentDidMount() {
     this.scanHeaderPositions()
-    this.boundScroll = debounce(this.handleScroll.bind(this), 200)
+    this.boundScroll = debounce(this.handleScroll.bind(this), 50)
     window.addEventListener('scroll', this.boundScroll)
   }
 

src/modules/Dapps/Dapps.module.scss

@@ -2,4 +2,5 @@
 
 .list {
   margin-top: calculateRem(50);
+  margin-bottom: calculateRem(20);
 }

src/modules/Filtered/Filtered.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { DappListModel } from '../../common/utils/models'
 import CategorySelector from '../CategorySelector'
 import DappList from '../../common/components/DappList'
+import styles from './Filtered.module.scss'
 
 const Filtered = props => {
   const { dapps } = props
@@ -9,7 +10,9 @@ const Filtered = props => {
   return (
     <>
       <CategorySelector />
-      <DappList dapps={dapps} />
+      <div className={styles.list}>
+        <DappList dapps={dapps} />
+      </div>
     </>
   )
 }

src/modules/Filtered/Filtered.module.scss

@@ -0,0 +1,5 @@
+@import '../../common/styles/variables';
+
+.list {
+  margin-bottom: calculateRem(20);
+}

src/modules/RecentlyAdded/RecentlyAdded.module.scss

@@ -4,7 +4,7 @@
   font-family: $font;
   font-size: calculateRem(17);
   margin-left: calculateRem(15);
-  margin-bottom: 0;
+  margin-bottom: calculateRem(10);
 }
 
 .grid {
@@ -14,8 +14,11 @@
   grid-template-rows: 1fr 1fr 1fr;
   overflow-x: scroll;
   overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
 
   @media (min-width: $desktop) {
-    grid-auto-columns: calc(30%);
+    grid-auto-flow: row;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    overflow-x: hidden;
   }
 }