From 9d1acc1639de8e9f963dbd192c50bf2eeabb55be Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Mon, 10 Jul 2023 18:04:58 +0100
Subject: [PATCH] feat: adjust separators in header and sidebar

---
 apps/trading/components/header/header.tsx   | 4 ++--
 apps/trading/components/sidebar/sidebar.tsx | 7 ++++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/trading/components/header/header.tsx b/apps/trading/components/header/header.tsx
index f78068c6b..507b5697a 100644
--- a/apps/trading/components/header/header.tsx
+++ b/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>
diff --git a/apps/trading/components/sidebar/sidebar.tsx b/apps/trading/components/sidebar/sidebar.tsx
index 6f27b2699..a292323c9 100644
--- a/apps/trading/components/sidebar/sidebar.tsx
+++ b/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 = () => {