Merge pull request #186 from penumbra-zone/mobile-tweaks

updated remaining mobile ui stylings for redesign
penumbra-zone · Aug 30, 2024 · 34f1171 · 34f1171
2 parents a7a2109 + 9851ba9
commit 34f1171
Show file tree

Hide file tree

Showing 23 changed files with 64 additions and 56 deletions.
diff --git a/apps/web/src/app/(index)/page.tsx b/apps/web/src/app/(index)/page.tsx
@@ -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>
@@ -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
@@ -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

diff --git a/apps/web/src/app/(main)/block/[ht]/page.tsx b/apps/web/src/app/(main)/block/[ht]/page.tsx
@@ -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>

diff --git a/apps/web/src/app/(main)/blocks/page.tsx b/apps/web/src/app/(main)/blocks/page.tsx
@@ -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>

diff --git a/apps/web/src/app/(main)/ibc/channel/[id]/page.tsx b/apps/web/src/app/(main)/ibc/channel/[id]/page.tsx
@@ -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>

diff --git a/apps/web/src/app/(main)/ibc/channels/page.tsx b/apps/web/src/app/(main)/ibc/channels/page.tsx
@@ -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>

diff --git a/apps/web/src/app/(main)/ibc/client/[id]/page.tsx b/apps/web/src/app/(main)/ibc/client/[id]/page.tsx
@@ -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>

diff --git a/apps/web/src/app/(main)/ibc/clients/page.tsx b/apps/web/src/app/(main)/ibc/clients/page.tsx
@@ -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>

diff --git a/apps/web/src/app/(main)/ibc/connection/[id]/page.tsx b/apps/web/src/app/(main)/ibc/connection/[id]/page.tsx
@@ -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>

diff --git a/apps/web/src/app/(main)/ibc/connections/page.tsx b/apps/web/src/app/(main)/ibc/connections/page.tsx
@@ -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"

diff --git a/apps/web/src/app/(main)/search/[query]/page.tsx b/apps/web/src/app/(main)/search/[query]/page.tsx
@@ -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>

diff --git a/apps/web/src/app/(main)/transaction/[hash]/page.tsx b/apps/web/src/app/(main)/transaction/[hash]/page.tsx
@@ -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>

diff --git a/apps/web/src/app/(main)/transactions/page.tsx b/apps/web/src/app/(main)/transactions/page.tsx
@@ -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)}>

diff --git a/apps/web/src/components/ABCIEventsTable/columns.tsx b/apps/web/src/components/ABCIEventsTable/columns.tsx
@@ -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",

diff --git a/apps/web/src/components/Block/index.tsx b/apps/web/src/components/Block/index.tsx
@@ -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) => (

diff --git a/apps/web/src/components/Embedded/index.tsx b/apps/web/src/components/Embedded/index.tsx
@@ -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>

diff --git a/apps/web/src/components/Navbar/index.tsx b/apps/web/src/components/Navbar/index.tsx
@@ -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>
@@ -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>

diff --git a/apps/web/src/components/Transaction/index.tsx b/apps/web/src/components/Transaction/index.tsx
@@ -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">

diff --git a/apps/web/src/components/TransactionView/index.tsx b/apps/web/src/components/TransactionView/index.tsx
@@ -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}

diff --git a/apps/web/src/components/ibc/Channel/index.tsx b/apps/web/src/components/ibc/Channel/index.tsx
@@ -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>

diff --git a/apps/web/src/components/ibc/Client/index.tsx b/apps/web/src/components/ibc/Client/index.tsx
@@ -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"
@@ -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

diff --git a/apps/web/src/components/ibc/connections/columns.tsx b/apps/web/src/components/ibc/connections/columns.tsx
@@ -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>;

diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
@@ -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: