account for light/dark mode shadows and added android shadows

rainbow-me · Oct 11, 2023 · c8eb74c · c8eb74c
1 parent 247b81d
commit c8eb74c
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 21 deletions.
diff --git a/src/screens/rewards/components/RewardsContent.tsx b/src/screens/rewards/components/RewardsContent.tsx
@@ -6,7 +6,7 @@ import { RewardsStats } from './RewardsStats';
 import { RewardsFakeContent } from '@/screens/rewards/components/RewardsFakeContent';
 import { RewardsProgramStatus } from '@/screens/rewards/components/RewardsProgramStatus';
 import * as i18n from '@/languages';
-import InfoAlert from '@/components/info-alert/info-alert';
+import { InfoAlert } from '@/components/info-alert/info-alert';
 import { Box, Text } from '@/design-system';
 
 type Props = {

diff --git a/src/screens/rewards/components/RewardsSectionCard.tsx b/src/screens/rewards/components/RewardsSectionCard.tsx
@@ -1,6 +1,8 @@
 import React, { PropsWithChildren } from 'react';
 import { View } from 'react-native';
 import { Box, Space, globalColors } from '@/design-system';
+import { IS_ANDROID, IS_IOS } from '@/env';
+import { useTheme } from '@/theme';
 
 type Props = {
   paddingVertical?: Space;
@@ -12,22 +14,36 @@ export function RewardsSectionCard({
   paddingVertical = '20px',
   paddingHorizontal = '20px',
 }: PropsWithChildren<Props>) {
+  const { isDarkMode } = useTheme();
+
   return (
     <View
-      style={{
-        shadowColor: globalColors.grey100,
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.02,
-        shadowRadius: 3,
-      }}
+      style={
+        IS_IOS
+          ? {
+              shadowColor: globalColors.grey100,
+              shadowOffset: { width: 0, height: 2 },
+              shadowOpacity: 0.02,
+              shadowRadius: 3,
+            }
+          : {}
+      }
     >
       <View
-        style={{
-          shadowColor: globalColors.grey100,
-          shadowOffset: { width: 0, height: 4 },
-          shadowOpacity: 0.08,
-          shadowRadius: 6,
-        }}
+        style={
+          IS_IOS
+            ? {
+                shadowColor: globalColors.grey100,
+                shadowOffset: { width: 0, height: 4 },
+                shadowOpacity: isDarkMode ? 0.24 : 0.08,
+                shadowRadius: 6,
+              }
+            : {
+                shadowColor: globalColors.grey100,
+                elevation: 8,
+                shadowOpacity: isDarkMode ? 1 : 0.55,
+              }
+        }
       >
         <Box
           background="surfaceSecondaryElevated"

diff --git a/src/screens/rewards/components/RewardsStats.tsx b/src/screens/rewards/components/RewardsStats.tsx
@@ -28,13 +28,13 @@ export const RewardsStats: React.FC<Props> = ({
     (state: AppState) => state.settings.nativeCurrency
   );
 
-  const swapsData = useMemo(() => {
-    return actions.find(action => action.type === RewardStatsActionType.Swap);
-  }, [actions]);
+  const swapsData = actions.find(
+    action => action.type === RewardStatsActionType.Swap
+  );
 
-  const bridgeData = useMemo(() => {
-    return actions.find(action => action.type === RewardStatsActionType.Bridge);
-  }, [actions]);
+  const bridgeData = actions.find(
+    action => action.type === RewardStatsActionType.Bridge
+  );
 
   const getSwapsValue = useMemo(() => {
     if (assetPrice) {
@@ -46,7 +46,12 @@ export const RewardsStats: React.FC<Props> = ({
     }
 
     return convertAmountToNativeDisplay(swapsData?.amount?.usd || '0', 'USD');
-  }, [swapsData, assetPrice, nativeCurrency]);
+  }, [
+    assetPrice,
+    nativeCurrency,
+    swapsData?.amount?.token,
+    swapsData?.amount?.usd,
+  ]);
 
   const getBridgeValue = useMemo(() => {
     if (assetPrice) {
@@ -58,7 +63,12 @@ export const RewardsStats: React.FC<Props> = ({
     }
 
     return convertAmountToNativeDisplay(bridgeData?.amount?.usd || '0', 'USD');
-  }, [bridgeData, assetPrice, nativeCurrency]);
+  }, [
+    assetPrice,
+    nativeCurrency,
+    bridgeData?.amount?.token,
+    bridgeData?.amount?.usd,
+  ]);
 
   return (
     <Box width="full" paddingBottom="12px">