From 5e17a944d6f4ca28233964279d65fd4694c89d4e Mon Sep 17 00:00:00 2001
From: mikozet <95082155+mikozet@users.noreply.github.com>
Date: Thu, 13 Jul 2023 15:42:42 +0200
Subject: [PATCH] Add report bugs link, remove links to social channels (#706)

* Remove socials, update links

* Update translations

* Remove support link, move navigation to bottom on desktop, update btn colors

* Update navigation margin

* Update navigation link
---
 locales/en.json                      |  4 +-
 src/components/Navigation.js         | 58 +++++++---------------------
 src/components/NavigationFloating.js |  6 +--
 src/utils/constants.js               |  2 +
 src/views/Welcome.js                 | 54 +++++++++++++-------------
 5 files changed, 47 insertions(+), 77 deletions(-)

diff --git a/locales/en.json b/locales/en.json
index f179c671..eff4e368 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -198,6 +198,7 @@
     "buttonSendCircles": "Send Circles",
     "buttonOrganization": "Create Shared Wallet",
     "linkAbout": "About",
+    "linkBugReporting": "Report Bugs",
     "linkFAQ": "FAQ",
     "linkMarketplace": "Marketplace",
     "linkPrivacyLegal": "Privacy / Legal",
@@ -207,8 +208,7 @@
     "linkAddMembers": "Add Members",
     "linkEditProfile": "Edit Profile",
     "linkMyWallets": "My Wallets",
-    "linkMarketplace": "Marketplace",
-    "linkSupport": "Support"
+    "linkMarketplace": "Marketplace"
   },
   "NotFound": {
     "bodyNotFound": "Ouch. We could not find the requested page. Are you sure it's the right address?",
diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index 24df1231..fd666b39 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -25,21 +25,12 @@ import ExternalLink from '~/components/ExternalLink';
 // import LocaleSelector from '~/components/LocaleSelector';
 import UsernameDisplay from '~/components/UsernameDisplay';
 import translate from '~/services/locale';
-import {
-  IconFacebook,
-  IconMail,
-  IconTelegram,
-  IconTwitter,
-} from '~/styles/icons';
 import {
   ABOUT_URL,
-  EMAIL_URL,
-  FACEBOOK_URL,
+  BUG_REPORTING_URL,
   FAQ_URL,
   MARKETPLACE_URL,
   PRIVACY_LEGAL_URL,
-  TELEGRAM_URL,
-  TWITTER_URL,
 } from '~/utils/constants';
 
 const useStyles = makeStyles((theme) => ({
@@ -81,6 +72,9 @@ const useStyles = makeStyles((theme) => ({
     display: 'block',
     color: theme.palette.primary.contrastText,
   },
+  navFooterLinksContainer: {
+    flexDirection: 'column',
+  },
 }));
 
 const Navigation = ({ isExpanded, ...props }) => {
@@ -163,7 +157,12 @@ const NavigationFooter = () => {
 
   return (
     <Box className={classes.navigationFooter} component="footer">
-      <Grid container spacing={2}>
+      <Grid className={classes.navFooterLinksContainer} container spacing={2}>
+        <Grid item xs={6}>
+          <NavigationExternalLink href={BUG_REPORTING_URL}>
+            {translate('Navigation.linkBugReporting')}
+          </NavigationExternalLink>
+        </Grid>
         <Grid item xs={6}>
           <NavigationExternalLink href={MARKETPLACE_URL}>
             {translate('Navigation.linkMarketplace')}
@@ -174,47 +173,16 @@ const NavigationFooter = () => {
             {translate('Navigation.linkAbout')}
           </NavigationExternalLink>
         </Grid>
-        <Grid item xs={6}>
-          <NavigationExternalLink href={PRIVACY_LEGAL_URL}>
-            {translate('Navigation.linkPrivacyLegal')}
-          </NavigationExternalLink>
-        </Grid>
         <Grid item xs={6}>
           <NavigationExternalLink href={FAQ_URL}>
             {translate('Navigation.linkFAQ')}
           </NavigationExternalLink>
         </Grid>
-      </Grid>
-      <Box mt={2} />
-      <Grid alignItems="center" container spacing={2}>
         <Grid item xs={6}>
-          <Grid container spacing={0}>
-            <Grid item xs={3}>
-              <NavigationExternalLink href={TELEGRAM_URL}>
-                <IconTelegram fontSize="small" />
-              </NavigationExternalLink>
-            </Grid>
-            <Grid item xs={3}>
-              <NavigationExternalLink href={FACEBOOK_URL}>
-                <IconFacebook fontSize="small" />
-              </NavigationExternalLink>
-            </Grid>
-            <Grid item xs={3}>
-              <NavigationExternalLink href={TWITTER_URL}>
-                <IconTwitter fontSize="small" />
-              </NavigationExternalLink>
-            </Grid>
-            <Grid item xs={3}>
-              <NavigationExternalLink href={EMAIL_URL}>
-                <IconMail fontSize="small" />
-              </NavigationExternalLink>
-            </Grid>
-          </Grid>
+          <NavigationExternalLink href={PRIVACY_LEGAL_URL}>
+            {translate('Navigation.linkPrivacyLegal')}
+          </NavigationExternalLink>
         </Grid>
-        {/* We temporary disable language switcher since languages are not there but should come soon */}
-        {/* <Grid item xs={6}>
-          <LocaleSelector />
-        </Grid> */}
       </Grid>
     </Box>
   );
diff --git a/src/components/NavigationFloating.js b/src/components/NavigationFloating.js
index a3406188..053f2de8 100644
--- a/src/components/NavigationFloating.js
+++ b/src/components/NavigationFloating.js
@@ -15,7 +15,7 @@ import ExternalLink from '~/components/ExternalLink';
 import translate from '~/services/locale';
 import { IconWobblyCircleSecond } from '~/styles/icons';
 import { IconClose, IconMore } from '~/styles/icons';
-import { FAQ_URL, MARKETPLACE_URL } from '~/utils/constants';
+import { BUG_REPORTING_URL, MARKETPLACE_URL } from '~/utils/constants';
 
 const useStyles = makeStyles((theme) => {
   const backgroundTheme = (props) => {
@@ -217,10 +217,10 @@ export default function NavigationFloating(props) {
             </Button>
           </MenuItem>
         </ExternalLink>
-        <ExternalLink href={FAQ_URL}>
+        <ExternalLink href={BUG_REPORTING_URL}>
           <MenuItem onClick={handleClose}>
             <Button isOutline>
-              {translate('NavigationFloating.linkSupport')}
+              {translate('Navigation.linkBugReporting')}
             </Button>
           </MenuItem>
         </ExternalLink>
diff --git a/src/utils/constants.js b/src/utils/constants.js
index bb26565d..d8a56091 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -5,6 +5,8 @@ export const PATHFINDER_HOPS_DEFAULT = 3;
 export const NEEDED_TRUST_CONNECTIONS = 3;
 
 export const ABOUT_URL = 'https://joincircles.net';
+export const BUG_REPORTING_URL =
+  'https://docs.google.com/forms/d/e/1FAIpQLSdczjck3RFE5VN5oSuge6aQWVAY7WA5RyIRYyFusj1kCSz0SQ/viewform';
 export const EMAIL_URL = 'mailto:hello@joincircles.net';
 export const FACEBOOK_URL = 'https://facebook.com/CirclesUBI';
 export const FAQ_URL = 'https://joincircles.net/faq';
diff --git a/src/views/Welcome.js b/src/views/Welcome.js
index 9c6da76a..8fd3a23a 100644
--- a/src/views/Welcome.js
+++ b/src/views/Welcome.js
@@ -16,7 +16,7 @@ import Logo from '~/components/Logo';
 import View from '~/components/View';
 import translate from '~/services/locale';
 import {
-  ABOUT_URL,
+  BUG_REPORTING_URL,
   EMAIL_URL,
   FAQ_URL,
   PRIVACY_LEGAL_URL,
@@ -31,10 +31,13 @@ const useStyles = makeStyles((theme) => ({
     paddingLeft: theme.spacing(2),
   },
   welcomeExternalLink: {
-    color: theme.palette.primary.main,
-    fontWeight: '400',
     zIndex: theme.zIndex.layer2,
     position: 'relative',
+    margin: '0 9px',
+
+    [theme.breakpoints.up('sm')]: {
+      margin: '0 10px',
+    },
   },
   divider: {
     marginLeft: '16px',
@@ -42,6 +45,13 @@ const useStyles = makeStyles((theme) => ({
     height: '40px',
     backgroundColor: theme.custom.colors.black,
   },
+  linkContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginBottom: '30px',
+    marginTop: 'auto',
+  },
 }));
 
 const Welcome = () => {
@@ -80,31 +90,21 @@ const Welcome = () => {
             {translate('Welcome.buttonLogin')}
           </Button>
         </Grid>
-        <Box mt={8} textAlign="center">
-          <Grid container spacing={1}>
-            <Grid item xs={12}>
-              <WelcomeExternalLink href={ABOUT_URL}>
-                {translate('Welcome.linkAboutCircles')}
-              </WelcomeExternalLink>
-            </Grid>
-            <Grid item xs={12}>
-              <WelcomeExternalLink href={FAQ_URL}>
-                {translate('Welcome.linkFAQ')}
-              </WelcomeExternalLink>
-            </Grid>
-            <Grid item xs={12}>
-              <WelcomeExternalLink href={EMAIL_URL}>
-                {translate('Welcome.linkContactUs')}
-              </WelcomeExternalLink>
-            </Grid>
-            <Grid item xs={12}>
-              <WelcomeExternalLink href={PRIVACY_LEGAL_URL}>
-                {translate('Welcome.linkPrivacyLegal')}
-              </WelcomeExternalLink>
-            </Grid>
-          </Grid>
-        </Box>
       </View>
+      <Box className={classes.linkContainer} container spacing={1}>
+        <WelcomeExternalLink href={FAQ_URL}>
+          {translate('Welcome.linkFAQ')}
+        </WelcomeExternalLink>
+        <WelcomeExternalLink href={BUG_REPORTING_URL}>
+          {translate('Navigation.linkBugReporting')}
+        </WelcomeExternalLink>
+        <WelcomeExternalLink href={EMAIL_URL}>
+          {translate('Welcome.linkContactUs')}
+        </WelcomeExternalLink>
+        <WelcomeExternalLink href={PRIVACY_LEGAL_URL}>
+          {translate('Welcome.linkPrivacyLegal')}
+        </WelcomeExternalLink>
+      </Box>
     </>
   );
 };