feat: adjust connect button styles

geyserfund · Aug 30, 2023 · 6f4e9e3 · 6f4e9e3
1 parent 03df1cc
commit 6f4e9e3
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 12 deletions.
diff --git a/src/pages/auth/ConnectAccounts.tsx b/src/pages/auth/ConnectAccounts.tsx
@@ -33,9 +33,9 @@ export const ConnectAccounts = ({ user }: { user: User }) => {
         <Body2 color="neutral.900">
           {t('Connect more social profiles to your Geyser account.')}
         </Body2>
-        {displayTwitterButton && <ConnectWithTwitter />}
-        {displayNostrButton && <ConnectWithNostr />}
-        {displayLightningButton && <ConnectWithLightning />}
+        {displayTwitterButton && <ConnectWithTwitter variant="secondary" />}
+        {displayNostrButton && <ConnectWithNostr variant="secondary" />}
+        {displayLightningButton && <ConnectWithLightning variant="secondary" />}
       </VStack>
     </>
   )

diff --git a/src/pages/auth/ConnectWithLightning.tsx b/src/pages/auth/ConnectWithLightning.tsx
@@ -79,11 +79,13 @@ interface ConnectWithLightningModalProps {
 }
 
 interface ConnectWithLightningProps extends ButtonProps {
+  variant?: 'secondary'
   onClose?: () => void
 }
 
 export const ConnectWithLightning = ({
   onClose,
+  variant,
   ...rest
 }: ConnectWithLightningProps) => {
   const {
@@ -104,10 +106,14 @@ export const ConnectWithLightning = ({
     <>
       <Button
         w="100%"
-        backgroundColor="social.lightning"
+        variant={variant}
+        size="sm"
+        color={variant === 'secondary' ? 'primary' : 'black'}
+        backgroundColor={
+          variant === 'secondary' ? 'transparent' : 'social.lightning'
+        }
         leftIcon={<BoltSvgIcon height="20px" width="20px" />}
-        _hover={{ backgroundColor: 'social.lightningDark' }}
-        color="black"
+        _hover={{ backgroundColor: 'social.lightningDark', color: 'white' }}
         onClick={onModalOpen}
         {...rest}
       >

diff --git a/src/pages/auth/ConnectWithNostr.tsx b/src/pages/auth/ConnectWithNostr.tsx
@@ -7,10 +7,13 @@ import { useNostrExtensonLogin } from '../../hooks/useNostrExtensionLogin'
 import { isAccountDuplicateError } from '../../utils'
 import { FailedToConnectAccount } from './components/FailedToConnectAccount'
 import { NostrHelpModal } from './components/NostrHelpModal'
+
 type Props = {
+  variant?: 'secondary'
   onClose?: () => void
 }
-export const ConnectWithNostr = ({ onClose }: Props) => {
+
+export const ConnectWithNostr = ({ onClose, variant }: Props) => {
   const { connect, error, clearError } = useNostrExtensonLogin()
 
   const failedModal = useModal()
@@ -42,10 +45,14 @@ export const ConnectWithNostr = ({ onClose }: Props) => {
     <>
       <Button
         w="100%"
-        backgroundColor="social.nostr"
+        size="sm"
+        variant={variant}
+        backgroundColor={
+          variant === 'secondary' ? 'transparent' : 'social.nostr'
+        }
         leftIcon={<NostrSvgIcon height="20px" width="20px" />}
-        color="white"
-        _hover={{ backgroundColor: 'social.nostrDark' }}
+        color={variant === 'secondary' ? 'social.nostr' : 'white'}
+        _hover={{ backgroundColor: 'social.nostrDark', color: 'white' }}
         onClick={handleClick}
       >
         Nostr

diff --git a/src/pages/auth/ConnectWithTwitter.tsx b/src/pages/auth/ConnectWithTwitter.tsx
@@ -9,11 +9,13 @@ import { useMeQuery } from '../../types'
 import { hasTwitterAccount, useNotification } from '../../utils'
 
 interface ConnectWithTwitterProps extends ButtonProps {
+  variant?: 'secondary'
   onClose?: () => void
 }
 
 export const ConnectWithTwitter = ({
   onClose,
+  variant,
   ...rest
 }: ConnectWithTwitterProps) => {
   const { t } = useTranslation()
@@ -116,14 +118,19 @@ export const ConnectWithTwitter = ({
     <Tooltip label={!canLogin && t('Please refresh the page and try again.')}>
       <Button
         as={Link}
+        variant={variant}
         href={`${AUTH_SERVICE_ENDPOINT}/twitter?nextPath=/auth/twitter`}
         isExternal
         w="100%"
-        backgroundColor="social.twitter"
+        size="sm"
+        color={variant === 'secondary' ? 'social.twitter' : 'black'}
+        backgroundColor={
+          variant === 'secondary' ? 'transparent' : 'social.twitter'
+        }
         leftIcon={<BsTwitter />}
-        color="white"
         _hover={{
           backgroundColor: 'social.twitterDark',
+          color: 'white',
           textDecoration: 'none',
         }}
         onClick={handleClick}