Merge pull request #55 from burnt-labs/grantModalUIFixes

Addressed UI feedback
burnt-labs · Jan 24, 2024 · 9424f6e · 9424f6e
2 parents 9b7108b + 7fcd57a
commit 9424f6e
Show file tree

Hide file tree

Showing 29 changed files with 189 additions and 83 deletions.
diff --git a/apps/abstraxion-dashboard/components/Abstraxion/index.tsx b/apps/abstraxion-dashboard/components/Abstraxion/index.tsx
@@ -16,6 +16,7 @@ import { AbstraxionWallets } from "@/components/AbstraxionWallets";
 import { ErrorDisplay } from "@/components/ErrorDisplay";
 import { useSearchParams } from "next/navigation";
 import { AbstraxionGrant } from "../AbstraxionGrant";
+import Image from "next/image";
 
 export interface ModalProps {
   onClose: VoidFunction;
@@ -52,21 +53,46 @@ export const Abstraxion = ({ isOpen, onClose }: ModalProps) => {
   if (!isOpen) return null;
 
   return (
-    <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent>
-        {abstraxionError ? (
-          <ErrorDisplay message={abstraxionError} onClose={onClose} />
-        ) : isConnecting || isReconnecting ? (
-          <Loading />
-        ) : account?.bech32Address && contracts && grantee ? (
-          <AbstraxionGrant contracts={contractsArray} grantee={grantee} />
-        ) : isConnected ? (
-          <AbstraxionWallets />
-        ) : (
-          <AbstraxionSignin />
-        )}
-      </DialogContent>
-    </Dialog>
+    <>
+      <Dialog open={isOpen} onOpenChange={onClose}>
+        <DialogContent>
+          {abstraxionError ? (
+            <ErrorDisplay message={abstraxionError} onClose={onClose} />
+          ) : isConnecting || isReconnecting ? (
+            <Loading />
+          ) : account?.bech32Address && contracts && grantee ? (
+            <AbstraxionGrant contracts={contractsArray} grantee={grantee} />
+          ) : isConnected ? (
+            <AbstraxionWallets />
+          ) : (
+            <AbstraxionSignin />
+          )}
+        </DialogContent>
+      </Dialog>
+      {/* TOS Footer */}
+      {!isConnected && (
+        <div className="ui-absolute ui-pointer-events-auto ui-w-full ui-z-[1000] ui-py-6 ui-px-10 ui-bottom-0 ui-flex ui-justify-between ui-items-center">
+          <div className="ui-font-akkuratLL ui-text-sm ui-font-normal ui-leading-none">
+            <span className="ui-text-neutral-400">
+              By continuing, you agree to and acknowledge that you have read and
+              understand the
+            </span>
+            <a href="https://burnt.com" className="ui-pl-1 ui-text-white">
+              Disclaimer
+            </a>
+            <span className="ui-text-neutral-400">.</span>
+          </div>
+          <div className="ui-flex ui-gap-2 ui-items-center">
+            <p className="ui-font-akkuratLL ui-text-sm ui-text-zinc-100 ui-opacity-50 leading-tight">
+              Powered by
+            </p>
+            <a href="https://xion.burnt.com/">
+              <Image src="/logo.png" alt="Xion Logo" width="108" height="48" />
+            </a>
+          </div>
+        </div>
+      )}
+    </>
   );
 };
 

diff --git a/apps/abstraxion-dashboard/components/AbstraxionSignin/index.tsx b/apps/abstraxion-dashboard/components/AbstraxionSignin/index.tsx
@@ -90,10 +90,10 @@ export const AbstraxionSignin = () => {
       {isOnOtpStep ? (
         <>
           <div className="ui-flex ui-flex-col ui-w-full ui-text-center">
-            <h1 className="ui-w-full ui-tracking-tighter ui-text-3xl ui-font-bold ui-text-white ui-uppercase ui-mb-3">
+            <h1 className="ui-w-full ui-leading-[38.40px] ui-tracking-tighter ui-text-3xl ui-font-light ui-text-white ui-uppercase ui-mb-3">
               Input 6 digit code
             </h1>
-            <h2 className="ui-w-full ui-tracking-tighter ui-text-sm ui-mb-4 ui-text-neutral-500">
+            <h2 className="ui-w-full ui-mb-4 ui-text-center ui-text-sm ui-font-normal ui-leading-tight ui-text-white/50">
               Please check your email for the verification code
             </h2>
           </div>
@@ -119,11 +119,11 @@ export const AbstraxionSignin = () => {
         </>
       ) : (
         <>
-          <div className="ui-flex ui-flex-col ui-w-full ui-text-center">
-            <h1 className="ui-w-full ui-tracking-tighter ui-text-3xl ui-font-bold ui-text-white ui-uppercase ui-mb-3">
+          <div className="ui-flex ui-flex-col ui-w-full ui-text-center ui-font-akkuratLL">
+            <h1 className="ui-w-full ui-leading-[38.40px] ui-tracking-tighter ui-text-3xl ui-font-light ui-text-white ui-uppercase ui-mb-3">
               Welcome
             </h1>
-            <h2 className="ui-w-full ui-tracking-tighter ui-text-sm ui-mb-4 ui-text-neutral-500">
+            <h2 className="ui-w-full ui-mb-4 ui-text-center ui-text-sm ui-font-normal ui-leading-tight ui-text-white/50">
               Log in or sign up with your email
             </h2>
           </div>
@@ -141,23 +141,6 @@ export const AbstraxionSignin = () => {
           >
             Log in / Sign up
           </Button>
-          <p className="ui-text-xs ui-text-neutral-500">
-            By continuing, you agree to Burnt&apos;s{" "}
-            <a
-              className="ui-text-white ui-no-underline hover:ui-underline"
-              href="https://burnt.com"
-            >
-              Terms of Service
-            </a>{" "}
-            and acknowledge that you have read and understand the XION{" "}
-            <a
-              className="ui-text-white ui-no-underline hover:ui-underline"
-              href="https://burnt.com"
-            >
-              Disclaimer
-            </a>
-            .
-          </p>
         </>
       )}
     </ModalSection>

diff --git a/apps/abstraxion-dashboard/components/AbstraxionWallets/index.tsx b/apps/abstraxion-dashboard/components/AbstraxionWallets/index.tsx
@@ -12,6 +12,7 @@ import { AllSmartWalletQuery } from "@/utils/queries";
 import { truncateAddress } from "@/utils";
 import { useAbstraxionAccount } from "@/hooks";
 import { Loading } from "../Loading";
+import { WalletIcon } from "../Icons";
 
 export const AbstraxionWallets = () => {
   const {
@@ -122,10 +123,10 @@ export const AbstraxionWallets = () => {
       ) : (
         <div className="ui-flex ui-h-full ui-w-full ui-flex-col ui-items-start ui-justify-between ui-gap-8 ui-p-10 ui-text-white">
           <div className="ui-flex ui-flex-col ui-w-full ui-text-center">
-            <h1 className="ui-w-full ui-tracking-tighter ui-text-3xl ui-font-bold ui-text-white ui-uppercase ui-mb-3">
+            <h1 className="ui-w-full ui-leading-[38.40px] ui-tracking-tighter ui-text-3xl ui-font-light ui-text-white ui-uppercase ui-mb-3">
               Welcome
             </h1>
-            <h2 className="ui-w-full ui-tracking-tighter ui-text-sm ui-mb-4 ui-text-neutral-500">
+            <h2 className="ui-w-full ui-mb-4 ui-text-center ui-text-sm ui-font-normal ui-leading-tight ui-text-white/50">
               Select an account to continue
             </h2>
           </div>
@@ -141,29 +142,31 @@ export const AbstraxionWallets = () => {
             </div>
           ) : (
             <div className="ui-flex ui-w-full ui-flex-col ui-items-start ui-justify-center ui-gap-4">
-              <div className="ui-font-bold ui-tracking-tighter">Accounts</div>
-              <div className="ui-flex ui-max-h-64 ui-w-full ui-flex-col ui-items-center ui-gap-4 ui-overflow-scroll">
+              <div className="ui-text-white ui-text-base ui-font-bold ui-font-akkuratLL ui-leading-tight">
+                Accounts
+              </div>
+              <div className="ui-flex ui-max-h-64 ui-w-full ui-flex-col ui-items-center ui-gap-4 ui-overflow-auto">
                 {loading || fetchingNewWallets ? (
                   <Spinner />
                 ) : data?.smartAccounts.nodes.length >= 1 ? (
                   data?.smartAccounts?.nodes?.map((node: any, i: number) => (
                     <div
-                      className={`ui-w-full ui-items-center ui-gap-4 ui-rounded-lg ui-p-4 ui-flex ui-bg-transparent hover:ui-cursor-pointer ${
+                      className={`ui-w-full ui-items-center ui-gap-4 ui-rounded-lg ui-p-6 ui-flex ui-bg-transparent hover:ui-cursor-pointer ui-border-[1px] ui-border-white hover:ui-bg-white/5 ${
                         node.id === abstractAccount?.id
-                          ? "ui-border-2 ui-border-white"
-                          : ""
+                          ? ""
+                          : "ui-border-opacity-50"
                       }`}
                       key={i}
                       onClick={() =>
                         setAbstractAccount({ ...node, userId: user?.user_id })
                       }
                     >
-                      <AccountWalletLogo />
+                      <WalletIcon color="white" backgroundColor="#363635" />
                       <div className="ui-flex ui-flex-col ui-gap-1">
-                        <h1 className="ui-text-sm ui-font-bold">
+                        <h1 className="ui-text-sm ui-font-bold ui-font-akkuratLL ui-leading-none">
                           Personal Account {i + 1}
                         </h1>
-                        <h2 className="ui-text-xs text-zinc-300">
+                        <h2 className="ui-text-xs ui-text-neutral-400 ui-font-akkuratLL ui-leading-tight">
                           {truncateAddress(node.id)}
                         </h2>
                       </div>

diff --git a/apps/abstraxion-dashboard/components/Icons/Wallet.tsx b/apps/abstraxion-dashboard/components/Icons/Wallet.tsx
@@ -1,9 +1,11 @@
 export const WalletIcon = ({
   color,
   backgroundColor,
+  outlineColor,
 }: {
   color: string;
   backgroundColor: string;
+  outlineColor?: string;
 }) => (
   <svg
     width="32"
@@ -14,6 +16,7 @@ export const WalletIcon = ({
   >
     <rect width="32" height="32" rx="16" fill={backgroundColor} />
     <path
+      stroke={outlineColor}
       d="M22.5967 20.5526V21.2895C22.5967 22.1 21.9335 22.7632 21.123 22.7632H10.8072C9.98929 22.7632 9.3335 22.1 9.3335 21.2895V10.9737C9.3335 10.1632 9.98929 9.5 10.8072 9.5H21.123C21.9335 9.5 22.5967 10.1632 22.5967 10.9737V11.7105H15.9651C15.1472 11.7105 14.4914 12.3737 14.4914 13.1842V19.0789C14.4914 19.8895 15.1472 20.5526 15.9651 20.5526H22.5967ZM15.9651 19.0789H23.3335V13.1842H15.9651V19.0789ZM18.9124 17.2368C18.3009 17.2368 17.8072 16.7432 17.8072 16.1316C17.8072 15.52 18.3009 15.0263 18.9124 15.0263C19.524 15.0263 20.0177 15.52 20.0177 16.1316C20.0177 16.7432 19.524 17.2368 18.9124 17.2368Z"
       fill={color}
     />

diff --git a/packages/ui/src/assets/fonts/AkkuratLLWeb-Black.woff b/packages/ui/src/assets/fonts/AkkuratLLWeb-Black.woff
diff --git a/packages/ui/src/assets/fonts/AkkuratLLWeb-Black.woff2 b/packages/ui/src/assets/fonts/AkkuratLLWeb-Black.woff2
diff --git a/packages/ui/src/assets/fonts/AkkuratLLWeb-BlackItalic.woff b/packages/ui/src/assets/fonts/AkkuratLLWeb-BlackItalic.woff
diff --git a/packages/ui/src/assets/fonts/AkkuratLLWeb-BlackItalic.woff2 b/packages/ui/src/assets/fonts/AkkuratLLWeb-BlackItalic.woff2
diff --git a/packages/ui/src/assets/fonts/AkkuratLLWeb-Bold.woff b/packages/ui/src/assets/fonts/AkkuratLLWeb-Bold.woff
diff --git a/packages/ui/src/assets/fonts/AkkuratLLWeb-Bold.woff2 b/packages/ui/src/assets/fonts/AkkuratLLWeb-Bold.woff2
diff --git a/packages/ui/src/assets/fonts/AkkuratLLWeb-BoldItalic.woff b/packages/ui/src/assets/fonts/AkkuratLLWeb-BoldItalic.woff
diff --git a/packages/ui/src/assets/fonts/AkkuratLLWeb-BoldItalic.woff2 b/packages/ui/src/assets/fonts/AkkuratLLWeb-BoldItalic.woff2
diff --git a/packages/ui/src/assets/fonts/AkkuratLLWeb-Italic.woff b/packages/ui/src/assets/fonts/AkkuratLLWeb-Italic.woff
diff --git a/packages/ui/src/assets/fonts/AkkuratLLWeb-Italic.woff2 b/packages/ui/src/assets/fonts/AkkuratLLWeb-Italic.woff2
diff --git a/packages/ui/src/assets/fonts/AkkuratLLWeb-Light.woff b/packages/ui/src/assets/fonts/AkkuratLLWeb-Light.woff
diff --git a/packages/ui/src/assets/fonts/AkkuratLLWeb-Light.woff2 b/packages/ui/src/assets/fonts/AkkuratLLWeb-Light.woff2
diff --git a/packages/ui/src/assets/fonts/AkkuratLLWeb-LightItalic.woff b/packages/ui/src/assets/fonts/AkkuratLLWeb-LightItalic.woff
diff --git a/packages/ui/src/assets/fonts/AkkuratLLWeb-LightItalic.woff2 b/packages/ui/src/assets/fonts/AkkuratLLWeb-LightItalic.woff2
diff --git a/packages/ui/src/assets/fonts/AkkuratLLWeb-Regular.woff b/packages/ui/src/assets/fonts/AkkuratLLWeb-Regular.woff
diff --git a/packages/ui/src/assets/fonts/AkkuratLLWeb-Regular.woff2 b/packages/ui/src/assets/fonts/AkkuratLLWeb-Regular.woff2
diff --git a/packages/ui/src/assets/fonts/AkkuratLLWeb-Thin.woff b/packages/ui/src/assets/fonts/AkkuratLLWeb-Thin.woff
diff --git a/packages/ui/src/assets/fonts/AkkuratLLWeb-Thin.woff2 b/packages/ui/src/assets/fonts/AkkuratLLWeb-Thin.woff2
diff --git a/packages/ui/src/assets/fonts/AkkuratLLWeb-ThinItalic.woff b/packages/ui/src/assets/fonts/AkkuratLLWeb-ThinItalic.woff
diff --git a/packages/ui/src/assets/fonts/AkkuratLLWeb-ThinItalic.woff2 b/packages/ui/src/assets/fonts/AkkuratLLWeb-ThinItalic.woff2
diff --git a/packages/ui/src/button.tsx b/packages/ui/src/button.tsx
@@ -41,7 +41,7 @@ export const Button: React.FC<ButtonProps> = ({
 
   return (
     <button
-      className={`ui-rounded-md ui-px-5 ui-py-3.5 ui-text-sm ui-font-bold ui-outline-none ui-hover:opacity-70 ${
+      className={`ui-rounded-md ui-font-akkuratLL ui-uppercase ui-px-5 ui-py-3.5 ui-text-sm ui-outline-none ui-hover:opacity-70 ${
         fullWidth ? "ui-w-full" : ""
       } ${getButtonClasses()}`}
       {...props}

diff --git a/packages/ui/src/dialog.tsx b/packages/ui/src/dialog.tsx
@@ -15,11 +15,11 @@ const DialogOverlay = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Overlay
-    ref={ref}
     className={cn(
       "ui-bg-black/80 ui-data-[state=open]:ui-animate-in ui-data-[state=closed]:ui-animate-out ui-data-[state=closed]:ui-fade-out-0 ui-data-[state=open]:ui-fade-in-0 ui-fixed ui-inset-0 ui-z-50 ui-backdrop-blur-lg",
       className,
     )}
+    ref={ref}
     {...props}
   />
 ));
@@ -33,11 +33,11 @@ const DialogContent = React.forwardRef<
     <DialogOverlay />
     <div className="ui-absolute ui-h-screen ui-w-screen ui-inset-0 ui-bg-modal-overlay ui-backdrop-blur-3xl ui-opacity-40 ui-bg-no-repeat ui-bg-cover ui-bg-center ui-bg-fixed ui-z-[60]" />
     <DialogPrimitive.Content
-      ref={ref}
       className={cn(
-        "ui-bg-black/20 ui-backdrop-blur-2xl ui-data-[state=open]:ui-animate-in ui-data-[state=closed]:ui-animate-out ui-data-[state=closed]:ui-fade-out-0 ui-data-[state=open]:ui-fade-in-0 ui-data-[state=closed]:ui-zoom-out-95 ui-data-[state=open]:ui-zoom-in-95 ui-data-[state=closed]:ui-slide-out-to-left-1/2 ui-data-[state=closed]:ui-slide-out-to-top-[48%] ui-data-[state=open]:ui-slide-in-from-left-1/2 ui-data-[state=open]:ui-slide-in-from-top-[48%] ui-fixed ui-z-[70] ui-grid ui-w-full ui-max-w-lg ui-gap-4 ui-p-6 ui-shadow-lg ui-duration-200 sm:ui-rounded-3xl ui-left-[50%] ui-top-[50%] ui-translate-x-[-50%] ui-translate-y-[-50%]",
+        "ui-bg-black/20 ui-backdrop-blur-2xl ui-data-[state=open]:ui-animate-in ui-data-[state=closed]:ui-animate-out ui-data-[state=closed]:ui-fade-out-0 ui-data-[state=open]:ui-fade-in-0 ui-data-[state=closed]:ui-zoom-out-95 ui-data-[state=open]:ui-zoom-in-95 ui-data-[state=closed]:ui-slide-out-to-left-1/2 ui-data-[state=closed]:ui-slide-out-to-top-[48%] ui-data-[state=open]:ui-slide-in-from-left-1/2 ui-data-[state=open]:ui-slide-in-from-top-[48%] ui-fixed ui-z-[70] ui-grid ui-w-full ui-max-w-lg ui-gap-4 ui-p-6 ui-duration-200 sm:ui-rounded-[48px] ui-left-[50%] ui-top-[50%] ui-translate-x-[-50%] ui-translate-y-[-50%]",
         className,
       )}
+      ref={ref}
       {...props}
     >
       {children}
@@ -46,44 +46,48 @@ const DialogContent = React.forwardRef<
 ));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
-const DialogHeader = ({
+function DialogHeader({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "ui-flex ui-flex-col ui-space-y-1.5 ui-text-center sm:ui-text-left",
-      className,
-    )}
-    {...props}
-  />
-);
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "ui-flex ui-flex-col ui-space-y-1.5 ui-text-center sm:ui-text-left",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
 DialogHeader.displayName = "DialogHeader";
 
-const DialogFooter = ({
+function DialogFooter({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "ui-flex ui-flex-col-reverse sm:ui-flex-row sm:ui-justify-end sm:ui-space-x-2",
-      className,
-    )}
-    {...props}
-  />
-);
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "ui-flex ui-flex-col-reverse sm:ui-flex-row sm:ui-justify-end sm:ui-space-x-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
 DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
-    ref={ref}
     className={cn(
       "ui-text-lg ui-font-semibold ui-leading-none ui-tracking-tight",
       className,
     )}
+    ref={ref}
     {...props}
   />
 ));
@@ -94,8 +98,8 @@ const DialogDescription = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
-    ref={ref}
     className={cn("ui-text-neutral-500 ui-text-sm", className)}
+    ref={ref}
     {...props}
   />
 ));

diff --git a/packages/ui/src/input.tsx b/packages/ui/src/input.tsx
@@ -1,4 +1,5 @@
-import { InputHTMLAttributes, useState } from "react";
+import type { InputHTMLAttributes } from "react";
+import { useState } from "react";
 
 type BaseInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "prefix">;
 
@@ -35,20 +36,22 @@ export function Input({
         </p>
       ) : null}
       <label
-        className={`ui-relative ui-z-0 ui-w-auto ${
-          isInputFocused || value ? "ui-top-2 ui-text-xs" : "ui-top-7"
-        } ui-text-neutral-500`}
+        className={`ui-relative ui-z-0 ui-w-auto ui-font-akkuratLL ${
+          isInputFocused || value
+            ? "ui-top-2 ui-text-xs ui-leading-tight"
+            : "ui-top-7"
+        } ui-text-neutral-400`}
       >
         {placeholder}
       </label>
       <input
         {...props}
-        value={value}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
         className={`ui-z-10 ui-block ui-h-8 ui-w-full ui-border-b ui-relative ${
           error ? "ui-border-red-400" : ""
-        } ui-bg-transparent ui-text-sm ui-text-white ui-outline-none`}
+        } ui-bg-transparent ui-font-akkuratLL ui-text-sm ui-text-zinc-100 ui-font-normal ui-leading-tight ui-outline-none`}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        value={value}
       />
     </div>
   );