diff --git a/web/app.react.js b/web/app.react.js --- a/web/app.react.js +++ b/web/app.react.js @@ -38,7 +38,7 @@ import InputStateContainer from './input/input-state-container.react.js'; import LoadingIndicator from './loading-indicator.react.js'; import { MenuProvider } from './menu-provider.react.js'; -import AppsDirectory from './modals/apps/apps-directory.react.js'; +import AppsDirectory from './modals/apps/apps-directory-modal.react.js'; import UpdateModalHandler from './modals/update-modal.react.js'; import SettingsSwitcher from './navigation-panels/settings-switcher.react.js'; import Topbar from './navigation-panels/topbar.react.js'; diff --git a/web/modals/apps/apps-directory.react.js b/web/modals/apps/apps-directory-modal.react.js rename from web/modals/apps/apps-directory.react.js rename to web/modals/apps/apps-directory-modal.react.js --- a/web/modals/apps/apps-directory.react.js +++ b/web/modals/apps/apps-directory-modal.react.js @@ -3,8 +3,11 @@ import * as React from 'react'; import { useSelector } from 'react-redux'; -import AppListing from './app-listing.react.js'; -import css from './apps.css'; +import { useModalContext } from 'lib/components/modal-provider.react.js'; + +import AppListing from '../apps/app-listing.react.js'; +import css from '../apps/apps.css'; +import Modal from '../modal.react.js'; const APP_DIRECTORY_DATA = [ { @@ -25,7 +28,9 @@ }, ]; -function AppsDirectory(): React.Node { +function AppsModal(): React.Node { + const { popModal } = useModalContext(); + const enabledApps = useSelector(state => state.enabledApps); const appData = React.useMemo( @@ -46,11 +51,12 @@ ); return ( -
-

Choose Apps

-
{appItems}
-
+ +
+
{appItems}
+
+
); } -export default AppsDirectory; +export default AppsModal; diff --git a/web/modals/apps/apps.css b/web/modals/apps/apps.css --- a/web/modals/apps/apps.css +++ b/web/modals/apps/apps.css @@ -1,7 +1,8 @@ div.appsDirectoryContainer { display: flex; flex-direction: column; - align-items: flex-start; + padding-top: 34px; + padding-bottom: 16px; } h4.appsHeader { @@ -11,17 +12,19 @@ } div.appsDirectoryList { - margin-left: 20px; display: flex; flex-direction: column; - row-gap: 10px; + row-gap: 16px; + width: 100%; + box-sizing: border-box; + padding: 12px 32px; } div.appListingContainer { color: var(--fg); display: flex; flex-direction: row; - align-items: center; + align-items: space-between; } div.appListingTextContainer { @@ -39,15 +42,15 @@ font-size: var(--xs-font-12); } -div.appListingIcon { - padding: 0 20px; +.appListingIcon { + padding: 0 20px 0 0; align-self: stretch; display: flex; align-items: center; } .appListingIconState { - padding: 0 20px; + padding: 0 0 0 20px; font-size: var(--xl-font-20); } diff --git a/web/navigation-panels/topbar.react.js b/web/navigation-panels/topbar.react.js --- a/web/navigation-panels/topbar.react.js +++ b/web/navigation-panels/topbar.react.js @@ -1,29 +1,24 @@ // @flow import * as React from 'react'; -import { useDispatch } from 'react-redux'; +import { useModalContext } from 'lib/components/modal-provider.react.js'; import SWMansionIcon from 'lib/components/SWMansionIcon.react.js'; import AppSwitcher from './app-switcher.react.js'; import css from './topbar.css'; import Button from '../components/button.react.js'; -import { updateNavInfoActionType } from '../redux/action-types.js'; +import AppsDirectory from '../modals/apps/apps-directory-modal.react.js'; function Topbar(): React.Node { - const dispatch = useDispatch(); + const { pushModal } = useModalContext(); const onClickApps = React.useCallback( (event: SyntheticEvent) => { event.preventDefault(); - dispatch({ - type: updateNavInfoActionType, - payload: { - tab: 'apps', - }, - }); + pushModal(); }, - [dispatch], + [pushModal], ); const appNavigationItem = React.useMemo(