fix: position add and apply buttons, change font size in the menu bar

splunk · Nov 17, 2022 · bebba11 · bebba11
1 parent f1b249b
commit bebba11
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 10 deletions.
diff --git a/frontend/packages/manager/src/components/menu_header/Header.jsx b/frontend/packages/manager/src/components/menu_header/Header.jsx
@@ -65,7 +65,7 @@ function Header(){
                             <P>
                                 Collect SNMP data for Splunk Enterprise, Splunk Enterprise Cloud and Splunk
                                 Infrastructure Monitoring. Make any changes to Profiles, Groups and Inventory. Then select
-                                Aply changes to put the changes into effect. Applying changes can only be done every
+                                Apply changes to put the changes into effect. Applying changes can only be done every
                                 5 minutes.
                             </P>
                         </span>
@@ -76,7 +76,7 @@ function Header(){
                         <Button icon={<Plus screenReaderText={null} />} appearance="primary"
                                 label={addButtonLabel[MenuCtx.activeTabId]}
                                 onClick={addButtonHandler[MenuCtx.activeTabId]}/>
-                        <Button label="Apply Changes" onClick={handleApplyChanges}/>
+                        <Button label="Apply changes" onClick={handleApplyChanges}/>
                     </div>
                 </StyledHeaderRight>
             </StyledHeader>)

diff --git a/frontend/packages/manager/src/styles/HeaderStyle.jsx b/frontend/packages/manager/src/styles/HeaderStyle.jsx
@@ -12,10 +12,11 @@ const StyledHeaderLeft = styled.div`
     width: 50%;
     display: flex;
     justify-content: flex-start;
-    align-items: center;
+    align-items: flex-start;
 
     & > div{
         margin-left: 20px;
+        margin-top: 34px;
         width: 600px;
         display: flex;
         justify-content: flex-start;
@@ -43,11 +44,12 @@ const StyledHeaderRight = styled.div`
     width: 50%;
     display: flex;
     justify-content: flex-end;
-    align-items: center;
+    align-items: flex-start;
 
     & > div {
         display: flex;
         margin-right: 20px;
+        margin-top: 34px;
     }
 `;
 

diff --git a/frontend/packages/manager/src/styles/MenuBarStyle.jsx b/frontend/packages/manager/src/styles/MenuBarStyle.jsx
@@ -7,9 +7,11 @@ const StyledTab = styled(TabBar)`
       height: 44px;
       border-bottom: 0;
       margin: 0;
+
       &::before{
         border: 0;
       }
+
       & > button{
         margin: 0;
         padding: 0;
@@ -18,29 +20,30 @@ const StyledTab = styled(TabBar)`
          outline: none;
          box-shadow: none;
       }
+
       & > button:nth-child(1){
         margin-left: 20px;
       }
       & > button:nth-child(1) > div[class*='TabStyles__StyledLabel']{
-        width: 48px;
+        width: 51px;
       }
 
       & > button:nth-child(2){
         margin-left: 27px;
       }
       & > button:nth-child(2) > div[class*='TabStyles__StyledLabel']{
-        width: 46px;
+        width: 49px;
       }
 
       & > button:nth-child(3){
         margin-left: 27px;
       }
       & > button:nth-child(3) > div[class*='TabStyles__StyledLabel']{
-        width: 58px;
+        width: 63px;
       }
 
       & > button > div[class*='TabStyles__StyledLabel']{
-        font-size: 13px;
+        font-size: 14px;
         font-weight: 400;
         line-height: 39px;
         color: #E1E6EB;
@@ -85,14 +88,14 @@ const StyledMenuBarRight = styled.div`
         display: flex;
         justify-content: flex-end;
         align-items: center;
-        width: 159px;
+        width: 166px;
         margin-right: 20px;
     }
 
     & > div > P{
         font-style: normal;
         font-weight: 400;
-        font-size: 13px;
+        font-size: 14px;
         line-height: 18px;
         color: #FFFFFF;
         margin-bottom: 4px;