rebalance activity comp update

apps/earn-protocol/components/layout/StrategiesListView/StrategiesListView.tsx

@@ -9,6 +9,7 @@ import {
   StrategySimulationForm,
 } from '@summerfi/app-earn-ui'
 import { type DropdownRawOption, type IconNamesList, type NetworkNames } from '@summerfi/app-types'
+import { capitalize } from 'lodash-es'
 
 import { strategiesList } from '@/constants/dev-strategies-list'
 import { networkIconByNetworkName } from '@/constants/networkIcons'
@@ -50,7 +51,7 @@ export const StrategiesListView = ({ selectedNetwork }: StrategiesListViewProps)
               localStrategyNetwork !== 'all-networks'
                 ? networkIconByNetworkName[localStrategyNetwork]
                 : 'network_ethereum',
-            label: localStrategyNetwork,
+            label: capitalize(localStrategyNetwork),
             value: localStrategyNetwork,
           }
         : allNetworksOption,
@@ -60,7 +61,7 @@ export const StrategiesListView = ({ selectedNetwork }: StrategiesListViewProps)
     () => [
       ...[...new Set(strategiesList.map(({ network }) => network))].map((network) => ({
         iconName: networkIconByNetworkName[network],
-        label: network,
+        label: capitalize(network),
         value: network,
       })),
       allNetworksOption,

apps/earn-protocol/features/portfolio/components/PortfolioRebalanceActivityList/PortfolioRebalanceActivityList.module.scss

@@ -17,13 +17,19 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 22px 0 12px 0;
+  padding: var(--general-space-16) 0;
   border-bottom: 1px solid var(--earn-protocol-neutral-70);
   cursor: pointer;
 
   &:first-child {
     padding-top: var(--general-space-8);
   }
+
+  &:hover {
+    .leftContent {
+      color: var(--earn-protocol-secondary-100);
+    }
+  }
 }
 
 .leftContentWrapper {
@@ -36,6 +42,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--general-space-4);
+  color: var(--earn-protocol-secondary-40);
 
   &Description {
     display: flex;

apps/earn-protocol/features/portfolio/components/PortfolioRebalanceActivityList/PortfolioRebalanceActivityList.tsx

@@ -1,4 +1,5 @@
-import { Card, Icon, Text } from '@summerfi/app-earn-ui'
+import { useState } from 'react'
+import { Icon, Text } from '@summerfi/app-earn-ui'
 import { type IconNamesList, type TokenSymbolsList } from '@summerfi/app-types'
 import { formatDecimalAsPercent, timeAgo } from '@summerfi/app-utils'
 import BigNumber from 'bignumber.js'
@@ -65,14 +66,30 @@ const dummyList: {
 ]
 
 export const PortfolioRebalanceActivityList = () => {
+  // timestamp should be unique, so can be used as id
+  const [hoveredItemTimestamp, setHoveredItemTimestamp] = useState<number>()
+
   return (
-    <Card variant="cardSecondary" className={classNames.wrapper}>
+    <div className={classNames.wrapper}>
       {dummyList.map((item) => (
-        <Link href={item.link} key={item.title + item.token + item.change + item.timestamp}>
+        <Link
+          href={item.link}
+          key={item.title + item.token + item.change + item.timestamp}
+          onMouseEnter={() => setHoveredItemTimestamp(item.timestamp)}
+          onMouseLeave={() => setHoveredItemTimestamp(undefined)}
+        >
           <div className={classNames.contentWrapper}>
             <div className={classNames.leftContentWrapper}>
               <div className={classNames.iconWrapper}>
-                <Icon iconName={item.icon} variant="s" />
+                <Icon
+                  iconName={item.icon}
+                  variant="s"
+                  color={
+                    hoveredItemTimestamp === item.timestamp
+                      ? 'rgba(210, 210, 210, 1)'
+                      : 'rgba(119, 117, 118, 1)'
+                  }
+                />
               </div>
               <div className={classNames.leftContent}>
                 <Text as="p" variant="p2semi">
@@ -96,6 +113,6 @@ export const PortfolioRebalanceActivityList = () => {
           </div>
         </Link>
       ))}
-    </Card>
+    </div>
   )
 }