Merge branch 'feature/extract-theme' into develop
This commit is contained in:
commit
a8f9a17c98
|
@ -41,11 +41,13 @@ const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
|
|||
|
||||
return (
|
||||
<div
|
||||
className={`flex items-baseline space-x-1 ${txFrom ? "bg-red-50" : ""} ${
|
||||
txTo ? "bg-green-50" : ""
|
||||
} ${mint ? "italic text-green-500 hover:text-green-700" : ""} ${
|
||||
burn ? "line-through text-orange-500 hover:text-orange-700" : ""
|
||||
} ${selfDestruct ? "line-through opacity-70 hover:opacity-100" : ""}`}
|
||||
className={`flex items-baseline space-x-1 ${
|
||||
txFrom ? "bg-skin-from" : ""
|
||||
} ${txTo ? "bg-skin-to" : ""} ${
|
||||
mint ? "italic text-green-500 hover:text-green-700" : ""
|
||||
} ${burn ? "line-through text-orange-500 hover:text-orange-700" : ""} ${
|
||||
selfDestruct ? "line-through opacity-70 hover:opacity-100" : ""
|
||||
}`}
|
||||
>
|
||||
{creation && (
|
||||
<span className="text-yellow-300" title="Contract creation">
|
||||
|
|
|
@ -1,3 +1,14 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--color-from-border: 254, 226, 226;
|
||||
--color-from-text: 220, 38, 38;
|
||||
--color-from-fill: 254, 242, 242;
|
||||
--color-to-fill: 236, 253, 245;
|
||||
|
||||
--color-table-row-hover: 243, 244, 246;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -56,7 +56,9 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
|
|||
return (
|
||||
<div
|
||||
className={`grid grid-cols-12 gap-x-1 items-baseline text-sm border-t border-gray-200 ${
|
||||
flash ? "bg-yellow-100 hover:bg-yellow-200" : "hover:bg-gray-100"
|
||||
flash
|
||||
? "bg-yellow-100 hover:bg-yellow-200"
|
||||
: "hover:bg-skin-table-hover"
|
||||
} px-2 py-3`}
|
||||
>
|
||||
<div className="col-span-2 flex space-x-1 items-baseline">
|
||||
|
|
|
@ -22,7 +22,7 @@ const BlockRow: React.FC<BlockRowProps> = ({ now, block, baseFeeDelta }) => {
|
|||
const totalReward = block.blockReward.add(netFeeReward ?? 0);
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-9 gap-x-2 px-3 py-2 hover:bg-gray-100">
|
||||
<div className="grid grid-cols-9 gap-x-2 px-3 py-2 hover:bg-skin-table-hover">
|
||||
<div>
|
||||
<BlockLink blockTag={block.number} />
|
||||
</div>
|
||||
|
|
|
@ -176,7 +176,7 @@ const Details: React.FC<DetailsProps> = ({
|
|||
<InfoRow title="Value">
|
||||
<FormattedBalance value={txData.value} /> Ether{" "}
|
||||
{!txData.value.isZero() && ethUSDPrice && (
|
||||
<span className="px-2 border-red-100 border rounded-lg bg-red-50 text-red-600">
|
||||
<span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from">
|
||||
<ETH2USDValue ethAmount={txData.value} eth2USDValue={ethUSDPrice} />
|
||||
</span>
|
||||
)}
|
||||
|
@ -266,7 +266,7 @@ const Details: React.FC<DetailsProps> = ({
|
|||
<div>
|
||||
<FormattedBalance value={txData.fee} /> Ether{" "}
|
||||
{ethUSDPrice && (
|
||||
<span className="px-2 border-red-100 border rounded-lg bg-red-50 text-red-600">
|
||||
<span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from">
|
||||
<ETH2USDValue
|
||||
ethAmount={txData.fee}
|
||||
eth2USDValue={ethUSDPrice}
|
||||
|
|
|
@ -1,5 +1,14 @@
|
|||
const colors = require("tailwindcss/colors");
|
||||
|
||||
function withOpacity(variableName) {
|
||||
return ({ opacityValue }) => {
|
||||
if (opacityValue !== undefined) {
|
||||
return `rgba(var(${variableName}), ${opacityValue})`;
|
||||
}
|
||||
return `rgb(var(${variableName}))`;
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
|
||||
darkMode: false, // or 'media' or 'class'
|
||||
|
@ -19,6 +28,23 @@ module.exports = {
|
|||
balance: ["Fira Code"],
|
||||
blocknum: ["Roboto"],
|
||||
},
|
||||
borderColor: {
|
||||
skin: {
|
||||
from: withOpacity("--color-from-border"),
|
||||
},
|
||||
},
|
||||
textColor: {
|
||||
skin: {
|
||||
from: withOpacity("--color-from-text"),
|
||||
},
|
||||
},
|
||||
backgroundColor: {
|
||||
skin: {
|
||||
from: withOpacity("--color-from-fill"),
|
||||
to: withOpacity("--color-to-fill"),
|
||||
"table-hover": withOpacity("--color-table-row-hover"),
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
|
|
Loading…
Reference in New Issue