Update login page styling and sidebar collapse logo

src/components/layout/sidebar.tsx

@@ -5,6 +5,7 @@ import Link from "next/link"
 import { usePathname } from "next/navigation"
 import { motion, AnimatePresence } from "framer-motion"
 import { cn } from "@/lib/utils"
+import { SystemMonitor } from "./system-monitor"
 import { Button } from "@/components/ui/button"
 import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
@@ -20,7 +21,7 @@ import {
   Bot,
   Facebook,
 } from "lucide-react"
-import { COMPANY_NAME } from "@/lib/constants"
+
 import { useUser } from "@/providers/user-provider"
 import { useNotifications } from "@/providers/notification-provider"
 import { FacebookAccountsDialog } from "@/components/settings/facebook-accounts-dialog"
@@ -60,24 +61,11 @@ export function Sidebar({ collapsed, onToggle, mobileOpen, onMobileClose }: Side
       {/* Logo */}
       <div className={cn("flex h-16 items-center border-b border-sidebar-border px-4", collapsed ? "justify-center" : "justify-between")}>
         <Link href="/" className="flex items-center gap-3 overflow-hidden">
-          <img
-            src="/logo/CompanyLogo.png"
-            alt={COMPANY_NAME}
-            className="h-8 w-8 shrink-0 rounded-lg object-contain"
-          />
-          <AnimatePresence mode="wait">
-            {!collapsed && (
-              <motion.span
-                initial={{ opacity: 0, x: -10 }}
-                animate={{ opacity: 1, x: 0 }}
-                exit={{ opacity: 0, x: -10 }}
-                transition={{ duration: 0.15 }}
-                className="text-sm font-semibold whitespace-nowrap"
-              >
-                {COMPANY_NAME}
-              </motion.span>
-            )}
-          </AnimatePresence>
+          {collapsed ? (
+            <div className="bc-logo" style={{padding: "8px 3px", fontSize: "16px"}}>B<span className="accent">C</span></div>
+          ) : (
+            <div className="bc-logo">Black<span className="accent">Cipher</span></div>
+          )}
         </Link>
         {!collapsed && (
           <Button
@@ -196,6 +184,8 @@ export function Sidebar({ collapsed, onToggle, mobileOpen, onMobileClose }: Side
         </div>
       )}
 
+      <SystemMonitor collapsed={collapsed} />
+
       {/* User info */}
       <div className={cn("border-t border-sidebar-border p-3", collapsed && "flex justify-center")}>
         {collapsed ? (
@@ -222,7 +212,7 @@ export function Sidebar({ collapsed, onToggle, mobileOpen, onMobileClose }: Side
   return (
     <>
       {/* Desktop sidebar */}
-      <aside className="hidden lg:fixed lg:inset-y-0 lg:z-30 lg:flex">
+      <aside className="hidden lg:fixed lg:inset-y-0 lg:z-30 lg:flex border-r border-sidebar-border">
         {sidebarContent}
       </aside>
 
@@ -244,7 +234,7 @@ export function Sidebar({ collapsed, onToggle, mobileOpen, onMobileClose }: Side
               animate={{ x: 0 }}
               exit={{ x: -300 }}
               transition={{ type: "spring", damping: 30, stiffness: 300 }}
-              className="fixed inset-y-0 left-0 z-50 lg:hidden"
+              className="fixed inset-y-0 left-0 z-50 lg:hidden border-r border-sidebar-border"
             >
               {sidebarContent}
             </motion.aside>