@learningpool/ui 2.0.0 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/Images.js +1 -1
- package/components/navigation/VerticalNavigation/VerticalNavigation.js +2 -2
- package/components/stream/AppSwitcher/AppSwitcher.d.ts +0 -1
- package/components/stream/AppSwitcher/AppSwitcher.js +32 -20
- package/package.json +1 -1
- package/types/components/navigation/VerticalNavigation.d.ts +2 -0
- package/types/components/stream/AppSwitcher.d.ts +1 -0
- package/utils/theme.d.ts +3 -91
- package/utils/theme.js +107 -27
package/assets/Images.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
2
|
-
import createSvgIcon from '@mui/material/utils
|
|
2
|
+
import { createSvgIcon } from '@mui/material/utils';
|
|
3
3
|
export const StreamSuiteLogo = createSvgIcon(_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", "data-name": "Layer 1", viewBox: "0 0 447.9 484.8", children: _jsx("path", { d: "M447.9 304.4V321l-1 5.2c-3 21.8-12.5 40.5-27.4 56.4a102.6 102.6 0 0 1-34.1 24A98 98 0 0 1 325 413c-2.2-.5-3.2 0-4 2.1a100.5 100.5 0 0 1-32.4 47.2 101.3 101.3 0 0 1-48 21l-11 1.4h-11.7a6.8 6.8 0 0 0-1.5-.4A102.5 102.5 0 0 1 172 471a96.6 96.6 0 0 1-30.8-27.6 103.7 103.7 0 0 1-14.6-28.7c-.5-1.4-.8-2.5-2.8-2a98.5 98.5 0 0 1-32.5 1.5 101 101 0 0 1-35.8-10.8 97.8 97.8 0 0 1-29.7-23A102 102 0 0 1 7 350a105.4 105.4 0 0 1-5.5-55.2 100.7 100.7 0 0 1 13-35.3c2.7-4.7 6.3-5.1 10.2-1.3l4.8 4.3a102 102 0 0 0 37.7 20.6c5.1 1.6 6.5 5 3.7 9.6a35.7 35.7 0 0 0 7.9 48.3 36.3 36.3 0 0 0 22.4 9c15.2.5 26.3-6.9 33.8-19.3 10.5-17.2 20.3-34.8 30.3-52.2.6-1 1-2 1.7-3.5l-4-.2c-22.2 0-44.5 0-66.7-.3a103 103 0 0 1-76.3-41A95.8 95.8 0 0 1 .8 161a106 106 0 0 1 33.9-66A90 90 0 0 1 54 81.4c20.6-11 42.5-13.6 65.4-10.3 7.5 1.2 5.5 2.5 8.2-4.7a99 99 0 0 1 32-44.8A102.2 102.2 0 0 1 222.4 0a106 106 0 0 1 32.2 4.5A98.4 98.4 0 0 1 293 25.8a100.2 100.2 0 0 1 28 43.5c.8 2.2 1.6 2.9 4 2.4a102 102 0 0 1 28-1.9 92.8 92.8 0 0 1 37.9 10.6q46 24.9 55.6 76.4c.6 3 1 6 1.4 9.1v14.4a23.2 23.2 0 0 0-.6 2.6 100.8 100.8 0 0 1-14.6 43c-2.3 3.6-6 4-9.1 1-2.1-2-4.1-4-6.3-5.8a97.4 97.4 0 0 0-35.4-19.1c-7-2-8-5.7-4.3-11.5a32.5 32.5 0 0 0 5.1-22.2 37.6 37.6 0 0 0-15-25.7 36.4 36.4 0 0 0-52.8 8c-3.6 4.7-6.2 10-9.2 15l-24 41.6a17 17 0 0 0-.9 2.4l3.7.2 64.2.3a86.7 86.7 0 0 1 24.3 3.4 102.6 102.6 0 0 1 50 32.1 100.7 100.7 0 0 1 23 48l1.9 10.8ZM261.5 102.9a37.2 37.2 0 0 0-4-17c-7-13.4-17.8-21.3-33.2-21.4-13.3 0-24 5.8-31.5 16.7a34.9 34.9 0 0 0-2.3 38.2c7.6 14.2 16 28 24.2 42a9.8 9.8 0 0 1 1 8.7l-12.4 37.7a9.1 9.1 0 0 0 0 2.9 9.3 9.3 0 0 0 2.2-2c2.5-4 4.8-8.2 7.2-12.4l42-72.5c3.9-6.5 7-13.2 6.8-21Zm-.2 278.7a30.6 30.6 0 0 0-4-16c-8.3-14.8-16.9-29.5-25.4-44.2a6 6 0 0 1-.5-5.5l13.1-39.5a6.6 6.6 0 0 0-.2-2.5c-.6.5-1.5.9-1.9 1.5l-20 34.5-29.6 51.2a42.3 42.3 0 0 0-6.5 19.7 35 35 0 0 0 13 29.8 37.3 37.3 0 0 0 62-29Zm-94.2-172-1.4-2.9-27.7-48a54 54 0 0 0-11.5-15.4c-20.4-17-48.8-7-58.2 13.3-12 25.8 9.4 53.5 34 53.2 20.4-.2 41 0 61.4 0l3.4-.3ZM280.7 275a22.1 22.1 0 0 0 .9 2.2c10.4 18 20.7 36 31.3 54a35.5 35.5 0 0 0 29.4 18.6 37.7 37.7 0 0 0 39.9-43.7 37.9 37.9 0 0 0-36-31.2h-65.5Z" }) }), 'StreamSuite');
|
|
4
4
|
export const LearningPoolLogo = createSvgIcon(_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 804 174", children: _jsx("path", { fill: "#0069B4", d: "M155.5 0A44 44 0 0 0 121 16.5l-1 1.2-1.2-1a72.5 72.5 0 1 0-46.4 128.1 72.8 72.8 0 0 0 70.7-56.6l.4-1.5 1.5.4a44.2 44.2 0 0 0 44.8-15 44.2 44.2 0 0 0 5.6-47 44.2 44.2 0 0 0-40-25.1zM113 115.2H72.4a42.9 42.9 0 1 1 29.2-11.5l11.4 11.5zm42.5-47.8h-22l6.1-6.2a23.2 23.2 0 1 1 15.9 6.2zm56.2-8.5h14v84h-14zm76 54.3a31.1 31.1 0 0 0-7.5-21.1 29.2 29.2 0 0 0-40.7.2 31.8 31.8 0 0 0-7.8 22 31.2 31.2 0 0 0 7.9 22.2 27.8 27.8 0 0 0 20.9 8.3c2.8 0 5.6-.3 8.4-1a24 24 0 0 0 7.3-3 28.4 28.4 0 0 0 6.3-5.1c1.7-2 3.3-4 4.7-6.2l-12.7-7a28 28 0 0 1-6 6.9 12.3 12.3 0 0 1-7.4 2.1 13 13 0 0 1-9.6-3.7 15.6 15.6 0 0 1-4-9.1v-.4h40.1v-5.1zm-41.7-5.3.3-1.1a16.8 16.8 0 0 1 2-4.6 14 14 0 0 1 3-3.5 13.3 13.3 0 0 1 4.1-2.2 14.5 14.5 0 0 1 4.8-.8c6.8-.4 12.8 4.4 14 11l.3 1.2H246zm90.4-22.4V91a24.2 24.2 0 0 0-16.9-7.2 24.9 24.9 0 0 0-19.2 8.6 30.7 30.7 0 0 0-7.7 21.2 31.7 31.7 0 0 0 7.7 21.6 25.4 25.4 0 0 0 19.6 8.5 25 25 0 0 0 16.5-6.7v5.1h14.2V85.5h-14.2zm-3.6 41a14.3 14.3 0 0 1-11.1 4.7 13.5 13.5 0 0 1-10.6-4.9 18.9 18.9 0 0 1-4.1-12.6 18 18 0 0 1 4.1-12.2 13.8 13.8 0 0 1 10.9-4.8 14 14 0 0 1 10.8 4.8A18.3 18.3 0 0 1 337 114a18.5 18.5 0 0 1-4.3 12.5zm61.7-38.9-6.3 13-.6-.4a11.3 11.3 0 0 0-6.6-2.5c-6.5 0-9.7 5-9.7 15.4v29.7h-13.7V85.5h13.7v4a23.9 23.9 0 0 1 5.3-4.1 14.6 14.6 0 0 1 6.7-1.5 20.7 20.7 0 0 1 10.7 3.4l.5.3zm53 20.2v35H433v-32a19.7 19.7 0 0 0-2.2-11 8.8 8.8 0 0 0-7.8-3 9.4 9.4 0 0 0-8.7 4 28.9 28.9 0 0 0-2.6 14.3v27.7h-14.3V85.5h14.3v4.4a21.8 21.8 0 0 1 14.9-6 20.3 20.3 0 0 1 15.8 6.4c3.3 3.6 5 9.5 5 17.5m22.9-40a8.7 8.7 0 0 1-2.7 6.4 8.5 8.5 0 0 1-6.3 2.7 9 9 0 0 1-6.4-2.6 9 9 0 0 1-2.6-6.4 8.5 8.5 0 0 1 2.7-6.3 8.6 8.6 0 0 1 6.3-2.7 8.7 8.7 0 0 1 6.3 2.7 8.5 8.5 0 0 1 2.7 6.3m-16 18h14v57h-14zm71 22v35H511v-32a19.7 19.7 0 0 0-2.2-11.1 8.8 8.8 0 0 0-7.8-3 9.4 9.4 0 0 0-8.7 4 28.9 28.9 0 0 0-2.5 14.3v27.7h-14.4V85.5h14.4v4.4a21.8 21.8 0 0 1 14.8-6 20.2 20.2 0 0 1 15.8 6.4c3.3 3.6 5 9.5 5 17.5M574 85.4v5.4a23 23 0 0 0-16.9-6.9 24.4 24.4 0 0 0-19.9 9.3 32.9 32.9 0 0 0-7 21 31.2 31.2 0 0 0 7.6 21.3 25.1 25.1 0 0 0 17.8 8.5 25.2 25.2 0 0 0 18.4-7v6.3c0 11.2-4.4 16.7-13.5 16.7a13.4 13.4 0 0 1-11.2-5 14.2 14.2 0 0 1-2.4-6v-.6h-14.2v.7a25.2 25.2 0 0 0 8.8 17.5 28.4 28.4 0 0 0 19 6.2 26.9 26.9 0 0 0 21.3-9 24.1 24.1 0 0 0 5.4-11 51.2 51.2 0 0 0 .7-5.4c.2-2 .3-4.4.3-7v-55H574zm-3.3 40.6a13.6 13.6 0 0 1-11.2 5 13.6 13.6 0 0 1-11.1-5 18.9 18.9 0 0 1-3.7-12 19.1 19.1 0 0 1 3.7-12.3 13.3 13.3 0 0 1 11-5.1 13.9 13.9 0 0 1 11 4.7 18 18 0 0 1 4.1 12.6 18.6 18.6 0 0 1-3.8 12zm73.7-33.4a24.8 24.8 0 0 0-19.5-8.7 24.4 24.4 0 0 0-16.7 6.8v-5.2h-14v87.3h14V137a24.4 24.4 0 0 0 17 7 24.9 24.9 0 0 0 19.2-8.5 30.9 30.9 0 0 0 7.7-21.3 31.3 31.3 0 0 0-7.7-21.6m-32.5 8.8a14.3 14.3 0 0 1 11-4.7 13.5 13.5 0 0 1 10.7 5 18.6 18.6 0 0 1 4.1 12.5 17.8 17.8 0 0 1-4.3 12.3 13.5 13.5 0 0 1-10.6 4.8 14 14 0 0 1-11-4.8 18.4 18.4 0 0 1-4.2-12.5 18.2 18.2 0 0 1 4.2-12.6m97.4-7.9a31.3 31.3 0 0 0-43.2 0 28.3 28.3 0 0 0-9 21 29.4 29.4 0 0 0 9 21.5 29.3 29.3 0 0 0 21.5 8.8 30.4 30.4 0 0 0 21.9-8.6A28.8 28.8 0 0 0 718 115a29 29 0 0 0-8.8-21.4m-10 34a16.9 16.9 0 0 1-23.3 0 18.1 18.1 0 0 1-4.4-12.8 17.2 17.2 0 0 1 4.5-12.3 15.1 15.1 0 0 1 11.5-4.7c4.4-.1 8.7 1.6 11.7 4.7a17.7 17.7 0 0 1 4.4 12.6 17.7 17.7 0 0 1-4.4 12.5m75-35a31.3 31.3 0 0 0-43.3 0 28.2 28.2 0 0 0-8.9 21 29.4 29.4 0 0 0 8.7 21.5 29.3 29.3 0 0 0 21.5 8.8 30.4 30.4 0 0 0 21.9-8.6 28.8 28.8 0 0 0 8.8-21.4 29 29 0 0 0-8.8-21.3m-10 34a16.8 16.8 0 0 1-23.3 0 18.2 18.2 0 0 1-4.3-12.8 17.2 17.2 0 0 1 4.5-12.3 15.1 15.1 0 0 1 11.6-4.7 15.3 15.3 0 0 1 11.6 4.7 17.7 17.7 0 0 1 4.4 12.6 17.7 17.7 0 0 1-4.4 12.5M790 59h14v84h-14z" }) }), 'LearningPool');
|
|
5
5
|
// VerticleNavigation Notch SVG
|
|
@@ -25,7 +25,7 @@ import { getDefaultSupportLinks, getNavigationBackground, getNavigationContrastT
|
|
|
25
25
|
import { Constants } from '../../stream/AppSwitcher/constants';
|
|
26
26
|
const VerticalNavigation = (props) => {
|
|
27
27
|
const theme = useTheme();
|
|
28
|
-
const { items, secondaryItems, logo, logoText, logoOnClick, appRootID, hasStreamHome, StreamHomeUrl, streamHomeApiKey, streamHomeBaseUrl, localization, streamHomeAccessToken, avatarName, dataAttributes, showSupportLinks, avatarPanelShowHelpLinks, ...rest } = props;
|
|
28
|
+
const { items, secondaryItems, logo, logoText, logoOnClick, appRootID, hasStreamHome, StreamHomeUrl, streamHomeApiKey, streamHomeBaseUrl, localization, streamHomeAccessToken, avatarName, dataAttributes, showSupportLinks, avatarPanelShowHelpLinks, hubDashboardData, ...rest } = props;
|
|
29
29
|
const messages = { ...defaultMessages, ...localization };
|
|
30
30
|
const dataIds = { ...defaultAttributes, ...dataAttributes };
|
|
31
31
|
const propIsDrawerOpen = typeof props?.isDrawerOpen === 'boolean' ? props.isDrawerOpen : undefined;
|
|
@@ -202,7 +202,7 @@ const VerticalNavigation = (props) => {
|
|
|
202
202
|
width: DRAWER_WIDTH.Expanded,
|
|
203
203
|
marginTop: `-${theme.spacing(0.5)} !important`
|
|
204
204
|
}, children: items && items.length > 0 && items.map((item, index) => (_createElement(VerticalNavigationItem, { ...item, "data-id": dataIds.VerticalNavigationPrimaryListItem, key: `${item.label} - ${index}`, index: index, isDrawerOpen: isDrawerOpen || isPersistent, style: animationRefs.current[index] }))) }) }) }), _jsx("div", { className: 'wrapper', "data-id": dataIds.VerticalNavigationSecondary, style: { backgroundColor: getNavigationBackground(theme) }, children: _jsxs(StyledNavSecondary, { "aria-label": 'Secondary', children: [_jsx(StyledDivider, { isDrawerOpen: isDrawerOpen || isPersistent }), _jsxs(List, { "data-id": dataIds.VerticalNavigationSecondaryList, style: { width: DRAWER_WIDTH.Expanded }, children: [(showSupportLinks || avatarPanelShowHelpLinks) && defaultSupportLinks && defaultSupportLinks.length > 0 && defaultSupportLinks.map((item, index) => (_createElement(VerticalNavigationItem, { ...item, "data-id": dataIds.VerticalNavigationSecondaryListItem, key: `${item.label} - ${index}`, index: index, isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, style: animationRefs.current[(items?.length ?? 0) + index + 1] }))), hasStreamHome
|
|
205
|
-
? (_jsx(VerticalNavigationItem, { id: dataIds.VerticalNavigationAppSwitcherToggle, "data-id": dataIds.VerticalNavigationAppSwitcherToggle, label: messages['app-switcher'], icon: _jsx(AppsIcon, {}), onClick: handleToggleAppSwitcher, content: (_jsx(AppSwitcher, { isStandalone: false, isAppSwitcherOpen: isAppSwitcherOpen, handleToggleAppSwitcher: handleToggleAppSwitcher, apiKey: streamHomeApiKey ?? '', baseUrl: streamHomeBaseUrl ?? '', token: streamHomeAccessToken ?? '', isDrawerOpen: isDrawerOpen, StreamHomeUrl: StreamHomeUrl ?? Constants.DefaultStreamHomeUrl, avatarName: avatarName })), isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, hasCustomContent: true, style: animationRefs.current[(items?.length ?? 0) + (defaultSupportLinks?.length ?? 0) + 1], isContentOpen: isAppSwitcherOpen }))
|
|
205
|
+
? (_jsx(VerticalNavigationItem, { id: dataIds.VerticalNavigationAppSwitcherToggle, "data-id": dataIds.VerticalNavigationAppSwitcherToggle, label: messages['app-switcher'], icon: _jsx(AppsIcon, {}), onClick: handleToggleAppSwitcher, content: (_jsx(AppSwitcher, { isStandalone: false, isAppSwitcherOpen: isAppSwitcherOpen, handleToggleAppSwitcher: handleToggleAppSwitcher, apiKey: streamHomeApiKey ?? '', baseUrl: streamHomeBaseUrl ?? '', token: streamHomeAccessToken ?? '', isDrawerOpen: isDrawerOpen, StreamHomeUrl: StreamHomeUrl ?? Constants.DefaultStreamHomeUrl, avatarName: avatarName, hubDashboardData: hubDashboardData })), isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, hasCustomContent: true, style: animationRefs.current[(items?.length ?? 0) + (defaultSupportLinks?.length ?? 0) + 1], isContentOpen: isAppSwitcherOpen }))
|
|
206
206
|
: null, secondaryItems && secondaryItems.length > 0 && secondaryItems.map((item, index) => (_createElement(VerticalNavigationItem, { ...item, "data-id": dataIds.VerticalNavigationSecondaryListItem, key: `${item.label} - ${index}`, index: index, isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, style: animationRefs.current[(items?.length ?? 0) + (defaultSupportLinks?.length ?? 0) + index + 1] }))), hasAvatar && avatarName && (_jsx(VerticalNavigationItem, { label: avatarName, id: dataIds.VerticalNavigationAvatarToggle, "data-id": dataIds.VerticalNavigationAvatarToggle, "aria-controls": 'avatar-panel', icon: _jsx(Avatar, { style: {
|
|
207
207
|
fontSize: '0.75rem',
|
|
208
208
|
height: 32,
|
|
@@ -14,7 +14,7 @@ import AppHub from '../AppHub/AppHub';
|
|
|
14
14
|
import { Box, Typography } from '@mui/material';
|
|
15
15
|
import { DrawerShadow } from '../../navigation/VerticalNavigation/VerticalNavigationStyles';
|
|
16
16
|
const AppSwitcher = (props) => {
|
|
17
|
-
const { isAppSwitcherOpen, handleToggleAppSwitcher, isDrawerOpen, localization, dataAttributes, baseUrl, avatarName, apiKey = '', isStandalone = true } = props;
|
|
17
|
+
const { isAppSwitcherOpen, handleToggleAppSwitcher, isDrawerOpen, localization, dataAttributes, baseUrl, avatarName, hubDashboardData, apiKey = '', isStandalone = true } = props;
|
|
18
18
|
let { token } = props;
|
|
19
19
|
const [dashboardData, setDashboardData] = useState([]);
|
|
20
20
|
const [hasPromotionalCampaigns, setHasPromotionalCampaigns] = useState(false);
|
|
@@ -73,23 +73,36 @@ const AppSwitcher = (props) => {
|
|
|
73
73
|
};
|
|
74
74
|
useEffect(() => {
|
|
75
75
|
const loadData = async () => {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
76
|
+
// If the data for the App Switcher hasn't been passed in through props
|
|
77
|
+
// then we'll need a token to fetch it via the API.
|
|
78
|
+
if (!hubDashboardData) {
|
|
79
|
+
if (!token) {
|
|
80
|
+
const parsedQueryString = queryString.parse(window.location.search);
|
|
81
|
+
if (parsedQueryString.token && typeof parsedQueryString.token === 'string') {
|
|
82
|
+
token = parsedQueryString.token;
|
|
83
|
+
}
|
|
84
|
+
else {
|
|
85
|
+
// Check the 'hash'.
|
|
86
|
+
const match = window.location.hash.match(/token=(.*)/);
|
|
87
|
+
token = (match && match.length === 2 && match[1]) || '';
|
|
88
|
+
}
|
|
80
89
|
}
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
const match = window.location.hash.match(/token=(.*)/);
|
|
84
|
-
token = (match && match.length === 2 && match[1]) || '';
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
// Store the latest access token.
|
|
88
|
-
window.localStorage.setItem(Constants.LocalStorageKey.Token, token);
|
|
89
|
-
const userDashboard = await getHubDashboardData();
|
|
90
|
-
if (!userDashboard) {
|
|
91
|
-
return;
|
|
90
|
+
// Store the latest access token.
|
|
91
|
+
window.localStorage.setItem(Constants.LocalStorageKey.Token, token);
|
|
92
92
|
}
|
|
93
|
+
// Fallback values to prevent the app switcher crashing.
|
|
94
|
+
const defaultDashboardData = {
|
|
95
|
+
customerAccountName: '',
|
|
96
|
+
applications: [],
|
|
97
|
+
customLinks: [],
|
|
98
|
+
otherProducts: [],
|
|
99
|
+
usefulLinks: [],
|
|
100
|
+
promotionalCampaigns: []
|
|
101
|
+
};
|
|
102
|
+
const userDashboard = {
|
|
103
|
+
...defaultDashboardData,
|
|
104
|
+
...(hubDashboardData ?? await getHubDashboardData())
|
|
105
|
+
};
|
|
93
106
|
userDashboard.applications.forEach((application) => {
|
|
94
107
|
if (application.children) {
|
|
95
108
|
application.children.forEach(a => {
|
|
@@ -160,7 +173,7 @@ const AppSwitcher = (props) => {
|
|
|
160
173
|
}));
|
|
161
174
|
};
|
|
162
175
|
loadData().catch(console.error);
|
|
163
|
-
}, [token, userId]);
|
|
176
|
+
}, [token, userId, hubDashboardData]);
|
|
164
177
|
useEffect(() => {
|
|
165
178
|
if (isAppSwitcherOpen) {
|
|
166
179
|
document.addEventListener('mousedown', handleAppSwitcherClose);
|
|
@@ -189,7 +202,7 @@ const AppSwitcher = (props) => {
|
|
|
189
202
|
}
|
|
190
203
|
}
|
|
191
204
|
};
|
|
192
|
-
if ((!token || !apiKey)) {
|
|
205
|
+
if ((!token || !apiKey) && !hubDashboardData) {
|
|
193
206
|
return null;
|
|
194
207
|
}
|
|
195
208
|
const docTextDirection = window.document?.dir;
|
|
@@ -216,7 +229,6 @@ AppSwitcher.propTypes = {
|
|
|
216
229
|
AppSwitcher.defaultProps = {
|
|
217
230
|
layout: Constants.Layout.Vertical,
|
|
218
231
|
baseUrl: Constants.BaseUrl,
|
|
219
|
-
localization: {}
|
|
220
|
-
applications: []
|
|
232
|
+
localization: {}
|
|
221
233
|
};
|
|
222
234
|
export default AppSwitcher;
|
package/package.json
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
import { IHubDashboard } from '../stream/AppSwitcher';
|
|
2
3
|
import { IAvatarMenuItemProps } from './VerticalNavigationAvatar';
|
|
3
4
|
export interface IVerticalNavigationItemProps {
|
|
4
5
|
label: string;
|
|
@@ -29,6 +30,7 @@ export interface IVerticalNavigationProps {
|
|
|
29
30
|
streamHomeAccessToken?: string;
|
|
30
31
|
streamHomeBaseUrl?: string;
|
|
31
32
|
streamHomeApiKey?: string;
|
|
33
|
+
hubDashboardData?: IHubDashboard;
|
|
32
34
|
avatarName?: string;
|
|
33
35
|
isDrawerOpen?: boolean;
|
|
34
36
|
isPersistent?: boolean;
|
package/utils/theme.d.ts
CHANGED
|
@@ -1,94 +1,6 @@
|
|
|
1
|
-
export declare const defaultTheme:
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
fontFamily: string;
|
|
5
|
-
};
|
|
6
|
-
h2: {
|
|
7
|
-
fontFamily: string;
|
|
8
|
-
};
|
|
9
|
-
h3: {
|
|
10
|
-
fontFamily: string;
|
|
11
|
-
};
|
|
12
|
-
h4: {
|
|
13
|
-
fontFamily: string;
|
|
14
|
-
};
|
|
15
|
-
h5: {
|
|
16
|
-
fontFamily: string;
|
|
17
|
-
};
|
|
18
|
-
h6: {
|
|
19
|
-
fontFamily: string;
|
|
20
|
-
};
|
|
21
|
-
subtitle1: {
|
|
22
|
-
fontFamily: string;
|
|
23
|
-
};
|
|
24
|
-
subtitle2: {
|
|
25
|
-
fontFamily: string;
|
|
26
|
-
};
|
|
27
|
-
body1: {
|
|
28
|
-
fontFamily: string;
|
|
29
|
-
};
|
|
30
|
-
body2: {
|
|
31
|
-
fontFamily: string;
|
|
32
|
-
};
|
|
33
|
-
button: {
|
|
34
|
-
fontWeight: number;
|
|
35
|
-
fontFamily: string;
|
|
36
|
-
};
|
|
37
|
-
caption: {
|
|
38
|
-
fontFamily: string;
|
|
39
|
-
};
|
|
40
|
-
overline: {
|
|
41
|
-
fontFamily: string;
|
|
42
|
-
};
|
|
43
|
-
fontFamily: string;
|
|
44
|
-
};
|
|
45
|
-
};
|
|
46
|
-
export declare const lightTheme: {
|
|
47
|
-
palette: {
|
|
48
|
-
primary: {
|
|
49
|
-
main: string;
|
|
50
|
-
};
|
|
51
|
-
secondary: {
|
|
52
|
-
main: "#2196f3";
|
|
53
|
-
};
|
|
54
|
-
divider: string;
|
|
55
|
-
text: {
|
|
56
|
-
primary: string;
|
|
57
|
-
};
|
|
58
|
-
navigation: {
|
|
59
|
-
background: string;
|
|
60
|
-
};
|
|
61
|
-
contrastThreshold: number;
|
|
62
|
-
};
|
|
63
|
-
};
|
|
64
|
-
export declare const darkTheme: {
|
|
65
|
-
palette: {
|
|
66
|
-
primary: {
|
|
67
|
-
50: "#fff8e1";
|
|
68
|
-
100: "#ffecb3";
|
|
69
|
-
200: "#ffe082";
|
|
70
|
-
300: "#ffd54f";
|
|
71
|
-
400: "#ffca28";
|
|
72
|
-
500: "#ffc107";
|
|
73
|
-
600: "#ffb300";
|
|
74
|
-
700: "#ffa000";
|
|
75
|
-
800: "#ff8f00";
|
|
76
|
-
900: "#ff6f00";
|
|
77
|
-
A100: "#ffe57f";
|
|
78
|
-
A200: "#ffd740";
|
|
79
|
-
A400: "#ffc400";
|
|
80
|
-
A700: "#ffab00";
|
|
81
|
-
};
|
|
82
|
-
divider: string;
|
|
83
|
-
text: {
|
|
84
|
-
primary: string;
|
|
85
|
-
};
|
|
86
|
-
navigation: {
|
|
87
|
-
background: string;
|
|
88
|
-
};
|
|
89
|
-
contrastThreshold: number;
|
|
90
|
-
};
|
|
91
|
-
};
|
|
1
|
+
export declare const defaultTheme: import("@mui/material/styles").Theme;
|
|
2
|
+
export declare const darkTheme: import("@mui/material/styles").Theme;
|
|
3
|
+
export declare const lightTheme: import("@mui/material/styles").Theme;
|
|
92
4
|
export declare const motion: {
|
|
93
5
|
ease: string;
|
|
94
6
|
easeOut: string;
|
package/utils/theme.js
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { lightBlue, orange } from '@mui/material/colors';
|
|
2
|
+
import { createTheme } from '@mui/material/styles';
|
|
3
|
+
const DEFAULT_FONT_FAMILY = '"Roboto", "Helvetica", "Arial", sans-serif';
|
|
2
4
|
const DEFAULT_HEADER_TYPOGRAPHY = {
|
|
3
|
-
fontFamily:
|
|
5
|
+
fontFamily: DEFAULT_FONT_FAMILY
|
|
4
6
|
};
|
|
5
7
|
const DEFAULT_BODY_TYPOGRAPHY = {
|
|
6
|
-
fontFamily:
|
|
8
|
+
fontFamily: DEFAULT_FONT_FAMILY
|
|
7
9
|
};
|
|
8
|
-
|
|
9
|
-
export const defaultTheme = {
|
|
10
|
+
export const defaultTheme = createTheme({
|
|
10
11
|
typography: {
|
|
11
|
-
|
|
12
|
+
fontFamily: DEFAULT_FONT_FAMILY,
|
|
12
13
|
h1: DEFAULT_HEADER_TYPOGRAPHY,
|
|
13
14
|
h2: DEFAULT_HEADER_TYPOGRAPHY,
|
|
14
15
|
h3: DEFAULT_HEADER_TYPOGRAPHY,
|
|
@@ -20,30 +21,28 @@ export const defaultTheme = {
|
|
|
20
21
|
body1: DEFAULT_BODY_TYPOGRAPHY,
|
|
21
22
|
body2: DEFAULT_BODY_TYPOGRAPHY,
|
|
22
23
|
button: {
|
|
23
|
-
|
|
24
|
-
|
|
24
|
+
fontFamily: DEFAULT_FONT_FAMILY,
|
|
25
|
+
fontSize: '1rem',
|
|
26
|
+
fontWeight: 500,
|
|
27
|
+
textTransform: 'none'
|
|
25
28
|
},
|
|
26
29
|
caption: DEFAULT_BODY_TYPOGRAPHY,
|
|
27
30
|
overline: DEFAULT_BODY_TYPOGRAPHY
|
|
28
|
-
}
|
|
29
|
-
// overrides: {
|
|
30
|
-
// MuiCssBaseline: {
|
|
31
|
-
// '@global': {
|
|
32
|
-
// '.MuiAvatarGroup-root .MuiAvatar-root:first-of-type': {
|
|
33
|
-
// backgroundColor: '#eee',
|
|
34
|
-
// color: '#333'
|
|
35
|
-
// }
|
|
36
|
-
// }
|
|
37
|
-
// }
|
|
38
|
-
// }
|
|
39
|
-
};
|
|
40
|
-
export const lightTheme = {
|
|
31
|
+
},
|
|
41
32
|
palette: {
|
|
42
33
|
primary: {
|
|
43
34
|
main: '#0077cc'
|
|
44
35
|
},
|
|
45
36
|
secondary: {
|
|
46
|
-
main:
|
|
37
|
+
main: '#003366'
|
|
38
|
+
},
|
|
39
|
+
warning: {
|
|
40
|
+
main: orange[800],
|
|
41
|
+
contrastText: '#fff'
|
|
42
|
+
},
|
|
43
|
+
info: {
|
|
44
|
+
main: lightBlue[700],
|
|
45
|
+
contrastText: '#fff'
|
|
47
46
|
},
|
|
48
47
|
divider: 'rgba(0, 0, 0, 0.075)',
|
|
49
48
|
text: {
|
|
@@ -54,20 +53,101 @@ export const lightTheme = {
|
|
|
54
53
|
},
|
|
55
54
|
contrastThreshold: 4.5
|
|
56
55
|
}
|
|
57
|
-
};
|
|
58
|
-
export const darkTheme = {
|
|
56
|
+
});
|
|
57
|
+
export const darkTheme = createTheme({
|
|
58
|
+
typography: {
|
|
59
|
+
fontFamily: DEFAULT_FONT_FAMILY,
|
|
60
|
+
h1: DEFAULT_HEADER_TYPOGRAPHY,
|
|
61
|
+
h2: DEFAULT_HEADER_TYPOGRAPHY,
|
|
62
|
+
h3: DEFAULT_HEADER_TYPOGRAPHY,
|
|
63
|
+
h4: DEFAULT_HEADER_TYPOGRAPHY,
|
|
64
|
+
h5: DEFAULT_HEADER_TYPOGRAPHY,
|
|
65
|
+
h6: DEFAULT_HEADER_TYPOGRAPHY,
|
|
66
|
+
subtitle1: DEFAULT_BODY_TYPOGRAPHY,
|
|
67
|
+
subtitle2: DEFAULT_BODY_TYPOGRAPHY,
|
|
68
|
+
body1: DEFAULT_BODY_TYPOGRAPHY,
|
|
69
|
+
body2: DEFAULT_BODY_TYPOGRAPHY,
|
|
70
|
+
button: {
|
|
71
|
+
fontFamily: DEFAULT_FONT_FAMILY,
|
|
72
|
+
fontSize: '1rem',
|
|
73
|
+
fontWeight: 500,
|
|
74
|
+
textTransform: 'none'
|
|
75
|
+
},
|
|
76
|
+
caption: DEFAULT_BODY_TYPOGRAPHY,
|
|
77
|
+
overline: DEFAULT_BODY_TYPOGRAPHY
|
|
78
|
+
},
|
|
59
79
|
palette: {
|
|
60
|
-
primary:
|
|
80
|
+
primary: {
|
|
81
|
+
main: '#000000'
|
|
82
|
+
},
|
|
83
|
+
secondary: {
|
|
84
|
+
main: '#333333'
|
|
85
|
+
},
|
|
86
|
+
warning: {
|
|
87
|
+
main: orange[800],
|
|
88
|
+
contrastText: '#fff'
|
|
89
|
+
},
|
|
90
|
+
info: {
|
|
91
|
+
main: lightBlue[700],
|
|
92
|
+
contrastText: '#fff'
|
|
93
|
+
},
|
|
61
94
|
divider: 'rgba(255, 255, 255, 0.075)',
|
|
62
95
|
text: {
|
|
63
96
|
primary: 'rgba(255,255,255,0.95)'
|
|
64
97
|
},
|
|
65
98
|
navigation: {
|
|
66
|
-
background: '#
|
|
99
|
+
background: '#000'
|
|
67
100
|
},
|
|
68
101
|
contrastThreshold: 4.5
|
|
69
102
|
}
|
|
70
|
-
};
|
|
103
|
+
});
|
|
104
|
+
export const lightTheme = createTheme({
|
|
105
|
+
typography: {
|
|
106
|
+
fontFamily: DEFAULT_FONT_FAMILY,
|
|
107
|
+
h1: DEFAULT_HEADER_TYPOGRAPHY,
|
|
108
|
+
h2: DEFAULT_HEADER_TYPOGRAPHY,
|
|
109
|
+
h3: DEFAULT_HEADER_TYPOGRAPHY,
|
|
110
|
+
h4: DEFAULT_HEADER_TYPOGRAPHY,
|
|
111
|
+
h5: DEFAULT_HEADER_TYPOGRAPHY,
|
|
112
|
+
h6: DEFAULT_HEADER_TYPOGRAPHY,
|
|
113
|
+
subtitle1: DEFAULT_BODY_TYPOGRAPHY,
|
|
114
|
+
subtitle2: DEFAULT_BODY_TYPOGRAPHY,
|
|
115
|
+
body1: DEFAULT_BODY_TYPOGRAPHY,
|
|
116
|
+
body2: DEFAULT_BODY_TYPOGRAPHY,
|
|
117
|
+
button: {
|
|
118
|
+
fontFamily: DEFAULT_FONT_FAMILY,
|
|
119
|
+
fontSize: '1rem',
|
|
120
|
+
fontWeight: 500,
|
|
121
|
+
textTransform: 'none'
|
|
122
|
+
},
|
|
123
|
+
caption: DEFAULT_BODY_TYPOGRAPHY,
|
|
124
|
+
overline: DEFAULT_BODY_TYPOGRAPHY
|
|
125
|
+
},
|
|
126
|
+
palette: {
|
|
127
|
+
primary: {
|
|
128
|
+
main: '#ffffff'
|
|
129
|
+
},
|
|
130
|
+
secondary: {
|
|
131
|
+
main: '#cccccc'
|
|
132
|
+
},
|
|
133
|
+
warning: {
|
|
134
|
+
main: orange[800],
|
|
135
|
+
contrastText: '#fff'
|
|
136
|
+
},
|
|
137
|
+
info: {
|
|
138
|
+
main: lightBlue[700],
|
|
139
|
+
contrastText: '#fff'
|
|
140
|
+
},
|
|
141
|
+
divider: 'rgba(0, 0, 0, 0.075)',
|
|
142
|
+
text: {
|
|
143
|
+
primary: 'rgba(0,0,0,0.95)'
|
|
144
|
+
},
|
|
145
|
+
navigation: {
|
|
146
|
+
background: '#fff'
|
|
147
|
+
},
|
|
148
|
+
contrastThreshold: 4.5
|
|
149
|
+
}
|
|
150
|
+
});
|
|
71
151
|
export const motion = {
|
|
72
152
|
ease: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
|
|
73
153
|
easeOut: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
|