From 511b700d017c9c11c8b92f1b016cdae65b7be954 Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Mon, 10 Jul 2023 17:35:44 +0100
Subject: [PATCH] feat: adjust sidebar layout

---
 apps/trading/components/node-health/node-health.tsx | 2 +-
 apps/trading/components/sidebar/sidebar.tsx         | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/trading/components/node-health/node-health.tsx b/apps/trading/components/node-health/node-health.tsx
index fdb5b1aad..60db227a3 100644
--- a/apps/trading/components/node-health/node-health.tsx
+++ b/apps/trading/components/node-health/node-health.tsx
@@ -41,7 +41,7 @@ export const NodeHealthContainer = () => {
       sideOffset={10}
     >
       <button
-        className="flex justify-center items-center py-3 rounded hover:bg-vega-light-200 hover:dark:bg-vega-dark-200"
+        className="flex justify-center items-center p-2 rounded hover:bg-vega-light-200 hover:dark:bg-vega-dark-200"
         onClick={() => setNodeSwitcher(true)}
         data-testid="node-health-trigger"
       >
diff --git a/apps/trading/components/sidebar/sidebar.tsx b/apps/trading/components/sidebar/sidebar.tsx
index 67b8cd8b6..6f27b2699 100644
--- a/apps/trading/components/sidebar/sidebar.tsx
+++ b/apps/trading/components/sidebar/sidebar.tsx
@@ -57,7 +57,7 @@ export const Sidebar = () => {
           tooltip={t('Settings')}
         />
       </div>
-      <nav className="flex flex-col items-stretch gap-2 p-1">
+      <nav className="flex flex-col items-center gap-4 p-1">
         {/* sidebar options that always show */}
         <SidebarButton
           view={ViewType.Deposit}
@@ -106,7 +106,7 @@ export const Sidebar = () => {
           />
         </Routes>
       </nav>
-      <nav className="mt-auto flex flex-col items-stretch gap-2 p-1">
+      <nav className="mt-auto flex flex-col items-center gap-4 p-1">
         <NodeHealthContainer />
       </nav>
     </div>
@@ -126,7 +126,7 @@ const SidebarButton = ({
     currView: store.view,
     setView: store.setView,
   }));
-  const buttonClasses = classNames('flex items-center p-2 rounded', {
+  const buttonClasses = classNames('flex items-center p-1 rounded', {
     'text-vega-clight-200 dark:text-vega-cdark-200 hover:bg-vega-clight-500 dark:hover:bg-vega-cdark-500':
       view !== currView?.type,
     'bg-vega-yellow hover:bg-vega-yellow-550 text-black':