fix: added Proxima Nova font, finished inventory

frontend/packages/manager/src/components/inventory/AddInventoryModal.jsx

@@ -1,5 +1,5 @@
 import React, {useRef, useState, Component, useCallback, useEffect, useContext} from 'react';
-import { ModalControlGroup } from "../../styles/inventory/InventoryStyle";
+import { StyledControlGroup, StyledModalBody } from "../../styles/inventory/InventoryStyle";
 import Modal from '@splunk/react-ui/Modal';
 import Number from '@splunk/react-ui/Number';
 import Select from '@splunk/react-ui/Select';
@@ -150,78 +150,79 @@ function AddInventoryModal() {
 
     return (
         <div>
-            <Modal onRequestClose={handleRequestClose} open={InvCtx.addOpen} style={{ width: '760px' }}>
+            <Modal onRequestClose={handleRequestClose} open={InvCtx.addOpen} style={{ width: '700px' }}>
                 <Modal.Header title={((InvCtx.isEdit) ? `Edit device` : "Add a new device")} onRequestClose={handleRequestClose} />
-                <Modal.Body style={{ paddingLeft: '24px', paddingRight: '24px' }}>
-                    <ModalControlGroup label="IP address/Group">
+                <StyledModalBody>
+                    <StyledControlGroup labelWidth={140} label="IP address/Group">
                         <div style={validationGroup}>
                             <Text value={InvCtx.address} onChange={handleChangeAddress} error={((ValCtx.addressErrors) ? true : false)}/>
                             {((ValCtx.addressErrors) ? ValCtx.addressErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
                         </div>
-                    </ModalControlGroup>
-                    <ModalControlGroup label="Port">
+                    </StyledControlGroup>
+                    <StyledControlGroup labelWidth={140} label="Port">
                         <div style={validationGroup}>
                             <Text value={InvCtx.port} onChange={handleChangePort} error={((ValCtx.portErrors) ? true : false)}/>
                             {((ValCtx.portErrors) ? ValCtx.portErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
                         </div>
-                    </ModalControlGroup>
+                    </StyledControlGroup>
 
-                    <ModalControlGroup
+                    <StyledControlGroup
                     label="SNMP version"
                     labelFor="customized-select-after"
+                    labelWidth={140}
                     >
                         <Select defaultValue={InvCtx.version} inputId="customized-select-after" value={InvCtx.version} onChange={handleChangeVersion}>
                             <Select.Option label="1" value="1"/>
                             <Select.Option label="2c" value="2c"/>
                             <Select.Option label="3" value="3"/>
                         </Select>
-                    </ModalControlGroup>
+                    </StyledControlGroup>
 
-                    <ModalControlGroup label="Community">
+                    <StyledControlGroup label="Community" labelWidth={140}>
                         <div style={validationGroup}>
                             <Text value={InvCtx.community} onChange={handleChangeCommunity} error={((ValCtx.communityErrors) ? true : false)}/>
                             {((ValCtx.communityErrors) ? ValCtx.communityErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
                         </div>
-                    </ModalControlGroup>
+                    </StyledControlGroup>
 
-                    <ModalControlGroup label="Secret">
+                    <StyledControlGroup label="Secret" labelWidth={140}>
                         <div style={validationGroup}>
                             <Text value={InvCtx.secret} onChange={handleChangeSecret} error={((ValCtx.secretErrors) ? true : false)}/>
                             {((ValCtx.secretErrors) ? ValCtx.secretErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
                         </div>
-                    </ModalControlGroup>
+                    </StyledControlGroup>
 
-                    <ModalControlGroup label="Security Engine">
+                    <StyledControlGroup label="Security Engine" labelWidth={140}>
                         <div style={validationGroup}>
                             <Text value={InvCtx.securityEngine} onChange={handleChangeSecurityEngine} error={((ValCtx.securityEngineErrors) ? true : false)}/>
                             {((ValCtx.securityEngineErrors) ? ValCtx.securityEngineErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
                         </div>
-                    </ModalControlGroup>
+                    </StyledControlGroup>
 
-                    <ModalControlGroup label="Walk Interval">
+                    <StyledControlGroup label="Walk Interval" labelWidth={140}>
                         <div style={validationGroup}>
                             <Number value={InvCtx.walkInterval} onChange={handleChangeWalkInterval} error={((ValCtx.walkIntervalErrors) ? true : false)}/>
                             {((ValCtx.walkIntervalErrors) ? ValCtx.walkIntervalErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
                         </div>
-                    </ModalControlGroup>
+                    </StyledControlGroup>
 
-                    <ModalControlGroup label="Profiles">
+                    <StyledControlGroup label="Profiles" labelWidth={140}>
                         <div style={validationGroup}>
                             <Multiselect onChange={handleChange} defaultValues={InvCtx.profiles} error={((ValCtx.profilesErrors) ? true : false)}>
                                 {initProfiles.map((v) => (<Multiselect.Option key={createDOMID()} label={v} value={v} />))}
                             </Multiselect>
                             {((ValCtx.profilesErrors) ? ValCtx.profilesErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
                         </div>
-                    </ModalControlGroup>
+                    </StyledControlGroup>
 
-                    <ModalControlGroup label="Smart Profiles enabled">
+                    <StyledControlGroup label="Smart Profiles enabled" labelWidth={140}>
                         <RadioBar value={InvCtx.smartProfiles} onChange={handleChangeSmartProfiles}>
                             <RadioBar.Option value={true} label="true"/>
                             <RadioBar.Option value={false} label="false"/>
                         </RadioBar>
-                    </ModalControlGroup>
+                    </StyledControlGroup>
 
-                </Modal.Body>
+                </StyledModalBody>
                 <Modal.Footer>
                     <Button appearance="secondary" onClick={handleRequestClose} label="Cancel" />
                     <Button appearance="primary" label="Submit" onClick={handleApply} />

frontend/packages/manager/src/components/menu_header/Header.jsx

@@ -75,8 +75,10 @@ function Header(){
                     <div>
                         <Button icon={<Plus screenReaderText={null} />} appearance="primary"
                                 label={addButtonLabel[MenuCtx.activeTabId]}
-                                onClick={addButtonHandler[MenuCtx.activeTabId]}/>
-                        <Button label="Apply changes" onClick={handleApplyChanges}/>
+                                onClick={addButtonHandler[MenuCtx.activeTabId]}
+                                style={{ fontFamily: "Proxima Nova Sbold" }}/>
+                        <Button label="Apply changes" onClick={handleApplyChanges}
+                                style={{ fontFamily: "Proxima Nova Sbold" }}/>
                     </div>
                 </StyledHeaderRight>
             </StyledHeader>)

frontend/packages/manager/src/styles/FonstStyles.jsx

@@ -1,13 +1,36 @@
 import { createGlobalStyle } from "styled-components";
-import Mathlete from "./fonts/Mathlete-BulkySlant-webfont.woff";
 
 const FontStyles = createGlobalStyle`
 @font-face {
-    font-family: 'mathletebulky_slant';
-    src: url(${Mathlete}) format('woff');
+    font-family: 'Proxima Nova';
+    src: url(./src/styles/fonts/ProximaNova/ProximaNova-Reg.otf ) format('opentype');
     font-weight: normal;
     font-style: normal;
+}
+
+@font-face {
+    font-family: 'Proxima Nova Bold';
+    src: url(./src/styles/fonts/ProximaNova/ProximaNova-Bold.otf ) format('opentype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Proxima Nova Sbold';
+    src: url(./src/styles/fonts/ProximaNova/ProximaNova-Sbold.otf ) format('opentype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Proxima Nova Xbold';
+    src: url(./src/styles/fonts/ProximaNova/ProximaNova-Xbold.otf ) format('opentype');
+    font-weight: normal;
+    font-style: normal;
+}
 
+body {
+    font-family: 'Proxima Nova';
 }
 `;
 

frontend/packages/manager/src/styles/inventory/InventoryStyle.jsx

@@ -1,5 +1,7 @@
 import styled from "styled-components";
 import ControlGroup from '@splunk/react-ui/ControlGroup';
+import Modal from '@splunk/react-ui/Modal';
+
 
 const Pagination = styled.div`
     width: 100%;
@@ -18,8 +20,18 @@ const Pagination = styled.div`
     }
 `;
 
-const ModalControlGroup = styled(ControlGroup)`
-    height: 32px;
+
+const StyledModalBody = styled(Modal.Body)`
+     padding-left: 24px;
+     padding-right: 24px;
+
+     & > div > div > div > p {
+        margin: 0;
+     }
+`;
+
+const StyledControlGroup = styled(ControlGroup)`
+    min-height: 32px;
     margin-bottom: 12px;
     margin-left: 0;
     margin-rifht: 0;
@@ -28,11 +40,6 @@ const ModalControlGroup = styled(ControlGroup)`
     font-weight: 400;
     font-size: 14px;
     line-height: 20px;
-
-    & >  div:nth-child(2){
-        margin-left: 0;
-        margin-right: 1px;
-    }
 `;
 
-export { Pagination, ModalControlGroup };
+export { Pagination, StyledControlGroup, StyledModalBody };

frontend/packages/manager/src/styles/menu_header/HeaderStyle.jsx

@@ -26,6 +26,7 @@ const StyledHeaderLeft = styled.div`
 
     & > div > #project-title > P{
         font-style: normal;
+        font-family: 'Proxima Nova Bold';
         font-weight: 700;
         font-size: 24px;
         line-height: 24px;

frontend/packages/manager/src/styles/menu_header/MenuBarStyle.jsx

@@ -61,6 +61,7 @@ const StyledTab = styled(TabBar)`
       }
       [aria-selected='true'] > div[class*='TabStyles__StyledLabel']{
         color: #FFFFFF;
+        font-family: 'Proxima Nova Sbold';
         font-weight: 600;
       }
     `;