burnt-labs · BurntNerve · Apr 30, 2024 · Apr 30, 2024 · Apr 30, 2024
diff --git a/.changeset/violet-parrots-join.md b/.changeset/violet-parrots-join.md
@@ -0,0 +1,8 @@
+---
+"abstraxion-dashboard": minor
+"abstraxion-settings": minor
+"@burnt-labs/abstraxion": minor
+"@burnt-labs/ui": minor
+---
+
+Added mobile UI fixes for dashboard
diff --git a/apps/abstraxion-dashboard/components/Abstraxion/index.tsx b/apps/abstraxion-dashboard/components/Abstraxion/index.tsx
@@ -65,7 +65,7 @@ export const Abstraxion = ({ isOpen, onClose }: ModalProps) => {
   return (
     <>
       <Dialog open={isOpen} onOpenChange={onClose}>
-        <DialogContent className={isMainnet ? "" : "!ui-bg-white/10"}>
+        <DialogContent className={`${isMainnet ? "" : "!ui-bg-white/10"}`}>
           {abstraxionError ? (
             <ErrorDisplay message={abstraxionError} onClose={onClose} />
           ) : account?.id &&
@@ -87,7 +87,7 @@ export const Abstraxion = ({ isOpen, onClose }: ModalProps) => {
       </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-flex-col sm:ui-flex-row sm:ui-justify-between sm:ui-items-end">
+        <div className="ui-absolute ui-pointer-events-auto ui-w-full ui-z-[1000] sm:ui-py-6 ui-px-10 ui-bottom-0 ui-flex ui-flex-col sm:ui-flex-row sm:ui-justify-between sm:ui-items-end">
           <div className="ui-font-akkuratLL ui-text-xs sm:ui-text-sm ui-font-normal ui-text-center sm:ui-text-left">
             <span className="ui-text-neutral-400">
               By continuing, you agree to and acknowledge that you have read and

diff --git a/apps/abstraxion-dashboard/components/AbstraxionWallets/index.tsx b/apps/abstraxion-dashboard/components/AbstraxionWallets/index.tsx
@@ -136,10 +136,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 sm: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-leading-[38.40px] ui-tracking-tighter ui-text-3xl ui-font-light ui-text-white ui-uppercase ui-mb-3">
+            <h1 className="ui-font-akkuratLL 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-mb-4 ui-text-center ui-text-sm ui-font-normal ui-leading-tight ui-text-white/50">
+            <h2 className="ui-font-akkuratLL 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>
@@ -209,7 +209,7 @@ export const AbstraxionWallets = () => {
               </Button>
             ) : null}
             <Button
-              structure="outlined"
+              structure="destructive"
               fullWidth={true}
               onClick={handleDisconnect}
             >

diff --git a/apps/abstraxion-dashboard/components/Icons/USDC.tsx b/apps/abstraxion-dashboard/components/Icons/USDC.tsx
diff --git a/apps/abstraxion-dashboard/components/WalletReceive/index.tsx b/apps/abstraxion-dashboard/components/WalletReceive/index.tsx
@@ -31,7 +31,7 @@ export function WalletReceive({
         <DialogClose className="ui-absolute ui-top-5 ui-right-5">
           <CloseIcon className="ui-stroke-white/50" />
         </DialogClose>
-        <div className="ui-flex ui-flex-col ui-pt-8">
+        <div className="ui-flex ui-flex-col">
           <h1 className="ui-w-full ui-text-center ui-text-3xl ui-font-akkuratLL ui-font-thin">
             RECEIVE
           </h1>
@@ -50,7 +50,11 @@ export function WalletReceive({
           <div className="ui-flex ui-items-center ui-justify-center ui-my-6 ui-p-6 ui-w-full ui-bg-black ui-rounded-lg">
             <QRCodeSVG value={"uxion:" + xionAddress} />
           </div>
-          <Button onClick={() => setIsOpen(false)} fullWidth>
+          <Button
+            className="ui-mt-6"
+            onClick={() => setIsOpen(false)}
+            fullWidth
+          >
             Close
           </Button>
         </div>

diff --git a/apps/abstraxion-dashboard/components/WalletSend/WalletSendForm.tsx b/apps/abstraxion-dashboard/components/WalletSend/WalletSendForm.tsx
@@ -5,6 +5,7 @@ import { XION_TO_USDC_CONVERSION } from "@/components/Overview";
 import { ErrorDisplay } from "@/components/ErrorDisplay";
 import { useAbstraxionAccount } from "@/hooks";
 import { formatBalance, isValidWalletAddress } from "@/utils";
+import { USDCIcon } from "../Icons/USDC";
 
 export function WalletSendForm({
   sendTokens,
@@ -89,7 +90,7 @@ export function WalletSendForm({
         />
       ) : isSuccess ? (
         <>
-          <div className="ui-p-0 md:ui-p-8 ui-flex ui-flex-col ui-gap-4">
+          <div className="ui-p-0 ui-flex ui-flex-col ui-gap-4">
             <h1 className="ui-w-full ui-text-center ui-text-3xl ui-font-akkuratLL ui-font-thin">
               SUCCESS!
             </h1>
@@ -115,18 +116,18 @@ export function WalletSendForm({
             </p>
             <div className="ui-my-6 ui-h-[1px] ui-w-full ui-bg-white/20" />
             <div>
-              <p className="ui-w-full ui-text-center ui-text-sm ui-font-akkuratLL ui-text-white/40">
+              <p className="ui-w-full ui-text-center ui-text-xs ui-font-akkuratLL ui-text-white/40">
                 From
               </p>
-              <p className="ui-w-full ui-text-center ui-text-xs ui-font-akkuratLL ui-text-white">
+              <p className="ui-w-full ui-text-center ui-text-sm ui-font-akkuratLL ui-text-white">
                 {account.id}
               </p>
             </div>
             <div className="ui-mb-4">
-              <p className="ui-w-full ui-text-center ui-text-sm ui-font-akkuratLL ui-text-white/40">
+              <p className="ui-w-full ui-text-center ui-text-xs ui-font-akkuratLL ui-text-white/40">
                 To
               </p>
-              <p className="ui-w-full ui-text-center ui-text-xs ui-font-akkuratLL ui-text-white">
+              <p className="ui-w-full ui-text-center ui-text-sm ui-font-akkuratLL ui-text-white">
                 {recipientAddress}
               </p>
             </div>
@@ -135,7 +136,7 @@ export function WalletSendForm({
         </>
       ) : isOnReviewStep ? (
         <>
-          <div className="ui-p-0 md:ui-p-8 ui-flex ui-flex-col ui-gap-4">
+          <div className="ui-p-0 ui-flex ui-flex-col ui-gap-4">
             <h1 className="ui-w-full ui-text-center ui-text-3xl ui-font-akkuratLL ui-font-thin">
               REVIEW
             </h1>
@@ -161,18 +162,18 @@ export function WalletSendForm({
             </p>
             <div className="ui-my-6 ui-h-[1px] ui-w-full ui-bg-white/20" />
             <div>
-              <p className="ui-w-full ui-text-center ui-text-sm ui-font-akkuratLL ui-text-white/40">
+              <p className="ui-w-full ui-text-center ui-text-xs ui-font-akkuratLL ui-text-white/40">
                 From
               </p>
-              <p className="ui-w-full ui-text-center ui-text-xs ui-font-akkuratLL ui-text-white">
+              <p className="ui-w-full ui-text-center ui-text-sm ui-font-akkuratLL ui-text-white">
                 {account.id}
               </p>
             </div>
             <div className="ui-mb-4">
-              <p className="ui-w-full ui-text-center ui-text-sm ui-font-akkuratLL ui-text-white/40">
+              <p className="ui-w-full ui-text-center ui-text-xs ui-font-akkuratLL ui-text-white/40">
                 To
               </p>
-              <p className="ui-w-full ui-text-center ui-text-xs ui-font-akkuratLL ui-text-white">
+              <p className="ui-w-full ui-text-center ui-text-sm ui-font-akkuratLL ui-text-white">
                 {recipientAddress}
               </p>
             </div>
@@ -190,26 +191,30 @@ export function WalletSendForm({
         </>
       ) : (
         <>
-          <div className="ui-flex ui-flex-col ui-p-0 md:ui-p-8 ui-gap-8">
+          <div className="ui-flex ui-flex-col ui-p-0 ui-gap-8">
             <h1 className="ui-w-full ui-text-center ui-text-3xl ui-font-akkuratLL ui-font-thin">
               SEND
             </h1>
-            <div className="ui-flex ui-flex-col ui-gap-4">
-              <div className="ui-flex ui-flex-col ui-items-start ui-p-4 ui-border ui-border-white/50 ui-rounded-2xl">
-                <p className="ui-text-md ui-font-bold ui-text-white">XION</p>
-                <p className="ui-text-md ui-text-white">
-                  {/* TODO: Make configurable once we support multiple currencies */}
-                  Balance: {formatBalance(Number(balanceInfo.total))} XION{" "}
-                  <span className="ui-text-white/50 ui-pl-2">
-                    $
-                    {formatBalance(
-                      Number(balanceInfo.total) * XION_TO_USDC_CONVERSION,
-                    )}{" "}
-                    USD
-                  </span>
-                </p>
+            <div className="ui-flex ui-flex-col">
+              <div className="ui-flex ui-items-center ui-p-4 ui-bg-black ui-rounded-lg">
+                <USDCIcon color="black" />
+                <div className="ui-flex ui-flex-col ui-items-start">
+                  <p className="ui-text-md ui-font-bold ui-text-white">XION</p>
+                  <p className="ui-text-md ui-text-white">
+                    {/* TODO: Make configurable once we support multiple currencies */}
+                    Balance: {formatBalance(Number(balanceInfo.total))} XION{" "}
+                    <span className="ui-text-white/50 ui-pl-2">
+                      $
+                      {formatBalance(
+                        Number(balanceInfo.total) * XION_TO_USDC_CONVERSION,
+                      )}{" "}
+                      USD
+                    </span>
+                  </p>
+                </div>
               </div>
-              <div className="ui-flex ui-justify-between">
+
+              <div className="ui-font-akkuratLL ui-flex ui-justify-between ui-mb-4 ui-mt-8">
                 <p className="ui-text-white ui-font-semibold">Amount</p>
                 <p className="ui-text-white/50 ui-font-semibold">
                   =$
@@ -222,10 +227,12 @@ export function WalletSendForm({
               <div
                 className={`ui-flex ui-items-center ui-justify-between ui-p-6 ui-border ${
                   amountError ? "ui-border-red-500" : "ui-border-white/50"
-                } ui-rounded-2xl`}
+                } ui-rounded-lg`}
               >
                 <input
-                  className="ui-w-full ui-bg-transparent ui-text-white ui-font-bold ui-text-5xl placeholder:ui-text-white/50 focus:ui-outline-none"
+                  className={`ui-w-full ui-bg-transparent ${
+                    sendAmount === "0" && "!ui-text-[#6C6A6A]"
+                  } ui-text-white ui-font-bold ui-text-5xl placeholder:ui-text-white/50 focus:ui-outline-none`}
                   onChange={handleAmountChange}
                   placeholder="Amount"
                   type="number"
@@ -240,10 +247,12 @@ export function WalletSendForm({
               ) : null}
             </div>
             <div className="ui-flex ui-flex-col">
-              <label className="ui-text-xs ui-text-white/50">From:</label>
+              <label className="ui-font-akkuratLL ui-text-xs ui-text-white/50">
+                From:
+              </label>
               <p
                 style={{ wordBreak: "break-word" }}
-                className="ui-text-xs ui-w-full ui-text-center ui-text-xs ui-font-akkuratLL ui-text-white"
+                className="ui-w-full ui-text-center ui-text-sm ui-font-akkuratLL ui-text-white"
               >
                 {account.id}
               </p>

diff --git a/apps/abstraxion-dashboard/package.json b/apps/abstraxion-dashboard/package.json
@@ -3,7 +3,7 @@
   "version": "0.2.0-alpha.24",
   "private": true,
   "scripts": {
-    "dev": "next dev --port 3002",
+    "dev": "next dev --port 3000",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",

diff --git a/apps/abstraxion-settings/src/components/Abstraxion/index.tsx b/apps/abstraxion-settings/src/components/Abstraxion/index.tsx
@@ -57,8 +57,6 @@ export const Abstraxion = ({ isOpen, onClose }: ModalProps) => {
 
   if (!isOpen) return null;
 
-  console.log("Abstraxion");
-
   return (
     <>
       <Dialog open={isOpen} onOpenChange={onClose}>

diff --git a/apps/abstraxion-settings/src/components/AbstraxionWallets/index.tsx b/apps/abstraxion-settings/src/components/AbstraxionWallets/index.tsx
@@ -245,15 +245,15 @@ 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 sm: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-leading-[38.40px] ui-tracking-tighter ui-text-3xl ui-font-light ui-text-white ui-uppercase ui-mb-3">
+            <h1 className="ui-font-akkuratLL 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>
             {errorMessage ? (
               <h2 className="ui-w-full ui-mb-4 ui-text-center ui-text-sm ui-font-normal ui-leading-tight ui-text-red-500">
                 {errorMessage}
               </h2>
             ) : (
-              <h2 className="ui-w-full ui-mb-4 ui-text-center ui-text-sm ui-font-normal ui-leading-tight ui-text-white/50">
+              <h2 className="ui-font-akkuratLL 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>
             )}
@@ -355,7 +355,7 @@ export const AbstraxionWallets = () => {
               </>
             ) : null}
             <Button
-              structure="outlined"
+              structure="destructive"
               fullWidth={true}
               onClick={handleDisconnect}
             >

diff --git a/packages/abstraxion/src/components/AbstraxionWallets/index.tsx b/packages/abstraxion/src/components/AbstraxionWallets/index.tsx
@@ -112,10 +112,10 @@ export function 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-font-akkuratLL ui-w-full ui-tracking-tighter ui-text-3xl ui-font-bold 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-font-akkuratLL ui-w-full ui-tracking-tighter ui-text-sm ui-mb-4 ui-text-neutral-500">
               Select an account to continue
             </h2>
           </div>
@@ -177,18 +177,16 @@ export function AbstraxionWallets() {
           )}
           <div className="ui-flex ui-w-full ui-flex-col ui-items-center ui-gap-4">
             {connectionType === "stytch" &&
-              user &&
-              user.webauthn_registrations.length < 1 ? <Button
-                  fullWidth
-                  onClick={registerWebAuthn}
-                  structure="outlined"
-                >
-                  Add Passkey/Biometrics
-                </Button> : null}
+            user &&
+            user.webauthn_registrations.length < 1 ? (
+              <Button fullWidth onClick={registerWebAuthn} structure="outlined">
+                Add Passkey/Biometrics
+              </Button>
+            ) : null}
             <Button
               fullWidth
               onClick={handleDisconnect}
-              structure="outlined"
+              structure="destructive"
             >
               Disconnect
             </Button>

diff --git a/packages/ui/src/dialog.tsx b/packages/ui/src/dialog.tsx
@@ -34,7 +34,7 @@ const DialogContent = React.forwardRef<
     <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
       className={cn(
-        "sm:ui-bg-black/20 sm: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%]",
+        "sm:ui-bg-black/20 sm: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-10 ui-duration-200 sm:ui-rounded-[48px] ui-left-[50%] ui-top-[50%] ui-translate-x-[-50%] ui-translate-y-[-50%]",
         className,
       )}
       ref={ref}

diff --git a/packages/ui/src/input.tsx b/packages/ui/src/input.tsx
@@ -59,6 +59,9 @@ export function Input({
         onBlur={handleBlur}
         onFocus={handleFocus}
         onKeyDown={onKeyDown}
+        style={{
+          WebkitBorderRadius: "none",
+        }}
         value={value}
       />
     </div>

diff --git a/packages/ui/src/modal.tsx b/packages/ui/src/modal.tsx
@@ -34,7 +34,7 @@ export function Modal({
   return (
     <div
       className={cn(
-        "ui-relative ui-w-full ui-max-w-[465px] ui-text-black ui-rounded ui-z-[1000] ui-bg-black/25 backdrop-blur-xl",
+        "ui-relative ui-h-full ui-w-full ui-max-w-[465px] ui-text-black ui-rounded ui-z-[1000] ui-bg-black/25 backdrop-blur-xl",
         className,
       )}
       {...props}
@@ -75,7 +75,7 @@ export function ModalSection({
   return (
     <div
       className={cn(
-        "ui-inline-flex ui-w-full ui-h-full sm:ui-p-10 ui-flex-col ui-items-start ui-justify-between ui-gap-8",
+        "ui-inline-flex ui-w-full ui-h-full ui-flex-col ui-items-start ui-justify-between ui-gap-8",
         className,
       )}
       {...props}