From 677e1e9d6a2bf3765f457e590661baddf41958aa Mon Sep 17 00:00:00 2001
From: Arpit <arpitnath42@gmail.com>
Date: Mon, 27 Sep 2021 16:23:07 +0530
Subject: [PATCH] Fixes leftsidebar pinned btns styles when darkmode is true
 and false (#847)

---
 frontend/src/Editor/LeftSidebar/SidebarDebugger.jsx     | 1 +
 frontend/src/Editor/LeftSidebar/SidebarPinnedButton.jsx | 5 +++--
 frontend/src/Editor/LeftSidebar/sidebar-inspector.js    | 7 ++++++-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/Editor/LeftSidebar/SidebarDebugger.jsx b/frontend/src/Editor/LeftSidebar/SidebarDebugger.jsx
index 936be152b9..8c6cc07c06 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarDebugger.jsx
+++ b/frontend/src/Editor/LeftSidebar/SidebarDebugger.jsx
@@ -130,6 +130,7 @@ export const LeftSidebarDebugger = ({ darkMode, errors }) => {
                   </button>
                 )}
                 <SidebarPinnedButton
+                  darkMode={darkMode}
                   component={'Debugger'}
                   state={popoverPinned}
                   updateState={updatePopoverPinnedState}
diff --git a/frontend/src/Editor/LeftSidebar/SidebarPinnedButton.jsx b/frontend/src/Editor/LeftSidebar/SidebarPinnedButton.jsx
index 7c3ec1778e..ca35a80dbc 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarPinnedButton.jsx
+++ b/frontend/src/Editor/LeftSidebar/SidebarPinnedButton.jsx
@@ -2,12 +2,13 @@ import React from 'react';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Tooltip from 'react-bootstrap/Tooltip';
 
-export const SidebarPinnedButton = ({ state, component, updateState }) => {
+export const SidebarPinnedButton = ({ state, component, updateState, darkMode }) => {
   const tooltipMsg = state ? `Unpin ${component}` : `Pin ${component}`;
+
   return (
     <SidebarPinnedButton.OverlayContainer tip={tooltipMsg}>
       <div
-        className={`btn btn-sm m-1 ${state ? 'btn-light' : 'btn-outline-secondary'} ${
+        className={`btn btn-sm m-1 ${darkMode ? 'btn-outline-secondary' : 'btn-default'} ${state && 'active'} ${
           component === 'Inspector' && 'position-absolute end-0'
         }`}
         onClick={updateState}
diff --git a/frontend/src/Editor/LeftSidebar/sidebar-inspector.js b/frontend/src/Editor/LeftSidebar/sidebar-inspector.js
index d086f8f392..7f210f7ba6 100644
--- a/frontend/src/Editor/LeftSidebar/sidebar-inspector.js
+++ b/frontend/src/Editor/LeftSidebar/sidebar-inspector.js
@@ -16,7 +16,12 @@ export const LeftSidebarInspector = ({ darkMode, globals, components, queries })
         className={`left-sidebar-item ${open && 'active'}`}
       />
       <div {...content} className={`card popover ${open || popoverPinned ? 'show' : 'hide'}`}>
-        <SidebarPinnedButton component={'Inspector'} state={popoverPinned} updateState={updatePopoverPinnedState} />
+        <SidebarPinnedButton
+          darkMode={darkMode}
+          component={'Inspector'}
+          state={popoverPinned}
+          updateState={updatePopoverPinnedState}
+        />
         <div style={{ marginTop: '1rem' }} className="card-body">
           <ReactJson
             src={queries}