Merge pull request #2216 from JohnDuprey/dev

More UI Tweaks

Author: JohnDuprey

src/components/header/AppHeaderSearch.jsx

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react'
 import { faSearch } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { toggleSwitcher } from 'src/store/features/switcher'
-import { CButton } from '@coreui/react'
+import { CButton, CTooltip } from '@coreui/react'
 import { useDispatch } from 'react-redux'
 
 const AppHeaderSearch = () => {
@@ -12,9 +12,11 @@ const AppHeaderSearch = () => {
   }, [dispatch])
   return (
     <>
-      <CButton variant="ghost" onClick={handleFastSwitcher}>
-        <FontAwesomeIcon icon={faSearch} size="lg" />
-      </CButton>
+      <CTooltip content="Search" placement="bottom">
+        <CButton variant="ghost" onClick={handleFastSwitcher}>
+          <FontAwesomeIcon icon={faSearch} size="lg" />
+        </CButton>
+      </CTooltip>
     </>
   )
 }

src/components/layout/AppHeader.jsx

@@ -3,17 +3,13 @@ import { useSelector, useDispatch } from 'react-redux'
 import {
   CAlert,
   CAlertLink,
-  CContainer,
-  CCollapse,
   CHeader,
   CHeaderNav,
   CNavItem,
   CHeaderToggler,
-  CImage,
-  CSidebarBrand,
   CButton,
   CFormSwitch,
-  CLink,
+  CTooltip,
 } from '@coreui/react'
 import { AppHeaderSearch } from 'src/components/header'
 import { CippActionsOffcanvas, TenantSelector } from '../utilities'
@@ -142,18 +138,22 @@ const AppHeader = () => {
               target="_blank"
               href={`https://docs.cipp.app/user-documentation${location.pathname}`}
             >
-              <CButton variant="ghost">
-                <FontAwesomeIcon icon={'question'} size="lg" />
-              </CButton>
+              <CTooltip content="Documentation" placement="bottom">
+                <CButton variant="ghost">
+                  <FontAwesomeIcon icon={'question'} size="lg" />
+                </CButton>
+              </CTooltip>
             </a>
           </CNavItem>
           <CNavItem>
             <AppHeaderSearch />
           </CNavItem>
           <CNavItem>
-            <CButton variant="ghost" onClick={() => loadCippQueue()}>
-              <FontAwesomeIcon icon={'history'} className="me-2" />
-            </CButton>
+            <CTooltip content="Recent Jobs" placement="bottom">
+              <CButton variant="ghost" onClick={() => loadCippQueue()} className="me-1">
+                <FontAwesomeIcon icon={'history'} size="lg" />
+              </CButton>
+            </CTooltip>
           </CNavItem>
           <CNavItem>
             <div className="custom-switch-wrapper primary">

src/views/endpoint/intune/MEMListPolicies.jsx

@@ -13,7 +13,7 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { CippPageList } from 'src/components/layout'
 import { Link } from 'react-router-dom'
-import { CippActionsOffcanvas } from 'src/components/utilities'
+import { CippActionsOffcanvas, CippCodeBlock } from 'src/components/utilities'
 import { TitleButton } from 'src/components/buttons'
 
 const Actions = (row, rowIndex, formatExtraData) => {
@@ -116,7 +116,7 @@ const IntuneList = () => {
   // eslint-disable-next-line react/prop-types
   const ExpandedComponent = ({ data }) => (
     // eslint-disable-next-line react/prop-types
-    <pre>{JSON.stringify(data, null, 2)}</pre>
+    <CippCodeBlock code={JSON.stringify(data, null, 2)} language="json" />
   )
 
   return (