Skip to content

Commit

Permalink
Random fixes (#564)
Browse files Browse the repository at this point in the history 
* feat: comprehensive UI and styling improvements

This PR includes comprehensive UI and styling improvements across multiple components, focusing on consistency and mobile responsiveness.

- Implemented new ScrollContainer component for consistent scrolling behavior
- Added dark-gradient-modal variant for improved modal backgrounds
- Standardized table styling patterns across components
- Enhanced hover states with consistent purple highlight (hover:bg-stamp-purple/10)

- Consistent use of breakpoints (mobileLg, mobileMd, tablet)
- Responsive text sizing (text-sm/text-base)
- Improved table layouts for mobile views
- Better handling of address abbreviations on different screen sizes

- Standardized row heights (h-8)
- Enhanced tooltip visibility controls
- Improved table column widths and spacing
- Added cursor feedback for interactive elements
- Removed redundant padding declarations

- Consistent class naming conventions
- Improved accessibility with aria-labels
- Better event handling for navigation
- Removed deprecated memo column from transfers

Co-Authored-By: [email protected] <[email protected]>

* fix: lint errors

* fix: lint errors

* fix: lint errors

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: [email protected] <[email protected]>
Co-authored-by: reinamora <[email protected]>
  • Loading branch information
@babalicious-io @devin-ai-integration @reinamora137
4 people authored Dec 26, 2024
1 parent 8b10e25 commit 6d0fe83
Show file tree
Hide file tree
Showing 19 changed files with 634 additions and 341 deletions.
87 changes: 47 additions & 40 deletions components/shared/HoldersGraph.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { HoldersPieChart } from "../../islands/charts/HoldersPieChart.tsx";
import { abbreviateAddress } from "$lib/utils/formatUtils.ts";
import { ScrollContainer } from "./ScrollContainer.tsx";

interface Holder {
address: string | null;
Expand All @@ -17,34 +18,48 @@ const tableHeaders = [
{ key: "percent", label: "Percent" },
];

const dataLabel =
"text-base mobileLg:text-lg font-light text-stamp-grey-darker uppercase";
const dataValueXL =
"text-3xl mobileLg:text-4xl font-black text-stamp-grey-light -mt-1";
const tableLabel =
"text-sm mobileLg:text-base font-light text-stamp-grey-darker uppercase";
const tableValue =
"text-xs mobileLg:text-sm font-normal text-stamp-grey-light w-full";
const row = "h-8 hover:bg-stamp-purple/10";

function HolderRow({ holder }: { holder: Holder }) {
const handleClick = (e: MouseEvent, address: string) => {
e.preventDefault();
globalThis.location.href = `/wallet/${address}`;
};

return (
<tr className="bg-stamp-grey-darker/10 hover:bg-stamp-grey-darker/20 transition-colors">
<td className="text-left py-2 px-4 first:rounded-l-lg last:rounded-r-lg">
<a
href={`/wallet/${holder.address}`}
data-tooltip-target={holder.address || "Unknown"}
title={holder.address || "Unknown"}
className="hover:text-stamp-purple transition-colors"
>
{holder.address
? (
<>
<span className="mobileLg:hidden">
{abbreviateAddress(holder.address, 8)}
</span>
<span className="hidden mobileLg:inline">
{holder.address}
</span>
</>
)
: "Unknown"}
</a>
<tr className={row}>
<td className="text-left">
{holder.address
? (
<a
href={`/wallet/${holder.address}`}
onClick={(e) => handleClick(e, holder.address)}
className="hover:text-stamp-purple-bright cursor-pointer"
>
<span className="mobileLg:hidden">
{abbreviateAddress(holder.address, 8)}
</span>
<span className="hidden mobileLg:inline">
{holder.address}
</span>
</a>
)
: (
"Unknown"
)}
</td>
<td className="text-center py-2 px-4 first:rounded-l-lg last:rounded-r-lg">
<td className="text-center">
{holder.amt}
</td>
<td className="text-right py-2 px-4 first:rounded-l-lg last:rounded-r-lg">
<td className="text-right">
{holder.percentage}%
</td>
</tr>
Expand All @@ -60,37 +75,29 @@ export function HoldersGraph({ holders = [] }: HoldersGraphProps) {
);
}

const dataLabelClassName =
"text-base mobileLg:text-lg font-light text-stamp-grey-darker uppercase";
const dataValueXLClassName =
"text-3xl mobileLg:text-4xl font-black text-stamp-grey-light -mt-1";
const tableLabelClassName =
"text-sm mobileLg:text-base font-light text-stamp-grey-darker uppercase";
const tableValueClassName =
"text-xs mobileLg:text-sm font-normal text-stamp-grey-light";
const totalHolders = holders.length;

return (
<div className="relative flex flex-col dark-gradient rounded-lg p-3 mobileMd:p-6">
<div className="flex flex-col dark-gradient p-3 mobileMd:p-6 relative rounded-md">
<div className="text-left tablet:text-right">
<p className={dataLabelClassName}>HOLDERS</p>
<p className={dataValueXLClassName}>{totalHolders}</p>
<p className={dataLabel}>HOLDERS</p>
<p className={dataValueXL}>{totalHolders}</p>
</div>
<div className="flex flex-col tablet:flex-row w-full gap-6">
<div className="flex justify-center tablet:justify-start">
<HoldersPieChart holders={holders} />
</div>

<div className="relative w-full max-w-full">
<div className="h-48 mobileLg:h-64 overflow-x-auto overflow-y-auto mt-3 mobileMd:mt-6 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-100">
<table className={tableValueClassName}>
<thead className={tableLabelClassName}>
<ScrollContainer class="h-48 mobileLg:h-64 mt-3 mobileMd:mt-6">
<table className={`${tableValue} table-auto`}>
<thead className={tableLabel}>
<tr>
{tableHeaders.map(({ key, label }) => (
<th
key={key}
scope="col"
className={`pb-1.5 px-4 ${
class={`${tableLabel} pb-1.5 ${
key === "address"
? "text-left"
: key === "percent"
Expand All @@ -103,13 +110,13 @@ export function HoldersGraph({ holders = [] }: HoldersGraphProps) {
))}
</tr>
</thead>
<tbody className={tableValueClassName}>
<tbody className={tableValue}>
{holders.map((holder, index) => (
<HolderRow key={index} holder={holder} />
))}
</tbody>
</table>
</div>
</ScrollContainer>
</div>
</div>
</div>
Expand Down
36 changes: 36 additions & 0 deletions components/shared/ScrollContainer.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
const scrollbarPadding = `
(function() {
const container = document.currentScript.previousElementSibling;
if (!container) return;
const checkScrollbar = () => {
const hasScrollbar = container.scrollHeight > container.clientHeight;
container.style.paddingRight = hasScrollbar
? (globalThis.innerWidth >= 568 ? '24px' : '18px')
: '0px';
};
checkScrollbar();
const resizeObserver = new ResizeObserver(checkScrollbar);
resizeObserver.observe(container);
})();
`;

interface ScrollContainerProps {
children: preact.ComponentChildren;
class?: string;
}

export function ScrollContainer(
{ children, class: className = "" }: ScrollContainerProps,
) {
return (
<>
<div class={`overflow-auto ${className}`}>
{children}
</div>
<script dangerouslySetInnerHTML={{ __html: scrollbarPadding }} />
</>
);
}
99 changes: 52 additions & 47 deletions components/stampDetails/StampDispensers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
formatNumber,
formatSatoshisToBTC,
} from "$lib/utils/formatUtils.ts";
import { ScrollContainer } from "../shared/ScrollContainer.tsx";

interface Dispenser {
source: string;
Expand Down Expand Up @@ -34,35 +35,37 @@ const tableValue =
"text-xs mobileLg:text-sm font-normal text-stamp-grey-light w-full";

function DispenserRow({ dispenser }: { dispenser: Dispenser }) {
const isClosedDispenser = dispenser.close_block_index > 0;
const rowClassName = isClosedDispenser ? "text-stamp-grey-darker" : "";
const isEmpty = dispenser.give_remaining === 0;
const rowDispensers = `${
isEmpty ? "text-stamp-grey-darker" : ""
} h-8 hover:bg-stamp-purple/10`;

return (
<tr class={rowClassName}>
<td className="text-left py-0">
<tr class={rowDispensers}>
<td className="text-left">
{formatSatoshisToBTC(dispenser.satoshirate)}
</td>
<td className="text-center py-0">
<td className="text-center">
{formatNumber(dispenser.escrow_quantity, 0)}
</td>
<td className="text-center py-0">
<td className="text-center">
{formatNumber(dispenser.give_quantity, 0)}
</td>
<td className="text-center py-0">
<td className="text-center">
{formatNumber(dispenser.give_remaining, 0)}
</td>
<td className="text-center py-0">
<td className="text-center">
<span className="tablet:hidden">
{abbreviateAddress(dispenser.source, 4)}
</span>
<span className="hidden tablet:inline">
{abbreviateAddress(dispenser.source, 8)}
</span>
</td>
<td className="text-center py-0">
<td className="text-center">
{dispenser.confirmed ? "YES" : "NO"}
</td>
<td className="text-right py-0">
<td className="text-right">
{!dispenser.close_block_index || dispenser.close_block_index <= 0
? "OPEN"
: dispenser.close_block_index}
Expand All @@ -78,44 +81,46 @@ export function StampDispensers({ dispensers }: StampDispensersProps) {
);

return (
<div className="relative max-w-full">
<div className="max-h-96 overflow-x-auto">
<table class={`${tableValue} w-full table-fixed`}>
<colgroup>
<col class="w-[16%] tablet:w-[14%]" /> {/* Price */}
<col class="w-[12%] tablet:w-[10%]" /> {/* Escrow */}
<col class="w-[12%] tablet:w-[10%]" /> {/* Give */}
<col class="w-[12%] tablet:w-[10%]" /> {/* Remain */}
<col class="w-[20%] tablet:w-[28%]" /> {/* Address column */}
<col class="w-[14%] tablet:w-[14%]" /> {/* Confirmed */}
<col class="w-[14%] tablet:w-[14%]" /> {/* Closed */}
</colgroup>
<thead>
<tr>
{tableHeaders.map(({ key, label }) => (
<th
key={key}
scope="col"
class={`${tableLabel} pb-1.5 ${
key === "price"
? "text-left"
: key === "closeBlock"
? "text-right"
: "text-center"
}`}
>
{label}
</th>
<div class="relative w-full">
<ScrollContainer class="max-h-48">
<div class="w-[660px] min-[660px]:w-full">
<table class={tableValue}>
<colgroup>
<col class="w-[16%]" /> {/* Price */}
<col class="w-[10%]" /> {/* Escrow */}
<col class="w-[10%]" /> {/* Give */}
<col class="w-[10%]" /> {/* Remain */}
<col class="w-[26%]" /> {/* Address column */}
<col class="w-[14%]" /> {/* Confirmed */}
<col class="w-[14%]" /> {/* Closed */}
</colgroup>
<thead>
<tr>
{tableHeaders.map(({ key, label }) => (
<th
key={key}
scope="col"
class={`${tableLabel} pb-1.5 ${
key === "price"
? "text-left"
: key === "closeBlock"
? "text-right"
: "text-center"
}`}
>
{label}
</th>
))}
</tr>
</thead>
<tbody>
{sortedDispensers.map((dispenser) => (
<DispenserRow key={dispenser.source} dispenser={dispenser} />
))}
</tr>
</thead>
<tbody>
{sortedDispensers.map((dispenser) => (
<DispenserRow key={dispenser.source} dispenser={dispenser} />
))}
</tbody>
</table>
</div>
</tbody>
</table>
</div>
</ScrollContainer>
</div>
);
}
Loading

0 comments on commit 6d0fe83

Please sign in to comment.