feat: some minor improvements

noodle-run · Sep 5, 2023 · 2d859e0 · 2d859e0
1 parent 7712903
commit 2d859e0
Show file tree

Hide file tree

Showing 5 changed files with 420 additions and 667 deletions.
diff --git a/apps/web/src/layouts/dashboard/SideMenuModules.tsx b/apps/web/src/layouts/dashboard/SideMenuModules.tsx
@@ -5,16 +5,16 @@ import { Icon } from '@/components/Icon';
 export const SideMenuModules = () => {
   return (
     <div className="mt-4">
-      <div className="flex items-center justify-between px-4">
+      <div className="flex min-w-[180px] items-center justify-between px-4">
         <Typography.P as="h3" className="text-xs">
           Modules
         </Typography.P>
         <Button type="button" variant="muted" size="icon" className="p-2">
           <Icon name="plus" size={16} />
         </Button>
       </div>
-      <div className="w-full">
-        <Typography.P className="w-[220px] px-4 pt-1 text-xs leading-4 opacity-50">
+      <div>
+        <Typography.P className="line-clamp-2 overflow-hidden px-4 pt-1 text-xs leading-4 opacity-50">
           Create modules to organize your study material.
         </Typography.P>
       </div>

diff --git a/apps/web/src/layouts/dashboard/index.tsx b/apps/web/src/layouts/dashboard/index.tsx
@@ -44,7 +44,7 @@ const DashboardLayout: FC<PropsWithChildren> = ({ children }) => {
         <FeedbackDialog isSideMenuExpanded={isSideMenuExpanded} />
       </motion.aside>
 
-      <div className="border-gray-3 dark:border-graydark-3 flex flex-1 flex-col overflow-scroll rounded-2xl border px-6 py-4">
+      <div className="border-gray-3 dark:border-graydark-3 bg-gray-1 dark:bg-graydark-1 z-50 flex flex-1 flex-col overflow-scroll rounded-2xl border px-6 py-4">
         {/* Top Navigation Bar */}
         <DashboardNavbar
           setSideMenuExpanded={setSideMenuExpanded}

diff --git a/packages/config/tailwind/package.json b/packages/config/tailwind/package.json
@@ -36,6 +36,7 @@
     "@noodle/tsconfig": "workspace:^",
     "@radix-ui/colors": "^2.1.0",
     "@savvywombat/tailwindcss-grid-areas": "^3.1.0",
+    "@tailwindcss/line-clamp": "^0.4.4",
     "autoprefixer": "^10.4.15",
     "tailwindcss-animate": "^1.0.7",
     "tailwindcss-radix-colors": "^0.5.1"

diff --git a/packages/config/tailwind/tailwind.config.ts b/packages/config/tailwind/tailwind.config.ts
@@ -36,6 +36,7 @@ const config = {
     require('tailwindcss-radix-colors'),
     require('tailwindcss-animate'),
     require('@savvywombat/tailwindcss-grid-areas'),
+    require('@tailwindcss/line-clamp'),
   ],
 } satisfies Config;