update styles for scrollbar in feed container

Author: Roshanjossey

package.json

@@ -65,6 +65,7 @@
     "relay-compiler": "^13.0.2",
     "relay-compiler-language-typescript": "^15.0.1",
     "relay-config": "^12.0.1",
+    "tailwind-scrollbar": "^2.0.1",
     "tailwindcss": "^3.0.23",
     "typescript": "4.5.5"
   },

src/components/feed/Feed.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react'
 import { graphql, usePaginationFragment } from 'react-relay'
 import { Virtuoso } from 'react-virtuoso'
 import { FeedsQuery$key } from '../../queries/__generated__/FeedsQuery.graphql'
@@ -32,9 +31,9 @@ const Feed = ({ root }: FeedProps) => {
   )
 
   return (
-    <>
+    <div>
       <Virtuoso
-        className="min-h-screen virtuoso-container"
+        className="min-h-screen scrollbar-thin scrollbar-thumb-gray-400 dark:scrollbar-thumb-gray-700 scrollbar-track-gray-300 dark:scrollbar-track-gray-500"
         data={data.feeds.edges}
         endReached={loadNext}
         overscan={200}
@@ -44,15 +43,7 @@ const Feed = ({ root }: FeedProps) => {
           )
         }}
       />
-      <style jsx>
-        {`
-          // hide scrollbar
-          -webkit-scrollbar {
-            display: none;
-          }
-        `}
-      </style>
-    </>
+    </div>
   )
 }
 

src/components/feed/StoryPreview.tsx

@@ -32,7 +32,7 @@ const StoryPreview = ({ story }: StoryPreviewProps) => {
 
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
-      <div className="my-8 flex flex-col bg-white  dark:bg-dark-700 rounded-lg">
+      <div className="my-8 mr-2 flex flex-col bg-white  dark:bg-dark-700 rounded-lg">
         <div>
           {data.thumbnail ? (
             <img className="cover-image" src={data.thumbnail} alt="" />

src/pages/index.tsx

@@ -5,9 +5,6 @@ import { withRelay, RelayProps } from 'relay-nextjs'
 import { pages_UserQuery } from '../queries/__generated__/pages_UserQuery.graphql'
 import { getClientEnvironment } from '../lib/client_environment'
 import Card from '../components/Card'
-import RelevantIssues from '../components/issue/RelevantIssues'
-import IssuesFromLastRepo from '../components/issue/IssuesFromLastRepo'
-import IssuesFromRecentRepos from '../components/issue/IssuesFromRecentRepo'
 import Layout from '../components/Layout'
 import Login from '../components/Login'
 import Feed from '../components/feed/Feed'

tailwind.config.js

@@ -22,5 +22,5 @@ module.exports = {
     },
   },
   darkMode: 'class',
-  plugins: [require('@tailwindcss/typography')],
+  plugins: [require('@tailwindcss/typography'), require('tailwind-scrollbar')],
 }

yarn.lock

@@ -3034,6 +3034,11 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+tailwind-scrollbar@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/tailwind-scrollbar/-/tailwind-scrollbar-2.0.1.tgz#f08721173d513f1406a44601640b79726e3f9728"
+  integrity sha512-OcR7qHBbux4k+k6bWqnEQFYFooLK/F4dhkBz6nvswIoaA9ancZ5h20e0tyV7ifSWLDCUBtpG+1NHRA8HMRH/wg==
+
 tailwindcss@^3.0.23:
   version "3.0.23"
   resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.23.tgz"