feat: add custom scrollbars

web/package.json

@@ -25,6 +25,7 @@
     "js-cookie": "^3.0.5",
     "next": "13.2.4",
     "react": "18.2.0",
+    "react-custom-scrollbars-2": "^4.5.0",
     "react-dom": "18.2.0",
     "react-query": "^3.39.2",
     "starknet": "https://github.com/broody/starknet.js#551eece1857ecf8f81671ca87afc198de5ef2a5a",

web/src/components/Scrollbar.tsx

@@ -0,0 +1,38 @@
+import React, { ReactNode } from "react";
+import { Scrollbars } from "react-custom-scrollbars-2";
+import { StyleProps } from "@chakra-ui/react";
+
+
+type ScrollbarProps = {
+  autoHeightMin? : string,
+  autoHeightMax? : string,
+}
+export const Scrollbar = ({
+  children,
+  ...props
+}: { children: ReactNode } & ScrollbarProps) => {
+  return (
+    <Scrollbars
+      autoHeight
+      hideTracksWhenNotNeeded
+      className="scrollbar-container"
+      renderTrackHorizontal={(props) => (
+        <div {...props} className="scrollbar-horizontal" />
+      )}
+      renderTrackVertical={(props) => (
+        <div {...props} className="scrollbar-vertical" />
+      )}
+      renderThumbHorizontal={(props) => (
+        <div {...props} className="thumb-horizontal" />
+      )}
+      renderThumbVertical={(props) => (
+        <div {...props} className="thumb-vertical" />
+      )}
+      renderView={(props) => <div {...props} className="scrollbar-view" />}
+      universal
+      {...props}
+    >
+      {children}
+    </Scrollbars>
+  );
+};

web/src/pages/chat.tsx

@@ -1,5 +1,6 @@
 import { ChatEvent, ChatInput } from "@/components";
 import Layout from "@/components/Layout";
+import { Scrollbar } from "@/components/Scrollbar";
 import { AvatarName } from "@/components/avatar/avatars";
 import { Box, Text, VStack } from "@chakra-ui/react";
 import { useState } from "react";
@@ -78,23 +79,25 @@ export default function Chat() {
   };
 
   return (
-    <Layout title="The Wire" imageSrc="url('/images/pager.gif');">
-      <VStack spacing="16px">
-        {messages.length > 0 ? (
-          messages.map((message, index) => (
-            <ChatEvent
-              connectedUser={message.connectedUser}
-              type={message.type}
-              user={message.user}
-              key={index}
-            >
-              {message.text}
-            </ChatEvent>
-          ))
-        ) : (
-          <Text color="neon.500">Its a little lonely in here...</Text>
-        )}
-      </VStack>
+    <Layout title="The Wire" imageSrc="/images/pager.gif">
+      <Scrollbar autoHeightMin="70vh">
+        <VStack spacing="16px" height="100%">
+          {messages.length > 0 ? (
+            messages.map((message, index) => (
+              <ChatEvent
+                connectedUser={message.connectedUser}
+                type={message.type}
+                user={message.user}
+                key={index}
+              >
+                {message.text}
+              </ChatEvent>
+            ))
+          ) : (
+            <Text color="neon.500">Its a little lonely in here...</Text>
+          )}
+        </VStack>
+      </Scrollbar>
       <Box w="100%" p="24px">
         <ChatInput
           value={messageValue}

web/src/theme/styles.ts

@@ -6,6 +6,50 @@ import { generatePixelBorderPath } from "@/utils/ui";
 
 import colors from "./colors";
 
+const scrollbarStyle = {
+  ".scrollbar-view": {
+    overflow: "auto !important",
+    marginRight: "-1px !important",
+    marginBottom: "-1px !important",
+    paddingRight: "10px",
+    paddingBottom: "10px",
+  },
+  ".scrollbar-container": {
+    height: "100%",
+    width: "100%",
+
+  },
+  ".scrollbar-vertical": {
+    height: '100%',
+    width: "16px !important",
+    top: 0,
+    right: 0,
+    bg: "neon.900",
+    border: "solid 2px",
+    borderColor: "neon.300",
+    cursor: "pointer"
+
+  },
+  ".scrollbar-horizontal": {
+    width: '100%',
+    height: "16px  !important",
+    bottom: 0,
+    left: 0,
+    bg: "neon.900",
+    border: "solid 2px",
+    borderColor: "neon.300",
+    cursor: "pointer"
+
+  },
+  ".thumb-vertical": {
+    bg: "neon.300",
+  },
+  ".thumb-horizontal": {
+    bg: "neon.300",
+
+  },
+}
+
 //global styles
 export const styles = {
   global: {
@@ -16,9 +60,11 @@ export const styles = {
       letterSpacing: "0.04em",
       WebkitTapHighlightColor: "transparent",
     },
+    ...scrollbarStyle,
   },
 };
 
+
 // applied layerStyles below and also chakra's Card component
 export const cardStyle = {
   position: "relative",

web/yarn.lock

@@ -2444,6 +2444,11 @@ acorn@^8.4.1, acorn@^8.8.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.2.tgz#1b2f25db02af965399b9776b0c2c391276d37c4a"
   integrity sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==
 
+[email protected]:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/add-px-to-style/-/add-px-to-style-1.0.0.tgz#d0c135441fa8014a8137904531096f67f28f263a"
+  integrity sha512-YMyxSlXpPjD8uWekCQGuN40lV4bnZagUwqa2m/uFv1z/tNImSk9fnXVMUI5qwME/zzI3MMQRvjZ+69zyfSSyew==
+
 agent-base@^7.0.2, agent-base@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-7.1.0.tgz#536802b76bc0b34aa50195eb2442276d613e3434"
@@ -3234,6 +3239,15 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-css@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/dom-css/-/dom-css-2.1.0.tgz#fdbc2d5a015d0a3e1872e11472bbd0e7b9e6a202"
+  integrity sha512-w9kU7FAbaSh3QKijL6n59ofAhkkmMJ31GclJIz/vyQdjogfyxcB6Zf8CZyibOERI5o0Hxz30VmJS7+7r5fEj2Q==
+  dependencies:
+    add-px-to-style "1.0.0"
+    prefix-style "2.0.1"
+    to-camel-case "1.0.0"
+
 dot-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
@@ -5125,6 +5139,11 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+  integrity sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==
+
 picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
@@ -5144,6 +5163,11 @@ [email protected]:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+[email protected]:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/prefix-style/-/prefix-style-2.0.1.tgz#66bba9a870cfda308a5dc20e85e9120932c95a06"
+  integrity sha512-gdr1MBNVT0drzTq95CbSNdsrBDoHGlb2aDJP/FoY+1e+jSDPOb1Cv554gH2MGiSr2WTcXi/zu+NaFzfcHQkfBQ==
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -5161,7 +5185,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.6.2, prop-types@^15.8.1:
+prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -5197,13 +5221,29 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+raf@^3.1.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
+  dependencies:
+    performance-now "^2.1.0"
+
 react-clientside-effect@^1.2.6:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz#29f9b14e944a376b03fb650eed2a754dd128ea3a"
   integrity sha512-XGGGRQAKY+q25Lz9a/4EPqom7WRjz3z9R2k4jhVKA/puQFH/5Nt27vFZYql4m4NVNdUvX8PS3O7r/Zzm7cjUlg==
   dependencies:
     "@babel/runtime" "^7.12.13"
 
+react-custom-scrollbars-2@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/react-custom-scrollbars-2/-/react-custom-scrollbars-2-4.5.0.tgz#cff18e7368bce9d570aea0be780045eda392c745"
+  integrity sha512-/z0nWAeXfMDr4+OXReTpYd1Atq9kkn4oI3qxq3iMXGQx1EEfwETSqB8HTAvg1X7dEqcCachbny1DRNGlqX5bDQ==
+  dependencies:
+    dom-css "^2.0.0"
+    prop-types "^15.5.10"
+    raf "^3.1.0"
+
 [email protected]:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
@@ -5770,18 +5810,37 @@ tmp@^0.0.33:
   dependencies:
     os-tmpdir "~1.0.2"
 
+[email protected]:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/to-camel-case/-/to-camel-case-1.0.0.tgz#1a56054b2f9d696298ce66a60897322b6f423e46"
+  integrity sha512-nD8pQi5H34kyu1QDMFjzEIYqk0xa9Alt6ZfrdEMuHCFOfTLhDG5pgTu/aAM9Wt9lXILwlXmWP43b8sav0GNE8Q==
+  dependencies:
+    to-space-case "^1.0.0"
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
   integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==
 
+to-no-case@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/to-no-case/-/to-no-case-1.0.2.tgz#c722907164ef6b178132c8e69930212d1b4aa16a"
+  integrity sha512-Z3g735FxuZY8rodxV4gH7LxClE4H0hTIyHNIHdk+vpQxjLm0cwnKXq/OFVZ76SOQmto7txVcwSCwkU5kqp+FKg==
+
 to-regex-range@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
   integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
   dependencies:
     is-number "^7.0.0"
 
+to-space-case@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/to-space-case/-/to-space-case-1.0.0.tgz#b052daafb1b2b29dc770cea0163e5ec0ebc9fc17"
+  integrity sha512-rLdvwXZ39VOn1IxGL3V6ZstoTbwLRckQmn/U8ZDLuWwIXNpuZDhQ3AiRUlhTbOXFVE9C+dR51wM0CBDhk31VcA==
+  dependencies:
+    to-no-case "^1.0.0"
+
 toggle-selection@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"