cetirizine

commit cd24687d46b6b602b29f12f39a86624245624914
parent 845470ffdf0948632c66773ef3aace348d7a8f50
Author: MTRNord <mtrnord1@gmail.com>
Date:   Tue,  2 May 2023 13:49:25 +0200

make scrollbar nicer

Diffstat:
A
src/components/roomList/roomList.scss
 | 
18
++++++++++++++++++
M
src/components/roomList/roomList.tsx
 | 
4
++--

2 files changed, 20 insertions(+), 2 deletions(-)
diff --git a/src/components/roomList/roomList.scss b/src/components/roomList/roomList.scss
@@ -0,0 +1,17 @@
+.scrollbarSmall {
+    scrollbar-width: thin;
+}
+
+.scrollbarSmall::-webkit-scrollbar {
+    width: 8px;
+}
+
+.scrollbarSmall::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.scrollbarSmall::-webkit-scrollbar-thumb {
+    background-color: rgba(155, 155, 155, 0.5);
+    border-radius: 5px;
+    border: transparent;
+}
+\ No newline at end of file
diff --git a/src/components/roomList/roomList.tsx b/src/components/roomList/roomList.tsx
@@ -1,7 +1,7 @@
 import { FC, useState } from "react";
 import RoomListItem from "./roomListItem/roomListItem";
 import { ChevronDown, ChevronRight } from "lucide-react";
-
+import './roomList.scss';
 
 type Room = {
     /**
@@ -137,7 +137,7 @@ const RoomList: FC<RoomListProps> = ({ sections, rooms }: RoomListProps) => {
     const [activeRoom, setActiveRoom] = useState<string | undefined>(undefined);
 
     return (
-        <div className="flex flex-col gap-1 flex-1 p-2 min-w-[33ch] h-full overflow-y-auto overflow-x-hidden">
+        <div className="flex flex-col gap-1 flex-1 p-2 min-w-[33ch] h-full overflow-y-auto overflow-x-hidden scrollbarSmall">
             {
                 sections.map(section => {
                     return (