feat: ✨ notes styling

app/components/common/NotesPopup.tsx

@@ -19,19 +19,19 @@ export default function NotesPopup() {
   }, []);
 
   return (
-    <div className="absolute top-o z-[60] right-0 w-[95.8%] h-full pointer-events-none">
+    <div className="relative top-0 z-[60] right-0 pointer-events-none">
       <button
         className={`pointer-events-auto bg-light-secondary border-2  border-light-accent border-r-0 absolute  w-10 h-10 rounded-l-full ${
           isVisible
             ? "rounded-full top-10 right-10 z-50"
-            : "right-48 top-32 z-10"
+            : "right-0 top-32 z-10"
         }`}
         onClick={() => setIsVisible(!isVisible)}
-      ></button>
+      />
       <div
-        className={`pointer-events-auto transition-all duration-200 absolute bg-light-primary right-0 bottom-0  overflow-hidden ${
+        className={`absolute right-0 top-0 pointer-events-auto w-full transition-all duration-200 bg-white overflow-hidden ${
           isVisible
-            ? "w-full h-full px-4 border-l-2 p-10 border-light-secondary flex flex-col"
+            ? "w-[60rem] h-full px-4 prose border-l-2 p-10 border-light-secondary flex flex-col"
             : "w-0 hidden h-0"
         }`}
       >

app/sheets/[id]/layout.tsx

@@ -61,7 +61,7 @@ export default function Page({ children, params }: LayoutArgs) {
     <div className="flex w-full h-full">
       <div className="flex flex-col w-full">
         <section className="w-full h-full flex">
-          <div className="w-full h-full flex">
+          <div className="w-full h-full flex relative">
             <ClassSideView />
 
             <div className="h-full w-full flex flex-col">

package.json

@@ -30,6 +30,7 @@
     "zustand": "^4.3.3"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.9",
     "@types/lodash": "^4.14.191",
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.21",

tailwind.config.js

@@ -26,5 +26,5 @@ module.exports = {
       },
     },
   },
-  plugins: [],
+  plugins: [require("@tailwindcss/typography")],
 };