diff --git a/daily-thought-frontend/src/components/questions/QuestionList.tsx b/daily-thought-frontend/src/components/questions/QuestionList.tsx index 6c74c962f759c4ae0e9fd0dbf51e8da148e21701..049e02bec1c4796b5cfb9cb96c8c17b219c3f022 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 0000000000000000000000000000000000000000..26c6b89221e7cd5b2d714f602fd19c829f36159b --- /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; +}