From 37ea64b1f113598fd82e6fe23d854daf8605dc8d Mon Sep 17 00:00:00 2001
From: Felipe D'Abrantes <felidabrantes@gmail>
Date: Fri, 21 Apr 2023 22:32:09 +0100
Subject: [PATCH] Add shadows to the scrollable list

---
 .../src/components/questions/QuestionList.tsx            | 6 +++++-
 daily-thought-frontend/src/styles/Scrollbox.module.css   | 9 +++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 daily-thought-frontend/src/styles/Scrollbox.module.css

diff --git a/daily-thought-frontend/src/components/questions/QuestionList.tsx b/daily-thought-frontend/src/components/questions/QuestionList.tsx
index 6c74c962..049e02be 100644
--- a/daily-thought-frontend/src/components/questions/QuestionList.tsx
+++ b/daily-thought-frontend/src/components/questions/QuestionList.tsx
@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { QuestionRecord } from '@/hooks/useQuestions';
 import { TrashIcon } from '@heroicons/react/24/outline';
+import styles from '../../styles/Scrollbox.module.css';
 
 type QuestionListProps = {
   questions: QuestionRecord[];
@@ -9,7 +10,10 @@ type QuestionListProps = {
 const QuestionList: FC<QuestionListProps> = ({ questions }) => (
   <ul
     role="list"
-    className="flex flex-col min-h-min max-w-lg overflow-y-scroll divide-y divide-gray-100 "
+    className={
+      'flex flex-col min-h-min max-w-lg overflow-y-scroll divide-y divide-gray-100 mt-4 ' +
+      styles['scrollbox-shadows']
+    }
   >
     {questions.map((question: QuestionRecord) => (
       <li
diff --git a/daily-thought-frontend/src/styles/Scrollbox.module.css b/daily-thought-frontend/src/styles/Scrollbox.module.css
new file mode 100644
index 00000000..26c6b892
--- /dev/null
+++ b/daily-thought-frontend/src/styles/Scrollbox.module.css
@@ -0,0 +1,9 @@
+.scrollbox-shadows {
+  background: /* Shadow covers */
+  linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, /* Shadows */
+  radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
+  background-repeat: no-repeat;
+  background-color: white;
+  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+  background-attachment: local, local, scroll, scroll;
+}
-- 
GitLab