captcha solver page

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} />}

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',
         },

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>

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',
         },

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',
       },