Display recommended applications

QwantResearch · Jul 2, 2019 · c8e01ef · c8e01ef
1 parent 99e0312
commit c8e01ef
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 7 deletions.
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -95,5 +95,8 @@
   "Go back to": "Go back to",
   "enjoy!": "enjoy!",
   "!": "!",
-  "Your data": "Your data"
+  "Your data": "Your data",
+  "Recommended applications": "Recommended applications",
+  "The following applications are using Masq:": "The following applications are using Masq:",
+  "Open Qwant Maps": "Open Qwant Maps"
 }
diff --git a/public/locales/fr.json b/public/locales/fr.json
@@ -95,5 +95,8 @@
   "Go back to": "Retournez sur",
   "enjoy!": "profitez !",
   "!": " !",
-  "Your data": "Vos données"
+  "Your data": "Vos données",
+  "Recommended applications": "Applications recommandées",
+  "The following applications are using Masq:": "Les applications suivantes utilisent Masq :",
+  "Open Qwant Maps": "Ouvrir Qwant Maps"
 }
diff --git a/src/assets/apps-maps.svg b/src/assets/apps-maps.svg
diff --git a/src/components/Typography/Typography.jsx b/src/components/Typography/Typography.jsx
@@ -18,6 +18,7 @@ Typography.propTypes = {
     'title-landing2',
     'title-modal',
     'title-page',
+    'subtitle-page',
     'title-card',
     'paragraph',
     'paragraph-landing',

diff --git a/src/components/Typography/Typography.module.scss b/src/components/Typography/Typography.module.scss
@@ -62,6 +62,12 @@
   color: $color-dark-blue-100;
 }
 
+.subtitle-page {
+  font-size: 14px;
+  line-height: 1.36;
+  color: $color-blue-grey;
+}
+
 .title-card {
   font-size: 20px;
   font-weight: 600;

diff --git a/src/containers/Applications/Applications.jsx b/src/containers/Applications/Applications.jsx
@@ -8,10 +8,14 @@ import { fetchApps, removeApp, setNotification } from '../../actions'
 import { Card, Typography, Space } from '../../components'
 import { DeleteAppDialog } from '../../modals'
 
+import { ReactComponent as MapsIcon } from '../../assets/apps-maps.svg'
+
 import Link from './Link'
 
 import styles from './Applications.module.scss'
 
+const MAPS_URL = 'https://qwant.com/maps'
+
 class Apps extends PureComponent {
   constructor (props) {
     super(props)
@@ -75,7 +79,20 @@ class Apps extends PureComponent {
 
         <Space size={16} />
 
-        {apps.length === 0 && <Typography type='paragraph'>{t('You do not have a registered application yet')}</Typography>}
+        {apps.length === 0 && (
+          <React.Fragment>
+            <Typography type='subtitle-page'>{t('You do not have a registered application yet')}</Typography>
+            <Space size={42} />
+            <Typography type='title-page'>{t('Recommended applications')}</Typography>
+            <Space size={16} />
+            <Typography type='subtitle-page'>{t('The following applications are using Masq:')}</Typography>
+            <Space size={24} />
+            <div className={styles.recommendedApps}>
+              <MapsIcon className={styles.icon} onClick={() => window.open(MAPS_URL, '_blank')} />
+              <Link url={MAPS_URL} label={t('Open Qwant Maps')} />
+            </div>
+          </React.Fragment>
+        )}
 
         <div className={styles.cards}>
           {apps.map((app, index) => (

diff --git a/src/containers/Applications/Applications.module.scss b/src/containers/Applications/Applications.module.scss
@@ -12,7 +12,7 @@
 
   .topSection {
     display: flex;
-    height: 50px;
+    // height: 50px;
     justify-content: space-between;
   }
 
@@ -37,6 +37,17 @@
       }
     }
   }
+
+  .recommendedApps {
+    display: flex;
+    flex-direction: column;
+    width: 180px;
+    align-items: center;
+
+    .icon {
+      cursor: pointer;
+    }
+  }
 }
 
 .Link {

diff --git a/src/containers/Applications/Link.jsx b/src/containers/Applications/Link.jsx
@@ -6,21 +6,22 @@ import { useTranslation } from 'react-i18next'
 import { Typography } from '../../components'
 import styles from './Applications.module.scss'
 
-const Link = ({ url }) => {
+const Link = ({ url, label }) => {
   const { t } = useTranslation()
 
   return (
     <div className={styles.Link}>
       <ExternalLink color={styles.colorBlueGrey} />
       <Typography type='label' color={styles.colorBlueGrey}>
-        <a href={url} rel='noopener noreferrer' target='_blank'>{t('Open application')}</a>
+        <a href={url} rel='noopener noreferrer' target='_blank'>{label || t('Open application')}</a>
       </Typography>
     </div>
   )
 }
 
 Link.propTypes = {
-  url: PropTypes.string
+  url: PropTypes.string,
+  label: PropTypes.string
 }
 
 export default Link