UI changes
This commit is contained in:
parent
a82e62b9b4
commit
9104721b51
@ -88,17 +88,17 @@ const SiteCard: React.FC<SiteCardProps> = ({ siteId, className = '', fallbackSta
|
||||
'N/A';
|
||||
|
||||
return (
|
||||
<div className={`bg-white p-4 rounded-lg shadow-md dark:bg-gray-800 dark:text-white-light flex flex-col space-y-2 ${className}`}>
|
||||
<div className={`bg-white p-4 rounded-lg shadow-md dark:bg-rtgray-800 dark:text-white-light flex flex-col space-y-2 ${className}`}>
|
||||
<h3 className="text-xl font-bold text-primary-600 dark:text-primary-400 border-b pb-2 mb-2">
|
||||
{project?.project_name || siteId}
|
||||
</h3>
|
||||
|
||||
{loading ? (
|
||||
<div className="animate-pulse space-y-2">
|
||||
<div className="h-4 w-24 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-4 w-48 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-4 w-40 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-4 w-36 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-4 w-24 bg-rtgray-200 dark:bg-rtgray-700 rounded" />
|
||||
<div className="h-4 w-48 bg-rtgray-200 dark:bg-rtgray-700 rounded" />
|
||||
<div className="h-4 w-40 bg-rtgray-200 dark:bg-rtgray-700 rounded" />
|
||||
<div className="h-4 w-36 bg-rtgray-200 dark:bg-rtgray-700 rounded" />
|
||||
</div>
|
||||
) : err ? (
|
||||
<div className="text-red-500 text-sm">Failed to load CRM: {err}</div>
|
||||
|
||||
@ -38,7 +38,7 @@ const Dropdown = (props: DropdownProps, forwardedRef: any) => {
|
||||
useImperativeHandle(forwardedRef, () => ({ close: () => setVisible(false) }));
|
||||
|
||||
const defaultButton = (
|
||||
<span className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700" />
|
||||
<span className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-gray-200 dark:bg-rtgray-700" />
|
||||
);
|
||||
|
||||
return (
|
||||
@ -59,7 +59,7 @@ const Dropdown = (props: DropdownProps, forwardedRef: any) => {
|
||||
className="z-50"
|
||||
>
|
||||
{visible && (
|
||||
<div className={props.panelClassName ?? 'rounded-lg bg-white dark:bg-neutral-900 shadow-lg ring-1 ring-black/5'}>
|
||||
<div className={props.panelClassName ?? 'rounded-lg bg-white dark:bg-rtgray-700 shadow-lg ring-1 ring-black/5'}>
|
||||
{props.children}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -4,6 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
|
||||
import Link from 'next/link';
|
||||
import { IRootState } from '@/store';
|
||||
import { toggleTheme, toggleSidebar, toggleRTL } from '@/store/themeConfigSlice';
|
||||
import Image from 'next/image';
|
||||
import Dropdown from '@/components/dropdown';
|
||||
import IconMenu from '@/components/icon/icon-menu';
|
||||
import IconSun from '@/components/icon/icon-sun';
|
||||
@ -82,20 +83,26 @@ useEffect(() => {
|
||||
<div className="relative flex w-full items-center bg-white px-5 py-2.5 dark:bg-rtgray-900">
|
||||
{/* Logo */}
|
||||
<div className="horizontal-logo flex items-center justify-between ltr:mr-2 rtl:ml-2 lg:hidden">
|
||||
<Link href="/" className="main-logo flex shrink-0 items-center">
|
||||
<img className="inline w-8" src="/assets/images/newfulllogo.png" alt="logo" />
|
||||
<span className="hidden text-2xl font-semibold ltr:ml-1.5 dark:text-white-light md:inline">
|
||||
Rooftop Energy
|
||||
</span>
|
||||
</Link>
|
||||
<div className="relative h-10 w-32 sm:h-11 sm:w-36 md:h-12 md:w-27 shrink-0 max-h-12">
|
||||
<Image
|
||||
src="/assets/images/newfulllogo.png"
|
||||
alt="logo"
|
||||
fill
|
||||
className="object-cover"
|
||||
priority
|
||||
sizes="(max-width: 640px) 8rem, (max-width: 768px) 9rem, (max-width: 1024px) 10rem, 10rem"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => dispatch(toggleSidebar())}
|
||||
className="collapse-icon flex p-2 rounded-full hover:bg-rtgray-200 dark:text-white dark:hover:bg-rtgray-700"
|
||||
type="button"
|
||||
onClick={() => dispatch(toggleSidebar())}
|
||||
className="collapse-icon flex p-2 rounded-full hover:bg-rtgray-200 dark:text-white dark:hover:bg-rtgray-700"
|
||||
>
|
||||
<IconMenu className="h-6 w-6" />
|
||||
<IconMenu className="h-6 w-6" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Right-side actions */}
|
||||
<div className="flex items-center justify-end space-x-1.5 ltr:ml-auto rtl:mr-auto rtl:space-x-reverse dark:text-[#d0d2d6] lg:space-x-2">
|
||||
@ -121,17 +128,17 @@ useEffect(() => {
|
||||
{loadingUser ? (
|
||||
<div className="h-9 w-9 rounded-full animate-pulse bg-gray-300 dark:bg-rtgray-800" />
|
||||
) : user ? (
|
||||
<Dropdown
|
||||
placement={isRtl ? 'bottom-start' : 'bottom-end'}
|
||||
btnClassName="relative group block"
|
||||
panelClassName="rounded-lg shadow-lg border border-white/10 bg-gray-100 dark:bg-gray-800 p-2" // ✅
|
||||
button={
|
||||
<div className="h-9 w-9 rounded-full bg-gray-200 dark:bg-rtgray-800 flex items-center justify-center group-hover:bg-rtgray-300 dark:group-hover:bg-rtgray-700">
|
||||
<IconUser className="h-5 w-5 text-gray-600 dark:text-gray-300" />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<ul className="w-[230px] font-semibold text-dark dark:text-white-dark bg-transparent"> {/* make sure this stays transparent */}
|
||||
<Dropdown
|
||||
placement={isRtl ? 'bottom-start' : 'bottom-end'}
|
||||
btnClassName="relative group block"
|
||||
panelClassName="rounded-lg shadow-lg border border-white/10 bg-rtgray-100 dark:bg-rtgray-800 p-2" // ✅
|
||||
button={
|
||||
<div className="h-9 w-9 rounded-full bg-rtgray-200 dark:bg-rtgray-800 flex items-center justify-center group-hover:bg-rtgray-300 dark:group-hover:bg-rtgray-700">
|
||||
<IconUser className="h-5 w-5 text-gray-600 dark:text-gray-300" />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<ul className="w-[230px] font-semibold text-dark"> {/* make sure this stays transparent */}
|
||||
<li className="px-4 py-4 flex items-center">
|
||||
<div className="truncate ltr:pl-1.5 rtl:pr-4">
|
||||
<h4 className="text-sm text-left">{user.email}</h4>
|
||||
@ -142,11 +149,6 @@ useEffect(() => {
|
||||
<IconUser className="h-4.5 w-4.5 mr-2" /> Profile
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/apps/mailbox" className="dark:hover:text-white">
|
||||
<IconMail className="h-4.5 w-4.5 mr-2" /> Inbox
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/auth/boxed-lockscreen" className="dark:hover:text-white">
|
||||
<IconLockDots className="h-4.5 w-4.5 mr-2" /> Lock Screen
|
||||
|
||||
@ -67,16 +67,15 @@ const Sidebar = () => {
|
||||
<nav
|
||||
className={`sidebar fixed bottom-0 top-0 z-50 h-full min-h-screen w-[260px] shadow-[5px_0_25px_0_rgba(94,92,154,0.1)] transition-all duration-300 ${semidark ? 'text-white-dark' : ''}`}
|
||||
>
|
||||
<div className="h-full bg-[white] dark:bg-black">
|
||||
<div className="flex items-center justify-between px-4 py-3">
|
||||
<div className="h-full bg-[white] dark:bg-rtgray-900">
|
||||
<div className="flex items-center justify-between px-4 pt-4">
|
||||
<Link href="/" className="main-logo flex shrink-0 items-center">
|
||||
<img className="ml-[5px] w-8 flex-none" src="/assets/images/newlogo.png" alt="logo" />
|
||||
<span className="align-middle text-2xl font-semibold ltr:ml-1.5 rtl:mr-1.5 dark:text-white-light lg:inline">Rooftop Energy</span>
|
||||
<img className="max-w-[180px] h-auto flex" src="/assets/images/newfulllogo.png" alt="logo" />
|
||||
</Link>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="collapse-icon flex h-8 w-8 items-center rounded-full transition duration-300 hover:bg-gray-500/10 rtl:rotate-180 dark:text-white-light dark:hover:bg-dark-light/10"
|
||||
className="collapse-icon flex h-8 w-8 items-center rounded-full transition duration-300 hover:bg-rtgray-500/10 rtl:rotate-180 dark:text-white-light dark:hover:bg-rtgray-900/10"
|
||||
onClick={() => dispatch(toggleSidebar())}
|
||||
>
|
||||
<IconCaretsDown className="m-auto rotate-90" />
|
||||
@ -84,7 +83,7 @@ const Sidebar = () => {
|
||||
</div>
|
||||
<PerfectScrollbar className="relative h-[calc(100vh-80px)] ">
|
||||
<ul className="relative space-y-0.5 p-4 py-0 font-md">
|
||||
<h2 className="-mx-4 mb-1 flex items-center bg-white-light/30 px-7 py-3 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08] dark:text-white dark:active:text-white">
|
||||
<h2 className="-mx-4 mb-1 flex items-center bg-white-light/30 px-7 pb-3 pt-2 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08] dark:text-white dark:active:text-white">
|
||||
<IconMinus className="hidden h-5 w-4 flex-none" />
|
||||
<span>Customer</span>
|
||||
</h2>
|
||||
@ -156,6 +155,7 @@ const Sidebar = () => {
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
{/*}
|
||||
<h2 className="-mx-4 mb-1 flex items-center px-7 py-3 font-extrabold uppercase dark:bg-opacity-[0.08] dark:group-hover:text-white dark:text-white">
|
||||
<IconMinus className="hidden h-5 w-4 flex-none" />
|
||||
<span>Providers</span>
|
||||
@ -239,7 +239,7 @@ const Sidebar = () => {
|
||||
</ul>
|
||||
</AnimateHeight>
|
||||
</li>
|
||||
|
||||
*/}
|
||||
|
||||
</ul>
|
||||
</PerfectScrollbar>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 91 KiB |
Loading…
x
Reference in New Issue
Block a user