From 21d31c0f7996ad99839b1e1a90194576827da3ed Mon Sep 17 00:00:00 2001
From: Linkie Link <linkielink.dev@gmail.com>
Date: Wed, 22 Mar 2023 12:24:52 +0100
Subject: [PATCH] Button border fixes (#129)

* fix: fixed the glas borders

# Conflicts:
#	src/components/Card.tsx

* fix: fixed the Copy Address button and removed all borders from button classes
---
 src/components/Button.tsx                 | 35 ++++++++++++++---------
 src/components/Card.tsx                   |  4 +--
 src/components/Wallet/ConnectedButton.tsx | 16 ++---------
 3 files changed, 26 insertions(+), 29 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index a1bbe956..04cd2d06 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -19,17 +19,22 @@ interface Props {
   icon?: ReactElement
   iconClassName?: string
   hasSubmenu?: boolean
+  hasFocus?: boolean
 }
 
 export const buttonColorClasses = {
-  primary:
-    'border-none gradient-primary-to-secondary hover:bg-white/20 active:bg-white/40 focus:bg-white/20',
+  primary: 'gradient-primary-to-secondary hover:bg-white/20 active:bg-white/40 focus:bg-white/20',
   secondary:
     'border border-white/30 bg-transparent hover:bg-white/20 active:bg-white/40 focus:bg-white/20',
-  tertiary:
-    'border border-transparent bg-white/10 hover:bg-white/20 active:bg-white/40 focus:bg-white/20',
-  quaternary:
-    'bg-transparent text-white/60 border-transparent hover:text-white hover:border-white active:text-white active:border-white',
+  tertiary: 'bg-white/10 hover:bg-white/20 active:bg-white/40 focus:bg-white/20',
+  quaternary: 'bg-transparent text-white/60 hover:text-white ctive:text-white',
+}
+
+const focusClasses = {
+  primary: 'bg-white/20',
+  secondary: 'bg-white/20',
+  tertiary: 'bg-white/20',
+  quaternary: 'text-white',
 }
 
 const buttonBorderClasses =
@@ -42,11 +47,10 @@ const buttonGradientClasses = [
 ]
 
 const buttonTransparentColorClasses = {
-  primary: 'border-none hover:text-primary active:text-primary focus:text-primary',
-  secondary: 'border-none hover:text-secondary active:text-secondary focus:text-secondary',
-  tertiary: 'border-none hover:text-white/80 active:text-white/80 focus:text-white/80',
-  quaternary:
-    'border-none text-white/60 hover:text-white hover:border-white active:text-white active:border-white',
+  primary: 'hover:text-primary active:text-primary focus:text-primary',
+  secondary: 'hover:text-secondary active:text-secondary focus:text-secondary',
+  tertiary: 'hover:text-white/80 active:text-white/80 focus:text-white/80',
+  quaternary: 'text-white/60 hover:text-white active:text-white',
 }
 
 const buttonRoundSizeClasses = {
@@ -73,11 +77,12 @@ export const buttonVariantClasses = {
   round: 'rounded-full p-0',
 }
 
-function glowElement() {
+function glowElement(enableAnimations: boolean) {
   return (
     <svg
       className={classNames(
-        'glow-container z-1 opacity-0 group-hover:animate-glow group-focus:animate-glow',
+        enableAnimations && 'group-hover:animate-glow group-focus:animate-glow',
+        'glow-container z-1 opacity-0 ',
         'pointer-events-none absolute inset-0 h-full w-full',
       )}
     >
@@ -108,6 +113,7 @@ export const Button = React.forwardRef(function Button(
     icon,
     iconClassName,
     hasSubmenu,
+    hasFocus,
   }: Props,
   ref,
 ) {
@@ -151,6 +157,7 @@ export const Button = React.forwardRef(function Button(
         variant === 'solid' && color === 'tertiary' && buttonBorderClasses,
         variant === 'solid' && color === 'primary' && buttonGradientClasses,
         disabled && 'pointer-events-none opacity-50',
+        hasFocus && focusClasses[color],
         className,
       )}
       id={id}
@@ -175,7 +182,7 @@ export const Button = React.forwardRef(function Button(
           <ChevronDown />
         </span>
       )}
-      {variant === 'solid' && !isDisabled && glowElement()}
+      {variant === 'solid' && !isDisabled && glowElement(enableAnimations)}
       {showProgressIndicator && (
         <CircularProgress size={size === 'small' ? 10 : size === 'medium' ? 12 : 18} />
       )}
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 9b8d23e1..c9ede85b 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -15,8 +15,8 @@ export const Card = (props: Props) => {
     <section
       className={classNames(
         props.className,
-        'relative z-1 flex max-w-full flex-col flex-wrap items-start overflow-hidden rounded-base border border-transparent bg-white/5',
-        'before:content-[" "] before:absolute before:inset-0 before:z-[-1] before:rounded-base before:p-[1px] before:border-glas',
+        'relative z-1 flex max-w-full flex-col flex-wrap items-start overflow-hidden rounded-base bg-white/5',
+        'before:content-[" "] before:absolute before:inset-0 before:-z-1 before:rounded-base before:p-[1px] before:border-glas',
       )}
     >
       {props.title && (
diff --git a/src/components/Wallet/ConnectedButton.tsx b/src/components/Wallet/ConnectedButton.tsx
index 11db3986..21bc36df 100644
--- a/src/components/Wallet/ConnectedButton.tsx
+++ b/src/components/Wallet/ConnectedButton.tsx
@@ -136,23 +136,13 @@ export default function ConnectedButton() {
             </Text>
             <div className='flex w-full pt-1'>
               <Button
-                icon={<Copy />}
+                icon={isCopied ? <Check /> : <Copy />}
                 variant='transparent'
                 className='mr-10 flex w-auto py-2'
                 color='quaternary'
                 onClick={setCopied}
-              >
-                {isCopied ? (
-                  <Text size='sm'>
-                    Copied{' '}
-                    <span className='ml-1 w-4'>
-                      <Check />
-                    </span>
-                  </Text>
-                ) : (
-                  <Text size='sm'>Copy Address</Text>
-                )}
-              </Button>
+                text={isCopied ? 'Copied' : 'Copy Address'}
+              />
               <Button
                 icon={<ExternalLink />}
                 variant='transparent'