Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mobile UI Pass #138

Merged
merged 2 commits into from
Mar 26, 2024
Merged

Mobile UI Pass #138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3e27ff1
Did mobile pass
BurntNerve Mar 26, 2024
1f006dd
Added changeset
BurntNerve Mar 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/kind-beans-return.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"abstraxion-dashboard": minor
"@burnt-labs/ui": minor
---

Adapted dashboard for better mobile UI
4 changes: 1 addition & 3 deletions apps/abstraxion-dashboard/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,7 @@ export default function RootLayout({
return (
<html lang="en">
<body className={akkuratLL.variable}>
<Providers>
<div className="ui-flex">{children}</div>
</Providers>
<Providers>{children}</Providers>
<Analytics />
</body>
</html>
Expand Down
75 changes: 53 additions & 22 deletions apps/abstraxion-dashboard/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
"use client";
import { useContext } from "react";
import { useContext, useState } from "react";
import { useSearchParams } from "next/navigation";
import { AccountInfo } from "@/components/AccountInfo";
import { AbstraxionContext } from "@/components/AbstraxionContext";
import { Overview } from "@/components/Overview";
import { Sidebar } from "@/components/Sidebar";
import { Abstraxion } from "@/components/Abstraxion";
import { AbstraxionAccount, useAbstraxionAccount } from "../hooks";
import Image from "next/image";

export default function Home() {
const searchParams = useSearchParams();
Expand All @@ -16,7 +17,9 @@ export default function Home() {
const stake = Boolean(searchParams.get("stake"));
const bank = searchParams.get("bank");
const grantee = searchParams.get("grantee");
const { isOpen, setIsOpen } = useContext(AbstraxionContext);
const { isOpen, setIsOpen, isMainnet } = useContext(AbstraxionContext);

const [showMobileSiderbar, setShowMobileSiderbar] = useState(false);

return (
<>
Expand All @@ -25,30 +28,58 @@ export default function Home() {
<Abstraxion onClose={() => null} isOpen={true} />
</div>
) : (
<>
<Sidebar />
<div className="ui-h-screen ui-bg-black ui-flex-1 ui-overflow-y-auto ui-p-6">
<div className="ui-relative">
<Abstraxion onClose={() => setIsOpen(false)} isOpen={isOpen} />
{/* Tiles */}
<div className="ui-mx-auto ui-flex ui-max-w-7xl">
{/* Left Tiles */}
<div className="ui-flex-grow-2 ui-flex ui-flex-col">
<h3 className="ui-font-akkuratLL ui-mb-4 ui-text-2xl ui-text-white ui-font-bold">
Overview
</h3>
<Overview account={account as AbstraxionAccount} />
<h3 className="ui-font-akkuratLL ui-mb-4 ui-mt-8 ui-text-2xl ui-font-bold ui-text-white">
Account Info
</h3>
<AccountInfo account={account as AbstraxionAccount} />
<div className="ui-flex ui-relative ui-h-screen">
{showMobileSiderbar ? (
<div className="ui-absolute ui-h-screen ui-w-screen ui-bg-black ui-bg-opacity-20 ui-backdrop-blur-md ui-z-50">
<Sidebar onClose={() => setShowMobileSiderbar(false)} />
</div>
) : null}
<div className="ui-hidden sm:ui-flex">
<Sidebar />
</div>

<div className="ui-flex ui-flex-1 ui-flex-col">
<div className="ui-flex sm:!ui-hidden ui-justify-between ui-items-center ui-bg-black ui-p-6 ui-border-b-[1px] ui-border-[#6C6A6A]">
<div className="ui-flex ui-items-center">
<Image src="/logo.png" alt="XION Logo" width="90" height="32" />
<div
className={`ui-flex ${
isMainnet ? "ui-bg-mainnet-bg" : "ui-bg-testnet-bg"
} ui-px-2 ui-py-1 ui-ml-4 ${
isMainnet ? "ui-text-mainnet" : "ui-text-testnet"
} ui-rounded-md ui-font-akkuratLL ui-text-xs ui-tracking-widest`}
>
{isMainnet ? "MAINNET" : "TESTNET"}
</div>
</div>
<div onClick={() => setShowMobileSiderbar(true)}>
<div className="ui-bg-white ui-w-8 ui-h-[1px] ui-mb-2" />
<div className="ui-bg-white ui-w-6 ui-h-[1px] ui-ml-auto" />
</div>
</div>
<div className="ui-h-screen ui-bg-black ui-flex-1 ui-overflow-y-auto ui-p-6">
<div className="ui-relative">
<Abstraxion onClose={() => setIsOpen(false)} isOpen={isOpen} />
{/* Tiles */}
<div className="ui-mx-auto ui-flex ui-max-w-7xl">
{/* Left Tiles */}
<div className="ui-flex-grow-2 ui-flex ui-flex-col">
<h3 className="ui-font-akkuratLL ui-mb-4 ui-text-2xl ui-text-white ui-font-bold">
Overview
</h3>
<Overview account={account as AbstraxionAccount} />
<h3 className="ui-font-akkuratLL ui-mb-4 ui-mt-8 ui-text-2xl ui-font-bold ui-text-white">
Account Info
</h3>
<AccountInfo account={account as AbstraxionAccount} />
</div>
{/* Right Tiles */}
<div className="ui-hidden sm:ui-flex sm:ui-flex-1 sm:ui-flex-col"></div>
</div>
{/* Right Tiles */}
<div className="ui-flex ui-flex-1 ui-flex-col"></div>
</div>
</div>
</div>
</>
</div>
)}
</>
);
Expand Down
10 changes: 5 additions & 5 deletions apps/abstraxion-dashboard/components/Abstraxion/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,8 +87,8 @@ 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-justify-between ui-items-end">
<div className="ui-font-akkuratLL ui-text-sm ui-font-normal ui-leading-none">
<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-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
understand the
Expand All @@ -98,15 +98,15 @@ export const Abstraxion = ({ isOpen, onClose }: ModalProps) => {
</a>
<span className="ui-text-neutral-400">.</span>
</div>
<div className="ui-flex ui-gap-2 ui-items-end">
<div className="ui-flex ui-gap-2 ui-justify-center ui-items-end ui-my-6 sm:ui-my-0">
<p className="ui-font-akkuratLL ui-text-sm ui-text-zinc-100 ui-opacity-50 leading-tight">
Powered by
</p>
<div className="ui-flex ui-flex-col ui-items-start">
<div className="ui-flex ui-flex-row-reverse ui-items-center sm:ui-items-start sm:ui-flex-col">
<div
className={`ui-flex ui-justify-between ${
isMainnet ? "ui-bg-mainnet-bg" : "ui-bg-testnet-bg"
} ui-px-2 ui-py-1 ui-mb-2 ${
} ui-px-2 ui-py-1 ui-ml-2 sm:ui-ml-0 sm:ui-mb-2 ${
isMainnet ? "ui-text-mainnet" : "ui-text-testnet"
} ui-rounded-md ui-font-akkuratLL ui-text-xs ui-tracking-widest`}
>
Expand Down
2 changes: 1 addition & 1 deletion apps/abstraxion-dashboard/components/AbstraxionWallets/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@ export const AbstraxionWallets = () => {
{isGeneratingNewWallet ? (
<Loading />
) : (
<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-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">
Welcome
Expand Down
23 changes: 23 additions & 0 deletions apps/abstraxion-dashboard/components/Icons/Close.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
export const CloseIcon = ({
color = "black",
onClick,
}: {
color?: string;
onClick: VoidFunction;
}) => (
<svg
onClick={onClick}
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.941 0L6 4.941L1.059 0L0 1.05975L4.941 6L0 10.941L1.059 12L6 7.059L10.941 12L12 10.941L7.059 6L12 1.05975L10.941 0Z"
fill={color}
/>
</svg>
);
1 change: 1 addition & 0 deletions apps/abstraxion-dashboard/components/Icons/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,4 @@ export { CopyIcon } from "./Copy";
export { AvatarIcon } from "./Avatar";
export { ChevronDownIcon } from "./ChevronDown";
export { WalletIcon } from "./Wallet";
export { CloseIcon } from "./Close";
30 changes: 19 additions & 11 deletions apps/abstraxion-dashboard/components/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,15 @@ import { usePathname } from "next/navigation";
import Image from "next/image";
import { useContext } from "react";
import { AbstraxionContext, AbstraxionContextProps } from "./AbstraxionContext";
import { WalletIcon } from "./Icons";
import { CloseIcon, WalletIcon } from "./Icons";

const NAV_OPTIONS = [{ text: "home", path: "/" }];

export function Sidebar() {
interface SidebarProps {
onClose?: VoidFunction;
}

export function Sidebar({ onClose }: SidebarProps) {
const pathname = usePathname();
const { isMainnet, setIsOpen } = useContext(
AbstraxionContext,
Expand Down Expand Up @@ -57,15 +61,19 @@ export function Sidebar() {
<div className="ui-h-screen ui-bg-primary ui-border-[#6C6A6A] ui-border-r-[1px] ui-text-white ui-flex ui-flex-col ui-w-64">
<div className="ui-flex ui-items-center ui-justify-between ui-px-8 ui-pt-8">
<Image src="/logo.png" alt="XION Logo" width="90" height="32" />
<div
className={`ui-flex ${
isMainnet ? "ui-bg-mainnet-bg" : "ui-bg-testnet-bg"
} ui-px-2 ui-py-1 ui-ml-6 ${
isMainnet ? "ui-text-mainnet" : "ui-text-testnet"
} ui-rounded-md ui-font-akkuratLL ui-text-xs ui-tracking-widest`}
>
{isMainnet ? "MAINNET" : "TESTNET"}
</div>
{!onClose ? (
<div
className={`ui-flex ${
isMainnet ? "ui-bg-mainnet-bg" : "ui-bg-testnet-bg"
} ui-px-2 ui-py-1 ui-ml-6 ${
isMainnet ? "ui-text-mainnet" : "ui-text-testnet"
} ui-rounded-md ui-font-akkuratLL ui-text-xs ui-tracking-widest`}
>
{isMainnet ? "MAINNET" : "TESTNET"}
</div>
) : (
<CloseIcon color="#6C6A6A" onClick={onClose} />
)}
</div>

<div className="ui-flex ui-justify-center ui-flex-col ui-flex-grow ">
Expand Down
2 changes: 1 addition & 1 deletion apps/abstraxion-dashboard/components/WalletReceive/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export function WalletReceive({
className="ui-text-white"
onPointerDownOutside={(e: any) => e.preventDefault()}
>
<DialogClose className="ui-absolute ui-top-5 ui-right-10">
<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">
Expand Down
5 changes: 4 additions & 1 deletion apps/abstraxion-dashboard/components/WalletSend/WalletSendForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,10 @@ export function WalletSendForm({
</div>
<div className="ui-flex ui-flex-col">
<label className="ui-text-xs ui-text-white/50">From:</label>
<p className="ui-text-xs ui-w-full ui-text-center ui-text-xs ui-font-akkuratLL ui-text-white">
<p
style={{ wordBreak: "break-word" }}
className="ui-text-xs ui-w-full ui-text-center ui-text-xs ui-font-akkuratLL ui-text-white"
>
{account.id}
</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
"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%]",
"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%]",
className,
)}
ref={ref}
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export function ModalSection({
return (
<div
className={cn(
"ui-inline-flex ui-w-full ui-h-full ui-p-10 ui-flex-col ui-items-start ui-justify-between ui-gap-8",
"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",
className,
)}
{...props}
Expand Down
Loading