update sign in with farcaster UI (#1046)

apps/web/src/components/Basenames/UsernameProfileSectionFrames/FarcasterAccountModal.tsx

@@ -9,7 +9,9 @@ import Modal from 'apps/web/src/components/Modal';
 import { useFIDQuery } from 'apps/web/src/hooks/useFarcasterUserByFID';
 import QRCode from 'qrcode.react';
 import { useCallback, useMemo } from 'react';
-import FarcasterIcon from './white-purple-farcaster-icon.svg';
+import WPFarcasterIcon from './assets/white-purple-farcaster-icon.svg';
+import PWFarcasterIcon from './assets/purple-white-farcaster-icon.svg';
+import Image, { StaticImageData } from 'next/image';
 
 export default function FarcasterAccountModal() {
   const { farcasterSignerState, showFarcasterQRModal, setShowFarcasterQRModal } = useFrameContext();
@@ -19,7 +21,7 @@ export default function FarcasterAccountModal() {
     [farcasterSignerState.signer],
   );
   const loading = useMemo(
-    () => !!farcasterSignerState.isLoadingSigner ?? false,
+    () => !!farcasterSignerState.isLoadingSigner,
     [farcasterSignerState.isLoadingSigner],
   );
   const handleButtonClick = useCallback(() => {
@@ -32,21 +34,31 @@ export default function FarcasterAccountModal() {
 
   return (
     <Modal isOpen={showFarcasterQRModal} onClose={handleModalClose}>
-      <div className="max-w-72 rounded-lg bg-white">
+      <div className="min-w-80 rounded-lg bg-white">
         {/* Sign-in section when the user is not signed in */}
         {!farcasterUser && (
           <div className="flex flex-col items-center gap-4">
             <div className="flex flex-col items-center">
-              <h1 className="text-xl font-bold text-gray-80">Sign in with Farcaster</h1>
-              <p className="mt-2 text-sm text-gray-50">Use your Farcaster account to sign in.</p>
-              <p className="mt-1 text-xs text-red-50">Be careful! This action costs warps.</p>
+              <Image
+                src={PWFarcasterIcon as StaticImageData}
+                alt="farcaster icon"
+                width={156}
+                height={148}
+                className="mb-6"
+              />
+              <h1 className="mb-1 font-display text-2xl font-medium text-illoblack">
+                Sign in with Warpcast
+              </h1>
+              <p className="text-sm text-palette-foregroundMuted">
+                You will need to pay warps to sign in.
+              </p>
             </div>
 
             <Button
               disabled={loading}
               variant={ButtonVariants.Black}
               type="button"
-              className="mt-4 w-full"
+              className="flex w-full items-center justify-center rounded-full"
               onClick={handleButtonClick}
             >
               {loading ? 'Signing in...' : 'Sign in'}
@@ -118,7 +130,7 @@ function IdentityState({ user, onLogout }: { user: FarcasterSigner; onLogout: ()
 
 const imageSettings = {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-  src: FarcasterIcon.src,
+  src: WPFarcasterIcon.src,
   x: undefined,
   y: undefined,
   height: 60,

apps/web/src/components/Basenames/UsernameProfileSectionFrames/assets/purple-white-farcaster-icon.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="156" height="148" viewBox="0 0 156 148" fill="none">
+  <rect width="156" height="148" rx="32" fill="#7F62C7" />
+  <path
+    d="M45.8166 28H109.024V120H99.7456V77.8581H99.6546C98.6291 66.211 89.066 57.0839 77.4201 57.0839C65.7743 57.0839 56.2111 66.211 55.1857 77.8581H55.0947V120H45.8166V28Z"
+    fill="white" />
+  <path
+    d="M29 41.0581L32.7692 54.1161H35.9586V106.942C34.3573 106.942 33.0592 108.271 33.0592 109.91V113.471H32.4793C30.878 113.471 29.5799 114.8 29.5799 116.439V120H62.0532V116.439C62.0532 114.8 60.7551 113.471 59.1538 113.471H58.574V109.91C58.574 108.271 57.2759 106.942 55.6746 106.942H52.1953V41.0581H29Z"
+    fill="white" />
+  <path
+    d="M100.325 106.942C98.7241 106.942 97.426 108.271 97.426 109.91V113.471H96.8462C95.2449 113.471 93.9467 114.8 93.9467 116.439V120H126.42V116.439C126.42 114.8 125.122 113.471 123.521 113.471H122.941V109.91C122.941 108.271 121.643 106.942 120.041 106.942V54.1161H123.231L127 41.0581H103.805V106.942H100.325Z"
+    fill="white" />
+</svg>