From b826a67c9b9393f9eeaed47b60c7fee295fc5aca Mon Sep 17 00:00:00 2001
From: z0ccc <z0ccc@proton.me>
Date: Mon, 25 Sep 2023 22:40:17 -0400
Subject: [PATCH] captcha solver page

---
 src/popup/Popup.tsx                 |  7 +++++++
 src/popup/TabItem.tsx               |  1 +
 src/popup/pages/infoPage/index.tsx  | 23 +++++++++++++++++++++--
 src/popup/pages/vpnPage/VpnItem.tsx |  1 +
 src/theme.ts                        |  2 ++
 5 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/popup/Popup.tsx b/src/popup/Popup.tsx
index 6636d60..ecd8b9e 100644
--- a/src/popup/Popup.tsx
+++ b/src/popup/Popup.tsx
@@ -11,6 +11,7 @@ import {
   Info,
   Settings,
   Sliders,
+  UserCheck,
 } from 'react-feather'
 import VpnIcon from '../assets/vpnIcon.svg'
 import TabItem from './TabItem'
@@ -60,6 +61,12 @@ const Popup = () => {
             active={tab === 'location'}
             onClick={() => setTab('location')}
           />
+          <TabItem
+            title="Captcha Solver"
+            Icon={<UserCheck size={20} />}
+            active={tab === 'vpn'}
+            onClick={() => setTab('vpn')}
+          />
           <TabItem
             title="Autofill Data"
             Icon={<FileText size={20} />}
diff --git a/src/popup/TabItem.tsx b/src/popup/TabItem.tsx
index 163629b..e87a501 100644
--- a/src/popup/TabItem.tsx
+++ b/src/popup/TabItem.tsx
@@ -20,6 +20,7 @@ const TabItem = ({ title, Icon, onClick, active }: IconProps) => {
         justifyContent: 'center',
         color: 'background',
         backgroundColor: active ? 'primaryDark' : 'primary',
+        transition: '0.2s',
         ':hover': {
           backgroundColor: 'primaryDark',
         },
diff --git a/src/popup/pages/infoPage/index.tsx b/src/popup/pages/infoPage/index.tsx
index 12090ef..8e57503 100644
--- a/src/popup/pages/infoPage/index.tsx
+++ b/src/popup/pages/infoPage/index.tsx
@@ -46,12 +46,23 @@ const InfoPage = ({ tab, setTab }: InfoPageProps) => {
         </Link>
         .
       </InfoItem> */}
-      <InfoItem title={'Test Extension'}>
+      {/* <InfoItem title={'Test Extension'}>
         You can test and compare Vytal and other spoofing extensions on{' '}
         <Link variant="hover" href={`https://vytal.io/scan`} target="_blank">
           vytal.io
         </Link>
         .
+      </InfoItem> */}
+      <InfoItem title={'Open Source'}>
+        Vytal is open source and the code can be viewed on{' '}
+        <Link
+          variant="hover"
+          href={'https://github.com/vytal-io'}
+          target="_blank"
+        >
+          Github
+        </Link>
+        .
       </InfoItem>
       <InfoItem title={'Support Us'}>
         If you like this extension and wish to support us you can{' '}
@@ -65,7 +76,7 @@ const InfoPage = ({ tab, setTab }: InfoPageProps) => {
           rate the extension
         </Link>{' '}
         or{' '}
-        <Link variant="hover" href={`https://vytal.io/donate`} target="_blank">
+        <Link variant="hover" href={'https://vytal.io/donate'} target="_blank">
           donate
         </Link>
         .
@@ -74,6 +85,14 @@ const InfoPage = ({ tab, setTab }: InfoPageProps) => {
         You can reach us at{' '}
         <Link variant="hover" href={'mailto:contact@vytal.io'} target="_blank">
           contact@vytal.io
+        </Link>{' '}
+        or on{' '}
+        <Link
+          variant="hover"
+          href={'https://reddit.com/r/Vytal'}
+          target="_blank"
+        >
+          r/Vytal
         </Link>
         .
       </InfoItem>
diff --git a/src/popup/pages/vpnPage/VpnItem.tsx b/src/popup/pages/vpnPage/VpnItem.tsx
index aabd8aa..c4dbc86 100644
--- a/src/popup/pages/vpnPage/VpnItem.tsx
+++ b/src/popup/pages/vpnPage/VpnItem.tsx
@@ -19,6 +19,7 @@ const VpnItem = ({ url, linkText, children }: VpnItemProps) => {
         display: 'block',
         textDecoration: 'none',
         color: 'text',
+        transition: '0.2s',
         '&:hover': {
           borderColor: 'primary',
         },
diff --git a/src/theme.ts b/src/theme.ts
index d9d846b..e334a26 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -39,6 +39,7 @@ export const theme: Theme = {
       cursor: 'pointer',
       p: '4px 8px',
       borderColor: 'grey',
+      transition: '0.2s',
       '&:hover': {
         borderColor: 'primaryDark',
       },
@@ -60,6 +61,7 @@ export const theme: Theme = {
       borderRadius: '0',
       width: '100%',
       display: 'block',
+      transition: '0.2s',
       '&:hover': {
         bg: 'primaryDark',
       },