From 2083abb666718ec58cb3389c5fefe223b41bd37b Mon Sep 17 00:00:00 2001
From: Eric Allen <eric@ericrallen.dev>
Date: Mon, 7 Feb 2022 17:58:07 -0500
Subject: [PATCH] fix: update homepage content; make links more obvious

---
 src/components/ExternalLink/index.tsx         | 11 ++++++
 src/components/ProfileCard/index.tsx          | 17 ++++----
 src/components/PsychometricDropdown/index.tsx | 24 +++++++-----
 src/components/ThemeToggle/index.tsx          |  2 +-
 src/pages/[...username].tsx                   | 36 +++++++++++------
 src/pages/index.tsx                           | 39 ++++++++++++-------
 6 files changed, 82 insertions(+), 47 deletions(-)
 create mode 100644 src/components/ExternalLink/index.tsx

diff --git a/src/components/ExternalLink/index.tsx b/src/components/ExternalLink/index.tsx
new file mode 100644
index 0000000..b16b75d
--- /dev/null
+++ b/src/components/ExternalLink/index.tsx
@@ -0,0 +1,11 @@
+import { Link, LinkProps } from '@chakra-ui/react'
+
+const ExternalLink = ({ href, children, ...props }: LinkProps): React.ReactElement => {
+  return (
+    <Link href={href} color="teal" {...props} isExternal>
+      {children}
+    </Link>
+  )
+}
+
+export default ExternalLink
diff --git a/src/components/ProfileCard/index.tsx b/src/components/ProfileCard/index.tsx
index 936b2a9..05221ca 100644
--- a/src/components/ProfileCard/index.tsx
+++ b/src/components/ProfileCard/index.tsx
@@ -3,6 +3,7 @@ import { Box, Stack, Link, Text, Heading } from '@chakra-ui/react'
 import UserAvatar from '../UserAvatar'
 import PsychometricTag from '../PsychometricTag'
 import InternalLink from '../InternalLink'
+import ExternalLink from '../ExternalLink'
 import { GITHUB_PROFILE_BASE_URL, APPLICATION_URL } from '../../constants'
 
 import type { UserProfileProps } from '../../pages/[...username]'
@@ -84,9 +85,7 @@ const ProfileCard = ({
             <Stack direction="column" paddingRight="10px">
               <Text>
                 <CardHeader />
-                <Link href={profile?.website} isExternal>
-                  {profile?.website}
-                </Link>
+                <ExternalLink href={profile?.website}>{profile?.website}</ExternalLink>
                 <Text>{profile?.communicationStyle}</Text>
               </Text>
             </Stack>
@@ -97,23 +96,23 @@ const ProfileCard = ({
               </Text>
               <Stack direction="row" flexWrap="wrap">
                 {typeof profile?.personality?.type !== 'undefined' && (
-                  <Link href={profile.personality.url} isExternal>
+                  <ExternalLink href={profile.personality.url}>
                     <PsychometricTag>
                       {profile?.personality.type} | {profile?.personality.name}
                     </PsychometricTag>
-                  </Link>
+                  </ExternalLink>
                 )}
                 {typeof profile?.enneagram?.number !== 'undefined' && (
-                  <Link href={profile.enneagram.url} isExternal>
+                  <ExternalLink href={profile.enneagram.url}>
                     <PsychometricTag>
                       {profile?.enneagram.number} | {profile?.enneagram.name}
                     </PsychometricTag>
-                  </Link>
+                  </ExternalLink>
                 )}
                 {typeof profile?.color?.name !== 'undefined' && (
-                  <Link href={profile.color.url} isExternal>
+                  <ExternalLink href={profile.color.url}>
                     <PsychometricTag>{profile?.color.name}</PsychometricTag>
-                  </Link>
+                  </ExternalLink>
                 )}
               </Stack>
             </Stack>
diff --git a/src/components/PsychometricDropdown/index.tsx b/src/components/PsychometricDropdown/index.tsx
index 9659171..9ac18c6 100644
--- a/src/components/PsychometricDropdown/index.tsx
+++ b/src/components/PsychometricDropdown/index.tsx
@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react'
-import { FormControl, FormLabel, Select, FormHelperText, Link } from '@chakra-ui/react'
+import { FormControl, FormLabel, Select, FormHelperText, Text } from '@chakra-ui/react'
+
+import ExternalLink from '../ExternalLink'
 
 import type { definitions } from '../../types/supabase'
 
@@ -82,21 +84,23 @@ const PsychometricDropdown = ({
     if (psychometric !== null) {
       return (
         <FormHelperText>
-          {psychometric.description}
-          <br />
-          <br />
-          <Link href={psychometric.url} isExternal>
-            Find out more about the {psychometric.type ?? psychometric.name} {label}
-          </Link>
-          .
+          <Text marginBottom="15px">
+            <blockquote cite={psychometric.url}>{psychometric.description}</blockquote>
+          </Text>
+          <Text>
+            <ExternalLink href={psychometric.url}>
+              Find out more about the {psychometric.type ?? psychometric.name} {label}
+            </ExternalLink>
+            .
+          </Text>
         </FormHelperText>
       )
     } else if (typeof learnMoreUrl !== 'undefined') {
       return (
         <FormHelperText>
-          <Link href={learnMoreUrl} isExternal>
+          <ExternalLink href={learnMoreUrl}>
             Find out more about the {label} psychometric
-          </Link>
+          </ExternalLink>
           .
         </FormHelperText>
       )
diff --git a/src/components/ThemeToggle/index.tsx b/src/components/ThemeToggle/index.tsx
index d725240..55cbcc6 100644
--- a/src/components/ThemeToggle/index.tsx
+++ b/src/components/ThemeToggle/index.tsx
@@ -14,7 +14,7 @@ const ThemeToggle = (): React.ReactElement => {
         alignItems="center"
         margin="0"
       >
-        <GoLightBulb size={12} />
+        <GoLightBulb size={12} style={{ marginTop: '2px' }} />
         <Switch
           id="darkMode"
           onChange={toggleColorMode}
diff --git a/src/pages/[...username].tsx b/src/pages/[...username].tsx
index 7671559..69df394 100644
--- a/src/pages/[...username].tsx
+++ b/src/pages/[...username].tsx
@@ -1,10 +1,11 @@
-import { Heading, Text, Link, Box } from '@chakra-ui/react'
+import { Heading, Text, Box } from '@chakra-ui/react'
 
 import type { GetServerSidePropsResult, GetServerSidePropsContext } from 'next'
 import type { ParsedUrlQuery } from 'querystring'
 
 import Page from '../components/Page'
 import ProfileCard from '../components/ProfileCard'
+import ExternalLink from '../components/ExternalLink'
 import { getFullUserProfile, getUserAvatar } from '../services/user'
 
 import type { definitions } from '../types/supabase'
@@ -42,10 +43,13 @@ const UserProfile = ({ profile }: UserProfileProps): React.ReactElement => {
             Type: {profile.personality.name} ({profile.personality.type})
           </Heading>
           <Text marginBottom="10px">{profile?.personality.description}</Text>
-          <Link href={profile?.personality.url} isExternal>
-            Learn more about the {profile.personality.type} personality type and the{' '}
-            {profile?.personality.name} archetype
-          </Link>
+          <Text>
+            Learn more about the{' '}
+            <ExternalLink href={profile?.personality.url}>{profile.personality.type}</ExternalLink>{' '}
+            personality type and the{' '}
+            <ExternalLink href={profile?.personality.url}>{profile?.personality.name}</ExternalLink>{' '}
+            archetype
+          </Text>
         </Box>
       )}
       {typeof profile?.enneagram?.number !== 'undefined' && (
@@ -54,10 +58,15 @@ const UserProfile = ({ profile }: UserProfileProps): React.ReactElement => {
             Enneagram: {profile?.enneagram.name} ({profile?.enneagram.number})
           </Heading>
           <Text marginBottom="10px">{profile?.enneagram.description}</Text>
-          <Link href={profile?.enneagram?.url} isExternal>
-            Learn more about the {profile?.enneagram.number} enneagram number and the{' '}
-            {profile?.enneagram.name} archetype
-          </Link>
+          <Text>
+            Learn more about the{' '}
+            <ExternalLink href={profile?.enneagram.url}>
+              {profile.enneagram.number} Enneagram Number
+            </ExternalLink>{' '}
+            and the{' '}
+            <ExternalLink href={profile?.enneagram.url}>{profile?.enneagram.name}</ExternalLink>{' '}
+            archetype
+          </Text>
         </Box>
       )}
       {typeof profile?.color?.name !== 'undefined' && (
@@ -66,9 +75,12 @@ const UserProfile = ({ profile }: UserProfileProps): React.ReactElement => {
             Color: {profile?.color.name}
           </Heading>
           <Text marginBottom="10px">{profile?.color.description}</Text>
-          <Link href={profile?.color.url} isExternal>
-            Learn more about the {profile?.color.name} personality color
-          </Link>
+          <Text>
+            Learn more about the{' '}
+            <ExternalLink href={profile?.color.url}>
+              {profile.color.name} personality color
+            </ExternalLink>
+          </Text>
         </Box>
       )}
     </Page>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 9c3f0d8..1a71cdc 100755
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,11 +1,12 @@
 import Head from 'next/head'
-import { Heading, Text, Link, Box } from '@chakra-ui/react'
+import { Heading, Text, Box } from '@chakra-ui/react'
 import { useEffect, useState } from 'react'
 
 import type { NextPage } from 'next'
 
 import Page from '../components/Page'
 import ProfileCard from '../components/ProfileCard'
+import ExternalLink from '../components/ExternalLink'
 import { getFeaturedProfiles, getFullUserProfile } from '../services/user'
 import camelCaseKeys from '../utils/camelCaseKeys'
 import { PSYCHOMETRIC_URLS } from '../constants'
@@ -99,30 +100,38 @@ const Home: NextPage = () => {
         </Heading>
 
         <Text marginBottom="20px">
-          We want to help you get to know how your colleagues communicate and how to understand
-          their personality.
+          Personality profiles are a way to distill parts of your personality and life philosophy
+          into an easily digestible chunk of information.
+        </Text>
+
+        <Text marginBottom="20px">
+          They are not a perfect measure, by any means, but they are an interesting measure for you
+          - and anyone else you share the results with - to consider. They can be especially helpful
+          in the workplace (or in Open Source projects) where personalities, communication styles,
+          and philosophies can clash in complicated ways.
+        </Text>
+
+        <Text marginBottom="20px">
+          Work w/ Me wants to help you provide an easy way to show other developers these
+          personality psychometrics in a way that might help you understand how to collaborate more
+          effectively.
         </Text>
 
         <Text marginBottom="20px">
           By using Work w/ Me, you can share a short description of your Communication Style, your{' '}
-          <Link href={PSYCHOMETRIC_URLS.TYPE} isExternal>
-            Myers Briggs Personality
-          </Link>
-          ,{' '}
-          <Link href={PSYCHOMETRIC_URLS.ENNEAGRAM} isExternal>
-            Enneagram Number
-          </Link>
-          , and{' '}
-          <Link href={PSYCHOMETRIC_URLS.COLOR} isExternal>
+          <ExternalLink href={PSYCHOMETRIC_URLS.TYPE}>Myers Briggs Personality</ExternalLink>,{' '}
+          <ExternalLink href={PSYCHOMETRIC_URLS.ENNEAGRAM}>Enneagram Number</ExternalLink>, and{' '}
+          <ExternalLink href={PSYCHOMETRIC_URLS.COLOR}>
             Hartman Personality Profile Color
-          </Link>{' '}
-          so that people who work with you can get a better understanding of who you are.
+          </ExternalLink>{' '}
+          so that people who work with you can get a better understanding of who you are, how you
+          think, and what motivates you.
         </Text>
       </Box>
       {featuredUsers.length > 0 && (
         <Box as="aside">
           <Heading as="h2" size="sm" marginBottom="40px">
-            Featured Users
+            Get to know a random user:
           </Heading>
           {renderFeaturedProfiles()}
         </Box>