Edit UI for MAPS drawers

config/constants.yml

@@ -33,6 +33,7 @@ localizedUrls:
     aboutHome: https://about.qwant.com
     aboutPrivacy: https://about.qwant.com/legal/privacy
     aboutMapsToS: https://about.qwant.com/legal/terms-of-service/qwant-maps/
+    aboutExtension: https://about.qwant.com/extension
     contributing: https://github.com/Qwant/qwantmaps/blob/master/contributing.md
     helpGeolocation: https://help.qwant.com/en/docs/maps/activation-of-geolocation-after-denied-access/
     helpEditData: https://help.qwant.com/en/docs/maps/how-to-add-or-modify-data/
@@ -43,6 +44,7 @@ localizedUrls:
     helpEditData: https://help.qwant.com/docs/maps/comment-ajouter-ou-modifier-des-donnees/
     helpHistory: https://help.qwant.com/docs/maps/a-propos-de-votre-historique-de-recherche-sur-qwant-maps/
     reportBug: https://about.qwant.com/fr/contact#contact
+
   de:
     helpGeolocation: https://help.qwant.com/de/docs/maps/aktivierung-der-standorterfassung-nach-ablehnung/
     helpEditData: https://help.qwant.com/de/docs/maps/wie-kann-ich-daten-hinzufuegen-oder-bearbeiten/

language/message/fr.po

@@ -1783,3 +1783,6 @@ msgstr "Sélection en partenariat avec l'INRAE"
 
 msgid "Selected in patnership with ReseauVrac"
 msgstr "Sélection en partenariat avec Réseau Vrac"
+
+msgid "VIPrivacy Protected Navigation"
+msgstr "Qwant VIPrivacy :<br />Navigation protégée, confidentialité renforcée"

src/panel/Menu.tsx

@@ -5,7 +5,7 @@ import ProductsDrawer from './menu/ProductsDrawer';
 import Telemetry from 'src/libs/telemetry';
 import { CloseButton } from 'src/components/ui';
 import { RootModal } from 'src/components/RootModal';
-import { Flex, IconArrowLeftLine } from '@qwant/qwant-ponents';
+import { Flex } from '@qwant/qwant-ponents';
 import { useConfig, useDevice, useI18n } from 'src/hooks';
 import { getQueryString, parseQueryString } from 'src/libs/url_utils';
 import { useStore } from '../store';
@@ -67,26 +67,14 @@ const Menu: React.FunctionComponent = () => {
           <div className="menu__overlay" onClick={closeDrawers} />
           <div className="menu__panel">
             <Flex alignCenter className="menu-top">
-              {isMobile && isProductsDrawerOpen && (
-                <>
-                  <Flex
-                    as="button"
-                    center
-                    alignCenter
-                    type="button"
-                    className="u-mr-s"
-                    onClick={() => {
-                      setProductsDrawerOpen(false);
-                      setMenuDrawerOpen(true);
-                    }}
-                    aria-label={_('Go back')}
-                  >
-                    <IconArrowLeftLine size={24} />
-                  </Flex>
-                  <div className="u-text--heading5">{_('Products', 'menu')}</div>
-                </>
+              {isProductsDrawerOpen && (
+                <div className="u-text--heading6">{_('Products', 'menu')}</div>
               )}
-              <CloseButton circle onClick={closeDrawers} />
+              <CloseButton
+                circle={false}
+                onClick={closeDrawers}
+                className="menu-top-close-button"
+              />
             </Flex>
             <div className="menu-content">
               {isMenuDrawerOpen && !isProductsDrawerOpen && (

src/panel/menu/ProductCardSmall.tsx

@@ -0,0 +1,33 @@
+import { Flex } from '@qwant/qwant-ponents';
+import React from 'react';
+
+type ProductCardSmallType = {
+  url: string;
+  img: string;
+  title: string;
+  linkText: string;
+};
+
+const ProductCardSmall = ({ url, img, title, linkText }: ProductCardSmallType) => {
+  return (
+    <a href={url} target="_blank" rel="noopener noreferrer" className="card betterweb u-mb-l">
+      <Flex alignCenter>
+        <div className="u-mr-l">
+          <img width="100" height="100" src={img} />
+        </div>
+        <div>
+          <div className="u-color--primary u-mb-s betterweb-description">
+            <span
+              dangerouslySetInnerHTML={{
+                __html: title,
+              }}
+            />
+          </div>
+          <div className="card-link">{linkText}</div>
+        </div>
+      </Flex>
+    </a>
+  );
+};
+
+export default ProductCardSmall;

src/panel/menu/ProductsDrawer.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Flex } from '@qwant/qwant-ponents';
 import { useI18n } from 'src/hooks';
 import ProductCard from './ProductCard';
+import ProductCardSmall from './ProductCardSmall';
 
 const ProductsDrawer = () => {
-  const { getLocalizedUrl, getLocalizedString } = useI18n();
+  const { getLocalizedUrl, getLocalizedString, _ } = useI18n();
 
   return (
     <>
@@ -44,24 +44,18 @@ const ProductsDrawer = () => {
           }}
         />
       </div>
-      <a
-        href={getLocalizedUrl('aboutHome')}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="card betterweb u-mb-l"
-      >
-        <Flex alignCenter>
-          <div className="u-mr-l">
-            <img width="100" height="100" src="./statics/images/products/web-internaute.svg" />
-          </div>
-          <div>
-            <div className="u-color--primary u-mb-s betterweb-description">
-              {getLocalizedString('betterwebDesc')}
-            </div>
-            <div className="card-link">{getLocalizedString('betterwebOpen')}</div>
-          </div>
-        </Flex>
-      </a>
+      <ProductCardSmall
+        url={getLocalizedUrl('aboutHome')}
+        img="./statics/images/products/web-internaute.svg"
+        title={getLocalizedString('betterwebDesc')}
+        linkText={getLocalizedString('betterwebOpen')}
+      />
+      <ProductCardSmall
+        url={getLocalizedUrl('aboutExtension')}
+        img="./statics/images/products/VIPrivacy.svg"
+        title={_('VIPrivacy Protected Navigation')}
+        linkText={getLocalizedString('betterwebOpen')}
+      />
     </>
   );
 };

src/scss/includes/colors.scss

@@ -2,9 +2,9 @@
 $primary_text: #0c0c0e;
 $primary_alternative_text: #ffffff;
 $primary_clear: #c8cbd3;
-$secondary_text : #59595f;
+$secondary_text: #59595f;
 $secondary_text_clear: #697496;
-$secondary_variant_text : #018475; /* link */
+$secondary_variant_text: #018475; /* link */
 $grey-darker: #29292f;
 $grey-black: #0c0c0e;
 $grey-semi-darkness: #59595f;
@@ -15,17 +15,17 @@ $grey-bright: #f5f5f7;
 $grey-grey: #898991;
 
 /* background */
-$background : #ffffff;
-$background_alternate: #039BE5;
-$surface : #f4f6fa;
+$background: #ffffff;
+$background_alternate: #039be5;
+$surface: #f4f6fa;
 
 /* separator */
-$separator_color : #e0e1e6;
+$separator_color: #e0e1e6;
 
 /* error  */
-$error_background : #f8d7da;
-$error_border : #f5c6cb;
-$error_text : #721c24;
+$error_background: #f8d7da;
+$error_border: #f5c6cb;
+$error_text: #721c24;
 
 /* actions */
 $action-blue-base: #1a6aff;