From 70e9a10bc32681a86d5559dbba3de08c346a676a Mon Sep 17 00:00:00 2001
From: sebastianPiekarczyk <sebastian@oazoapps.com>
Date: Thu, 24 Oct 2024 10:33:46 +0200
Subject: [PATCH] rebalance activity comp update

---
 .../StrategiesListView/StrategiesListView.tsx |  5 ++--
 ...PortfolioRebalanceActivityList.module.scss |  9 ++++++-
 .../PortfolioRebalanceActivityList.tsx        | 27 +++++++++++++++----
 packages/app-icons/src/icons/withdraw.svg     |  2 +-
 4 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/apps/earn-protocol/components/layout/StrategiesListView/StrategiesListView.tsx b/apps/earn-protocol/components/layout/StrategiesListView/StrategiesListView.tsx
index 9b7c58c45..13c8b29b6 100644
--- a/apps/earn-protocol/components/layout/StrategiesListView/StrategiesListView.tsx
+++ b/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,
diff --git a/apps/earn-protocol/features/portfolio/components/PortfolioRebalanceActivityList/PortfolioRebalanceActivityList.module.scss b/apps/earn-protocol/features/portfolio/components/PortfolioRebalanceActivityList/PortfolioRebalanceActivityList.module.scss
index a90a7e1c8..880760636 100644
--- a/apps/earn-protocol/features/portfolio/components/PortfolioRebalanceActivityList/PortfolioRebalanceActivityList.module.scss
+++ b/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;
diff --git a/apps/earn-protocol/features/portfolio/components/PortfolioRebalanceActivityList/PortfolioRebalanceActivityList.tsx b/apps/earn-protocol/features/portfolio/components/PortfolioRebalanceActivityList/PortfolioRebalanceActivityList.tsx
index 67d6b8ad6..149af67e4 100644
--- a/apps/earn-protocol/features/portfolio/components/PortfolioRebalanceActivityList/PortfolioRebalanceActivityList.tsx
+++ b/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>
   )
 }
diff --git a/packages/app-icons/src/icons/withdraw.svg b/packages/app-icons/src/icons/withdraw.svg
index 79d7ccf01..ed72e30ce 100644
--- a/packages/app-icons/src/icons/withdraw.svg
+++ b/packages/app-icons/src/icons/withdraw.svg
@@ -1,3 +1,3 @@
 <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.49927 13.0005C9.49927 13.5528 9.94698 14.0005 10.4993 14.0005C11.0516 14.0005 11.4993 13.5528 11.4993 13.0005V7.00049H14.0352L10.5352 2.00049L7.03516 7.00049H9.49927V13.0005ZM3.89787 13.3337C3.74682 12.9064 3.63618 12.4604 3.57031 12.0005H5.59911C5.64545 12.229 5.70733 12.4516 5.78355 12.6672C6.47042 14.6106 8.32383 16.0005 10.4993 16.0005C12.6748 16.0005 14.5282 14.6106 15.215 12.6672C15.2913 12.4516 15.3531 12.229 15.3995 12.0005H17.4283C17.3624 12.4604 17.2518 12.9064 17.1007 13.3337C16.1402 16.0512 13.5487 18.0005 10.4993 18.0005C7.44989 18.0005 4.85834 16.0512 3.89787 13.3337Z" fill="#FFFBFD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.49927 13.0005C9.49927 13.5528 9.94698 14.0005 10.4993 14.0005C11.0516 14.0005 11.4993 13.5528 11.4993 13.0005V7.00049H14.0352L10.5352 2.00049L7.03516 7.00049H9.49927V13.0005ZM3.89787 13.3337C3.74682 12.9064 3.63618 12.4604 3.57031 12.0005H5.59911C5.64545 12.229 5.70733 12.4516 5.78355 12.6672C6.47042 14.6106 8.32383 16.0005 10.4993 16.0005C12.6748 16.0005 14.5282 14.6106 15.215 12.6672C15.2913 12.4516 15.3531 12.229 15.3995 12.0005H17.4283C17.3624 12.4604 17.2518 12.9064 17.1007 13.3337C16.1402 16.0512 13.5487 18.0005 10.4993 18.0005C7.44989 18.0005 4.85834 16.0512 3.89787 13.3337Z" fill="currentColor"/>
 </svg>