refactor: move submit app button top right

WalletConnect · Jan 12, 2024 · d4878df · d4878df
1 parent 885cd0f
commit d4878df
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 19 deletions.
diff --git a/src/components/general/Icon/PlusIcon.tsx b/src/components/general/Icon/PlusIcon.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+
+const PlusIcon: React.FC<React.SVGProps<SVGSVGElement>> = props => {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      className={props.className}
+    >
+      <path
+        d="M6 0C5.58579 0 5.25 0.335786 5.25 0.75V4.75C5.25 5.02614 5.02614 5.25 4.75 5.25H0.75C0.335786 5.25 0 5.58579 0 6C0 6.41421 0.335786 6.75 0.75 6.75H4.75C5.02614 6.75 5.25 6.97386 5.25 7.25V11.25C5.25 11.6642 5.58579 12 6 12C6.41421 12 6.75 11.6642 6.75 11.25V7.25C6.75 6.97386 6.97386 6.75 7.25 6.75H11.25C11.6642 6.75 12 6.41421 12 6C12 5.58579 11.6642 5.25 11.25 5.25H7.25C6.97386 5.25 6.75 5.02614 6.75 4.75V0.75C6.75 0.335786 6.41421 0 6 0Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+export default PlusIcon
diff --git a/src/components/notifications/AppExplorer/AppExplorer.scss b/src/components/notifications/AppExplorer/AppExplorer.scss
@@ -20,6 +20,65 @@
     margin-left: auto;
   }
 
+  &__submit__button {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    height: 2.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    @media only screen and (max-width: 700px) {
+      height: auto;
+      top: calc(var(--mobile-header-height) + 1rem);
+    }
+
+    &__link {
+      padding: 0.5rem 1rem;
+      border-radius: 2rem;
+      border: 1px solid var(--accent-color-2);
+      text-decoration: none;
+      color: var(--accent-color-1);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+      background: rgba(255, 255, 255, 0.2);
+      z-index: 20;
+
+      svg {
+        width: 1rem;
+      }
+
+      @media only screen and (max-width: 700px) {
+        padding: 0.25rem 0.5rem;
+
+        svg {
+          width: 0.75rem;
+        }
+      }
+
+      &__external__icon {
+        display: none;
+        opacity: 0;
+        transition: opacity 0.2s ease-in-out;
+      }
+
+      &:hover &__external__icon {
+        display: inline-block;
+        opacity: 1;
+      }
+      &:hover &__plus__icon {
+        display: none;
+      }
+
+      &:hover {
+        background: var(--accent-color-3);
+      }
+    }
+  }
+
   .IntroContent {
     margin-top: 2.25rem;
   }

diff --git a/src/components/notifications/AppExplorer/index.tsx b/src/components/notifications/AppExplorer/index.tsx
@@ -2,10 +2,15 @@ import { useContext } from 'react'
 
 import { AnimatePresence } from 'framer-motion'
 import { motion } from 'framer-motion'
+import { Link } from 'react-router-dom'
 
+import ExternalLinkIcon from '@/components/general/Icon/ExternalLinkIcon'
 import IntroApps from '@/components/general/Icon/IntroApps'
+import PlusIcon from '@/components/general/Icon/PlusIcon'
 import IntroContent from '@/components/general/IntroContent'
+import Text from '@/components/general/Text'
 import MobileHeader from '@/components/layout/MobileHeader'
+import { web3InboxURLs } from '@/constants/navigation'
 import { COMING_SOON_PROJECTS } from '@/constants/projects'
 import W3iContext from '@/contexts/W3iContext/context'
 import useNotifyProjects from '@/utils/hooks/useNotifyProjects'
@@ -44,6 +49,17 @@ const AppExplorer = () => {
         exit={{ opacity: 0 }}
         transition={{ duration: 0.33 }}
       >
+        <div className="AppExplorer__submit__button">
+          <Link
+            to={web3InboxURLs.walletConnectWeb3Inbox}
+            className="AppExplorer__submit__button__link"
+            target="_blank"
+          >
+            <ExternalLinkIcon className="AppExplorer__submit__button__link__external__icon" />
+            <PlusIcon className="AppExplorer__submit__button__link__plus__icon" />
+            <Text variant="small-400">Submit app</Text>
+          </Link>
+        </div>
         <MobileHeader title="Discover" />
         <IntroContent
           animation={true}

diff --git a/src/components/notifications/AppSelector/index.tsx b/src/components/notifications/AppSelector/index.tsx
@@ -125,25 +125,6 @@ const AppSelector: React.FC = () => {
                 </div>
               </div>
             </NavLink>
-            <NavLink
-              to="https://walletconnect.com/web3inbox?utm_source=website&utm_medium=w3iapp"
-              target="_blank"
-              end
-              className="AppSelector__link-appsItem"
-            >
-              <div className="AppSelector__notifications">
-                <div className="AppSelector__notifications-apps">
-                  <img
-                    className="AppSelector__link-apps"
-                    src={SubmitAppIcon}
-                    alt="Submit app logo"
-                    loading="lazy"
-                  />
-                  <Text variant="small-500">Submit app</Text>
-                  <ExternalLinkIcon className="AppSelector__link-apps__external-link-icon" />
-                </div>
-              </div>
-            </NavLink>
           </ul>
         </div>
         <div className="AppSelector__wrapper">

diff --git a/src/constants/navigation.ts b/src/constants/navigation.ts
@@ -0,0 +1,6 @@
+export const web3InboxURLs = {
+  discord: 'https://discord.gg/B9mQsgE8pj',
+  website: 'https://web3inbox.com',
+  websiteFaqs: 'https://web3inbox.com/#faq',
+  walletConnectWeb3Inbox: 'https://walletconnect.com/web3inbox?utm_source=website&utm_medium=w3iapp'
+}