{
{printerData ? (
-
+
{printerData?.alerts?.some(
@@ -494,6 +494,8 @@ const ControlPrinter = () => {
style={{ paddingTop: '2px' }}
/>
)}
+ style={{ padding: 0 }}
+ className='no-h-padding-collapse no-t-padding-collapse'
>
{
style={{ paddingTop: '2px' }}
/>
)}
+ style={{ padding: 0 }}
+ className='no-h-padding-collapse'
>
{
style={{ paddingTop: '2px' }}
/>
)}
+ style={{ padding: 0 }}
+ className='no-h-padding-collapse'
>
{
style={{ paddingTop: '9px' }}
/>
)}
+ className='no-h-padding-collapse no-t-padding-collapse'
>
{
style={{ paddingTop: '2px' }}
/>
)}
+ className='no-h-padding-collapse'
>
{
style={{ paddingTop: '2px' }}
/>
)}
+ className='no-h-padding-collapse no-t-padding-collapse'
>
{
style={{ paddingTop: '2px' }}
/>
)}
+ className='no-h-padding-collapse'
>
{
style={{ paddingTop: '2px' }}
/>
)}
+ className='no-h-padding-collapse'
>
{
const { logout, userProfile } = useContext(AuthContext)
const { showSpotlight } = useContext(SpotlightContext)
const { socket } = useContext(SocketContext)
- const [socketConnected, setSocketConnected] = useState(false)
+ const [socketState, setSocketState] = useState('disconnected')
const navigate = useNavigate()
const location = useLocation()
const [selectedKey, setSelectedKey] = useState('production')
@@ -52,8 +53,14 @@ const DashboardNavigation = () => {
}, [location.pathname])
useEffect(() => {
- setSocketConnected(socket?.connected)
- }, [socket?.connected])
+ if (socket?.connecting) {
+ setSocketState('connecting')
+ } else if (socket?.connected) {
+ setSocketState('connected')
+ } else {
+ setSocketState('disconnected')
+ }
+ }, [socket?.connecting, socket?.connected])
const mainMenuItems = [
{
@@ -158,36 +165,58 @@ const DashboardNavigation = () => {
overflowedIndicator={}
/>
- ⌘ ⇧ P} arrow={false}>
+
+ ⌘ ⇧ P} arrow={false}>
+ }
+ type='text'
+ style={{ marginTop: '2px' }}
+ onClick={() => showSpotlight()}
+ >
+
}
+ icon={}
type='text'
style={{ marginTop: '2px' }}
onClick={() => showSpotlight()}
>
-
- }
- type='text'
- style={{ marginTop: '2px' }}
- onClick={() => showSpotlight()}
- >
- {!socketConnected ? (
-
- }
- >
- Disconnected
-
-
- ) : null}
+
+
+ {socketState === 'connected' ? (
+
+ }
+ />
+
+ ) : null}
+ {socketState === 'connecting' ? (
+
+ }
+ />
+
+ ) : null}
+ {socketState === 'disconnected' ? (
+
+ }
+ />
+
+ ) : null}
+
{process.env.NODE_ENV === 'development' && (
-
- Dev
-
+
+
+ Dev
+
+
)}
{userProfile ? (
diff --git a/src/components/Dashboard/context/ThemeContext.js b/src/components/Dashboard/context/ThemeContext.js
index 73b34b2..6944c9b 100644
--- a/src/components/Dashboard/context/ThemeContext.js
+++ b/src/components/Dashboard/context/ThemeContext.js
@@ -88,7 +88,7 @@ export const ThemeProvider = ({ children }) => {
colorPrimary: '#007AFF',
colorSuccess: '#32D74B',
colorWarning: '#FF9F0A',
- colorInfo: '#007AFF',
+ colorInfo: '#0A84FF',
colorLink: '#5AC8F5',
borderRadius: '10px'
},
diff --git a/src/components/Icons/BellIcon.jsx b/src/components/Icons/BellIcon.jsx
new file mode 100644
index 0000000..c182a51
--- /dev/null
+++ b/src/components/Icons/BellIcon.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/bellicon.min.svg'
+
+const BellIcon = (props) =>
+
+export default BellIcon
diff --git a/src/components/Icons/CloudIcon.jsx b/src/components/Icons/CloudIcon.jsx
new file mode 100644
index 0000000..466c4a3
--- /dev/null
+++ b/src/components/Icons/CloudIcon.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/cloudicon.min.svg'
+
+const CloudIcon = (props) =>
+
+export default CloudIcon
diff --git a/src/components/Icons/SearchIcon.jsx b/src/components/Icons/SearchIcon.jsx
new file mode 100644
index 0000000..495fe09
--- /dev/null
+++ b/src/components/Icons/SearchIcon.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/searchicon.min.svg'
+
+const SearchIcon = (props) =>
+
+export default SearchIcon