feat: tweak active styling of card buttons

ONEARMY · Dec 19, 2024 · cbdc25d · cbdc25d
1 parent 7f1a791
commit cbdc25d
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 24 deletions.
diff --git a/packages/components/src/CardButton/CardButton.tsx b/packages/components/src/CardButton/CardButton.tsx
@@ -16,31 +16,30 @@ export const CardButton = (props: IProps) => {
       sx={{
         alignItems: 'center',
         alignContent: 'center',
+        display: 'flex',
+        gap: 2,
         marginTop: '4px',
         borderRadius: 2,
         padding: 0,
         transition: 'borderBottom 0.2s, transform 0.2s',
         '&:hover': !isSelected && {
           animationSpeed: '0.3s',
           cursor: 'pointer',
-          marginTop: '2px',
-          marginBottom: '2px',
+          marginTop: '4px',
           borderBottom: '2px solid',
           transform: 'translateY(-2px)',
           borderColor: 'black',
         },
         '&:active': {
           transform: 'translateY(1px)',
-          marginTop: '2px',
-          marginBottom: '2px',
+          marginTop: '3px',
           borderBottom: '3px solid',
           borderColor: 'grey',
           transition: 'borderBottom 0.2s, transform 0.2s, borderColor 0.2s',
         },
         ...(isSelected
           ? {
-              marginTop: '1px',
-              marginBottom: '2px',
+              marginTop: '2px',
               borderBottom: '4px solid',
               borderColor: 'grey',
               transform: 'translateY(-2px)',

diff --git a/packages/components/src/CategoryVerticalList/CategoryVerticalList.tsx b/packages/components/src/CategoryVerticalList/CategoryVerticalList.tsx
@@ -27,30 +27,28 @@ export const CategoryVerticalList = (props: IProps) => {
   return (
     <VerticalList dataCy="CategoryVerticalList">
       {orderedCategories.map((category, index) => {
-        const active = category._id === activeCategory?._id
+        const isSelected = category._id === activeCategory?._id
         const glyph = category.label.toLowerCase() as availableGlyphs
         const hasGlyph = getGlyph(glyph)
 
         return (
           <CardButton
-            data-cy={`CategoryVerticalList-Item${active ? '-active' : ''}`}
+            data-cy={`CategoryVerticalList-Item${isSelected ? '-active' : ''}`}
             data-testid="CategoryVerticalList-Item"
             title={category.label}
             key={index}
-            onClick={() => setActiveCategory(active ? null : category)}
+            onClick={() => setActiveCategory(isSelected ? null : category)}
             extrastyles={{
               alignItems: 'center',
               background: 'none',
-              display: 'flex',
               flexDirection: 'column',
-              gap: 2,
               justifyContent: 'center',
               minWidth: '130px',
               marginX: 1,
-              padding: 1,
+              paddingY: 2,
               textAlign: 'center',
               width: '130px',
-              ...(active
+              ...(isSelected
                 ? {
                     borderColor: 'green',
                     ':hover': { borderColor: 'green' },
@@ -60,6 +58,7 @@ export const CategoryVerticalList = (props: IProps) => {
                     ':hover': { borderColor: 'background' },
                   }),
             }}
+            isSelected={isSelected}
           >
             <Icon size={40} glyph={hasGlyph ? glyph : 'category'} />
             <Text variant="quiet" sx={{ fontSize: 1 }}>

diff --git a/packages/components/src/MemberTypeVerticalList/MemberTypeVerticalList.client.tsx b/packages/components/src/MemberTypeVerticalList/MemberTypeVerticalList.client.tsx
@@ -30,25 +30,25 @@ export const MemberTypeVerticalList = (props: IProps) => {
   return (
     <VerticalList dataCy="MemberTypeVerticalList">
       {items.map((item, index) => {
-        const active = activeFilters.find(
+        const isSelected = !!activeFilters.find(
           (filter) => item.label === filter.label,
         )
         return (
           <CardButton
-            data-cy={`MemberTypeVerticalList-Item${active ? '-active' : ''}`}
+            data-cy={`MemberTypeVerticalList-Item${isSelected ? '-active' : ''}`}
             data-testid="MemberTypeVerticalList-Item"
             title={item._id}
             key={index}
             onClick={() => onFilterChange(item)}
             extrastyles={{
               background: 'none',
-              textAlign: 'center',
-              width: '130px',
+              flexDirection: 'column',
               minWidth: '130px',
               marginX: 1,
-              height: '75px',
-              flexDirection: 'column',
-              ...(active
+              paddingY: 2,
+              textAlign: 'center',
+              width: '130px',
+              ...(isSelected
                 ? {
                     borderColor: 'green',
                     ':hover': { borderColor: 'green' },
@@ -58,9 +58,9 @@ export const MemberTypeVerticalList = (props: IProps) => {
                     ':hover': { borderColor: 'background' },
                   }),
             }}
+            isSelected={isSelected}
           >
             <MemberBadge size={40} profileType={item._id as ProfileTypeName} />
-            <br />
             <Text variant="quiet" sx={{ fontSize: 1 }}>
               {item.label}
             </Text>

diff --git a/packages/components/src/VerticalList/Arrows.tsx b/packages/components/src/VerticalList/Arrows.tsx
@@ -7,23 +7,28 @@ import { Icon } from '../Icon/Icon'
 import type { publicApiType } from 'react-horizontal-scrolling-menu'
 import type { availableGlyphs } from '../Icon/types'
 
+import './styles.css'
+
 interface IProps {
   disabled: boolean
   glyph: availableGlyphs
   onClick: () => void
 }
 
 const Arrow = ({ disabled, glyph, onClick }: IProps) => {
+  const start = glyph === 'chevron-right' ? 0 : 1
+  const end = glyph === 'chevron-right' ? 1 : 0
+  const background = `linear-gradient(to right, rgba(255, 255, 255, ${start}) 0%, rgba(255, 255, 255, ${end}) 100%)`
+
   return (
     <Flex
       sx={{
         width: '35px',
         overflow: 'hidden',
         alignItems: 'center',
-        position: 'relative',
         borderRadius: 2,
-        ':hover': !disabled ? { backgroundColor: 'lightGrey' } : {},
-        ':active': !disabled ? { backgroundColor: 'softgrey' } : {},
+        ':hover': !disabled ? { background } : {},
+        ':active': !disabled ? { backgroundColor: 'white' } : {},
       }}
     >
       {disabled ? null : (

diff --git a/packages/components/src/VerticalList/styles.css b/packages/components/src/VerticalList/styles.css
@@ -0,0 +1,18 @@
+.react-horizontal-scrolling-menu--inner-wrapper {
+  position: relative;
+}
+
+.react-horizontal-scrolling-menu--arrow-left {
+  position: absolute;
+  left: 0;
+  z-index: 1;
+  height: 100%;
+}
+
+.react-horizontal-scrolling-menu--arrow-right {
+  position: absolute;
+  right: 0;
+  z-index: 1;
+  height: 100%;
+
+}