From 2505e01fcec74e9abeadcb92e468cbe12c860b44 Mon Sep 17 00:00:00 2001
From: Himanshu Dixit <hudixt@gmail.com>
Date: Mon, 18 Jan 2021 02:23:46 +0530
Subject: [PATCH] Exclude idea and fix theme toggle

---
 frontend/src/components/App.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx
index b8ba43d446..8fd699a346 100644
--- a/frontend/src/components/App.tsx
+++ b/frontend/src/components/App.tsx
@@ -17,6 +17,7 @@ import {
 
 import DateTimeSelector from "./DateTimeSelector";
 import ShowBreadcrumbs from "./ShowBreadcrumbs";
+import styled from "styled-components";
 
 const { Content, Footer, Sider } = Layout;
 
@@ -31,6 +32,11 @@ const ServicesTable = React.lazy(() => import("./metrics/ServicesTableDef"));
 //PNOTE
 //React. lazy currently only supports default exports. If the module you want to import uses named exports, you can create an intermediate module that reexports it as the default. This ensures that tree shaking keeps working and that you don't pull in unused components.
 
+const ThemeSwitcherWrapper = styled.div`
+	display: flex;
+	justify-content: center;
+	margin-top: 20px;
+`
 const App = () => {
 	// state = { collapsed: false, isDarkMode: true };
 	const { switcher, currentTheme, status, themes } = useThemeSwitcher();
@@ -60,7 +66,9 @@ const App = () => {
 					width={160}
 				>
 					<div className="logo">
+						<ThemeSwitcherWrapper>
 						<ToggleButton checked={isDarkMode} onChange={toggleTheme} />
+						</ThemeSwitcherWrapper>
 						<NavLink to="/">
 							<img
 								src={"signoz.svg"}