Fade memories list and prevent scroll

evwilliams · Jan 21, 2024 · 3020dea · 3020dea
1 parent 8e6bd87
commit 3020dea
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
   <title>Meditations</title>
 </head>
 
-<body>
+<body class="bg-white dark:bg-neutral-800">
   <div id="root"></div>
   <script type="module" src="/src/main.tsx"></script>
 </body>

diff --git a/src/App.tsx b/src/App.tsx
@@ -83,8 +83,8 @@ function App() {
   }
 
   return (
-    <div className="App flex h-dvh w-full flex-col items-center bg-neutral-50 align-top font-serif text-neutral-800 dark:bg-neutral-800 dark:text-neutral-200">
-      <div className="Content flex h-full w-full grow px-8 pb-2 pt-8 lg:px-96">
+    <div className="App flex h-dvh w-full flex-col items-center align-top font-serif text-neutral-800 dark:text-neutral-200">
+      <div className="Content flex h-full w-full grow overflow-hidden px-8 pb-2 pt-8 lg:px-96">
         {tabs[activeTab]}
       </div>
 
@@ -96,7 +96,7 @@ function App() {
           />
         )}
         <PlusIcon
-          className="h-12 w-12 text-neutral-800 dark:text-neutral-200"
+          className="h-12 w-12"
           onClick={plusPressed}
         />
         {hasMultipleNotes() && (

diff --git a/src/components/ThoughtList.tsx b/src/components/ThoughtList.tsx
@@ -17,7 +17,8 @@ const ThoughtList = ({
   ...rest
 }: ThoughtListProps) => {
   return (
-    <div {...rest}>
+    <div {...rest} className={`${rest.className} relative`}>
+      <div className="pointer-events-none absolute -inset-4 z-10 bg-gradient-to-t from-white from-5% dark:from-neutral-800" />
       <header className="text-2xl italic">Meditations</header>
       <ul className="space-y-2 py-4 text-sm md:text-lg">
         {thoughts?.map((thought) => (