Skip to content

Commit

Permalink
Merge pull request #186 from penumbra-zone/mobile-tweaks
Browse files Browse the repository at this point in the history
updated remaining mobile ui stylings for redesign
  • Loading branch information
ejmg authored Aug 30, 2024
2 parents a7a2109 + 9851ba9 commit 34f1171
Show file tree
Hide file tree
Showing 23 changed files with 64 additions and 56 deletions.
6 changes: 3 additions & 3 deletions apps/web/src/app/(index)/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const LandingCard: FC<CardProps> = ({ heading, children, className, buttonText,
</CardHeader>
<CardContent className="flex flex-col gap-1 items-center">
{children}
<Button className="w-full" variant={ disabled ? "outline" : "default"} disabled={disabled} asChild={!disabled}>
<Button className="w-full" variant={ disabled ? "ghost" : "outline"} disabled={disabled} asChild={!disabled}>
<Link href={buttonLink}>{buttonText}</Link>
</Button>
</CardContent>
Expand Down Expand Up @@ -80,7 +80,7 @@ export default function Home() {
heading="Transactions"
buttonLink="/transactions"
buttonText="Explore Transactions"
className="basis-[45%] w-full max-w-screen-sm"
className="sm:basis-[45%] w-full max-w-screen-sm"
children={
<HydrationBoundary state={dehydrate(queryClient)}>
<PreviewTable
Expand All @@ -97,7 +97,7 @@ export default function Home() {
heading="Blocks"
buttonLink="/blocks"
buttonText="Explore Blocks"
className="basis-[50%] w-full max-w-screen-sm"
className="sm:basis-[50%] w-full max-w-screen-sm"
children={
<HydrationBoundary state={dehydrate(queryClient)}>
<PreviewTable
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/app/(main)/block/[ht]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const Page : FC<PageProps> = ({ params }) => {
});

return (
<div className="flex flex-col gap-8 items-center">
<div className="flex flex-col gap-8 px-6 items-center">
<div className="sm:w-11/12 w-full">
<h1 className="text-lg font-medium">Block Summary</h1>
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/app/(main)/blocks/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const Page = () => {
});

return (
<div className="flex flex-col gap-8 items-center">
<div className="flex flex-col gap-8 px-6 items-center">
<div className="sm:w-11/12 w-full">
<h1 className="text-lg font-medium">Recent Blocks</h1>
</div>
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/app/(main)/ibc/channel/[id]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,13 @@ const Page : FC<PageProps> = ({ params }) => {
});

return (
<div className="flex flex-col gap-8 items-center ">
<div className="flex flex-col gap-8 px-6 pb-8 items-center ">
<div className="sm:w-11/12 w-full">
<h1 className="text-lg font-medium">IBC Channel</h1>
</div>
<HydrationBoundary state={dehydrate(queryClient)}>
{/* TODO: don't forget to remove this extra pb-8 once Channel is cleaned up. */}
<div className="sm:w-11/12 w-full pb-8">
<div className="sm:w-11/12 w-full">
<Channel {...{endpoint, queryName, channelId}}/>
</div>
</HydrationBoundary>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/app/(main)/ibc/channels/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const Page = () => {
});

return (
<div className="flex flex-col gap-8 items-center">
<div className="flex flex-col gap-8 px-6 items-center">
<div className="sm:w-11/12 w-full">
<h1 className="text-lg font-medium">IBC Channels</h1>
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/app/(main)/ibc/client/[id]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const Page : FC<PageProps> = ({ params }) => {
});

return (
<div className="flex flex-col gap-8 items-center ">
<div className="flex flex-col gap-8 px-6 items-center ">
<div className="sm:w-11/12 w-full">
<h1 className="text-lg font-medium">IBC Client</h1>
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/app/(main)/ibc/clients/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const Page = () => {
});

return (
<div className="flex flex-col gap-8 items-center">
<div className="flex flex-col gap-8 px-6 items-center">
<div className="sm:w-11/12 w-full">
<h1 className="text-lg font-medium">IBC Clients</h1>
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/app/(main)/ibc/connection/[id]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const Page : FC<PageProps> = ({ params }) => {
});

return (
<div className="flex flex-col gap-8 items-center">
<div className="flex flex-col gap-8 px-6 items-center">
<div className="sm:w-11/12 w-full">
<h1 className="text-lg font-medium">IBC Connection</h1>
</div>
Expand Down
6 changes: 4 additions & 2 deletions apps/web/src/app/(main)/ibc/connections/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,10 @@ const Page = () => {
});

return (
<div className="bg-primary/60 flex flex-col gap-5 items-center pt-5">
<h1 className="sm:text-2xl font-bold">IBC Channels</h1>
<div className="flex flex-col gap-8 px-6 items-center">
<div className="flex w-full justify-start items-center">
<h1 className="text-lg font-medium">IBC Connections</h1>
</div>
<HydrationBoundary state={dehydrate(queryClient)}>
<ConnectionsTable
className="sm:w-11/12 w-full"
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/app/(main)/search/[query]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ const Page : FC<PageProps> = ({ params }) => {
});

return (
<div className="bg-primary/60 flex flex-col gap-5 sm:p-8" key={query}>
<h1 className="sm:text-2xl font-bold">Search results</h1>
<div className="flex flex-col px-6 pb-8 gap-5 sm:p-8" key={query}>
<h1 className="text-lg font-medium">Search results</h1>
<HydrationBoundary state={dehydrate(queryClient)}>
<SearchResultsTable className="w-full" query={query}/>
</HydrationBoundary>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/app/(main)/transaction/[hash]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const Page : FC<PageProps> = ({ params }) => {
});

return (
<div className="flex flex-col gap-8 items-center ">
<div className="flex flex-col gap-8 px-6 items-center ">
<div className="sm:w-11/12 w-full">
<h1 className="text-lg font-medium">Transaction Summary</h1>
</div>
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/app/(main)/transactions/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ const Page = () => {
});

return (
<div className="flex flex-col gap-8 items-center">
<div className="sm:w-11/12 w-full">
<div className="flex flex-col gap-8 px-6 items-center">
<div className="flex flex-col sm:w-11/12 w-full">
<h1 className="text-lg font-medium">Recent Transactions</h1>
</div>
<HydrationBoundary state={dehydrate(queryClient)}>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/ABCIEventsTable/columns.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const makeColumns = ( header: string ) => {
const columns : Array<ColumnDef<ABCIEventsColumns>> = [
{
id: "type",
header: () => <div className="break-all text-sm text-foreground">{header}</div>,
header: () => <div className="text-sm text-foreground overflow-scroll">{header}</div>,
columns: [
{
accessorKey: "key",
Expand Down
6 changes: 3 additions & 3 deletions apps/web/src/components/Block/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,15 @@ export const Block : FC<BlockProps> = ({ endpoint, queryName, ht }) => {
return (
<div className="flex flex-wrap justify-between sm:gap-y-10 gap-y-5 w-full">
<div className="flex flex-wrap justify-start w-full">
<p className="sm:w-1/6 w-full font-semibold">Block Height</p>
<p className="sm:w-1/6 w-full font-medium">Block Height</p>
<pre className="sm:w-0 w-full">{ht}</pre>
</div>
<div className="flex flex-wrap justify-start w-full">
<p className="w-1/6 font-semibold">Timestamp</p>
<p className="w-1/6 font-medium">Timestamp</p>
<pre className="sm:w-0 w-full">{created_at}</pre>
</div>
<div className="flex justify-start flex-wrap w-full">
<p className="sm:w-1/6 w-full font-bold">Transactions</p>
<p className="sm:w-1/6 w-full font-medium">Transactions</p>
{/* eslint-disable-next-line @typescript-eslint/naming-convention */}
{tx_hashes.length !== 0 ? (
tx_hashes.map((hash, i) => (
Expand Down
9 changes: 5 additions & 4 deletions apps/web/src/components/Embedded/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,19 +41,20 @@ export const TwitterEmbed: FC<{ className?: string }> = ({ className }) => {
<Card className={cn("bg-card/60", className)}>
<CardHeader className="flex justify-center">
<CardTitle className="text-lg font-medium">
<span className="font-mono font-bold">@penumbrazone</span> on Twitter
Recent Updates
</CardTitle>
</CardHeader>
<CardContent className="p-2 h-[320px]">
<CardContent className="h-[320px]">
<div className="grid grid-cols-1 grid-rows-1">
<div className="col-span-1 row-span-1 col-start-1 row-start-1">
<Link
id="twitter-tl"
className={cn("twitter-timeline")}
data-tweet-limit={5}
data-limit="5"
// data-limit="5"
data-height="300"
data-chrome="noheader"
// data-chrome="noheader"
// data-chrome="noborders"
href="https://twitter.com/penumbrazone?ref_src=twsrc%5Etfw"
/>
</div>
Expand Down
10 changes: 6 additions & 4 deletions apps/web/src/components/Navbar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -71,13 +71,15 @@ const Breadcrumbs : FC<{ pathName: string }>= ({ pathName }) => {
const isIbc = segments.length >= 2 ? isIbcPath(segments) : false;
const isBlockOrTx = segments.length === 2 && segments[0] === "block" || segments[0] === "transaction";
const isTable = isTablePath(segments);
const isSearch = segments.length === 2 && segments[0] === "search";

// Handle case of /{transactions|blocks} and /ibc/{clients|channels|connections}
if (isTable) {
console.log("building breadcrumb...", isSearch);
// Handle case of /{transactions|blocks}, /ibc/{clients|channels|connections}, /search
if (isTable || isSearch) {
// /{transactions|blocks|clients|channels|connections}
const parent = isIbc ? segments[1] : segments[0];
const _href = isIbc ? `/ibc/${parent}` : `/${parent}`;
const linkText = isIbc ? `IBC ${capitalize(parent)}` : `Recent ${capitalize(parent)}`;
const linkText = isIbc ? `IBC ${capitalize(parent)}` : isSearch ? `${capitalize(parent)}` : `Recent ${capitalize(parent)}`;

return (
<Breadcrumb>
Expand Down Expand Up @@ -105,7 +107,7 @@ const Breadcrumbs : FC<{ pathName: string }>= ({ pathName }) => {
const tableRef = isIbc ? `/ibc/${parentTable}` : `/${parentTable}`;
const _href = isIbc ? `/ibc/${parent}/${slug}` : `/${parent}/${slug}`;
// Same prefixing but for the "current" breadcrumb
const linkText = isIbc ? `IBC ${capitalize(parent)} Summary` : `${capitalize(parent)} Summary`;
const linkText = `${capitalize(parent)} Summary`;

return (
<Breadcrumb>
Expand Down
8 changes: 4 additions & 4 deletions apps/web/src/components/Transaction/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,27 +23,27 @@ export const Transaction : FC<TransactionProps> = ({ endpoint, queryName, hash }
return (
<div className="flex flex-wrap justify-between sm:gap-y-10 gap-y-5 w-full">
<div className="flex flex-wrap justify-start w-full">
<p className="sm:w-1/6 w-full sm:text-lg font-semibold">Hash</p>
<p className="sm:w-1/6 w-full sm:text-lg font-medium">Hash</p>
{/* TODO: this width on smaller screens is pretty arbitrary and there's a few instances of this now through the codebase. revisit and implement as consistent tailwind variables. */}
{/* TODO: also at the point where JS should be used for copying to clipboard which mitigates most text overflow issues and opens up stylings for improvement. */}
<pre className="sm:w-5/6 w-[300px] sm:text-lg break-all whitespace-pre-wrap">
{txResult.tx_hash}
</pre>
</div>
<div className="flex flex-wrap justify-start w-full">
<p className="sm:w-1/6 w-full sm:text-lg font-semibold">Block Height</p>
<p className="sm:w-1/6 w-full sm:text-lg font-medium">Block Height</p>
<Link href={`/block/${txResult.height}`}>
<pre className="underline sm:w-0 sm:text-lg w-full">
{txResult.height.toString()}
</pre>
</Link>
</div>
<div className="flex flex-wrap justify-start w-full">
<p className="sm:w-1/6 w-full sm:text-lg font-semibold">Timestamp</p>
<p className="sm:w-1/6 w-full sm:text-lg font-medium">Timestamp</p>
<pre className="sm:w-0 w-full sm:text-lg">{txResult.created_at}</pre>
</div>
<div className="flex flex-wrap justify-start w-full">
<p className="sm:w-1/6 sm:shrink-0 w-full sm:text-lg font-semibold">
<p className="sm:w-1/6 sm:shrink-0 w-full sm:text-lg font-medium">
Transaction Data
</p>
<pre className="sm:w-5/6 w-full break-all whitespace-pre-wrap text-xs p-1 bg-slate-100">
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/TransactionView/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export const TransactionView : FC<TransactionViewProps> = ({ tx }) => {
const txView = makeTransactionView(Transaction.fromJson(tx, { typeRegistry: ibcRegistry }));
return (
<FlexRow className="flex-wrap justify-start w-full">
<p className="font-semibold sm:text-lg">Transaction View</p>
<p className="font-medium sm:text-lg">Transaction View</p>
{txView.bodyView ? <TransactionBodyView bodyView={txView.bodyView}/> : "None"}
{txView.bindingSig ? <BindingSig label="Binding Signature" value={txView.bindingSig.inner}/> : null}
{txView.anchor ? <MerkleRoot label="Anchor" value={txView.anchor.inner}/> : null}
Expand Down
18 changes: 9 additions & 9 deletions apps/web/src/components/ibc/Channel/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,38 +22,38 @@ export const Channel : FC<ChannelProps> = ({ endpoint, queryName, channelId }) =
});

return (
<div className="flex flex-col justify-start gap-y-5 w-full">
<div className="flex flex-col justify-start gap-5 w-full">
<div className="flex flex-wrap justify-start w-full">
<p className="sm:w-1/6 w-full font-semibold">Channel ID</p>
<p className="sm:w-1/6 w-full font-medium">Channel ID</p>
<pre className="sm:w-0 w-full">{channelId}</pre>
</div>
<div className="flex flex-wrap justify-start w-full">
<p className="sm:w-1/6 w-full font-semibold">Client ID</p>
<p className="sm:w-1/6 w-full font-medium">Client ID</p>
<Link
href={`/ibc/client/${data.clientId}`}
className="underline sm:w-0 w-full"
className="sm:w-0 w-full text-link"
>
<pre>{data.clientId}</pre>
</Link>
</div>
<div className="flex flex-wrap justify-start w-full">
<p className="sm:w-1/6 w-full font-semibold">Counterparty Height</p>
<p className="sm:w-1/6 w-full font-medium">Counterparty Height</p>
<pre className="sm:w-0 w-full">{data.consensusHeight}</pre>
</div>
<div className="flex flex-wrap justify-start w-full">
<p className="sm:w-1/6 w-full font-semibold">Connection IDs</p>
<p className="sm:w-1/6 w-full font-medium">Connection IDs</p>
<Link
href={`/ibc/connection/${data.connectionId}`}
className="underline sm:w-0 w-full"
className="sm:w-0 w-full text-link"
>
<pre>{data.connectionId}</pre>
</Link>
</div>
<div className="flex flex-wrap justify-start w-full">
<p className="sm:w-1/6 w-full font-semibold">Recent Transactions</p>
<p className="sm:w-1/6 w-full font-medium">Recent Transactions</p>
<div className="sm:w-5/6 w-full">
{data.recentTxs.map((hash, i) => (
<Link href={`/transaction/${hash}`} key={i} className="underline">
<Link href={`/transaction/${hash}`} key={i} className="text-link">
<pre className="sm:font-base font-sm overflow-hidden overflow-ellipsis">
{hash}
</pre>
Expand Down
12 changes: 6 additions & 6 deletions apps/web/src/components/ibc/Client/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,21 +34,21 @@ export const Client : FC<ClientProps> = ({ endpoint, queryName, clientId }) => {
// const header = events.find(({ key }) => key === "header")?.value ?? "NONE";

return (
<div className="flex flex-col justify-start gap-y-5 w-full">
<div className="flex flex-col justify-start gap-5 w-full">
<div className="flex flex-wrap justify-start w-full">
<p className="sm:w-1/6 w-full font-semibold">Client ID</p>
<p className="sm:w-1/6 w-full font-medium">Client ID</p>
<pre className="sm:w-0 w-full">{client_id}</pre>
</div>
<div className="flex flex-wrap justify-start w-full">
<p className="sm:w-1/6 w-full font-semibold">Client Type</p>
<p className="sm:w-1/6 w-full font-medium">Client Type</p>
<pre className="sm:w-0 w-full">{clientType}</pre>
</div>
<div className="flex flex-wrap justify-start w-full">
<p className="sm:w-1/6 w-full font-semibold">Counterparty Height</p>
<p className="sm:w-1/6 w-full font-medium">Counterparty Height</p>
<pre className="sm:w-0 w-full">{consensusHeight}</pre>
</div>
<div className="flex flex-wrap justify-start w-full">
<p className="sm:w-1/6 w-full font-semibold">Connection IDs</p>
<p className="sm:w-1/6 w-full font-medium">Connection IDs</p>
<Link
href={`/ibc/connection/${connectionId}`}
className="underline sm:w-0 w-full"
Expand All @@ -57,7 +57,7 @@ export const Client : FC<ClientProps> = ({ endpoint, queryName, clientId }) => {
</Link>
</div>
<div className="flex flex-wrap justify-start w-full">
<p className="sm:w-1/6 w-full font-semibold">Channel IDs</p>
<p className="sm:w-1/6 w-full font-medium">Channel IDs</p>
<div className="">
{channels.map((channelId, i) => (
<Link
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/ibc/connections/columns.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export type ConnectionsColumns = Record<number, {
export const columns : Array<ColumnDef<ConnectionsColumns>> = [
{
accessorKey: "connection_id",
header: () => <div className="text-sm">Channel ID</div>,
header: () => <div className="text-sm">Connection ID</div>,
cell: ({ getValue }) => {
const connectionId = getValue() as string;
return <Link href={`/ibc/connection/${connectionId}`} className="text-link text-sm"><pre>{connectionId}</pre></Link>;
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/components/ui/button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const buttonVariants = cva(
"border inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
default: "bg-primary text-primary-foreground hover:bg-accent/90",
destructive:
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline:
Expand Down
Loading

0 comments on commit 34f1171

Please sign in to comment.