Merge pull request #1281 from dfinity/feat/oisy-ui-enhancements

feat(oisy-demo): enhance UI with custom OISY icon and button styles

Author: marc0olo

hosting/oisy-signer-demo/frontend/src/App.jsx

@@ -1,14 +1,39 @@
 import { useEffect, useState } from 'react';
-import { Moon, Sun, ExternalLink, Copy, X, Loader2 } from 'lucide-react';
+import { Moon, Sun, ExternalLink, Copy, X, Loader2, LogOut } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Switch } from '@/components/ui/switch';
+import { OisyIcon } from '@/components/ui/oisyIcon';
 import ICPLogo from './assets/icp.svg';
 import USDCLogo from './assets/usdc.svg';
 import OISYLogo from './assets/oisy.svg';
 import { useOisyWallet } from './hooks/useOisyWallet';
 import { CKUSDC_LEDGER_ID } from './libs/constants';
 import { toMainUnit } from './libs/utils';
 
+// Helper functions for button styling and content
+const getButtonVariant = (isConnected, darkMode) => {
+  if (!isConnected) return 'connect';
+  return darkMode ? 'disconnect-dark' : 'disconnect';
+};
+
+const getButtonContent = (isConnected) => {
+  if (isConnected) {
+    return (
+      <>
+        <LogOut className="mr-2 h-4 w-4" />
+        Disconnect
+      </>
+    );
+  }
+  
+  return (
+    <>
+      <OisyIcon />
+      Connect OISY Wallet
+    </>
+  );
+};
+
 export default function App() {
   const {
     connect,
@@ -84,10 +109,15 @@ export default function App() {
             <h1 className="text-xl font-semibold">OISY Signer Demo</h1>
           </div>
           <div className="flex items-center gap-4">
-            <Switch checked={darkMode} onCheckedChange={setDarkMode} />
-            {darkMode ? <Moon size={18} /> : <Sun size={18} />}
-            <Button onClick={isConnected ? disconnect : connect}>
-              {isConnected ? 'Disconnect' : 'Connect'}
+            <div className="flex items-center gap-2">
+              <Switch checked={darkMode} onCheckedChange={setDarkMode} />
+              {darkMode ? <Moon size={18} /> : <Sun size={18} />}
+            </div>
+            <Button
+              onClick={isConnected ? disconnect : connect}
+              variant={getButtonVariant(isConnected, darkMode)}
+            >
+              {getButtonContent(isConnected)}
             </Button>
           </div>
         </header>

hosting/oisy-signer-demo/frontend/src/components/ui/button.jsx

@@ -9,6 +9,9 @@ const buttonVariants = cva(
       variant: {
         default: 'bg-blue-600 text-white hover:bg-blue-700',
         destructive: 'bg-red-600 text-white hover:bg-red-700',
+        connect: 'bg-blue-600 text-white hover:bg-blue-700',
+        disconnect: 'bg-black text-white hover:bg-gray-800',
+        'disconnect-dark': 'bg-red-600 text-white hover:bg-red-700',
       },
       size: {
         default: 'h-10 px-4 py-2',
@@ -23,7 +26,9 @@ const buttonVariants = cva(
 
 export const Button = React.forwardRef(({ className, variant, size, ...props }, ref) => {
   return (
-    <button className={cn(buttonVariants({ variant, size }), className)} ref={ref} {...props} />
+    <button className={cn(buttonVariants({ variant, size }), className)} ref={ref} {...props}>
+      {props.children}
+    </button>
   );
 });
 Button.displayName = 'Button';

hosting/oisy-signer-demo/frontend/src/components/ui/oisyIcon.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+export const OisyIcon = ({ className = "mr-2 h-5 w-5", ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 32 32"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <circle cx="16" cy="16" r="16" fill="white" />
+    <path
+      fill="#000"
+      fillRule="evenodd"
+      d="m17.754 24.305-.347 1.533a.68.68 0 0 1-.767.524 48.88 48.88 0 0 1-1.423-.247.681.681 0 0 1-.537-.822l.307-1.354a28 28 0 0 1-1.398-.314l-.306 1.354a.681.681 0 0 1-.837.512 51.56 51.56 0 0 1-1.39-.387.68.68 0 0 1-.47-.804l.345-1.525c-3.784-1.517-6.173-4.097-5.16-8.502l.245-1.08c.981-4.42 4.246-5.716 8.315-5.456l.345-1.523a.68.68 0 0 1 .768-.524c.47.075.944.158 1.422.249.38.072.621.445.536.822l-.306 1.353a28.45 28.45 0 0 1 1.397.317l.306-1.353a.681.681 0 0 1 .837-.511c.471.125.935.254 1.392.389a.68.68 0 0 1 .467.803l-.346 1.53c3.735 1.516 6.07 4.094 5.08 8.475l-.244 1.08c-.973 4.383-4.204 5.695-8.23 5.46Zm5.492-6.339.137-.607c.967-4.019-2.248-5.52-6.213-6.474-4.007-.848-7.556-.876-8.411 3.167l-.138.608c-.97 4.037 2.245 5.538 6.227 6.496 3.99.844 7.538.872 8.398-3.19Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);