Skip to content

Commit

Permalink
various changes to chain rows on blockspace overview
Browse files Browse the repository at this point in the history
  • Loading branch information
@mokelgit
mokelgit committed Aug 28, 2024
1 parent 3ef6cb7 commit 8898203
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 43 deletions.
40 changes: 26 additions & 14 deletions components/layout/BlockspaceOverview/ChainRows/RowChildren.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,13 +184,6 @@ export default function RowChildren({

style.opacity = 1;

if (
selectedCategory === categoryKey &&
(isNextCategoryHovered || isLastCategoryHovered)
) {
style.opacity = 0.75;
}

return style;
},
[
Expand All @@ -212,7 +205,7 @@ export default function RowChildren({
categoryKey: string, // dataIndex: number,
) => {
const style: CSSProperties = {
backgroundColor: "transparent",
backgroundColor: "inherit",
// width: "0px",
borderRadius: "0px",
};
Expand All @@ -236,9 +229,17 @@ export default function RowChildren({
style.borderRadius = "50px";
}

if (selectedCategory === categoryKey || isCategoryHovered(categoryKey)) {
if (!selectedChain || selectedChain === chainKey) {
if (
(selectedCategory === categoryKey && !allCats) ||
isCategoryHovered(categoryKey)
) {
if (selectedCategory === categoryKey) {
style.backgroundColor = "#151A19";
} else {
style.backgroundColor = "#1F2726";
}

if (!selectedChain || selectedChain === chainKey) {
style.color = "#CDD8D3";
style.transform =
selectedCategory === categoryKey
Expand Down Expand Up @@ -275,8 +276,11 @@ export default function RowChildren({
}

style.borderRadius = "999px";
style.boxShadow = "9999px 9999px 9999px 9999px #1F2726 inset";
style.border = `2px solid ${AllChainsByKeys[chainKey].colors["dark"][0]} `;

style.border = `2px solid ${
AllChainsByKeys[chainKey].colors["dark"][0] +
(isCategoryHovered(categoryKey) ? "EE" : "FF")
} `;
if (!data[chainKey].overview[selectedTimespan][categoryKey]["data"]) {
style.minWidth = "55px";
}
Expand All @@ -286,6 +290,7 @@ export default function RowChildren({
return style;
},
[
allCats,
AllChainsByKeys,
selectedCategory,
selectedMode,
Expand Down Expand Up @@ -318,13 +323,14 @@ export default function RowChildren({
<div
className={`w-full h-full flex justify-center items-center absolute cursor-pointer z-[40] opacity-100 transition-all ${
(selectedCategory === categoryKey &&
(selectedChain === chainKey || selectedChain === null)) ||
(selectedChain === chainKey || selectedChain === null) &&
!allCats) ||
isCategoryHovered(categoryKey)
? `${
isCategoryHovered(categoryKey) &&
selectedCategory !== categoryKey
? "text-xs"
: "text-[13px] font-bold"
: "text-[13px] font-semibold"
} ${
AllChainsByKeys[chainKey].darkTextOnBackground === true
? "text-black"
Expand Down Expand Up @@ -367,6 +373,12 @@ export default function RowChildren({
if (!forceSelectedChain) setSelectedChain(null);
}
}}
onMouseEnter={() => {
hoverCategory(categoryKey);
}}
onMouseLeave={() => {
unhoverCategory(categoryKey);
}}
>
{data[chainKey].overview[selectedTimespan][categoryKey]["data"] ? (
<>
Expand Down
20 changes: 11 additions & 9 deletions components/layout/BlockspaceOverview/ChainRows/RowContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default function RowContainer() {
>
<div
className={
"relative h-[50px] border-x-[1px] border-t-[1px] rounded-t-[15px] text-forest-50 dark:text-forest-50 border-forest-400 dark:border-forest-800 bg-forest-900 dark:bg-forest-1000 mt-6 overflow-hidden"
"relative h-[38px] border-x-[1px] border-t-[1px] rounded-t-[15px] text-forest-50 dark:text-forest-50 border-forest-400 dark:border-forest-800 bg-[#1F2726] mt-6 overflow-hidden"
}
>
<div className="flex w-full h-full text-[12px]">
Expand Down Expand Up @@ -58,7 +58,7 @@ export default function RowContainer() {
unhoverCategory("all_chain");
}}
>
{forceSelectedChain && "All"}
{"All Categories"}
</button>
</div>
<div className="flex flex-1">
Expand All @@ -84,10 +84,7 @@ export default function RowContainer() {
backgroundColor:
selectedCategory === category && !allCats
? "#5A6462"
: `rgba(0, 0, 0, ${
0.06 +
(i / Object.keys(categories).length) * 0.94
})`,
: `#1F2726`,
}}
>
<button
Expand All @@ -96,11 +93,16 @@ export default function RowContainer() {
1px
] border-forest-50 dark:border-forest-800
${
selectedCategory === category
? "bg-forest-800/[0.025]"
selectedCategory === category && !allCats
? "bg-[#151A19]"
: ""
}
${isCategoryHovered(category) ? "bg-forest-800/50" : ""}`}
${
isCategoryHovered(category) &&
!(selectedCategory === category)
? "bg-[#5A6462]"
: ""
}`}
onClick={() => {
if (forceSelectedChain) {
// if no data, return
Expand Down
32 changes: 12 additions & 20 deletions components/layout/BlockspaceOverview/ChainRows/RowParent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ export default function RowParent({ chainKey, index }) {
// boxSizing: "border-box",
}}
>
<div className="flex items-center h-[31px] w-[155px] gap-x-[15px] pl-[3px] min-w-[155px] z-10 rounded-full bg-[#1F2726]">
<div className="flex items-center h-[31px] w-[155px] gap-x-[10px] pl-[3px] min-w-[155px] z-10 rounded-full bg-[#1F2726]">
<div
className="flex justify-center items-center w-[30px] h-full z-20 "
style={{
Expand Down Expand Up @@ -172,32 +172,21 @@ export default function RowParent({ chainKey, index }) {
}}
>
<div
className={`flex items-center h-[31px] pl-[3px] left-[2px] absolute w-[155px] gap-x-[15px] min-w-[155px] rounded-full bg-[#1F2726] text-[#CDD8D3] ${
className={`flex items-center h-[31px] pl-[3px] left-[2px] absolute w-[155px] gap-x-[10px] min-w-[155px] rounded-full bg-[#1F2726] text-[#CDD8D3] ${
forceSelectedChain
? isCategoryHovered("all_chain")
? isCategoryHovered("all_chain") && allCats
? `rounded-l-full py-[25px] -my-[5px] z-[2] shadow-lg`
: `rounded-l-full py-[24px] -my-[5px] z-[2] shadow-lg`
? `rounded-l-full shadow-lg z-[60] scale-x-[1.15] scale-y-[1.20] border-[2px]`
: `rounded-l-full shadow-lg z-[60] scale-x-[1.05] scale-y-[1.05] border-[2px]`
: allCats
? `rounded-l-full py-[25px] -my-[5px] z-[2] shadow-lg`
: "z-1"
? `rounded-l-full shadow-lg z-[60] scale-x-[1.15] scale-y-[1.20] border-[2px]`
: "z-[60]"
: ""
} ${
forceSelectedChain
? "hover:cursor-pointer"
: "hover:cursor-default"
} `}
style={{
backgroundColor: forceSelectedChain
? isCategoryHovered("all_chain")
? isCategoryHovered("all_chain") && allCats
? AllChainsByKeys[chainKey].colors[theme ?? "dark"][1]
: AllChainsByKeys[chainKey].colors[theme ?? "dark"][1]
: allCats
? AllChainsByKeys[chainKey].colors[theme ?? "dark"][1]
: ""
: "",
}}
onMouseEnter={() => {
// setIsCategoryHovered((prev) => ({
// ...prev,
Expand All @@ -217,6 +206,9 @@ export default function RowParent({ chainKey, index }) {
setAllCats(!allCats);
}
}}
style={{
borderColor: AllChainsByKeys[chainKey].colors["dark"][0],
}}
>
<div
className="flex justify-center items-center w-[30px] h-full"
Expand All @@ -229,8 +221,8 @@ export default function RowParent({ chainKey, index }) {
className="w-[15px] h-[15px]"
/>
</div>
<div className="flex flex-col ">
<div className="text-[14px] font-bold -mb-[2px] ">
<div className="flex flex-col pt-[1px]">
<div className="text-[14px] font-semibold ">
{(selectedMode.includes("gas_fees")
? showUsd
? "$"
Expand All @@ -248,7 +240,7 @@ export default function RowParent({ chainKey, index }) {
</div>
<Link
href={`/chains/${AllChainsByKeys[chainKey].urlKey}/`}
className="hover:underline text-[10px]"
className="hover:underline text-[10px] -mt-1"
>
{AllChainsByKeys[chainKey].label}
</Link>
Expand Down

0 comments on commit 8898203

Please sign in to comment.