From 94828c600cad576a3bbaa8791e8f853fa589b6ab Mon Sep 17 00:00:00 2001 From: Jon Tzeng Date: Thu, 10 Oct 2024 10:39:42 -0700 Subject: [PATCH] Update `NotificationCard` to UI4 styling --- CHANGELOG.md | 1 + .../__snapshots__/SendScene2.ui.test.tsx.snap | 3842 +++++++++-------- .../SwapConfirmationScene.test.tsx.snap | 381 +- .../SwapCreateScene.test.tsx.snap | 381 +- .../SwapSuccessScene.test.tsx.snap | 271 +- .../TransactionDetailsScene.test.tsx.snap | 762 ++-- src/components/common/BlurBackground.tsx | 2 + .../notification/NotificationCard.tsx | 74 +- .../notification/NotificationView.tsx | 2 +- src/theme/variables/edgeDark.ts | 12 + src/theme/variables/edgeLight.ts | 12 + src/theme/variables/testDark.ts | 12 + src/theme/variables/testLight.ts | 12 + src/types/Theme.ts | 1 + 14 files changed, 3071 insertions(+), 2694 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index bfa2e756119..b2c1df54923 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - changed: Enable Ethereum staking - changed: Navigate to wallet list after restoring wallets +- changed: Update `NotificationCard` to UI4 styling - fixed: Use account default fiat for transaction fee display in `SweepPrivateKeyCalculateFeeScene` ## 4.15.0 diff --git a/src/__tests__/scenes/__snapshots__/SendScene2.ui.test.tsx.snap b/src/__tests__/scenes/__snapshots__/SendScene2.ui.test.tsx.snap index c68179725b9..8c908d2acc2 100644 --- a/src/__tests__/scenes/__snapshots__/SendScene2.ui.test.tsx.snap +++ b/src/__tests__/scenes/__snapshots__/SendScene2.ui.test.tsx.snap @@ -1340,7 +1340,7 @@ exports[`SendScene2 1 spendTarget 1`] = ` [ { "alignSelf": "center", - "bottom": 0, + "bottom": 22, "justifyContent": "flex-end", "paddingHorizontal": 11, "position": "absolute", @@ -1362,65 +1362,26 @@ exports[`SendScene2 1 spendTarget 1`] = ` > - @@ -1428,150 +1389,210 @@ exports[`SendScene2 1 spendTarget 1`] = ` style={ [ { - "overflow": "hidden", + "alignItems": "center", + "backgroundColor": "rgba(255, 255, 255, .1)", + "borderRadius": 11, + "flexDirection": "row", + "justifyContent": "center", + "marginTop": 0, + "padding": 11, }, { - "height": 56, - "marginRight": 6, - "width": 56, + "opacity": 1, }, ] } > - - - - - IP Validation Protection - - + + + + + IP Validation Protection + + + Edge prevents logins from unrecognized IP addresses. Tap to learn more. + + + + - Edge prevents logins from unrecognized IP addresses. Tap to learn more. - - - - - -  - - + "margin": 6, + "opacity": 1, + } + } + > + +  + + + + , @@ -3108,7 +3129,7 @@ exports[`SendScene2 1 spendTarget with info tiles 1`] = ` [ { "alignSelf": "center", - "bottom": 0, + "bottom": 22, "justifyContent": "flex-end", "paddingHorizontal": 11, "position": "absolute", @@ -3130,65 +3151,26 @@ exports[`SendScene2 1 spendTarget with info tiles 1`] = ` > - @@ -3196,150 +3178,210 @@ exports[`SendScene2 1 spendTarget with info tiles 1`] = ` style={ [ { - "overflow": "hidden", + "alignItems": "center", + "backgroundColor": "rgba(255, 255, 255, .1)", + "borderRadius": 11, + "flexDirection": "row", + "justifyContent": "center", + "marginTop": 0, + "padding": 11, }, { - "height": 56, - "marginRight": 6, - "width": 56, + "opacity": 1, }, ] } > - - - - - IP Validation Protection - - + + + + + IP Validation Protection + + + Edge prevents logins from unrecognized IP addresses. Tap to learn more. + + + + - Edge prevents logins from unrecognized IP addresses. Tap to learn more. - - - - - -  - - + "margin": 6, + "opacity": 1, + } + } + > + +  + + + + , @@ -4853,7 +4895,7 @@ exports[`SendScene2 2 spendTargets 1`] = ` [ { "alignSelf": "center", - "bottom": 0, + "bottom": 22, "justifyContent": "flex-end", "paddingHorizontal": 11, "position": "absolute", @@ -4875,65 +4917,26 @@ exports[`SendScene2 2 spendTargets 1`] = ` > - @@ -4941,161 +4944,221 @@ exports[`SendScene2 2 spendTargets 1`] = ` style={ [ { - "overflow": "hidden", + "alignItems": "center", + "backgroundColor": "rgba(255, 255, 255, .1)", + "borderRadius": 11, + "flexDirection": "row", + "justifyContent": "center", + "marginTop": 0, + "padding": 11, }, { - "height": 56, - "marginRight": 6, - "width": 56, + "opacity": 1, }, ] } > - - - - - IP Validation Protection - - + + + - Edge prevents logins from unrecognized IP addresses. Tap to learn more. - - - - - -  - - - - - , -] -`; - -exports[`SendScene2 2 spendTargets hide tiles 1`] = ` -[ - + + IP Validation Protection + + + Edge prevents logins from unrecognized IP addresses. Tap to learn more. + + + + + +  + + + + + + + , +] +`; + +exports[`SendScene2 2 spendTargets hide tiles 1`] = ` +[ + - @@ -6383,150 +6407,210 @@ exports[`SendScene2 2 spendTargets hide tiles 1`] = ` style={ [ { - "overflow": "hidden", + "alignItems": "center", + "backgroundColor": "rgba(255, 255, 255, .1)", + "borderRadius": 11, + "flexDirection": "row", + "justifyContent": "center", + "marginTop": 0, + "padding": 11, }, { - "height": 56, - "marginRight": 6, - "width": 56, + "opacity": 1, }, ] } > - - - - - IP Validation Protection - - + + + + + IP Validation Protection + + + Edge prevents logins from unrecognized IP addresses. Tap to learn more. + + + + - Edge prevents logins from unrecognized IP addresses. Tap to learn more. - - - - - -  - - + "margin": 6, + "opacity": 1, + } + } + > + +  + + + + , @@ -7713,7 +7797,7 @@ exports[`SendScene2 2 spendTargets hide tiles 2`] = ` [ { "alignSelf": "center", - "bottom": 0, + "bottom": 22, "justifyContent": "flex-end", "paddingHorizontal": 11, "position": "absolute", @@ -7735,65 +7819,26 @@ exports[`SendScene2 2 spendTargets hide tiles 2`] = ` > - @@ -7801,150 +7846,210 @@ exports[`SendScene2 2 spendTargets hide tiles 2`] = ` style={ [ { - "overflow": "hidden", + "alignItems": "center", + "backgroundColor": "rgba(255, 255, 255, .1)", + "borderRadius": 11, + "flexDirection": "row", + "justifyContent": "center", + "marginTop": 0, + "padding": 11, }, { - "height": 56, - "marginRight": 6, - "width": 56, + "opacity": 1, }, ] } > - - - - - IP Validation Protection - - + + + + + IP Validation Protection + + + Edge prevents logins from unrecognized IP addresses. Tap to learn more. + + + + - Edge prevents logins from unrecognized IP addresses. Tap to learn more. - - - - - -  - - + "margin": 6, + "opacity": 1, + } + } + > + +  + + + + , @@ -8968,7 +9073,7 @@ exports[`SendScene2 2 spendTargets hide tiles 3`] = ` [ { "alignSelf": "center", - "bottom": 0, + "bottom": 22, "justifyContent": "flex-end", "paddingHorizontal": 11, "position": "absolute", @@ -8990,65 +9095,26 @@ exports[`SendScene2 2 spendTargets hide tiles 3`] = ` > - @@ -9056,150 +9122,210 @@ exports[`SendScene2 2 spendTargets hide tiles 3`] = ` style={ [ { - "overflow": "hidden", + "alignItems": "center", + "backgroundColor": "rgba(255, 255, 255, .1)", + "borderRadius": 11, + "flexDirection": "row", + "justifyContent": "center", + "marginTop": 0, + "padding": 11, }, { - "height": 56, - "marginRight": 6, - "width": 56, + "opacity": 1, }, ] } > - - - - - IP Validation Protection - - + + + + + IP Validation Protection + + + Edge prevents logins from unrecognized IP addresses. Tap to learn more. + + + + - Edge prevents logins from unrecognized IP addresses. Tap to learn more. - - - - - -  - - + "margin": 6, + "opacity": 1, + } + } + > + +  + + + + , @@ -10507,7 +10633,7 @@ exports[`SendScene2 2 spendTargets lock tiles 1`] = ` [ { "alignSelf": "center", - "bottom": 0, + "bottom": 22, "justifyContent": "flex-end", "paddingHorizontal": 11, "position": "absolute", @@ -10529,65 +10655,26 @@ exports[`SendScene2 2 spendTargets lock tiles 1`] = ` > - @@ -10595,150 +10682,210 @@ exports[`SendScene2 2 spendTargets lock tiles 1`] = ` style={ [ { - "overflow": "hidden", + "alignItems": "center", + "backgroundColor": "rgba(255, 255, 255, .1)", + "borderRadius": 11, + "flexDirection": "row", + "justifyContent": "center", + "marginTop": 0, + "padding": 11, }, { - "height": 56, - "marginRight": 6, - "width": 56, + "opacity": 1, }, ] } > - - - - - IP Validation Protection - - + + + - Edge prevents logins from unrecognized IP addresses. Tap to learn more. - - - - - + + IP Validation Protection + + + Edge prevents logins from unrecognized IP addresses. Tap to learn more. + + + + -  - - + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } + } + accessible={true} + collapsable={false} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ + { + "margin": 6, + "opacity": 1, + } + } + > + +  + + + + , @@ -12004,7 +12151,7 @@ exports[`SendScene2 2 spendTargets lock tiles 2`] = ` [ { "alignSelf": "center", - "bottom": 0, + "bottom": 22, "justifyContent": "flex-end", "paddingHorizontal": 11, "position": "absolute", @@ -12026,65 +12173,26 @@ exports[`SendScene2 2 spendTargets lock tiles 2`] = ` > - @@ -12092,150 +12200,210 @@ exports[`SendScene2 2 spendTargets lock tiles 2`] = ` style={ [ { - "overflow": "hidden", + "alignItems": "center", + "backgroundColor": "rgba(255, 255, 255, .1)", + "borderRadius": 11, + "flexDirection": "row", + "justifyContent": "center", + "marginTop": 0, + "padding": 11, }, { - "height": 56, - "marginRight": 6, - "width": 56, + "opacity": 1, }, ] } > - - - - - IP Validation Protection - - + + + + + IP Validation Protection + + + Edge prevents logins from unrecognized IP addresses. Tap to learn more. + + + + - Edge prevents logins from unrecognized IP addresses. Tap to learn more. - - - - - -  - - + "margin": 6, + "opacity": 1, + } + } + > + +  + + + + , @@ -13435,7 +13603,7 @@ exports[`SendScene2 2 spendTargets lock tiles 3`] = ` [ { "alignSelf": "center", - "bottom": 0, + "bottom": 22, "justifyContent": "flex-end", "paddingHorizontal": 11, "position": "absolute", @@ -13457,65 +13625,26 @@ exports[`SendScene2 2 spendTargets lock tiles 3`] = ` > - @@ -13523,150 +13652,210 @@ exports[`SendScene2 2 spendTargets lock tiles 3`] = ` style={ [ { - "overflow": "hidden", + "alignItems": "center", + "backgroundColor": "rgba(255, 255, 255, .1)", + "borderRadius": 11, + "flexDirection": "row", + "justifyContent": "center", + "marginTop": 0, + "padding": 11, }, { - "height": 56, - "marginRight": 6, - "width": 56, + "opacity": 1, }, ] } > - - - - - IP Validation Protection - - + + + + + IP Validation Protection + + + Edge prevents logins from unrecognized IP addresses. Tap to learn more. + + + + - Edge prevents logins from unrecognized IP addresses. Tap to learn more. - - - - - -  - - + "margin": 6, + "opacity": 1, + } + } + > + +  + + + + , @@ -14849,7 +15038,7 @@ exports[`SendScene2 Render SendScene 1`] = ` [ { "alignSelf": "center", - "bottom": 0, + "bottom": 22, "justifyContent": "flex-end", "paddingHorizontal": 11, "position": "absolute", @@ -14871,65 +15060,26 @@ exports[`SendScene2 Render SendScene 1`] = ` > - @@ -14937,150 +15087,210 @@ exports[`SendScene2 Render SendScene 1`] = ` style={ [ { - "overflow": "hidden", + "alignItems": "center", + "backgroundColor": "rgba(255, 255, 255, .1)", + "borderRadius": 11, + "flexDirection": "row", + "justifyContent": "center", + "marginTop": 0, + "padding": 11, }, { - "height": 56, - "marginRight": 6, - "width": 56, + "opacity": 1, }, ] } > - - - - - IP Validation Protection - - + + + + + IP Validation Protection + + + Edge prevents logins from unrecognized IP addresses. Tap to learn more. + + + + - Edge prevents logins from unrecognized IP addresses. Tap to learn more. - - - - - -  - - + "margin": 6, + "opacity": 1, + } + } + > + +  + + + + , diff --git a/src/__tests__/scenes/__snapshots__/SwapConfirmationScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/SwapConfirmationScene.test.tsx.snap index 1cfb72d9a32..05d16daa469 100644 --- a/src/__tests__/scenes/__snapshots__/SwapConfirmationScene.test.tsx.snap +++ b/src/__tests__/scenes/__snapshots__/SwapConfirmationScene.test.tsx.snap @@ -1836,7 +1836,7 @@ exports[`SwapConfirmationScene should render with loading props 1`] = ` [ { "alignSelf": "center", - "bottom": 0, + "bottom": 22, "justifyContent": "flex-end", "paddingHorizontal": 11, "position": "absolute", @@ -1858,65 +1858,26 @@ exports[`SwapConfirmationScene should render with loading props 1`] = ` > - @@ -1924,150 +1885,210 @@ exports[`SwapConfirmationScene should render with loading props 1`] = ` style={ [ { - "overflow": "hidden", + "alignItems": "center", + "backgroundColor": "rgba(255, 255, 255, .1)", + "borderRadius": 11, + "flexDirection": "row", + "justifyContent": "center", + "marginTop": 0, + "padding": 11, }, { - "height": 56, - "marginRight": 6, - "width": 56, + "opacity": 1, }, ] } > - - - - - IP Validation Protection - - + + + + + IP Validation Protection + + + Edge prevents logins from unrecognized IP addresses. Tap to learn more. + + + + - Edge prevents logins from unrecognized IP addresses. Tap to learn more. - - - - - -  - - + "margin": 6, + "opacity": 1, + } + } + > + +  + + + + , diff --git a/src/__tests__/scenes/__snapshots__/SwapCreateScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/SwapCreateScene.test.tsx.snap index a53cef1190c..160d797f719 100644 --- a/src/__tests__/scenes/__snapshots__/SwapCreateScene.test.tsx.snap +++ b/src/__tests__/scenes/__snapshots__/SwapCreateScene.test.tsx.snap @@ -603,7 +603,7 @@ exports[`SwapCreateScene should render with loading props 1`] = ` [ { "alignSelf": "center", - "bottom": 0, + "bottom": 22, "justifyContent": "flex-end", "paddingHorizontal": 11, "position": "absolute", @@ -625,65 +625,26 @@ exports[`SwapCreateScene should render with loading props 1`] = ` > - @@ -691,150 +652,210 @@ exports[`SwapCreateScene should render with loading props 1`] = ` style={ [ { - "overflow": "hidden", + "alignItems": "center", + "backgroundColor": "rgba(255, 255, 255, .1)", + "borderRadius": 11, + "flexDirection": "row", + "justifyContent": "center", + "marginTop": 0, + "padding": 11, }, { - "height": 56, - "marginRight": 6, - "width": 56, + "opacity": 1, }, ] } > - - - - - IP Validation Protection - - + + + + + IP Validation Protection + + + Edge prevents logins from unrecognized IP addresses. Tap to learn more. + + + + - Edge prevents logins from unrecognized IP addresses. Tap to learn more. - - - - - -  - - + "margin": 6, + "opacity": 1, + } + } + > + +  + + + + , diff --git a/src/__tests__/scenes/__snapshots__/SwapSuccessScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/SwapSuccessScene.test.tsx.snap index e8e07942f8d..ddbde0ac6f7 100644 --- a/src/__tests__/scenes/__snapshots__/SwapSuccessScene.test.tsx.snap +++ b/src/__tests__/scenes/__snapshots__/SwapSuccessScene.test.tsx.snap @@ -338,7 +338,7 @@ exports[`SwapSuccessSceneComponent should render with loading props 1`] = ` [ { "alignSelf": "center", - "bottom": 0, + "bottom": 22, "justifyContent": "flex-end", "paddingHorizontal": 11, "position": "absolute", @@ -360,65 +360,26 @@ exports[`SwapSuccessSceneComponent should render with loading props 1`] = ` > - @@ -426,93 +387,153 @@ exports[`SwapSuccessSceneComponent should render with loading props 1`] = ` style={ [ { - "overflow": "hidden", + "alignItems": "center", + "backgroundColor": "rgba(255, 255, 255, .1)", + "borderRadius": 11, + "flexDirection": "row", + "justifyContent": "center", + "marginTop": 0, + "padding": 11, }, { - "height": 56, - "marginRight": 6, - "width": 56, + "opacity": 1, }, ] } > - - - - - Guest Account - - + + + - Tap to create a username and password - + "flexShrink": 1, + "width": "100%", + } + } + > + + Guest Account + + + Tap to create a username and password + + + - + , diff --git a/src/__tests__/scenes/__snapshots__/TransactionDetailsScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/TransactionDetailsScene.test.tsx.snap index 7b808a23f29..964dda40c87 100644 --- a/src/__tests__/scenes/__snapshots__/TransactionDetailsScene.test.tsx.snap +++ b/src/__tests__/scenes/__snapshots__/TransactionDetailsScene.test.tsx.snap @@ -2152,7 +2152,7 @@ exports[`TransactionDetailsScene should render 1`] = ` [ { "alignSelf": "center", - "bottom": 0, + "bottom": 22, "justifyContent": "flex-end", "paddingHorizontal": 11, "position": "absolute", @@ -2174,65 +2174,26 @@ exports[`TransactionDetailsScene should render 1`] = ` > - @@ -2240,150 +2201,210 @@ exports[`TransactionDetailsScene should render 1`] = ` style={ [ { - "overflow": "hidden", + "alignItems": "center", + "backgroundColor": "rgba(255, 255, 255, .1)", + "borderRadius": 11, + "flexDirection": "row", + "justifyContent": "center", + "marginTop": 0, + "padding": 11, }, { - "height": 56, - "marginRight": 6, - "width": 56, + "opacity": 1, }, ] } > - - - - - IP Validation Protection - - + + + + + IP Validation Protection + + + Edge prevents logins from unrecognized IP addresses. Tap to learn more. + + + + - Edge prevents logins from unrecognized IP addresses. Tap to learn more. - - - - - -  - - + "margin": 6, + "opacity": 1, + } + } + > + +  + + + + , @@ -4542,7 +4563,7 @@ exports[`TransactionDetailsScene should render with negative nativeAmount and fi [ { "alignSelf": "center", - "bottom": 0, + "bottom": 22, "justifyContent": "flex-end", "paddingHorizontal": 11, "position": "absolute", @@ -4564,65 +4585,26 @@ exports[`TransactionDetailsScene should render with negative nativeAmount and fi > - @@ -4630,150 +4612,210 @@ exports[`TransactionDetailsScene should render with negative nativeAmount and fi style={ [ { - "overflow": "hidden", + "alignItems": "center", + "backgroundColor": "rgba(255, 255, 255, .1)", + "borderRadius": 11, + "flexDirection": "row", + "justifyContent": "center", + "marginTop": 0, + "padding": 11, }, { - "height": 56, - "marginRight": 6, - "width": 56, + "opacity": 1, }, ] } > - - - - - IP Validation Protection - - + + + + + IP Validation Protection + + + Edge prevents logins from unrecognized IP addresses. Tap to learn more. + + + + - Edge prevents logins from unrecognized IP addresses. Tap to learn more. - - - - - -  - - + "margin": 6, + "opacity": 1, + } + } + > + +  + + + + , diff --git a/src/components/common/BlurBackground.tsx b/src/components/common/BlurBackground.tsx index 0108caeeaa3..14372123c93 100644 --- a/src/components/common/BlurBackground.tsx +++ b/src/components/common/BlurBackground.tsx @@ -16,6 +16,8 @@ export const BlurBackground = () => { const getStyles = cacheStyles((theme: Theme) => ({ blurView: { ...StyleSheet.absoluteFillObject, + // iOS needs this to properly round the container, while Android doesn't: + borderRadius: theme.cardBorderRadius, // We need this backgroundColor because Android applies an overlay to the // entire screen for the BlurView by default. We change this default // behavior with the transparent overlayColor, so we add this background diff --git a/src/components/notification/NotificationCard.tsx b/src/components/notification/NotificationCard.tsx index 6b147683e1f..a9f15a490ae 100644 --- a/src/components/notification/NotificationCard.tsx +++ b/src/components/notification/NotificationCard.tsx @@ -1,12 +1,14 @@ import * as React from 'react' import { Platform, View } from 'react-native' import FastImage from 'react-native-fast-image' +import { ShadowedView } from 'react-native-fast-shadow' import { cacheStyles } from 'react-native-patina' import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated' import AntDesignIcon from 'react-native-vector-icons/AntDesign' import { useHandler } from '../../hooks/useHandler' import { getThemedIconUri } from '../../util/CdnUris' +import { BlurBackground } from '../common/BlurBackground' import { EdgeTouchableOpacity } from '../common/EdgeTouchableOpacity' import { styled } from '../hoc/styled' import { Theme, useTheme } from '../services/ThemeContext' @@ -73,62 +75,70 @@ const NotificationCardComponent = (props: Props) => { }, [handleNullComponent, opacity, visible]) return nullComponent ? null : ( - - - - - {title} - {/* Android font scaling is too aggressive. + + + + + + + {title} + {/* Android font scaling is too aggressive. Android prioritizes font shrinking much more before trying to add newlines, while iOS prioritizes newlines before shrinking text. We already use smaller text here so we shouldn't shrink it more */} - - {message} - - - - {onClose != null ? ( - - - - ) : null} - + + {message} + + + + {onClose != null ? ( + + + + ) : null} + + ) } const getStyles = cacheStyles((theme: Theme) => ({ cardContainer: { - ...Platform.select({ - ios: { - shadowOffset: { width: 0, height: 0 }, - shadowOpacity: 0.7, - shadowRadius: theme.rem(0.5) - }, - android: { - elevation: 5 - } - }), alignItems: 'center', - backgroundColor: theme.modal, - borderRadius: theme.rem(0.5), + backgroundColor: theme.cardBaseColor, + borderRadius: theme.cardBorderRadius, flexDirection: 'row', justifyContent: 'center', padding: theme.rem(0.5), - margin: theme.rem(0.5), marginTop: 0 + }, + shadowIos: { + borderRadius: theme.cardBorderRadius, + marginVertical: theme.rem(0.25), + // TODO: Design approval that we don't need to make ios/android specific + // adjustments here. + ...theme.notifcationCardShadow + }, + shadowAndroid: { + overflow: 'hidden', + borderRadius: theme.cardBorderRadius, + marginVertical: theme.rem(0.25), + // TODO: Design approval that we don't need to make ios/android specific + // adjustments here. + ...theme.notifcationCardShadow } })) const Icon = styled(FastImage)(theme => ({ - height: theme.rem(2.5), - width: theme.rem(2.5), + height: theme.rem(3.5), + width: theme.rem(3.5), marginRight: theme.rem(0.25) })) const TitleText = styled(EdgeText)<{ type: 'warning' | 'info' }>(theme => props => ({ color: props.type === 'warning' ? theme.warningIcon : theme.primaryText, marginHorizontal: theme.rem(0.25), + marginBottom: theme.rem(0.25), fontSize: theme.rem(0.75), fontFamily: theme.fontFaceBold })) diff --git a/src/components/notification/NotificationView.tsx b/src/components/notification/NotificationView.tsx index 9e238612985..ba10a5fb15f 100644 --- a/src/components/notification/NotificationView.tsx +++ b/src/components/notification/NotificationView.tsx @@ -193,7 +193,7 @@ const NotificationCardsContainer = styled(Animated.View)<{ hasTabs: boolean; ins paddingHorizontal: theme.rem(0.5), alignSelf: 'center', justifyContent: 'flex-end', - bottom: 0 + bottom: theme.rem(0.5) }, useAnimatedStyle(() => { const maybeMenuBarHeight = hasTabs ? interpolate(footerOpenRatio.value, [0, 1], [MIN_TAB_BAR_HEIGHT, MAX_TAB_BAR_HEIGHT]) : 0 diff --git a/src/theme/variables/edgeDark.ts b/src/theme/variables/edgeDark.ts index 15aa8fd1454..4fa596b8cf2 100644 --- a/src/theme/variables/edgeDark.ts +++ b/src/theme/variables/edgeDark.ts @@ -476,6 +476,18 @@ export const edgeDark: Theme = { elevation: 0 }, + notifcationCardShadow: { + shadowColor: palette.black, + shadowOffset: { + width: 3, + height: 3 + }, + shadowOpacity: 0.6, + shadowRadius: 4, + // Disable Android shadow + elevation: 0 + }, + dropdownListShadow: { shadowColor: 'white', shadowOffset: { diff --git a/src/theme/variables/edgeLight.ts b/src/theme/variables/edgeLight.ts index 101f1ebd4de..24a0b39d219 100644 --- a/src/theme/variables/edgeLight.ts +++ b/src/theme/variables/edgeLight.ts @@ -431,6 +431,18 @@ export const edgeLight: Theme = { elevation: 0 }, + notifcationCardShadow: { + shadowColor: palette.black, + shadowOffset: { + width: 3, + height: 3 + }, + shadowOpacity: 0.6, + shadowRadius: 4, + // Disable Android shadow + elevation: 0 + }, + dropdownListShadow: { shadowColor: 'white', shadowOffset: { diff --git a/src/theme/variables/testDark.ts b/src/theme/variables/testDark.ts index 9a3ed5625d3..1c0fbb66e28 100644 --- a/src/theme/variables/testDark.ts +++ b/src/theme/variables/testDark.ts @@ -472,6 +472,18 @@ export const testDark: Theme = { elevation: 0 }, + notifcationCardShadow: { + shadowColor: palette.black, + shadowOffset: { + width: 3, + height: 3 + }, + shadowOpacity: 0.6, + shadowRadius: 4, + // Disable Android shadow + elevation: 0 + }, + dropdownListShadow: { shadowColor: 'white', shadowOffset: { diff --git a/src/theme/variables/testLight.ts b/src/theme/variables/testLight.ts index 6d40df81ef0..bfb9fcc8f5b 100644 --- a/src/theme/variables/testLight.ts +++ b/src/theme/variables/testLight.ts @@ -431,6 +431,18 @@ export const testLight: Theme = { elevation: 0 }, + notifcationCardShadow: { + shadowColor: palette.black, + shadowOffset: { + width: 3, + height: 3 + }, + shadowOpacity: 0.6, + shadowRadius: 4, + // Disable Android shadow + elevation: 0 + }, + dropdownListShadow: { shadowColor: 'white', shadowOffset: { diff --git a/src/types/Theme.ts b/src/types/Theme.ts index bb22ada6c1d..5448cb56d57 100644 --- a/src/types/Theme.ts +++ b/src/types/Theme.ts @@ -443,6 +443,7 @@ export interface Theme { // Shadows iconShadow: ThemeShadowParams dropdownListShadow: ThemeShadowParams + notifcationCardShadow: ThemeShadowParams // Basic Card Styles cardBaseColor: string