feat: adjust separators in header and sidebar

apps/trading/components/header/header.tsx

@@ -18,7 +18,7 @@ export const Header = ({ title, children }: TradeMarketHeaderProps) => {
   return (
     <header className="lg:px-1">
       <div className={headerClasses}>
-        <div className="flex flex-col justify-center items-start pl-3 lg:pl-4 pt-2 xl:pb-2 pb-0 xl:border-r border-default xl:pr-4">
+        <div className="flex flex-col justify-center items-start pl-3 lg:pl-4 pt-2 xl:pb-2 pb-0">
           {title}
         </div>
         <div data-testid="header-summary" className="min-w-0">
@@ -72,7 +72,7 @@ export const HeaderTitle = ({ children }: { children: ReactNode }) => {
   return (
     <h1
       data-testid="header-title"
-      className="flex gap-4 items-center text-lg whitespace-nowrap"
+      className="flex gap-4 items-center text-lg whitespace-nowrap xl:pr-4 xl:border-r border-default"
     >
       {children}
     </h1>

apps/trading/components/sidebar/sidebar.tsx

@@ -158,7 +158,12 @@ const SidebarButton = ({
 };
 
 const SidebarDivider = () => {
-  return <div className="border-b border-default mx-2" />;
+  return (
+    <div
+      className="bg-vega-clight-600 dark:bg-vega-cdark-600 w-4 h-px"
+      role="separator"
+    />
+  );
 };
 
 export const SidebarContent = () => {