Merge pull request #384 from WalletConnect/feat/add-support-page

feat: add support page to settings

src/components/general/Icon/CircleQuestionIcon.tsx

@@ -0,0 +1,36 @@
+const CircleQuestionIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      {...props}
+      className={props.className}
+    >
+      <g clip-path="url(#clip0_268_422)">
+        <path
+          d="M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z"
+          stroke="black"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12 7.08301C10.4808 7.08301 9.25 8.31379 9.25 9.83301C9.25 10.2472 9.58579 10.583 10 10.583C10.4142 10.583 10.75 10.2472 10.75 9.83301C10.75 9.14222 11.3092 8.58301 12 8.58301C12.6908 8.58301 13.25 9.14222 13.25 9.83301C13.25 10.2387 13.0384 10.477 12.5922 10.7778C12.0379 11.1504 11.25 11.7891 11.25 13V13.25C11.25 13.6642 11.5858 14 12 14C12.4142 14 12.75 13.6642 12.75 13.25V13C12.75 12.5773 12.9717 12.33 13.4293 12.0225L13.4302 12.0219C13.9717 11.6569 14.75 11.0272 14.75 9.83301C14.75 8.31379 13.5192 7.08301 12 7.08301ZM12 17.25C12.5523 17.25 13 16.8023 13 16.25C13 15.6977 12.5523 15.25 12 15.25C11.4477 15.25 11 15.6977 11 16.25C11 16.8023 11.4477 17.25 12 17.25Z"
+          fill="black"
+          strokeWidth="0"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_268_422">
+          <rect width="24" height="24" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
+
+export default CircleQuestionIcon

src/components/general/Icon/DiscordIcon.tsx

@@ -0,0 +1,22 @@
+const DiscordIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="800px"
+      height="800px"
+      viewBox="0 -28.5 256 256"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      className={props.className}
+    >
+      <g>
+        <path
+          d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z"
+          fill="currentColor"
+          fillRule="nonzero"
+        ></path>
+      </g>
+    </svg>
+  )
+}
+
+export default DiscordIcon

src/components/layout/Sidebar/index.tsx

@@ -50,7 +50,7 @@ const Sidebar: React.FC<{ isLoggedIn: boolean }> = ({ isLoggedIn }) => {
 
     if (uiEnabled.settings) {
       items.push([
-        <SettingIcon isFilled={pathname.startsWith(NAVIGATION.settings.index)} />,
+        <SettingIcon isFilled={pathname.startsWith(NAVIGATION.settings.notification)} />,
         NAVIGATION.settings.index
       ])
     }

src/components/settings/SettingsLayout/index.tsx

@@ -1,12 +1,23 @@
-import React, { Fragment } from 'react'
+import React, { Fragment, useEffect } from 'react'
 
 import { AnimatePresence } from 'framer-motion'
 import { motion } from 'framer-motion'
-import { Outlet } from 'react-router-dom'
+import { Outlet, useLocation, useNavigate } from 'react-router-dom'
+
+import { isMobile } from '@/utils/ui'
 
 import SettingsSelector from '../SettingsSelector'
 
 const SettingsLayout: React.FC = () => {
+  const { pathname } = useLocation()
+  const nav = useNavigate()
+
+  useEffect(() => {
+    if (pathname === '/settings' && !isMobile()) {
+      nav('/settings/notification')
+    }
+  }, [pathname])
+
   return (
     <Fragment>
       <div className="TargetSelector">

src/components/settings/SettingsSelector/SettingsSelector.scss

@@ -131,7 +131,6 @@
     margin-top: 1.125rem;
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
 
     @media only screen and (max-width: 700px) {
       margin-top: 0px;

src/components/settings/SettingsSelector/index.tsx

@@ -2,11 +2,12 @@ import { useLocation } from 'react-router-dom'
 
 import AppearanceIcon from '@/components/general/Icon/Appearance'
 import ChevronRightIcon from '@/components/general/Icon/ChevronRightIcon'
+import CircleQuestionIcon from '@/components/general/Icon/CircleQuestionIcon'
 import NotificationIcon from '@/components/general/Icon/Notification'
-import PrivacyIcon from '@/components/general/Icon/Privacy'
 import NavLink from '@/components/general/NavLink'
 import Text from '@/components/general/Text'
 import MobileHeader from '@/components/layout/MobileHeader'
+import { NAVIGATION } from '@/utils/constants'
 import { useIsMobile } from '@/utils/hooks'
 
 import './SettingsSelector.scss'
@@ -26,88 +27,89 @@ const SettingsSelector: React.FC = () => {
           <>
             {pathname.endsWith('/settings') && (
               <ul className="SettingsSelector__list">
-                <NavLink to={`/settings/appearance`} end className="SettingsSelector__link">
+                <NavLink
+                  to={NAVIGATION.settings.notification}
+                  end
+                  className="SettingsSelector__link"
+                >
                   <div className="SettingsSelector__link__wrapper">
-                    <AppearanceIcon />
+                    <NotificationIcon />
                     <div className="SettingsSelector__link__icon__wrapper">
                       <div className="SettingsSelector__link__title__wrapper">
                         <Text className="SettingsSelector__link__title" variant="small-500">
-                          Appearance
+                          Notifications
                         </Text>
                         <Text className="SettingsSelector__link__description" variant="small-500">
-                          Change how you want Web3Inbox to look, select your preferred currency and
-                          interface language.
+                          Select about which events you want to be notified.
                         </Text>
                       </div>
                       <ChevronRightIcon />
                     </div>
                   </div>
                 </NavLink>
-                <NavLink to={`/settings/notification`} end className="SettingsSelector__link">
+                <NavLink to={NAVIGATION.settings.appearance} end className="SettingsSelector__link">
                   <div className="SettingsSelector__link__wrapper">
-                    <NotificationIcon />
+                    <AppearanceIcon />
                     <div className="SettingsSelector__link__icon__wrapper">
                       <div className="SettingsSelector__link__title__wrapper">
                         <Text className="SettingsSelector__link__title" variant="small-500">
-                          Notifications
+                          Appearance
                         </Text>
                         <Text className="SettingsSelector__link__description" variant="small-500">
-                          Select about which events you want to be notified.
+                          Change how you want Web3Inbox to look, select your preferred currency and
+                          interface language.
                         </Text>
                       </div>
                       <ChevronRightIcon />
                     </div>
                   </div>
                 </NavLink>
-                {/* <NavLink to={`/settings/privacy`} end className="SettingsSelector__link">
+                <NavLink to={NAVIGATION.settings.support} end className="SettingsSelector__link">
                   <div className="SettingsSelector__link__wrapper">
-                    <PrivacyIcon />
+                    <CircleQuestionIcon />
                     <div className="SettingsSelector__link__icon__wrapper">
                       <div className="SettingsSelector__link__title__wrapper">
                         <Text className="SettingsSelector__link__title" variant="small-500">
-                          Privacy
+                          Support
                         </Text>
                         <Text className="SettingsSelector__link__description" variant="small-500">
-                          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-                          eirmod tempor invidunt.
+                          Contact to our support team.
                         </Text>
                       </div>
                       <ChevronRightIcon />
                     </div>
                   </div>
-                </NavLink> */}
+                </NavLink>
               </ul>
             )}
           </>
         ) : (
-          <>
-            <ul className="SettingsSelector__list">
-              <NavLink to={`/settings/appearance`} end className="SettingsSelector__link">
-                <div className="SettingsSelector__link__wrapper">
-                  <AppearanceIcon />
-                  <Text className="SettingsSelector__link__title" variant="small-500">
-                    Appearance
-                  </Text>
-                </div>
-              </NavLink>
-              <NavLink to="/settings/notification" end className="SettingsSelector__link">
-                <div className="SettingsSelector__link__wrapper">
-                  <NotificationIcon />
-                  <Text className="SettingsSelector__link__title" variant="small-500">
-                    Notifications
-                  </Text>
-                </div>
-              </NavLink>
-              {/* <NavLink to={`/settings/privacy`} end className="SettingsSelector__link">
-                <div className="SettingsSelector__link__wrapper">
-                  <PrivacyIcon />
-                  <Text className="SettingsSelector__link__title" variant="small-500">
-                    Privacy
-                  </Text>
-                </div>
-              </NavLink> */}
-            </ul>
-          </>
+          <ul className="SettingsSelector__list">
+            <NavLink to={NAVIGATION.settings.notification} end className="SettingsSelector__link">
+              <div className="SettingsSelector__link__wrapper">
+                <NotificationIcon />
+                <Text className="SettingsSelector__link__title" variant="small-500">
+                  Notifications
+                </Text>
+              </div>
+            </NavLink>
+            <NavLink to={NAVIGATION.settings.appearance} end className="SettingsSelector__link">
+              <div className="SettingsSelector__link__wrapper">
+                <AppearanceIcon />
+                <Text className="SettingsSelector__link__title" variant="small-500">
+                  Appearance
+                </Text>
+              </div>
+            </NavLink>
+            <NavLink to={NAVIGATION.settings.support} end className="SettingsSelector__link">
+              <div className="SettingsSelector__link__wrapper">
+                <CircleQuestionIcon />
+                <Text className="SettingsSelector__link__title" variant="small-500">
+                  Support
+                </Text>
+              </div>
+            </NavLink>
+          </ul>
         )}
       </div>
     </div>

src/components/settings/SupportSettings/SupportSettings.scss

@@ -0,0 +1,56 @@
+.SupportSettings {
+  &__content {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    &__container {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      align-items: flex-start;
+      max-width: 75rem;
+      width: 100%;
+      padding: 1.5rem 1.25rem;
+    }
+
+    @media only screen and (min-width: 700px) {
+      &__container {
+        padding: 2.5rem 1.5rem;
+      }
+    }
+  }
+
+  &__title {
+    color: var(--fg-color-1);
+  }
+
+  &__subtitle {
+    color: var(--fg-color-2);
+
+    a {
+      color: var(--accent-color-1);
+      text-decoration: none;
+      transition: color 0.2s ease-in-out;
+    }
+  }
+
+  &__discord-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    color: white;
+    width: auto;
+    padding: 0.5rem 1rem;
+    text-decoration: none;
+
+    &__icon {
+      width: 1rem;
+      height: 1rem;
+      display: inline-block;
+      color: white;
+    }
+  }
+}

src/components/settings/SupportSettings/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+
+import { Link } from 'react-router-dom'
+
+import DiscordIcon from '@/components/general/Icon/DiscordIcon'
+import Text from '@/components/general/Text'
+import MobileHeader from '@/components/layout/MobileHeader'
+import { web3InboxURLs } from '@/constants/navigation'
+
+import SettingsHeader from '../SettingsHeader'
+
+import './SupportSettings.scss'
+
+const SupportSettings: React.FC = () => {
+  return (
+    <div className="SupportSettings">
+      <SettingsHeader title="Support" />
+      <MobileHeader title="Support" back="/settings" />
+      <div className="SupportSettings__content">
+        <div className="SupportSettings__content__container">
+          <Text className="SupportSettings__title" variant="large-600">
+            Need help?
+          </Text>
+          <Text className="SupportSettings__subtitle" variant="paragraph-500">
+            Get support at our Discord, or view our{' '}
+            <Link to={web3InboxURLs.websiteFaqs}>Frequently Asked Questions</Link>.
+          </Text>
+          <Link
+            to={web3InboxURLs.discord}
+            className="SupportSettings__discord-button Button Button__primary Button__medium"
+          >
+            <DiscordIcon className="SupportSettings__discord-button__icon" />
+            <Text variant="small-500">Discord</Text>
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SupportSettings

src/routes.tsx

@@ -10,6 +10,7 @@ import NotificationsLayout from '@/components/notifications/NotificationsLayout'
 import AppearanceSettings from '@/components/settings/AppearanceSettings'
 import NotificationsSettings from '@/components/settings/NotificationsSettings'
 import SettingsLayout from '@/components/settings/SettingsLayout'
+import SupportSettings from '@/components/settings/SupportSettings'
 import W3iContext from '@/contexts/W3iContext/context'
 import Login from '@/pages/Login'
 import ScanQrCode from '@/pages/ScanQrCode'
@@ -43,6 +44,7 @@ const ConfiguredRoutes: React.FC = () => {
           <Route path="settings" element={<SettingsLayout />}>
             <Route path="/settings/appearance" element={<AppearanceSettings />} />
             <Route path="/settings/notification" element={<NotificationsSettings />} />
+            <Route path="/settings/support" element={<SupportSettings />} />
             {/* <Route path="/settings/privacy" element={<PrivacySettings />} /> */}
           </Route>
         ) : null}

src/utils/constants.ts

@@ -20,6 +20,9 @@ export const NAVIGATION = {
     topic: (topic: string) => `/notifications/${topic}`
   },
   settings: {
-    index: '/settings'
+    index: '/settings',
+    notification: '/settings/notification',
+    appearance: '/settings/appearance',
+    support: '/settings/support'
   }
 }