Merge pull request #1427 from Qwant/QMAPS-2828

language/message/de.po

@@ -1042,7 +1042,7 @@ msgid "Your position"
 msgstr "Ihr Standort"
 
 msgid "Back to Qwant.com"
-msgstr "Zurück zu Qwant.com"
+msgstr "Search"
 
 msgid "Qwant Maps uses OpenStreetMap data."
 msgstr "Qwant Maps verwendet OpenStreetMap-Daten."

language/message/en.po

@@ -1031,7 +1031,7 @@ msgid "Your position"
 msgstr ""
 
 msgid "Back to Qwant.com"
-msgstr ""
+msgstr "Search"
 
 msgid "Qwant Maps uses OpenStreetMap data."
 msgstr ""

language/message/es.po

@@ -1040,7 +1040,7 @@ msgid "Your position"
 msgstr "Tu localización"
 
 msgid "Back to Qwant.com"
-msgstr "Volver a Qwant.com"
+msgstr "Search"
 
 msgid "Qwant Maps uses OpenStreetMap data."
 msgstr "Qwant Maps usa datos de OpenStreetMaps."

language/message/fr.po

@@ -1035,7 +1035,7 @@ msgid "Your position"
 msgstr "Votre position"
 
 msgid "Back to Qwant.com"
-msgstr "Retour à Qwant.com"
+msgstr "Search"
 
 msgid "Qwant Maps uses OpenStreetMap data."
 msgstr "Qwant Maps utilise les données OpenStreetMap."

language/message/it.po

@@ -1043,7 +1043,7 @@ msgid "Your position"
 msgstr "La tua posizione"
 
 msgid "Back to Qwant.com"
-msgstr "Torna su Qwant.com"
+msgstr "Search"
 
 msgid "Qwant Maps uses OpenStreetMap data."
 msgstr "Qwant Maps usa i dati di OpenStreetMap."

src/components/BackToQwantButton.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import { Button, IconArrowLeftLine } from '@qwant/qwant-ponents';
+import { QwantLogoBlue } from 'src/components/ui/icons';
 import { useI18n } from 'src/hooks';
 
 const hiddenAttributeClassName = 'map_control__scale_attribute_container--hidden';
@@ -24,6 +25,7 @@ export const BackToQwantButton = ({ isMobile }) => {
       onClick={() => window.history.back()}
     >
       <IconArrowLeftLine />
+      <QwantLogoBlue className="qwant-logo" />
       {_('Back to Qwant.com')}
     </Button>
   );

src/components/TopBar/TopBar.jsx

@@ -2,8 +2,14 @@ import React, { useEffect, useState, useRef } from 'react';
 import cx from 'classnames';
 import Telemetry from 'src/libs/telemetry';
 import { Suggest } from 'src/components/ui';
-import { IconArrowBackward, IconCloseCircled, IconDirectionsArrow } from 'src/components/ui/icons';
+import {
+  IconArrowBackward,
+  IconCloseCircled,
+  IconDirectionsArrow,
+  QwantLogoBlue,
+} from 'src/components/ui/icons';
 import { IconClose, Flex, IconMenu, IconApps } from '@qwant/qwant-ponents';
+
 import { useConfig, useDevice, useI18n } from 'src/hooks';
 import { handleFocus } from 'src/libs/input';
 import { selectItem, fetchSuggests } from 'src/libs/suggest';
@@ -199,10 +205,19 @@ const TopBar = ({ value, setUserInputValue, inputRef, onSuggestToggle, backButto
                 })}
                 onClick={() => setProductsDrawerOpen(!isProductsDrawerOpen)}
               >
-                <IconApps className="u-mr-xxs" />
-                {_('Products', 'menu')}
+                <IconApps />
               </button>
             )}
+            {!isMobile && (
+              <a
+                className={cx('u-mr-xs', 'menu__button', 'menu__button--icon')}
+                target="_self"
+                href={window.location.origin}
+              >
+                <QwantLogoBlue />
+                {_('Back to Qwant.com')}
+              </a>
+            )}
           </Flex>
         </div>
         {config.direction.enabled && (

src/components/ui/icons.ts

@@ -33,3 +33,4 @@ export { ReactComponent as IconDirectionsArrow } from '../../../public/images/di
 
 export { ReactComponent as IconAndroid } from '../../../public/images/mobile/android.svg';
 export { ReactComponent as IconApple } from '../../../public/images/mobile/i-os.svg';
+export { ReactComponent as QwantLogoBlue } from '../../../public/images/qwant-search-logo.svg';

src/libs/url_utils.js

@@ -76,7 +76,7 @@ export function updateQueryString(queriesObject) {
 
 export function shouldShowBackToQwant() {
   const params = parseQueryString(window.location.search);
-  return params.client && params.client === 'search-ia-maps-multi';
+  return params?.client === 'search-ia-maps-multi' || params?.client === 'search-ia-maps-single';
 }
 
 const getDrawerUrl = drawer => getAppRelativePathname() + updateQueryString({ drawer });

src/scss/includes/components/backToQwantButton.scss

@@ -1,4 +1,13 @@
 .backToQwantButton {
+  border-radius: 18px;
+  padding: var(--spacing-xxs) var(--spacing-s) !important;
+
+  .qwant-logo {
+    width: 24px;
+    height: 24px;
+    margin: 0 var(--spacing-xs) 0 0;
+  }
+
   @media (max-width: 640px) {
     background-color: white !important;
     box-shadow: 0 1px 4px 0 rgba(12, 12, 14, 0.2), 0 0 2px 0 rgba(12, 12, 14, 0.12);

src/scss/includes/menu.scss

@@ -160,7 +160,7 @@ $productDrawerWidth: 744px;
     &-appButton {
       &:not(:first-child) {
         margin-left: 8px;
-      }     
+      }
     }
   }
 
@@ -171,7 +171,6 @@ $productDrawerWidth: 744px;
     text-align: center;
     margin-bottom: $spacing-s;
     padding: $spacing-xxl-3 $spacing-l;
-
   }
 
   @media (max-width: 640px) {
@@ -228,6 +227,7 @@ $productDrawerWidth: 744px;
     padding: $spacing-s;
     border-radius: 8px;
     box-shadow: $shadow;
+    text-decoration: none !important;
 
     &:hover {
       color: $grey-black;
@@ -243,6 +243,14 @@ $productDrawerWidth: 744px;
     &--noShadow {
       box-shadow: none;
     }
+
+    &--icon {
+      padding: var(--spacing-xs);
+
+      svg {
+        margin-right: var(--spacing-xxs);
+      }
+    }
   }
 
   .menu-top {