diff --git a/src/components/ManagerPage/AppsList.js b/src/components/ManagerPage/AppsList.js
index 115c8904..048f402d 100644
--- a/src/components/ManagerPage/AppsList.js
+++ b/src/components/ManagerPage/AppsList.js
@@ -15,7 +15,6 @@ import { developerModeSelector } from 'reducers/settings'
import installApp from 'commands/installApp'
import uninstallApp from 'commands/uninstallApp'
import Box from 'components/base/Box'
-import Space from 'components/base/Space'
import Modal, { ModalBody, ModalFooter, ModalTitle, ModalContent } from 'components/base/Modal'
import Tooltip from 'components/base/Tooltip'
import Text from 'components/base/Text'
@@ -39,15 +38,35 @@ const mapStateToProps = state => ({
const List = styled(Box).attrs({
horizontal: true,
- m: -3,
})`
flex-wrap: wrap;
+
+ > * {
+ width: calc(50% - 10px);
+ margin-bottom: 20px;
+ &:nth-child(even) {
+ margin-left: 20px;
+ }
+
+ @media (max-width: 1000px) {
+ width: 100%;
+ &:nth-child(even) {
+ margin-left: 0;
+ }
+ }
+ }
`
const ICONS_FALLBACK = {
bitcoin_testnet: 'bitcoin',
}
+const CATALOG_INFO_ICON = (
+
+
+
+)
+
type Status = 'loading' | 'idle' | 'busy' | 'success' | 'error'
type Mode = 'home' | 'installing' | 'uninstalling'
@@ -79,6 +98,20 @@ const LoadingApp = () => (
const loadingApp =
+const FAKE_LIST = (
+
+ {loadingApp}
+ {loadingApp}
+ {loadingApp}
+ {loadingApp}
+ {loadingApp}
+ {loadingApp}
+ {loadingApp}
+ {loadingApp}
+ {loadingApp}
+
+)
+
class AppsList extends PureComponent {
state = {
status: 'loading',
@@ -276,22 +309,16 @@ class AppsList extends PureComponent {
)}
{this.renderModal()}
- {!appsLoaded && (
-
-
-
- {loadingApp}
- {loadingApp}
- {loadingApp}
- {loadingApp}
- {loadingApp}
- {loadingApp}
- {loadingApp}
- {loadingApp}
- {loadingApp}
-
-
- )}
+ {!appsLoaded && FAKE_LIST}
+
+ )
+ }
+
+ renderTooltip = () => {
+ const { t } = this.props
+ return (
+
+ {t('manager.apps.help')}
)
}
@@ -299,24 +326,12 @@ class AppsList extends PureComponent {
render() {
const { t } = this.props
return (
-
-
-
- {t('manager.apps.all')}
- (
-
- {t('manager.apps.help')}
-
- )}
- >
-
-
-
-
-
- {this.renderList()}
+
+
+ {t('manager.apps.all')}
+ {CATALOG_INFO_ICON}
+ {this.renderList()}
)
}
diff --git a/src/components/ManagerPage/ManagerApp.js b/src/components/ManagerPage/ManagerApp.js
index 1f214de8..a5de94d4 100644
--- a/src/components/ManagerPage/ManagerApp.js
+++ b/src/components/ManagerPage/ManagerApp.js
@@ -14,15 +14,12 @@ import Button from 'components/base/Button'
export const Container = styled(Box).attrs({
horizontal: true,
- my: 2,
- mx: 3,
p: 4,
bg: 'white',
boxShadow: p => (p.noShadow ? -1 : 0),
borderRadius: 4,
flow: 2,
})`
- width: calc(50% - 30px);
line-height: normal;
`