fix: replace motion/react imports with framer-motion + rounded content panel

- 4 files imported from 'motion/react' which was the removed 'motion' package.
  Replaced with 'framer-motion' (the package actually installed).
- Dashboard content area now has rounded corners, subtle border, and inset
  margin creating a "panel inside shell" visual separation from the sidebar.
This commit is contained in:
Usman Baig
2026-03-23 19:54:44 +01:00
parent a3c1af7c95
commit 6521b694f4
5 changed files with 7 additions and 6 deletions

View File

@@ -31,14 +31,15 @@ export default function DashboardShell({
const openMobile = useCallback(() => setMobileOpen(true), [])
return (
<div className="flex h-screen overflow-hidden">
<div className="flex h-screen overflow-hidden bg-neutral-950">
<Sidebar
siteId={siteId}
mobileOpen={mobileOpen}
onMobileClose={closeMobile}
onMobileOpen={openMobile}
/>
<div className="flex-1 flex flex-col min-w-0 overflow-hidden">
{/* Content panel — rounded on all corners with slight inset to separate from sidebar */}
<div className="flex-1 flex flex-col min-w-0 overflow-hidden my-2 mr-2 rounded-2xl bg-neutral-900 border border-neutral-800/60">
<ContentHeader onMobileMenuOpen={openMobile} />
<main className="flex-1 overflow-y-auto pt-4">
{children}

View File

@@ -1,6 +1,6 @@
"use client";
import { motion, useSpring, useTransform } from "motion/react";
import { motion, useSpring, useTransform } from "framer-motion";
import {
type CSSProperties,
type ReactNode,

View File

@@ -12,7 +12,7 @@ import {
motion,
useMotionTemplate,
useSpring,
} from "motion/react";
} from "framer-motion";
import {
Children,
createContext,

View File

@@ -9,7 +9,7 @@ import {
AnimatePresence,
motion,
useSpring,
} from "motion/react";
} from "framer-motion";
import {
Children,
createContext,

View File

@@ -1,6 +1,6 @@
"use client";
import { motion, useSpring, useTransform } from "motion/react";
import { motion, useSpring, useTransform } from "framer-motion";
import {
type CSSProperties,
type ReactNode,