fix: styling menu bar

splunk · Nov 16, 2022 · 676783c · 676783c
1 parent eb09a26
commit 676783c
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 61 deletions.
diff --git a/frontend/packages/manager/src/Manager.jsx b/frontend/packages/manager/src/Manager.jsx
@@ -1,4 +1,5 @@
 import React, {useCallback, useContext, useState} from 'react';
+import { Link, Route, Routes, Switch } from 'react-router-dom';
 import TabLayout from '@splunk/react-ui/TabLayout';
 import ProfilesPage from "./pages/ProfilesPage";
 import InventoryPage from "./pages/InventoryPage";
@@ -12,7 +13,7 @@ import { InventoryDevicesValidationContxtProvider } from "./store/inventory-devi
 import { ProfilesValidationContxtProvider } from "./store/profiles-validation-contxt";
 import { ErrorsModalContextProvider } from "./store/errors-modal-contxt";
 import TabBar from '@splunk/react-ui/TabBar';
-import styled from "styled-components";
+import { StyledTab, StyledMenuBar, StyledMenuBarLeft, StyledMenuBarRight } from './styles/MenuBarStyle';
 
 function Uncontrolled() {
     const [activeTabId, setActiveTabId] = useState('Profiles');
@@ -21,69 +22,23 @@ function Uncontrolled() {
         setActiveTabId(selectedTabId);
     }, []);
 
-    const StyledTab = styled(TabBar)`
-      border: 0;
-      background-color: #3C444D;
-      height: 44px;
-      border-bottom: 0;
-      margin: 0;
-      &::before{
-        border: 0;
-      }
-      & > button{
-        margin: 0;
-        padding: 0;
-      }
-      & > button:nth-child(1){
-        margin-left: 20px;
-      }
-      & > button:nth-child(1) > div[class*='TabStyles__StyledLabel']{
-        width: 47px;
-      }
-
-      & > button:nth-child(2){
-        margin-left: 27px;
-      }
-      & > button:nth-child(2) > div[class*='TabStyles__StyledLabel']:nth-child(2){
-        width: 405px;
-      }
-
-      & > button:nth-child(3){
-        margin-left: 27px;
-      }
-
-      & > button:nth-child(3) > div[class*='TabStyles__StyledLabel']:nth-child(3){
-        width: 58px;
-      }
-
-      & > button > div[class*='TabStyles__StyledLabel']{
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 39px;
-        color: #E1E6EB;
-        border: 0;
-        margin: 0;
-        padding: 0;
-      }
-
-      [aria-selected='true'] > div[class*='TabStyles__StyledUnderline']{
-        background-color: #5CC05C;
-        bottom: 0;
-        width: 100%;
-      }
-      [aria-selected='true'] > div[class*='TabStyles__StyledLabel']{
-        color: #FFFFFF;
-        font-weight: 400;
-      }
-    `;
     return (
         <ButtonsContextProvider>
             <ErrorsModalContextProvider>
-                 <StyledTab activeTabId={activeTabId} onChange={handleChange}>
-                    <TabBar.Tab label="Profiles" tabId="Profiles" />
-                    <TabBar.Tab label="Groups" tabId="Groups" />
-                    <TabBar.Tab label="Inventory" tabId="Inventory" />
-                </StyledTab>
+                 <StyledMenuBar>
+                     <StyledMenuBarLeft>
+                         <StyledTab activeTabId={activeTabId} onChange={handleChange}>
+                            <TabBar.Tab label="Profiles" tabId="Profiles" />
+                            <TabBar.Tab label="Groups" tabId="Groups" />
+                            <TabBar.Tab label="Inventory" tabId="Inventory" />
+                        </StyledTab>
+                     </StyledMenuBarLeft>
+                     <StyledMenuBarRight>
+                        <div>
+                            Splunk Connect for SNMP
+                        </div>
+                     </StyledMenuBarRight>
+                 </StyledMenuBar>
 
                 <TabLayout defaultActivePanelId="one">
                     <TabLayout.Panel style={{color:"red"}} label="Profiles" panelId="one">

diff --git a/frontend/packages/manager/src/styles/MenuBarStyle.jsx b/frontend/packages/manager/src/styles/MenuBarStyle.jsx
@@ -0,0 +1,78 @@
+import styled from "styled-components";
+import TabBar from '@splunk/react-ui/TabBar';
+
+const StyledTab = styled(TabBar)`
+      border: 0;
+      background-color: #3C444D;
+      height: 44px;
+      border-bottom: 0;
+      margin: 0;
+      &::before{
+        border: 0;
+      }
+      & > button{
+        margin: 0;
+        padding: 0;
+      }
+      & > button:nth-child(1){
+        margin-left: 20px;
+      }
+      & > button:nth-child(1) > div[class*='TabStyles__StyledLabel']{
+        width: 48px;
+      }
+
+      & > button:nth-child(2){
+        margin-left: 27px;
+      }
+      & > button:nth-child(2) > div[class*='TabStyles__StyledLabel']{
+        width: 46px;
+      }
+
+      & > button:nth-child(3){
+        margin-left: 27px;
+      }
+      & > button:nth-child(3) > div[class*='TabStyles__StyledLabel']{
+        width: 58px;
+      }
+
+      & > button > div[class*='TabStyles__StyledLabel']{
+        font-size: 13px;
+        font-weight: 400;
+        line-height: 39px;
+        color: #E1E6EB;
+        border: 0;
+        margin: 0;
+        padding: 0;
+      }
+
+      & > button > div[class*='TabStyles__StyledUnderline']{
+        bottom: 0;
+        width: 100%;
+      }
+      [aria-selected='true'] > div[class*='TabStyles__StyledUnderline']{
+        background-color: #5CC05C;
+      }
+      [aria-selected='true'] > div[class*='TabStyles__StyledLabel']{
+        color: #FFFFFF;
+        font-weight: 600;
+      }
+    `;
+
+const StyledMenuBar = styled.div`
+    width: 100%;
+    height: 44px;
+    display: flex;
+    background-color: #3C444D;
+`;
+
+const StyledMenuBarLeft = styled.div`
+    width: 50%;
+    height: 44px;
+`;
+
+const StyledMenuBarRight = styled.div`
+    width: 50%;
+    height: 44px;
+`;
+
+export { StyledTab, StyledMenuBar, StyledMenuBarLeft, StyledMenuBarRight };