fix: properly display FontAwesome icons in login buttons

- Import and use FontAwesomeIcon component from @fortawesome/react-fontawesome
- Add puzzle piece icon (faPuzzlePiece) for Extension button
- Add shield icon (faShieldHalved) for Bunker button
- Add info circle icon (faCircleInfo) for error messages
- Update CSS to properly style SVG icons with correct sizing

src/components/LoginOptions.tsx

@@ -1,4 +1,6 @@
 import React, { useState } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPuzzlePiece, faShieldHalved, faCircleInfo } from '@fortawesome/free-solid-svg-icons'
 import { Hooks } from 'applesauce-react'
 import { Accounts } from 'applesauce-accounts'
 import { NostrConnectSigner } from 'applesauce-signers'
@@ -87,7 +89,7 @@ const LoginOptions: React.FC = () => {
             disabled={isLoading}
             className="login-button login-button-primary"
           >
-            <i className="fa-solid fa-puzzle-piece" />
+            <FontAwesomeIcon icon={faPuzzlePiece} />
             <span>{isLoading && !showBunkerInput ? 'Connecting...' : 'Login with Extension'}</span>
           </button>
           
@@ -97,7 +99,7 @@ const LoginOptions: React.FC = () => {
               disabled={isLoading}
               className="login-button login-button-secondary"
             >
-              <i className="fa-solid fa-shield-halved" />
+              <FontAwesomeIcon icon={faShieldHalved} />
               <span>Login with Bunker</span>
             </button>
           ) : (
@@ -141,7 +143,7 @@ const LoginOptions: React.FC = () => {
         
         {error && (
           <div className="login-error">
-            <i className="fa-solid fa-circle-info" />
+            <FontAwesomeIcon icon={faCircleInfo} />
             <span>{error}</span>
           </div>
         )}

src/styles/components/login.css

@@ -57,8 +57,10 @@
   min-height: var(--min-touch-target);
 }
 
-.login-button i {
+.login-button svg {
   font-size: 1.125rem;
+  width: 1.125rem;
+  height: 1.125rem;
 }
 
 .login-button-primary {
@@ -185,8 +187,10 @@
   line-height: 1.5;
 }
 
-.login-error i {
+.login-error svg {
   font-size: 1.125rem;
+  width: 1.125rem;
+  height: 1.125rem;
   color: rgb(251, 191, 36);
   flex-shrink: 0;
 }