refactor: further theme modifications

app/components/transaction-item.js

@@ -18,7 +18,6 @@ import { ModalComponent } from './modal';
 import { TransactionDetailsComponent } from './transaction-details';
 
 import { formatNumber } from '../utils/format-number';
-import { truncateAddress } from '../utils/truncate-address';
 
 const Wrapper = styled(RowComponent)`
   background-color: ${props => props.theme.colors.transactionItemBg};
@@ -56,8 +55,12 @@ const TransactionAddress = styled(TextComponent)`
   }
 `;
 
-const TransactionTime = styled(TextComponent)`
-  color: ${props => props.theme.colors.inactiveItem};
+const TransactionLabel = styled(TextComponent)`
+  color: ${props => props.theme.colors.transactionLabelText};
+
+  ${String(Wrapper)}:hover & {
+    color: ${props => props.theme.colors.transactionLabelTextHovered};
+  }
 `;
 
 const TransactionColumn = styled(ColumnComponent)`
@@ -97,7 +100,6 @@ const Component = ({
     value: amount * zecPrice,
     append: `${isReceived ? '+' : '-'}USD $`,
   });
-  const transactionAddress = truncateAddress(address);
 
   const receivedIcon = theme.mode === DARK ? ReceivedIconDark : ReceivedIconLight;
   const sentIcon = theme.mode === DARK ? SentIconDark : SentIconLight;
@@ -115,11 +117,18 @@ const Component = ({
             <RowComponent alignItems='center'>
               <Icon src={isReceived ? receivedIcon : sentIcon} alt='Transaction Type Icon' />
               <TransactionColumn>
-                <TransactionTypeLabel isReceived={isReceived} value={type} isBold />
-                <TransactionTime value={transactionTime} />
+                <TransactionTypeLabel
+                  isReceived={isReceived}
+                  value={type}
+                  isBold
+                />
+                <TransactionLabel
+                  value={transactionTime}
+                  isReceived={isReceived}
+                />
               </TransactionColumn>
             </RowComponent>
-            <TransactionAddress value={transactionAddress} />
+            <TransactionAddress value={address} />
           </RowComponent>
           <ColumnComponent alignItems='flex-end'>
             <TextComponent
@@ -127,14 +136,11 @@ const Component = ({
               value={transactionValueInZec}
               color={
                 isReceived
-                  ? theme.colors.transactionReceived({ theme })
-                  : theme.colors.transactionSent({ theme })
+                  ? theme.colors.transactionReceived
+                  : theme.colors.transactionSent
               }
             />
-            <TextComponent
-              value={transactionValueInUsd}
-              color={theme.colors.inactiveItem({ theme })}
-            />
+            <TransactionLabel value={transactionValueInUsd} />
           </ColumnComponent>
         </Wrapper>
       )}

app/theme/colors/dark.js

@@ -68,6 +68,8 @@ export const DARK_COLORS = {
   transactionDetailsRowHover: '#1D1D1D',
   transactionDetailsDivider: '#3A3A3A',
   transactionDetailsLabel: '#777777',
+  transactionLabelText: '#777777',
+  transactionLabelTextHovered: white,
 
   // Status Pill
   statusPillLabel: '#727272',

app/theme/colors/light.js

@@ -65,12 +65,14 @@ export const LIGHT_COLORS = {
   transactionItemHoverBg: whiteHover,
   transactionItemBorder: border,
   transactionItemAddress: '#666666',
-  transactionItemAddressHover: '#666666',
+  transactionItemAddressHover: black,
   transactionDetailsShadow: `0px 0px 1px 0px ${black}`,
   transactionDetailsBg: white,
   transactionDetailsRowHover: whiteHover,
   transactionDetailsDivider: border,
   transactionDetailsLabel: '#999999',
+  transactionLabelText: '#666666',
+  transactionLabelTextHovered: black,
 
   // Status Pill
   statusPillLabel: text,

flow-custom-typedefs/theme.js

@@ -60,6 +60,8 @@ type Colors = {
   transactionDetailsRowHover: ThemeSet,
   transactionDetailsDivider: ThemeSet,
   transactionDetailsLabel: ThemeSet,
+  transactionLabelText: ThemeSet,
+  transactionLabelTextHovered: ThemeSet,
 
   // Status Pill
   statusPillBg: ThemeSet,