Tweaking contact icon and animation.

src/footer/Footer.tsx

@@ -23,7 +23,6 @@ export function Footer() {
   const input = useRef<HTMLInputElement | null>(null);
   const [copied, setCopied] = useState(false);
   const [failed, setFailed] = useState(false);
-  const CopyIcon = failed ? CopyFailed : copied ? CopySuccess : Copy;
 
   const onSelect = () => {
     if (!input.current) return;
@@ -40,7 +39,6 @@ export function Footer() {
       navigator.clipboard.writeText(address);
 
       setCopied(true);
-
       clearTimeout(resetTimer.current as number);
       resetTimer.current = setTimeout(function resetCopiedState() {
         if (unmounted.current) return;
@@ -99,7 +97,15 @@ export function Footer() {
             onClick={onCopy}
             title="Copy email address to clipboard"
           >
-            <CopyIcon width={24} height={24} />
+            <div
+              className={`icon-wrap ${
+                failed ? "failed" : copied ? "success" : ""
+              }`}
+            >
+              <CopySuccess />
+              <Copy />
+              <CopyFailed />
+            </div>
           </button>
           <div className="email-wrap">
             <input

src/footer/footer.scss

@@ -164,6 +164,7 @@ $img_size: 173px;
 
   .contact-button {
     max-width: 100%;
+    max-height: 4rem;
     display: flex;
     justify-content: center;
     position: relative;
@@ -174,15 +175,42 @@ $img_size: 173px;
       margin-bottom: 1rem;
     }
 
+    /*button*/
     .copy {
       border-radius: 0 2rem 2rem 0;
       border: 2px solid white;
       display: flex;
+      flex-direction: column;
       align-items: center;
       justify-content: center;
       background: white;
-      padding: calc(1rem - 2px) 1.5rem;
+      padding: 0;
       order: 2;
+      width: 4.5rem;
+      height: 4rem;
+      position: relative;
+      overflow: hidden;
+
+      .icon-wrap {
+        transition: transform 0.25s ease;
+        position: absolute;
+        left: 1rem;
+        top: 0;
+        min-height: 12rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-around;
+        transform: translateY(-4rem);
+
+        &.success {
+          transform: translateY(0);
+        }
+
+        &.failed {
+          transform: translateY(-8rem);
+        }
+      }
 
       .fill-target {
         fill: black;
@@ -200,7 +228,13 @@ $img_size: 173px;
     }
 
     svg {
-      margin-right: 0.5rem;
+      width: 1.5rem;
+      height: 1.5rem;
+
+      @media all and (min-width: 350px) {
+        width: 2rem;
+        height: 2rem;
+      }
     }
 
     .email-wrap {