diff --git a/src/components/general/Icon/PlusIcon.tsx b/src/components/general/Icon/PlusIcon.tsx new file mode 100644 index 00000000..d7bf6f95 --- /dev/null +++ b/src/components/general/Icon/PlusIcon.tsx @@ -0,0 +1,22 @@ +import React from 'react' + +const PlusIcon: React.FC> = props => { + return ( + + + + ) +} + +export default PlusIcon diff --git a/src/components/notifications/AppExplorer/AppExplorer.scss b/src/components/notifications/AppExplorer/AppExplorer.scss index 2962397d..bd76e6cf 100644 --- 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 index 09d2f1b7..d018c687 100644 --- 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 }} > +
+ + + + Submit app + +
{ - -
-
- Submit app logo - Submit app - -
-
-
diff --git a/src/constants/navigation.ts b/src/constants/navigation.ts new file mode 100644 index 00000000..a6061441 --- /dev/null +++ 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' +}