Fixing Logo sizing in ConnectButton

0xsequence · Apr 23, 2024 · 68c3f26 · 68c3f26
1 parent aeae045
commit 68c3f26
Show file tree

Hide file tree

Showing 15 changed files with 549 additions and 563 deletions.
diff --git a/packages/connectors/src/connectors/apple/AppleLogo.tsx b/packages/connectors/src/connectors/apple/AppleLogo.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { LogoProps } from '../types'
 
 interface GetAppleLogo {
   isDarkMode: boolean
@@ -7,16 +8,14 @@ interface GetAppleLogo {
 export const getAppleLogo = ({ isDarkMode }: GetAppleLogo) => {
   const fillColor = isDarkMode ? 'white' : 'black'
 
-  const AppleLogo: React.FunctionComponent = ({ ...props }) => {
+  const AppleLogo: React.FunctionComponent = (props: LogoProps) => {
     return (
-      <React.Fragment>
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 34" fill="none" {...props}>
-          <path
-            d="M27.702 11.5918C27.5049 11.7448 24.0243 13.7068 24.0243 18.0694C24.0243 23.1155 28.4532 24.9007 28.5858 24.9449C28.5654 25.0537 27.8822 27.3897 26.2506 29.77C24.7958 31.8646 23.2765 33.9558 20.9651 33.9558C18.6538 33.9558 18.0589 32.6127 15.3907 32.6127C12.7904 32.6127 11.8659 34 9.75169 34C7.63748 34 6.1623 32.0618 4.46618 29.6816C2.50154 26.8865 0.914185 22.5443 0.914185 18.423C0.914185 11.8128 5.21057 8.30703 9.43897 8.30703C11.6857 8.30703 13.5586 9.78278 14.9692 9.78278C16.3118 9.78278 18.4056 8.21862 20.9617 8.21862C21.9304 8.21862 25.4111 8.30703 27.702 11.5918ZM19.7483 5.42014C20.8054 4.16542 21.5532 2.42444 21.5532 0.683468C21.5532 0.442044 21.5328 0.19722 21.4886 0C19.7687 0.0646065 17.7224 1.14591 16.4886 2.57746C15.5199 3.67917 14.6157 5.42014 14.6157 7.18492C14.6157 7.45014 14.6599 7.71537 14.6803 7.80038C14.7891 7.82078 14.9658 7.84458 15.1426 7.84458C16.6857 7.84458 18.6266 6.81088 19.7483 5.42014Z"
-            fill={fillColor}
-          />
-        </svg>
-      </React.Fragment>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 34" fill="none" {...props}>
+        <path
+          d="M27.702 11.5918C27.5049 11.7448 24.0243 13.7068 24.0243 18.0694C24.0243 23.1155 28.4532 24.9007 28.5858 24.9449C28.5654 25.0537 27.8822 27.3897 26.2506 29.77C24.7958 31.8646 23.2765 33.9558 20.9651 33.9558C18.6538 33.9558 18.0589 32.6127 15.3907 32.6127C12.7904 32.6127 11.8659 34 9.75169 34C7.63748 34 6.1623 32.0618 4.46618 29.6816C2.50154 26.8865 0.914185 22.5443 0.914185 18.423C0.914185 11.8128 5.21057 8.30703 9.43897 8.30703C11.6857 8.30703 13.5586 9.78278 14.9692 9.78278C16.3118 9.78278 18.4056 8.21862 20.9617 8.21862C21.9304 8.21862 25.4111 8.30703 27.702 11.5918ZM19.7483 5.42014C20.8054 4.16542 21.5532 2.42444 21.5532 0.683468C21.5532 0.442044 21.5328 0.19722 21.4886 0C19.7687 0.0646065 17.7224 1.14591 16.4886 2.57746C15.5199 3.67917 14.6157 5.42014 14.6157 7.18492C14.6157 7.45014 14.6599 7.71537 14.6803 7.80038C14.7891 7.82078 14.9658 7.84458 15.1426 7.84458C16.6857 7.84458 18.6266 6.81088 19.7483 5.42014Z"
+          fill={fillColor}
+        />
+      </svg>
     )
   }
   return AppleLogo
@@ -29,20 +28,18 @@ interface GetAppleMonochromeLogo {
 export const getAppleMonochromeLogo = ({ isDarkMode }: GetAppleMonochromeLogo) => {
   const fillColor = isDarkMode ? '#FFFFFF' : '#000000'
 
-  const AppleOtcLogo: React.FunctionComponent = ({ ...props }) => {
+  const AppleOtcLogo: React.FunctionComponent = (props: LogoProps) => {
     return (
-      <React.Fragment>
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 40" fill="none" {...props}>
-          <path
-            d="M27.166 20.8774C27.1338 17.335 30.0617 15.633 30.1936 15.5493C28.5463 13.1395 25.9852 12.8113 25.0714 12.7727C22.8932 12.5507 20.8179 14.0565 19.7111 14.0565C18.6043 14.0565 16.8991 12.8049 15.0909 12.8403C12.7131 12.8757 10.5221 14.2205 9.2962 16.3505C6.8284 20.6297 8.66557 26.9777 11.0722 30.4557C12.2498 32.1545 13.6494 34.0689 15.493 33.9981C17.2691 33.9273 17.9383 32.8495 20.0811 32.8495C22.224 32.8495 22.8289 33.9981 24.7014 33.9627C26.6094 33.9241 27.8191 32.2253 28.9871 30.5201C30.3352 28.5478 30.8918 26.6366 30.924 26.5369C30.8822 26.5208 27.2046 25.1116 27.166 20.8774Z"
-            fill={fillColor}
-          />
-          <path
-            d="M23.6429 10.4722C24.621 9.28822 25.2806 7.64089 25.1004 6C23.6911 6.05791 21.9859 6.93949 20.9756 8.12351C20.0715 9.16917 19.2768 10.8455 19.4923 12.4542C21.0592 12.5764 22.6648 11.653 23.6429 10.4722Z"
-            fill={fillColor}
-          />
-        </svg>
-      </React.Fragment>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 40" fill="none" {...props}>
+        <path
+          d="M27.166 20.8774C27.1338 17.335 30.0617 15.633 30.1936 15.5493C28.5463 13.1395 25.9852 12.8113 25.0714 12.7727C22.8932 12.5507 20.8179 14.0565 19.7111 14.0565C18.6043 14.0565 16.8991 12.8049 15.0909 12.8403C12.7131 12.8757 10.5221 14.2205 9.2962 16.3505C6.8284 20.6297 8.66557 26.9777 11.0722 30.4557C12.2498 32.1545 13.6494 34.0689 15.493 33.9981C17.2691 33.9273 17.9383 32.8495 20.0811 32.8495C22.224 32.8495 22.8289 33.9981 24.7014 33.9627C26.6094 33.9241 27.8191 32.2253 28.9871 30.5201C30.3352 28.5478 30.8918 26.6366 30.924 26.5369C30.8822 26.5208 27.2046 25.1116 27.166 20.8774Z"
+          fill={fillColor}
+        />
+        <path
+          d="M23.6429 10.4722C24.621 9.28822 25.2806 7.64089 25.1004 6C23.6911 6.05791 21.9859 6.93949 20.9756 8.12351C20.0715 9.16917 19.2768 10.8455 19.4923 12.4542C21.0592 12.5764 22.6648 11.653 23.6429 10.4722Z"
+          fill={fillColor}
+        />
+      </svg>
     )
   }
 

diff --git a/packages/connectors/src/connectors/coinbaseWallet/CoinbaseWalletLogo.tsx b/packages/connectors/src/connectors/coinbaseWallet/CoinbaseWalletLogo.tsx
@@ -1,17 +1,16 @@
 import React from 'react'
+import { LogoProps } from '../types'
 
-export const CoinbaseWalletLogo: React.FunctionComponent = ({ ...props }) => {
+export const CoinbaseWalletLogo: React.FunctionComponent = (props: LogoProps) => {
   return (
-    <React.Fragment>
-      <svg viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-        <rect width="28" height="28" fill="#2C5FF6" />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M14 23.8C19.4124 23.8 23.8 19.4124 23.8 14C23.8 8.58761 19.4124 4.2 14 4.2C8.58761 4.2 4.2 8.58761 4.2 14C4.2 19.4124 8.58761 23.8 14 23.8ZM11.55 10.8C11.1358 10.8 10.8 11.1358 10.8 11.55V16.45C10.8 16.8642 11.1358 17.2 11.55 17.2H16.45C16.8642 17.2 17.2 16.8642 17.2 16.45V11.55C17.2 11.1358 16.8642 10.8 16.45 10.8H11.55Z"
-          fill="white"
-        />
-      </svg>
-    </React.Fragment>
+    <svg viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <rect width="28" height="28" fill="#2C5FF6" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14 23.8C19.4124 23.8 23.8 19.4124 23.8 14C23.8 8.58761 19.4124 4.2 14 4.2C8.58761 4.2 4.2 8.58761 4.2 14C4.2 19.4124 8.58761 23.8 14 23.8ZM11.55 10.8C11.1358 10.8 10.8 11.1358 10.8 11.55V16.45C10.8 16.8642 11.1358 17.2 11.55 17.2H16.45C16.8642 17.2 17.2 16.8642 17.2 16.45V11.55C17.2 11.1358 16.8642 10.8 16.45 10.8H11.55Z"
+        fill="white"
+      />
+    </svg>
   )
 }
diff --git a/packages/connectors/src/connectors/discord/DiscordLogo.tsx b/packages/connectors/src/connectors/discord/DiscordLogo.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { LogoProps } from '../types'
 
 interface GetDiscordLogo {
   isDarkMode: boolean
@@ -7,24 +8,22 @@ interface GetDiscordLogo {
 export const getDiscordLogo = ({ isDarkMode }: GetDiscordLogo) => {
   const fillColor = isDarkMode ? 'white' : 'black'
 
-  const DiscordLogo: React.FunctionComponent = ({ ...props }) => {
+  const DiscordLogo: React.FunctionComponent = (props: LogoProps) => {
     return (
-      <React.Fragment>
-        <svg viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <g id="discord-icon-svgrepo-com 1" clipPath="url(#clip0_193_26839)">
-            <path
-              id="Vector"
-              d="M30.3437 10.9324C28.5312 10.0844 26.5932 9.46812 24.567 9.11719C24.3182 9.56707 24.0275 10.1722 23.8271 10.6535C21.6733 10.3296 19.5392 10.3296 17.425 10.6535C17.2246 10.1722 16.9273 9.56707 16.6763 9.11719C14.6479 9.46812 12.7077 10.0867 10.8952 10.9369C7.23942 16.4613 6.24839 21.8485 6.7439 27.1592C9.16863 28.9699 11.5185 30.0699 13.8287 30.7897C14.3991 30.0047 14.9078 29.1701 15.346 28.2907C14.5114 27.9735 13.712 27.5821 12.9566 27.1277C13.157 26.9793 13.353 26.8241 13.5424 26.6644C18.1496 28.8193 23.1554 28.8193 27.7075 26.6644C27.8991 26.8241 28.0951 26.9793 28.2933 27.1277C27.5357 27.5843 26.7341 27.9757 25.8995 28.2929C26.3377 29.1701 26.8442 30.0069 27.4168 30.7919C29.7292 30.0721 32.0813 28.9722 34.506 27.1592C35.0874 21.0028 33.5128 15.6651 30.3437 10.9324ZM15.9737 23.8932C14.5907 23.8932 13.4565 22.602 13.4565 21.0298C13.4565 19.4575 14.5665 18.1641 15.9737 18.1641C17.381 18.1641 18.5152 19.4552 18.4909 21.0298C18.4931 22.602 17.381 23.8932 15.9737 23.8932ZM25.2762 23.8932C23.8932 23.8932 22.759 22.602 22.759 21.0298C22.759 19.4575 23.8689 18.1641 25.2762 18.1641C26.6835 18.1641 27.8176 19.4552 27.7934 21.0298C27.7934 22.602 26.6835 23.8932 25.2762 23.8932Z"
-              fill={fillColor}
-            />
-          </g>
-          <defs>
-            <clipPath id="clip0_193_26839">
-              <rect width="28" height="28" fill={fillColor} transform="translate(6.625 6)" />
-            </clipPath>
-          </defs>
-        </svg>
-      </React.Fragment>
+      <svg viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g id="discord-icon-svgrepo-com 1" clipPath="url(#clip0_193_26839)">
+          <path
+            id="Vector"
+            d="M30.3437 10.9324C28.5312 10.0844 26.5932 9.46812 24.567 9.11719C24.3182 9.56707 24.0275 10.1722 23.8271 10.6535C21.6733 10.3296 19.5392 10.3296 17.425 10.6535C17.2246 10.1722 16.9273 9.56707 16.6763 9.11719C14.6479 9.46812 12.7077 10.0867 10.8952 10.9369C7.23942 16.4613 6.24839 21.8485 6.7439 27.1592C9.16863 28.9699 11.5185 30.0699 13.8287 30.7897C14.3991 30.0047 14.9078 29.1701 15.346 28.2907C14.5114 27.9735 13.712 27.5821 12.9566 27.1277C13.157 26.9793 13.353 26.8241 13.5424 26.6644C18.1496 28.8193 23.1554 28.8193 27.7075 26.6644C27.8991 26.8241 28.0951 26.9793 28.2933 27.1277C27.5357 27.5843 26.7341 27.9757 25.8995 28.2929C26.3377 29.1701 26.8442 30.0069 27.4168 30.7919C29.7292 30.0721 32.0813 28.9722 34.506 27.1592C35.0874 21.0028 33.5128 15.6651 30.3437 10.9324ZM15.9737 23.8932C14.5907 23.8932 13.4565 22.602 13.4565 21.0298C13.4565 19.4575 14.5665 18.1641 15.9737 18.1641C17.381 18.1641 18.5152 19.4552 18.4909 21.0298C18.4931 22.602 17.381 23.8932 15.9737 23.8932ZM25.2762 23.8932C23.8932 23.8932 22.759 22.602 22.759 21.0298C22.759 19.4575 23.8689 18.1641 25.2762 18.1641C26.6835 18.1641 27.8176 19.4552 27.7934 21.0298C27.7934 22.602 26.6835 23.8932 25.2762 23.8932Z"
+            fill={fillColor}
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_193_26839">
+            <rect width="28" height="28" fill={fillColor} transform="translate(6.625 6)" />
+          </clipPath>
+        </defs>
+      </svg>
     )
   }
   return DiscordLogo

diff --git a/packages/connectors/src/connectors/email/EmailLogo.tsx b/packages/connectors/src/connectors/email/EmailLogo.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { LogoProps } from '../types'
 
 interface GetEmailLogo {
   isDarkMode: boolean
@@ -7,20 +8,18 @@ interface GetEmailLogo {
 export const getEmailLogo = ({ isDarkMode }: GetEmailLogo) => {
   const fillColor = isDarkMode ? 'white' : 'black'
 
-  const EmailLogo: React.FunctionComponent = ({ ...props }) => {
+  const EmailLogo: React.FunctionComponent = (props: LogoProps) => {
     return (
-      <React.Fragment>
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 34" fill="none" {...props}>
-          <path
-            d="M17.0826 16.3805C17.1802 16.4598 17.32 16.4598 17.4176 16.3805L30.1401 6.04341C30.5283 5.72801 30.3053 5.09985 29.8051 5.09985H4.69499C4.19482 5.09985 3.9718 5.72801 4.35998 6.04341L17.0826 16.3805Z"
-            fill={fillColor}
-          />
-          <path
-            d="M19.7626 19.2667L33.3838 8.19943C33.731 7.91735 34.2501 8.16441 34.2501 8.61174V24.2249C34.2501 26.5721 32.3473 28.4749 30.0001 28.4749H4.50006C2.15285 28.4749 0.250061 26.5721 0.250061 24.2249V8.61174C0.250061 8.16441 0.769134 7.91735 1.11631 8.19943L14.7375 19.2667C16.2014 20.4561 18.2987 20.4561 19.7626 19.2667Z"
-            fill={fillColor}
-          />
-        </svg>
-      </React.Fragment>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 34" fill="none" {...props}>
+        <path
+          d="M17.0826 16.3805C17.1802 16.4598 17.32 16.4598 17.4176 16.3805L30.1401 6.04341C30.5283 5.72801 30.3053 5.09985 29.8051 5.09985H4.69499C4.19482 5.09985 3.9718 5.72801 4.35998 6.04341L17.0826 16.3805Z"
+          fill={fillColor}
+        />
+        <path
+          d="M19.7626 19.2667L33.3838 8.19943C33.731 7.91735 34.2501 8.16441 34.2501 8.61174V24.2249C34.2501 26.5721 32.3473 28.4749 30.0001 28.4749H4.50006C2.15285 28.4749 0.250061 26.5721 0.250061 24.2249V8.61174C0.250061 8.16441 0.769134 7.91735 1.11631 8.19943L14.7375 19.2667C16.2014 20.4561 18.2987 20.4561 19.7626 19.2667Z"
+          fill={fillColor}
+        />
+      </svg>
     )
   }
 

diff --git a/packages/connectors/src/connectors/facebook/FacebookLogo.tsx b/packages/connectors/src/connectors/facebook/FacebookLogo.tsx
@@ -1,32 +1,31 @@
 import React from 'react'
+import { LogoProps } from '../types'
 
-export const FacebookLogo: React.FunctionComponent = ({ ...props }) => {
+export const FacebookLogo: React.FunctionComponent = (props: LogoProps) => {
   return (
-    <React.Fragment>
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 40" fill="none" {...props}>
-        <path
-          d="M17.4214 36.9716C9.27855 35.5145 3.10712 28.4859 3.10712 20.0001C3.10712 10.5715 10.8214 2.85718 20.25 2.85718C29.6785 2.85718 37.3928 10.5715 37.3928 20.0001C37.3928 28.4859 31.2214 35.5145 23.0785 36.9716L22.1357 36.2002H18.3643L17.4214 36.9716Z"
-          fill="url(#paint0_linear_193_14528)"
-        />
-        <path
-          d="M26.9357 24.7999L27.7072 19.9999H23.1643V16.657C23.1643 15.2856 23.6786 14.257 25.7357 14.257H27.9643V9.88558C26.7643 9.71415 25.3929 9.54272 24.1929 9.54272C20.25 9.54272 17.5071 11.9427 17.5071 16.2285V19.9999H13.2214V24.7999H17.5071V36.8857C18.45 37.0571 19.3929 37.1429 20.3357 37.1429C21.2786 37.1429 22.2214 37.0571 23.1643 36.8857V24.7999H26.9357Z"
-          fill="white"
-        />
-        <defs>
-          <linearGradient
-            id="paint0_linear_193_14528"
-            x1="20.2508"
-            y1="35.9507"
-            x2="20.2508"
-            y2="2.85086"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stop-color="#0062E0" />
-            <stop offset="1" stop-color="#19AFFF" />
-          </linearGradient>
-        </defs>
-      </svg>
-    </React.Fragment>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 40" fill="none" {...props}>
+      <path
+        d="M17.4214 36.9716C9.27855 35.5145 3.10712 28.4859 3.10712 20.0001C3.10712 10.5715 10.8214 2.85718 20.25 2.85718C29.6785 2.85718 37.3928 10.5715 37.3928 20.0001C37.3928 28.4859 31.2214 35.5145 23.0785 36.9716L22.1357 36.2002H18.3643L17.4214 36.9716Z"
+        fill="url(#paint0_linear_193_14528)"
+      />
+      <path
+        d="M26.9357 24.7999L27.7072 19.9999H23.1643V16.657C23.1643 15.2856 23.6786 14.257 25.7357 14.257H27.9643V9.88558C26.7643 9.71415 25.3929 9.54272 24.1929 9.54272C20.25 9.54272 17.5071 11.9427 17.5071 16.2285V19.9999H13.2214V24.7999H17.5071V36.8857C18.45 37.0571 19.3929 37.1429 20.3357 37.1429C21.2786 37.1429 22.2214 37.0571 23.1643 36.8857V24.7999H26.9357Z"
+        fill="white"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_193_14528"
+          x1="20.2508"
+          y1="35.9507"
+          x2="20.2508"
+          y2="2.85086"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#0062E0" />
+          <stop offset="1" stop-color="#19AFFF" />
+        </linearGradient>
+      </defs>
+    </svg>
   )
 }
 
@@ -37,16 +36,14 @@ interface GetFacebookMonochromeLogo {
 export const getFacebookMonochromeLogo = ({ isDarkMode }: GetFacebookMonochromeLogo) => {
   const fillColor = isDarkMode ? '#FFFFFF' : '#000000'
 
-  const FacebookMonochromeLogo: React.FunctionComponent = ({ ...props }) => {
+  const FacebookMonochromeLogo: React.FunctionComponent = (props: LogoProps) => {
     return (
-      <React.Fragment>
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 40" fill="none" {...props}>
-          <path
-            d="M25.8582 10.4398C24.1222 10.4398 23.6288 11.2098 23.6288 12.9073V15.709H28.246L27.791 20.2476H23.6279V34H18.1024V20.2468H14.375V15.7081H18.1042V12.9851C18.1042 8.40625 19.9399 6 25.0891 6C26.1942 6 27.5163 6.0875 28.3055 6.19775V10.459"
-            fill={fillColor}
-          />
-        </svg>
-      </React.Fragment>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 40" fill="none" {...props}>
+        <path
+          d="M25.8582 10.4398C24.1222 10.4398 23.6288 11.2098 23.6288 12.9073V15.709H28.246L27.791 20.2476H23.6279V34H18.1024V20.2468H14.375V15.7081H18.1042V12.9851C18.1042 8.40625 19.9399 6 25.0891 6C26.1942 6 27.5163 6.0875 28.3055 6.19775V10.459"
+          fill={fillColor}
+        />
+      </svg>
     )
   }