diff --git a/components/charts/category-bar.js b/components/charts/category-bar.js index 98b5620..5428e80 100644 --- a/components/charts/category-bar.js +++ b/components/charts/category-bar.js @@ -61,7 +61,7 @@ const CategoryBar = ({ { sx={{ justifyContent: 'space-between', fontSize: 2, - mb: 1, + mb: [1, 1, 1, 2], }} > {isLoading || error ? ( @@ -82,7 +82,9 @@ const DetailCharts = ({ issued, retired, isLoading, error }) => { backgroundColor: COLORS[l], }} /> - {LABELS.category[l]} + + {LABELS.category[l]} + )} @@ -91,8 +93,6 @@ const DetailCharts = ({ issued, retired, isLoading, error }) => { color: isLoading || error ? 'primary' : COLORS[l], backgroundColor: isLoading || error ? 'muted' : alpha(COLORS[l], 0.3), - fontSize: 2, - mb: '3px', }} > {isLoading || error diff --git a/components/clips.js b/components/clips.js index 96177aa..21b6f62 100644 --- a/components/clips.js +++ b/components/clips.js @@ -6,6 +6,7 @@ import { Badge, Tag, Expander, + Link, } from '@carbonplan/components' import { RotatingArrow } from '@carbonplan/icons' import { useMemo, useState } from 'react' @@ -100,15 +101,16 @@ const Clip = ({ date, label, url, projects, source, index }) => { {(projects.length <= 5 || expanded) && ( {projects?.map(({ project_id, category }) => ( - + {project_id} - + ))} )} diff --git a/components/project-row.js b/components/project-row.js index 98ca118..3591035 100644 --- a/components/project-row.js +++ b/components/project-row.js @@ -1,5 +1,5 @@ import { Badge, Button, Expander, Row } from '@carbonplan/components' -import { RotatingArrow } from '@carbonplan/icons' +import { RotatingArrow, Arrow } from '@carbonplan/icons' import { keyframes } from '@emotion/react' import { alpha } from '@theme-ui/color' import { useState } from 'react' @@ -22,6 +22,7 @@ const fade = keyframes({ const ProjectRow = ({ project }) => { const { project_id, category, name, issued, retired } = project const [expanded, setExpanded] = useState(false) + const [hoveredDetails, setHoveredDetails] = useState(false) const color = COLORS[category[0]] ?? COLORS.other const sx = { @@ -67,6 +68,7 @@ const ProjectRow = ({ project }) => { top: '2px', // centering, not ideal. width: '18px', height: '18px', + stroke: expanded ? alpha(color, 0.8) : 'secondary', }} /> { key: 'details', label: ( setHoveredDetails(true)} // css hover selectors not working + onMouseOut={() => setHoveredDetails(false)} // for this context sx={{ - color: expanded ? color : null, + color: expanded || hoveredDetails ? color : null, + '&:hover #arrow': { + transform: 'rotate(45deg)', + }, }} >