Skip to content

Commit

Permalink
[ECO-1920] Fix div child of td hydration error warning (#138)
Browse files Browse the repository at this point in the history 
Co-authored-by: matt <[email protected]>
  • Loading branch information
@xbtmatt
xbtmatt and matt authored Jul 1, 2024
1 parent 03e00cf commit 362d2c5
Show file tree
Hide file tree
Showing 4 changed files with 190 additions and 187 deletions.
19 changes: 4 additions & 15 deletions ...ript/frontend/src/components/pages/emojicoin/components/trade-history/table-row/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
"use client";

import React, { type PropsWithChildren } from "react";
import { useTooltip } from "hooks";
import { type TableRowDesktopProps } from "./types";
import { toCoinDecimalString } from "lib/utils/decimals";
import { toNominalPrice } from "@sdk/utils/nominal-price";
Expand Down Expand Up @@ -36,16 +35,9 @@ const TableRowStyles =
const TableCellStyles = "h-[33px]";

const TableRow = ({ item, showBorder }: TableRowDesktopProps) => {
const { targetRef, tooltip } = useTooltip(
<div className="text-black pixel-heading-4 uppercase">{item.emoji}</div>,
{
placement: "top",
}
);

return (
<tr className={TableRowStyles} id="grid-hover">
<div
<td
className={
"absolute w-full h-full bg-transparent group-hover:inline-flex border-r-[1px] " +
"border-b-[1px] border-solid group-hover:border-[1px] group-hover:border-ec-blue z-[1] border-dark-gray" +
Expand All @@ -56,18 +48,15 @@ const TableRow = ({ item, showBorder }: TableRowDesktopProps) => {
className={`min-w-[60px] xl:min-w-[71px] xl:ml-[0.5ch] xl:mr-[-0.5ch] ${TableCellStyles}`}
>
<div className="flex h-full">
<span className="text-light-gray m-auto" ref={targetRef}>
{item.rankIcon}
</span>
{tooltip}
<span className="text-light-gray m-auto">{item.rankIcon}</span>
</div>
</td>
<td className={`w-[5%] md:w-[4.7%] ${TableCellStyles}`}></td>
<TableRowTextItem className={`w-[22%] md:w-[18%] ${TableCellStyles}`}>
<div className="ellipses">{toCoinDecimalString(item.apt, 3)}</div>
<span className="ellipses">{toCoinDecimalString(item.apt, 3)}</span>
</TableRowTextItem>
<TableRowTextItem className={`w-[22%] md:w-[18%] ${TableCellStyles}`}>
<div className="ellipses">{toCoinDecimalString(item.emoji, 3)}</div>
<span className="ellipses">{toCoinDecimalString(item.emoji, 3)}</span>
</TableRowTextItem>
<td className={`w-[0%] md:w-[0.3%] ${TableCellStyles}`}></td>
<TableRowTextItem
Expand Down
92 changes: 43 additions & 49 deletions src/typescript/frontend/src/components/pages/home/components/main-card/MainCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,7 @@ import React, { useEffect, useState } from "react";
import { translationFunction } from "context/language-context";
import useTooltip from "hooks/use-tooltip";
import { Column, Flex, FlexGap } from "@containers";
import {
StyledEmoji,
StyledPixelHeadingText,
StyledDisplayFontText,
SubheaderText,
StyledImage,
} from "./styled";
import { StyledImage } from "./styled";
import { toCoinDecimalString } from "lib/utils/decimals";
import AptosIconBlack from "components/svg/icons/AptosBlack";
import "./module.css";
Expand Down Expand Up @@ -111,65 +105,65 @@ const MainCard = ({ featured, totalNumberOfMarkets }: MainCardProps) => {
alt="Planet"
/>

<StyledEmoji>{featured?.symbol ?? "🖤"}</StyledEmoji>
<div id="styled-emoji">{featured?.symbol ?? "🖤"}</div>
</Link>

<Column maxWidth="100%" ellipsis>
<StyledPixelHeadingText textScale="pixelHeading1" color="darkGray">
{"01"}
</StyledPixelHeadingText>
<StyledDisplayFontText ref={targetRefEmojiName} ellipsis>
<div className="pixel-heading-1 text-dark-gray pixel-heading-text">01</div>
<div className="display-font-text ellipses font-forma-bold" ref={targetRefEmojiName}>
{(featured ? emojisToName(featured.emojis) : "BLACK HEART").toUpperCase()}
</StyledDisplayFontText>
</div>

<FlexGap gap="8px">
{typeof featured !== "undefined" && (
<div className="flex flex-row items-center justify-center">
<SubheaderText color="darkGray" textTransform="uppercase">
{t("Mkt. Cap:")}&nbsp;
</SubheaderText>
<SubheaderText ref={marketCapRef}>
{toCoinDecimalString(marketCap, 2)}
</SubheaderText>
<SubheaderText>
&nbsp;
<AptosIconBlack className={"icon-inline m-auto"} />
</SubheaderText>
</div>
<>
<div className="font-forma text-dark-gray market-data-text uppercase">
{t("Mkt. Cap:")}
</div>
<div className="font-forma text-white market-data-text uppercase">
<div className="flex flex-row items-center justify-center">
<div ref={marketCapRef}>{toCoinDecimalString(marketCap, 2)}</div>
&nbsp;
<AptosIconBlack className={"icon-inline mb-[0.3ch]"} />
</div>
</div>
</>
)}
</FlexGap>

<FlexGap gap="8px">
{typeof featured !== "undefined" && (
<div className="flex flex-row items-center justify-center">
<SubheaderText color="darkGray" textTransform="uppercase">
{t("24 hour vol:")}&nbsp;
</SubheaderText>
<SubheaderText ref={dailyVolumeRef}>
{toCoinDecimalString(roughDailyVolume, 2)}
</SubheaderText>
<SubheaderText>
&nbsp;
<AptosIconBlack className={"icon-inline m-auto"} />
</SubheaderText>
</div>
<>
<div className="text-dark-gray uppercase">
<div className="font-forma text-dark-gray market-data-text uppercase">
{t("24 hour vol:")}
</div>
</div>
<div className="font-forma text-white market-data-text uppercase">
<div className="flex flex-row items-center justify-center">
<div ref={dailyVolumeRef}>{toCoinDecimalString(roughDailyVolume, 2)}</div>
&nbsp;
<AptosIconBlack className={"icon-inline mb-[0.3ch]"} />
</div>
</div>
</>
)}
</FlexGap>

<FlexGap gap="8px">
{typeof featured !== "undefined" && (
<div className="flex flex-row items-center justify-center">
<SubheaderText color="darkGray" textTransform="uppercase">
{t("All-time vol:")}&nbsp;
</SubheaderText>
<SubheaderText ref={allTimeVolumeRef}>
{toCoinDecimalString(roughAllTimeVolume, 2)}
</SubheaderText>
<SubheaderText>
&nbsp;
<AptosIconBlack className={"icon-inline m-auto"} />
</SubheaderText>
</div>
<>
<div className="font-forma text-dark-gray market-data-text uppercase">
{t("All-time vol:")}
</div>
<div className="font-forma text-white market-data-text uppercase">
<div className="flex flex-row items-center justify-center">
<div ref={allTimeVolumeRef}>{toCoinDecimalString(roughAllTimeVolume, 2)}</div>
&nbsp;
<AptosIconBlack className={"icon-inline mb-[0.3ch]"} />
</div>
</div>
</>
)}
</FlexGap>
</Column>
Expand Down
143 changes: 143 additions & 0 deletions src/typescript/frontend/src/components/pages/home/components/main-card/module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,147 @@

#hero-image {
animation: image-pulse 4s infinite ease-in-out;
width: 289px;

@media screen and (min-width: 578px) {
width: 417px;
}

@media screen and (min-width: 1096px) {
width: 545px;
}

@media screen and (min-width: 1355px) {
width: 675px;
}

@media screen and (min-width: 1614px) {
width: 803px;
}

@media screen and (min-width: 1873px) {
width: 932px;
}
}

div#styled-emoji {
position: absolute;
left: 61%;
transform: translateX(-50%);
font-size: 51px;
line-height: unset;
padding-top: 8px;

@media screen and (min-width: 578px) {
font-size: 74px;
padding-top: 14px;
}

@media screen and (min-width: 1096px) {
font-size: 97px;
padding-top: 18px;
}

@media screen and (min-width: 1355px) {
font-size: 120px;
padding-top: 32px;
}

@media screen and (min-width: 1614px) {
font-size: 143px;
}

@media screen and (min-width: 1873px) {
font-size: 166px;
}
}

div.pixel-heading-text {
font-size: 26px;

@media screen and (min-width: 578px) {
font-size: 37px;
}

@media screen and (min-width: 1096px) {
font-size: 49px;
}

@media screen and (min-width: 1355px) {
font-size: 60px;
}

@media screen and (min-width: 1614px) {
font-size: 72px;
}

@media screen and (min-width: 1873px) {
font-size: 83px;
}
}

div.market-data-text {
font-size: 11px;
line-height: unset;
margin-bottom: 7px;

@media screen and (min-width: 578px) {
font-size: 16px;
margin-bottom: 9px;
}

@media screen and (min-width: 1096px) {
font-size: 21px;
margin-bottom: 9px;
}

@media screen and (min-width: 1355px) {
font-size: 26px;
margin-bottom: 14px;
}

@media screen and (min-width: 1614px) {
font-size: 31px;
margin-bottom: 10px;
}

@media screen and (min-width: 1873px) {
font-size: 37px;
margin-bottom: 8px;
}
}

div.display-font-text {
font-size: 38px;
line-height: unset;
margin-top: -12px;
margin-bottom: 7px;
color: white;

@media screen and (min-width: 578px) {
font-size: 55px;
margin-bottom: 5px;
margin-top: -4px;
}

@media screen and (min-width: 1096px) {
font-size: 72px;
margin-bottom: 16px;
}

@media screen and (min-width: 1355px) {
font-size: 89px;
margin-top: 12px;
margin-bottom: 24px;
}

@media screen and (min-width: 1614px) {
font-size: 106px;
margin-bottom: 10px;
}

@media screen and (min-width: 1873px) {
font-size: 124px;
margin-bottom: 8px;
}
}
Loading

0 comments on commit 362d2c5

Please sign in to comment.