Merge pull request #39 from carbonplan/design-cleanup

Design nits
carbonplan · Jan 16, 2024 · 804b740 · 804b740 · vercel · Jan 16, 2024
2 parents 4cd8ba9 + 9a2959c
commit 804b740
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 13 deletions.
diff --git a/components/charts/category-bar.js b/components/charts/category-bar.js
@@ -61,7 +61,7 @@ const CategoryBar = ({
           <Flex sx={{ gap: 3, alignItems: 'flex-end' }}>
             <Box
               sx={{
-                fontSize: 1,
+                fontSize: [1, 1, 1, 2],
                 fontFamily: 'mono',
                 letterSpacing: 'mono',
                 color: 'secondary',

diff --git a/components/charts/detail-charts.js b/components/charts/detail-charts.js
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
-import { Box, Flex, Badge } from 'theme-ui'
-import { Row, Column } from '@carbonplan/components'
+import { Box, Flex } from 'theme-ui'
+import { Row, Column, Badge } from '@carbonplan/components'
 import { alpha } from '@theme-ui/color'
 import { COLORS, LABELS } from '../constants'
 import { formatValue } from '../utils'
@@ -59,7 +59,7 @@ const DetailCharts = ({ issued, retired, isLoading, error }) => {
               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],
                     }}
                   />
-                  <Box sx={{ fontSize: 1 }}>{LABELS.category[l]}</Box>
+                  <Box sx={{ fontSize: [1, 1, 1, 2] }}>
+                    {LABELS.category[l]}
+                  </Box>
                 </Flex>
               )}
 
@@ -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
@@ -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) && (
             <Flex sx={{ gap: 2, flexWrap: 'wrap', mt: 3 }}>
               {projects?.map(({ project_id, category }) => (
-                <a href={`/projects/${project_id}`} key={project_id}>
+                <Link href={`/projects/${project_id}`} key={project_id}>
                   <Badge
                     sx={{
                       color: COLORS[category[0]] ?? COLORS.other,
+                      userSelect: 'text',
                     }}
                   >
                     {project_id}
                   </Badge>
-                </a>
+                </Link>
               ))}
             </Flex>
           )}

diff --git 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',
                   }}
                 />
                 <Badge
@@ -121,21 +123,28 @@ const ProjectRow = ({ project }) => {
             key: 'details',
             label: (
               <Badge
+                onMouseOver={() => 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)',
+                  },
                 }}
               >
                 <Button
                   href={`/projects/${project_id}`}
                   onClick={(e) => e.stopPropagation()}
                 >
-                  <RotatingArrow
+                  <Arrow
+                    id='arrow'
                     sx={{
                       mt: [1, 1, 1, 0],
                       mb: [0, 0, 0, '1px'],
                       width: 14,
                       height: 14,
-                      color: expanded ? color : null,
+                      color: expanded || hoveredDetails ? color : null,
+                      transition: 'transform 0.15s',
                     }}
                   />
                 </Button>