+
Active Facet
-
{name || '...'}
+ {facet && facet.path ? (
+
+ {facet.name}
+
+ ) : (
+
{facet ? facet.name : '...'}
+ )}
);
}
-
diff --git a/website/src/components/DiamondScene/facetBadge.module.css b/website/src/components/DiamondScene/facetBadge.module.css
index daaee9cb..8f82c6b5 100644
--- a/website/src/components/DiamondScene/facetBadge.module.css
+++ b/website/src/components/DiamondScene/facetBadge.module.css
@@ -14,6 +14,7 @@
.visible {
opacity: 1;
transform: translateY(0);
+ pointer-events: auto;
}
.badgeLabel {
@@ -27,6 +28,7 @@
}
.badgeValue {
+ display: block;
font-size: 1.25rem;
font-weight: 700;
color: #fff;
@@ -34,6 +36,14 @@
background: linear-gradient(to right, #fff, #bfdbfe);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
+ cursor: pointer;
+ text-decoration: none;
+ transition: filter 0.2s ease;
+}
+
+.badgeValue:hover {
+ filter: drop-shadow(0 0 8px rgba(147, 197, 253, 0.9));
+ text-decoration: underline;
}
.badgeLine {
diff --git a/website/src/components/DiamondScene/index.js b/website/src/components/DiamondScene/index.js
index 2ac230eb..75727495 100644
--- a/website/src/components/DiamondScene/index.js
+++ b/website/src/components/DiamondScene/index.js
@@ -4,7 +4,7 @@ import gsap from 'gsap';
import { DiamondShader, ParticleShader, FacetHighlightShader } from './shaders';
import { createDiamondGeometry, addFacetIds } from './geometry';
-export default function DiamondScene({ className, onHoverChange, inline = false }) {
+export default function DiamondScene({ className, onHoverChange, onFacetClick, inline = false }) {
const canvasContainerRef = useRef(null);
useEffect(() => {
@@ -180,6 +180,15 @@ export default function DiamondScene({ className, onHoverChange, inline = false
window.addEventListener('mousemove', onMouseMove);
+ // Click a hovered facet to open its documentation page
+ const onClick = () => {
+ if (inline || window.innerWidth <= 1024) return;
+ if (currentHoverId !== -1 && onFacetClick) {
+ onFacetClick(currentHoverId);
+ }
+ };
+ renderer.domElement.addEventListener('click', onClick);
+
// Time Uniform & Loop
const clock = new THREE.Clock();
let animationId;
@@ -234,6 +243,13 @@ export default function DiamondScene({ className, onHoverChange, inline = false
}
renderer.render(scene, camera);
+
+ // Facet hover is driven by window mousemove; the canvas stays behind the
+ // hero overlays (which are pointer-events: none) and only accepts clicks
+ // while a facet is hovered.
+ const facetHovered = !inline && window.innerWidth > 1024 && currentHoverId !== -1;
+ renderer.domElement.style.cursor = facetHovered ? 'pointer' : 'default';
+ renderer.domElement.style.pointerEvents = facetHovered ? 'auto' : 'none';
};
animate();
@@ -270,6 +286,7 @@ export default function DiamondScene({ className, onHoverChange, inline = false
return () => {
window.removeEventListener('resize', handleResize);
window.removeEventListener('mousemove', onMouseMove);
+ renderer.domElement.removeEventListener('click', onClick);
cancelAnimationFrame(animationId);
if (container && renderer.domElement && container.contains(renderer.domElement)) {
container.removeChild(renderer.domElement);
@@ -280,7 +297,7 @@ export default function DiamondScene({ className, onHoverChange, inline = false
particlesGeometry.dispose();
renderer.dispose();
};
- }, [onHoverChange, inline]); // Depend on callback and inline
+ }, [onHoverChange, onFacetClick, inline]); // Depend on callbacks and inline
return
;
}
diff --git a/website/src/components/DiamondScene/useFacetBadges.js b/website/src/components/DiamondScene/useFacetBadges.js
index b48c468d..62428e63 100644
--- a/website/src/components/DiamondScene/useFacetBadges.js
+++ b/website/src/components/DiamondScene/useFacetBadges.js
@@ -1,53 +1,84 @@
-import { useState, useCallback } from 'react';
-
-// Contract filenames mirrored from `src/**` and converted to display names.
-const FACET_NAMES = [
- "DiamondInspectFacet",
- "DiamondUpgradeFacet",
- "ERC165Facet",
- "AccessControlDataFacet",
- "AccessControlGrantFacet",
- "AccessControlRevokeFacet",
- "OwnerDataFacet",
- "OwnerTransferFacet",
- "OwnerRenounceFacet",
- "ERC1155DataFacet",
- "ERC1155MintFacet",
- "ERC1155BurnFacet",
- "ERC20DataFacet",
- "ERC20MintFacet",
- "ERC20BurnFacet",
- "ERC20ApproveFacet",
- "ERC20TransferFacet",
- "ERC721DataFacet",
- "ERC721MintFacet",
- "ERC721BurnFacet",
- "ERC721ApproveFacet",
- "ERC721TransferFacet",
- "ERC721MetadataFacet",
+import { useState, useCallback, useRef } from 'react';
+import { useHistory } from '@docusaurus/router';
+
+// Facets that currently have documentation pages under `website/docs/library`.
+// Keep this list in sync when library docs are added or removed.
+export const FACETS = [
+ { name: "DiamondInspectFacet", path: "/docs/library/diamond/DiamondInspectFacet" },
+ { name: "DiamondUpgradeFacet", path: "/docs/library/diamond/DiamondUpgradeFacet" },
+ { name: "OwnerDataFacet", path: "/docs/library/access/Owner/Data/OwnerDataFacet" },
+ { name: "OwnerRenounceFacet", path: "/docs/library/access/Owner/Renounce/OwnerRenounceFacet" },
+ { name: "OwnerTransferFacet", path: "/docs/library/access/Owner/Transfer/OwnerTransferFacet" },
+ { name: "OwnerTwoStepDataFacet", path: "/docs/library/access/Owner/TwoSteps/Data/OwnerTwoStepDataFacet" },
+ { name: "OwnerTwoStepRenounceFacet", path: "/docs/library/access/Owner/TwoSteps/Renounce/OwnerTwoStepRenounceFacet" },
+ { name: "OwnerTwoStepTransferFacet", path: "/docs/library/access/Owner/TwoSteps/Transfer/OwnerTwoStepTransferFacet" },
+ { name: "ERC20DataFacet", path: "/docs/library/token/ERC20/Data/ERC20DataFacet" },
+ { name: "ERC20MetadataFacet", path: "/docs/library/token/ERC20/Metadata/ERC20MetadataFacet" },
+ { name: "ERC20ApproveFacet", path: "/docs/library/token/ERC20/Approve/ERC20ApproveFacet" },
+ { name: "ERC20TransferFacet", path: "/docs/library/token/ERC20/Transfer/ERC20TransferFacet" },
+ { name: "ERC20BurnFacet", path: "/docs/library/token/ERC20/Burn/ERC20BurnFacet" },
+ { name: "ERC20PermitFacet", path: "/docs/library/token/ERC20/Permit/ERC20PermitFacet" },
+ { name: "ERC20BridgeableFacet", path: "/docs/library/token/ERC20/Bridgeable/ERC20BridgeableFacet" },
];
+const HIDE_DELAY_MS = 400;
+
export function useFacetBadges() {
- const [activeFacetName, setActiveFacetName] = useState(null);
-
- // Map random names to IDs to keep them consistent during a session if we wanted,
- // but for now we just pick a random one on hover entry if it's not already set.
- const [facetMap] = useState(() => new Map());
+ const history = useHistory();
+ const [activeFacet, setActiveFacet] = useState(null);
+ const facetMapRef = useRef(new Map());
+ const badgeHoveredRef = useRef(false);
+ const hideTimerRef = useRef(null);
+
+ const clearHideTimer = useCallback(() => {
+ if (hideTimerRef.current) {
+ clearTimeout(hideTimerRef.current);
+ hideTimerRef.current = null;
+ }
+ }, []);
+
+ const scheduleHide = useCallback(() => {
+ clearHideTimer();
+ hideTimerRef.current = setTimeout(() => {
+ if (!badgeHoveredRef.current) setActiveFacet(null);
+ }, HIDE_DELAY_MS);
+ }, [clearHideTimer]);
const handleHover = useCallback((facetId) => {
if (facetId === -1) {
- setActiveFacetName(null);
+ scheduleHide();
return;
}
- // If we haven't assigned a name to this ID yet, pick one randomly
- if (!facetMap.has(facetId)) {
- const randomName = FACET_NAMES[Math.floor(Math.random() * FACET_NAMES.length)];
- facetMap.set(facetId, randomName);
+ clearHideTimer();
+
+ // Assign a stable facet to each hovered geometry facet id
+ if (!facetMapRef.current.has(facetId)) {
+ const facet = FACETS[Math.floor(Math.random() * FACETS.length)];
+ facetMapRef.current.set(facetId, facet);
}
- setActiveFacetName(facetMap.get(facetId));
- }, [facetMap]);
+ setActiveFacet(facetMapRef.current.get(facetId));
+ }, [clearHideTimer, scheduleHide]);
+
+ // Keep the badge alive while the pointer is on it so the link is clickable
+ const handleBadgeEnter = useCallback(() => {
+ badgeHoveredRef.current = true;
+ clearHideTimer();
+ }, [clearHideTimer]);
+
+ const handleBadgeLeave = useCallback(() => {
+ badgeHoveredRef.current = false;
+ setActiveFacet(null);
+ }, []);
+
+ // Clicking a hovered facet on the 3D diamond opens its docs page
+ const handleFacetClick = useCallback((facetId) => {
+ const facet = facetMapRef.current.get(facetId);
+ if (facet) {
+ history.push(facet.path);
+ }
+ }, [history]);
- return { activeFacetName, handleHover };
+ return { activeFacet, handleHover, handleBadgeEnter, handleBadgeLeave, handleFacetClick };
}
diff --git a/website/src/components/README.md b/website/src/components/README.md
index e9238862..6952eb63 100644
--- a/website/src/components/README.md
+++ b/website/src/components/README.md
@@ -8,8 +8,8 @@ This directory contains all reusable React components for the Docusaurus documen
Fundamental, reusable UI building blocks.
- `Accordion` - Collapsible content sections
- `Badge` - Status and category badges
-- `Callout` - Informational callout boxes
-- `CalloutBox` - Enhanced callout with icons
+- `Callout` - Admonition-style callouts (7 types, collapsible variant)
+- `CalloutBox` - Deprecated alias of `Callout` (kept for existing pages)
- `GlassCard` - Card with glass morphism effect
- `GradientButton` - Button with gradient styling
- `GradientText` - Text with gradient effects
diff --git a/website/src/components/api/ParameterTable/styles.module.css b/website/src/components/api/ParameterTable/styles.module.css
index 86e77886..d7afec25 100644
--- a/website/src/components/api/ParameterTable/styles.module.css
+++ b/website/src/components/api/ParameterTable/styles.module.css
@@ -1,12 +1,12 @@
/* ParameterTable Component */
.parameterTable {
- margin: 1.5rem 0;
+ margin: 1.25rem 0;
}
.tableTitle {
- font-size: 1.25rem;
+ font-size: 1.125rem;
font-weight: 700;
- margin-bottom: 1rem;
+ margin-bottom: 0.75rem;
color: var(--ifm-heading-color);
}
@@ -33,10 +33,10 @@
}
.table th {
- padding: 0.875rem 1rem;
+ padding: 0.625rem 0.875rem;
text-align: left;
font-weight: 600;
- font-size: 0.875rem;
+ font-size: 0.8125rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ifm-heading-color);
@@ -49,10 +49,10 @@
}
.table td {
- padding: 0.875rem 1rem;
+ padding: 0.625rem 0.875rem;
border-bottom: 1px solid var(--ifm-color-emphasis-200);
color: var(--ifm-font-color-base);
- font-size: 0.9375rem;
+ font-size: 0.875rem;
}
[data-theme='dark'] .table td {
diff --git a/website/src/components/api/PropertyTable/styles.module.css b/website/src/components/api/PropertyTable/styles.module.css
index c50a2be5..9ceb83aa 100644
--- a/website/src/components/api/PropertyTable/styles.module.css
+++ b/website/src/components/api/PropertyTable/styles.module.css
@@ -115,11 +115,11 @@
}
.table th:first-child {
- padding-left: 1.5rem;
+ padding-left: 1.125rem;
}
.table th:last-child {
- padding-right: 1.5rem;
+ padding-right: 1.125rem;
}
/* Table Body */
@@ -145,7 +145,7 @@
}
.table td {
- padding: 1rem;
+ padding: 0.75rem;
font-size: 0.875rem;
color: var(--ifm-font-color-base);
vertical-align: top;
@@ -156,11 +156,11 @@
}
.table td:first-child {
- padding-left: 1.5rem;
+ padding-left: 1.125rem;
}
.table td:last-child {
- padding-right: 1.5rem;
+ padding-right: 1.125rem;
}
/* Column Styles */
diff --git a/website/src/components/docs/DocCard/styles.module.css b/website/src/components/docs/DocCard/styles.module.css
index b708e1dd..aeae5fbc 100644
--- a/website/src/components/docs/DocCard/styles.module.css
+++ b/website/src/components/docs/DocCard/styles.module.css
@@ -3,15 +3,15 @@
.docCard {
display: flex;
align-items: center;
- gap: 1.25rem;
- padding: 2rem;
+ gap: 1rem;
+ padding: 1.5rem;
text-decoration: none;
color: inherit;
position: relative;
overflow: hidden;
isolation: isolate;
cursor: pointer;
- border-radius: 1.25rem;
+ border-radius: 0.75rem;
background: linear-gradient(155deg, #ffffff 0%, #f1f5f9 55%, #f8fafc 100%);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow:
@@ -118,9 +118,9 @@
display: flex;
align-items: center;
justify-content: center;
- width: 3.5rem;
- height: 3.5rem;
- border-radius: 0.75rem;
+ width: 2.75rem;
+ height: 2.75rem;
+ border-radius: 0.625rem;
position: relative;
z-index: 1;
color: var(--compose-primary-500);
@@ -143,7 +143,7 @@
}
.iconEmoji {
- font-size: 2rem;
+ font-size: 1.5rem;
line-height: 1;
}
@@ -156,8 +156,8 @@
}
.docCardTitle {
- margin: 0 0 0.5rem 0;
- font-size: 1.125rem;
+ margin: 0 0 0.3rem 0;
+ font-size: 1rem;
font-weight: 750;
letter-spacing: -0.025em;
line-height: 1.22;
@@ -166,8 +166,8 @@
.docCardDescription {
margin: 0;
- font-size: 0.96875rem;
- line-height: 1.65;
+ font-size: 0.875rem;
+ line-height: 1.55;
color: #334155;
}
@@ -286,117 +286,117 @@
/* Card Sizes */
.docCard--small {
- padding: 1.25rem 1.5rem;
- gap: 1rem;
- border-radius: 1.125rem;
+ padding: 1rem 1.125rem;
+ gap: 0.875rem;
+ border-radius: 0.75rem;
}
.docCard--small .docCardIcon {
- width: 2.5rem;
- height: 2.5rem;
- border-radius: 0.625rem;
+ width: 2.125rem;
+ height: 2.125rem;
+ border-radius: 0.5rem;
}
.docCard--small .iconEmoji {
- font-size: 1.5rem;
+ font-size: 1.25rem;
}
.docCard--small .docCardTitle {
- font-size: 1rem;
+ font-size: 0.9375rem;
font-weight: 700;
}
.docCard--small .docCardDescription {
- font-size: 0.9375rem;
+ font-size: 0.875rem;
}
.docCard--large {
- padding: 2.5rem;
- gap: 1.5rem;
+ padding: 1.75rem;
+ gap: 1.25rem;
}
.docCard--large .docCardIcon {
- width: 4rem;
- height: 4rem;
+ width: 3.25rem;
+ height: 3.25rem;
}
.docCard--large .iconEmoji {
- font-size: 2.5rem;
+ font-size: 1.875rem;
}
.docCard--large .docCardTitle {
- font-size: 1.3125rem;
+ font-size: 1.1875rem;
}
/* DocCardGrid — match homepage features grid rhythm */
.docCardGrid {
display: grid;
grid-template-columns: repeat(var(--grid-columns, 2), 1fr);
- gap: 2rem;
- margin: 2rem 0;
+ gap: 1rem;
+ margin: 1.25rem 0;
}
@media (min-width: 997px) and (max-width: 1200px) {
.docCardGrid {
- grid-template-columns: 1fr;
- gap: 1.5rem;
+ grid-template-columns: repeat(var(--grid-columns, 2), 1fr);
+ gap: 1rem;
}
}
@media (min-width: 1201px) and (max-width: 1400px) {
.docCardGrid {
grid-template-columns: repeat(var(--grid-columns, 2), 1fr);
- gap: 1.5rem;
+ gap: 1.125rem;
}
}
@media (min-width: 1401px) {
.docCardGrid {
grid-template-columns: repeat(var(--grid-columns, 2), 1fr);
- gap: 2rem;
+ gap: 1.125rem;
}
}
@media (max-width: 996px) {
.docCardGrid {
grid-template-columns: 1fr;
- gap: 1.25rem;
+ gap: 0.875rem;
}
}
@media (min-width: 997px) and (max-width: 1200px) {
.docCard {
- padding: 1.75rem;
- gap: 1.125rem;
+ padding: 1.375rem;
+ gap: 0.875rem;
}
.docCardIcon {
- width: 3.25rem;
- height: 3.25rem;
+ width: 2.5rem;
+ height: 2.5rem;
}
}
@media (max-width: 768px) {
.docCard {
- padding: 1.75rem 1.5rem 2rem;
- gap: 1rem;
+ padding: 1.25rem;
+ gap: 0.875rem;
}
.docCardIcon {
- width: 3rem;
- height: 3rem;
+ width: 2.5rem;
+ height: 2.5rem;
}
.iconEmoji {
- font-size: 1.75rem;
+ font-size: 1.375rem;
}
.docCardTitle {
- font-size: 1.1875rem;
+ font-size: 1.0625rem;
}
.docCardDescription {
- font-size: 0.9375rem;
+ font-size: 0.875rem;
}
}
diff --git a/website/src/components/docs/DocHero/styles.module.css b/website/src/components/docs/DocHero/styles.module.css
index 07bc4021..f3b32a2d 100644
--- a/website/src/components/docs/DocHero/styles.module.css
+++ b/website/src/components/docs/DocHero/styles.module.css
@@ -4,11 +4,11 @@
display: flex;
align-items: center;
justify-content: center;
- padding: 4rem 2rem;
+ padding: 2.5rem 1.5rem;
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
overflow: hidden;
- margin-bottom: 3rem;
- border-radius: 1.5rem;
+ margin-bottom: 2rem;
+ border-radius: 1.25rem;
}
/* Background Image Support */
@@ -53,32 +53,32 @@
.docHeroTitle {
font-family: var(--ifm-heading-font-family);
- margin: 0 0 1.5rem 0;
- font-size: 3rem;
- font-weight: 800;
+ margin: 0 0 0.75rem 0;
+ font-size: 2.25rem;
+ font-weight: 700;
letter-spacing: -0.02em;
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.85) 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
- line-height: 1.1;
+ line-height: 1.15;
}
.docHeroSubtitle {
- margin: 0 auto 2rem auto;
- font-size: 1.25rem;
+ margin: 0 auto 1rem auto;
+ font-size: 1rem;
font-weight: 400;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.7) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
- line-height: 1.6;
+ line-height: 1.5;
max-width: 700px;
}
/* Button spacing in hero */
.docHeroContent > * + * {
- margin-top: 2rem;
+ margin-top: 1rem;
}
/* Variants */
@@ -108,56 +108,56 @@
/* Height variants */
.docHero--small {
- padding: 3rem 2rem;
+ padding: 1.75rem 1.25rem;
}
.docHero--small .docHeroTitle {
- font-size: 2.25rem;
+ font-size: 1.625rem;
}
.docHero--small .docHeroSubtitle {
- font-size: 1.125rem;
+ font-size: 0.9375rem;
}
.docHero--medium {
- padding: 5rem 2rem;
+ padding: 2.5rem 1.25rem;
}
.docHero--large {
- padding: 8rem 2rem;
+ padding: 3rem 1.25rem;
}
.docHero--large .docHeroTitle {
- font-size: 3.5rem;
+ font-size: 2.5rem;
}
.docHero--large .docHeroSubtitle {
- font-size: 1.5rem;
+ font-size: 1.0625rem;
}
.docHero--full {
- min-height: 70vh;
- padding: 6rem 2rem;
+ min-height: 40vh;
+ padding: 2.75rem 1.25rem;
}
.docHero--full .docHeroTitle {
- font-size: 4rem;
+ font-size: 2.75rem;
}
.docHero--full .docHeroSubtitle {
- font-size: 1.75rem;
+ font-size: 1.125rem;
}
/* DocHeroSection */
.docHeroSection {
- padding: 3rem 0;
+ padding: 1.75rem 0;
}
.docHeroSectionTitle {
text-align: center;
- font-size: 2rem;
+ font-size: 1.5rem;
font-weight: 700;
- margin-bottom: 2.5rem;
+ margin-bottom: 1.25rem;
color: var(--ifm-heading-color);
}
@@ -168,78 +168,78 @@
/* Responsive */
@media (max-width: 996px) {
.docHero {
- padding: 4rem 1.5rem;
+ padding: 2rem 1rem;
}
.docHeroTitle {
- font-size: 2.5rem;
+ font-size: 1.875rem;
}
.docHeroSubtitle {
- font-size: 1.125rem;
+ font-size: 0.9375rem;
}
.docHero--large {
- padding: 6rem 1.5rem;
+ padding: 2.5rem 1rem;
}
.docHero--large .docHeroTitle {
- font-size: 3rem;
+ font-size: 2.125rem;
}
.docHero--full {
- min-height: 50vh;
- padding: 5rem 1.5rem;
+ min-height: 35vh;
+ padding: 2.5rem 1rem;
}
.docHero--full .docHeroTitle {
- font-size: 3rem;
+ font-size: 2.25rem;
}
}
@media (max-width: 768px) {
.docHero {
- padding: 3rem 1.25rem;
+ padding: 1.5rem 0.875rem;
}
.docHeroTitle {
- font-size: 2rem;
+ font-size: 1.625rem;
}
.docHeroSubtitle {
- font-size: 1rem;
+ font-size: 0.875rem;
}
.docHero--small {
- padding: 2rem 1.25rem;
+ padding: 1.25rem 0.875rem;
}
.docHero--small .docHeroTitle {
- font-size: 1.75rem;
+ font-size: 1.4375rem;
}
.docHero--large {
- padding: 4rem 1.25rem;
+ padding: 2rem 0.875rem;
}
.docHero--large .docHeroTitle {
- font-size: 2.25rem;
+ font-size: 1.875rem;
}
.docHero--large .docHeroSubtitle {
- font-size: 1.125rem;
+ font-size: 0.9375rem;
}
.docHero--full {
- min-height: 40vh;
+ min-height: 32vh;
}
.docHero--full .docHeroTitle {
- font-size: 2.5rem;
+ font-size: 1.875rem;
}
.docHero--full .docHeroSubtitle {
- font-size: 1.125rem;
+ font-size: 0.9375rem;
}
}
diff --git a/website/src/components/docs/DocPageAside/index.js b/website/src/components/docs/DocPageAside/index.js
index cf79c429..a288fa48 100644
--- a/website/src/components/docs/DocPageAside/index.js
+++ b/website/src/components/docs/DocPageAside/index.js
@@ -26,7 +26,7 @@ export default function DocPageAside({ soloInSidebar = false }) {
target="_blank"
rel="noopener noreferrer"
>
-
+
Report issue
);
diff --git a/website/src/components/docs/DocPageAside/styles.module.css b/website/src/components/docs/DocPageAside/styles.module.css
index 3b177612..cd3cb14f 100644
--- a/website/src/components/docs/DocPageAside/styles.module.css
+++ b/website/src/components/docs/DocPageAside/styles.module.css
@@ -1,6 +1,6 @@
.aside {
- margin-top: 1.25rem;
- padding-top: 1.25rem;
+ margin-top: 1rem;
+ padding-top: 0.875rem;
border-top: 1px solid var(--ifm-color-emphasis-200);
}
@@ -45,10 +45,10 @@
.reportLink {
display: inline-flex;
align-items: center;
- gap: 0.375rem;
- font-size: 0.8125rem;
+ gap: 0.3rem;
+ font-size: 0.75rem;
font-weight: 500;
- color: var(--ifm-color-emphasis-700);
+ color: var(--ifm-font-color-base);
text-decoration: none;
}
@@ -57,10 +57,6 @@
text-decoration: none;
}
-[data-theme='dark'] .reportLink {
- color: var(--ifm-color-emphasis-600);
-}
-
[data-theme='dark'] .reportLink :global(img) {
filter: brightness(0) invert(1);
}
diff --git a/website/src/components/docs/PackageImport/styles.module.css b/website/src/components/docs/PackageImport/styles.module.css
index f67a4ae0..ca01d7b1 100644
--- a/website/src/components/docs/PackageImport/styles.module.css
+++ b/website/src/components/docs/PackageImport/styles.module.css
@@ -4,6 +4,7 @@
gap: 0.75rem;
overflow-x: auto;
padding-bottom: 1rem;
+ flex-wrap: nowrap;
}
.label {
@@ -15,12 +16,16 @@
}
.code {
+ flex: 1 1 auto;
+ min-width: 0;
font-family: var(--ifm-font-family-monospace);
font-size: 0.875rem;
line-height: 1.6;
white-space: pre;
color: var(--ifm-color-primary-dark);
- background-color: var(--ifm-background-surface-color);
+ background: transparent !important;
+ border: none !important;
+ padding: 0 !important;
}
.copyButton {
@@ -61,11 +66,6 @@
color: var(--ifm-color-emphasis-600);
}
-[data-theme='dark'] .packageImport {
- border-color: #1e293b;
- background: #0f172a;
-}
-
[data-theme='dark'] .label {
color: #64748b;
}
@@ -83,7 +83,7 @@
@media (max-width: 768px) {
.packageImport {
border-radius: 0.375rem;
- flex-wrap: wrap;
+ flex-wrap: nowrap;
}
.label {
@@ -91,10 +91,6 @@
margin-bottom: -0.25rem;
}
- .code {
- width: 100%;
- }
-
.copyButton {
margin-left: auto;
}
diff --git a/website/src/components/docs/WasThisHelpful/index.js b/website/src/components/docs/WasThisHelpful/index.js
index 3f3a0f0b..5acaa4cd 100644
--- a/website/src/components/docs/WasThisHelpful/index.js
+++ b/website/src/components/docs/WasThisHelpful/index.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
import clsx from 'clsx';
import { useColorMode } from '@docusaurus/theme-common';
import Icon from '../../ui/Icon';
@@ -51,6 +51,18 @@ export default function WasThisHelpful({
const [feedback, setFeedback] = useState(null);
const [comment, setComment] = useState('');
const [submitted, setSubmitted] = useState(false);
+ const [fadingOut, setFadingOut] = useState(false);
+ const [dismissed, setDismissed] = useState(false);
+
+ useEffect(() => {
+ if (!submitted) return undefined;
+ const fadeTimer = setTimeout(() => setFadingOut(true), 4000);
+ const dismissTimer = setTimeout(() => setDismissed(true), 4450);
+ return () => {
+ clearTimeout(fadeTimer);
+ clearTimeout(dismissTimer);
+ };
+ }, [submitted]);
const thumbUpName = colorMode === 'dark' ? 'thumbs-up-dark' : 'thumbs-up';
const thumbDownName = colorMode === 'dark' ? 'thumbs-down-dark' : 'thumbs-down';
@@ -107,6 +119,13 @@ export default function WasThisHelpful({
};
if (submitted) {
+ if (dismissed) {
+ if (variant === 'aside' && asideEndSlot) {
+ return
{asideEndSlot}
;
+ }
+ return null;
+ }
+
const submittedBody = (
<>
{submittedBody}
@@ -144,7 +164,8 @@ export default function WasThisHelpful({
{submittedBody}
@@ -161,7 +182,7 @@ export default function WasThisHelpful({
onClick={handleAsideYes}
aria-label="Yes, this was helpful"
>
-
-
@@ -227,7 +248,7 @@ export default function WasThisHelpful({
>
- Ready to build with Compose?
+ Build your next system one facet at a time.
- Install Compose and put together a diamond-based system you can grow one facet at a time.
+ Start with a working project, add reusable Solidity building blocks, and keep your custom logic easy to understand.
Get started
+ Start Building
- Installation
+ Read the Docs