From 1ee3b11971d7e137d4508c909774cf69a6ef65d5 Mon Sep 17 00:00:00 2001 From: Saul Carlin Date: Fri, 20 Sep 2024 11:30:15 -0700 Subject: [PATCH] android black and white styles --- .../Chat/Message/MessageContextMenu.tsx | 6 ++ components/Onboarding/OnboardingComponent.tsx | 2 +- components/Onboarding/UserProfile.tsx | 2 +- styles/colors/index.ts | 70 +++++++++---------- utils/contextMenu/constants.ts | 2 +- 5 files changed, 44 insertions(+), 38 deletions(-) diff --git a/components/Chat/Message/MessageContextMenu.tsx b/components/Chat/Message/MessageContextMenu.tsx index 435e9b4d8..3c405ecf0 100644 --- a/components/Chat/Message/MessageContextMenu.tsx +++ b/components/Chat/Message/MessageContextMenu.tsx @@ -1,4 +1,5 @@ import TableView, { TableViewItemType } from "@components/TableView/TableView"; +import { backgroundColor } from "@styles/colors"; import { calculateMenuHeight } from "@utils/contextMenu/calculateMenuHeight"; import { AUXILIARY_VIEW_MIN_HEIGHT, @@ -247,6 +248,11 @@ const BackdropComponent: FC<{ style={{ // flex: 1, width: ITEM_WIDTH, + backgroundColor: + Platform.OS === "android" + ? backgroundColor(colorScheme) + : undefined, + borderRadius: Platform.OS === "android" ? 10 : undefined, }} items={items} /> diff --git a/components/Onboarding/OnboardingComponent.tsx b/components/Onboarding/OnboardingComponent.tsx index 8137df907..cda7b8b21 100644 --- a/components/Onboarding/OnboardingComponent.tsx +++ b/components/Onboarding/OnboardingComponent.tsx @@ -172,7 +172,7 @@ const useStyles = (showTerms: boolean) => { backButton: { paddingVertical: 8, marginTop: insets.top, - width: Platform.OS === "android" ? 40 : undefined, + width: Platform.OS === "android" ? 100 : undefined, marginLeft: Platform.OS === "android" ? 10 : undefined, }, picto: { diff --git a/components/Onboarding/UserProfile.tsx b/components/Onboarding/UserProfile.tsx index 1196e8891..4a71cdc38 100644 --- a/components/Onboarding/UserProfile.tsx +++ b/components/Onboarding/UserProfile.tsx @@ -376,7 +376,7 @@ const useStyles = (colorScheme: any, errorMessage: any) => }, usernameSuffixLabel: { position: "absolute", - right: 10, + right: Platform.OS === "ios" ? 10 : 46, top: 12, fontSize: 16, color: textSecondaryColor(colorScheme), diff --git a/styles/colors/index.ts b/styles/colors/index.ts index ceed2e25a..b07fb91c8 100644 --- a/styles/colors/index.ts +++ b/styles/colors/index.ts @@ -225,17 +225,17 @@ export const requestsTextColor = (colorScheme: ColorSchemeName) => { // Generated using https://callstack.github.io/react-native-paper/docs/guides/theming#theme-properties const MaterialLightColors = { - primary: "rgb(135, 44, 204)", + primary: "rgb(0,0,0)", onPrimary: "rgb(255, 255, 255)", - primaryContainer: "rgb(242, 218, 255)", - onPrimaryContainer: "rgb(46, 0, 78)", - secondary: "rgb(102, 90, 110)", + primaryContainer: "rgb(0,0,0)", + onPrimaryContainer: "rgb(255,255,255)", + secondary: "rgb(102, 102, 102)", onSecondary: "rgb(255, 255, 255)", - secondaryContainer: "rgb(238, 221, 246)", - onSecondaryContainer: "rgb(33, 24, 41)", - tertiary: "rgb(0, 103, 128)", + secondaryContainer: "rgb(220, 220, 220)", + onSecondaryContainer: "rgb(33, 33, 33)", + tertiary: "rgb(75, 75, 75)", onTertiary: "rgb(255, 255, 255)", - tertiaryContainer: "rgb(183, 234, 255)", + tertiaryContainer: "rgb(188, 188, 188)", onTertiaryContainer: "rgb(0, 31, 40)", error: "rgb(186, 26, 26)", onError: "rgb(255, 255, 255)", @@ -246,21 +246,21 @@ const MaterialLightColors = { surface: "rgb(255, 255, 255)", onSurface: "rgb(0, 0, 0)", surfaceVariant: "rgb(249, 249, 249)", - onSurfaceVariant: "rgb(75, 69, 77)", - outline: "rgb(124, 117, 126)", - outlineVariant: "rgb(205, 196, 206)", + onSurfaceVariant: "rgb(75, 75, 75)", + outline: "rgb(120, 120, 120)", + outlineVariant: "rgb(205, 205, 205)", shadow: "rgb(0, 0, 0)", scrim: "rgb(0, 0, 0)", - inverseSurface: "rgb(50, 47, 51)", - inverseOnSurface: "rgb(246, 239, 243)", - inversePrimary: "rgb(224, 182, 255)", + inverseSurface: "rgb(50, 50, 50)", + inverseOnSurface: "rgb(245, 245, 245)", + inversePrimary: "rgb(255,255,255)", elevation: { level0: "transparent", - level1: "rgb(249, 241, 252)", - level2: "rgb(245, 234, 251)", - level3: "rgb(242, 228, 249)", - level4: "rgb(241, 226, 249)", - level5: "rgb(238, 222, 248)", + level1: "rgb(249, 249, 249)", + level2: "rgb(234, 234, 234)", + level3: "rgb(228, 228, 228)", + level4: "rgb(226, 226, 226)", + level5: "rgb(222, 222, 222)", }, surfaceDisabled: "rgba(29, 27, 30, 0.12)", onSurfaceDisabled: "rgba(29, 27, 30, 0.38)", @@ -268,14 +268,14 @@ const MaterialLightColors = { }; const MaterialDarkColors = { - primary: "rgb(224, 182, 255)", - onPrimary: "rgb(75, 0, 125)", - primaryContainer: "rgb(107, 0, 175)", - onPrimaryContainer: "rgb(242, 218, 255)", - secondary: "rgb(209, 193, 217)", - onSecondary: "rgb(55, 44, 63)", - secondaryContainer: "rgb(78, 66, 86)", - onSecondaryContainer: "rgb(238, 221, 246)", + primary: "rgb(255,255,255)", + onPrimary: "rgb(0,0,0)", + primaryContainer: "rgb(255,255,255)", + onPrimaryContainer: "rgb(0,0,0)", + secondary: "rgb(209, 209, 209)", + onSecondary: "rgb(55, 55, 55)", + secondaryContainer: "rgb(50, 50, 50)", + onSecondaryContainer: "rgb(238, 238, 238)", tertiary: "rgb(93, 213, 252)", onTertiary: "rgb(0, 53, 68)", tertiaryContainer: "rgb(0, 77, 97)", @@ -285,9 +285,9 @@ const MaterialDarkColors = { errorContainer: "rgb(147, 0, 10)", onErrorContainer: "rgb(255, 180, 171)", background: "rgb(0, 0, 0)", - onBackground: "rgb(231, 225, 229)", + onBackground: "rgb(229, 229, 229)", surface: "rgb(0, 0, 0)", - onSurface: "rgb(231, 225, 229)", + onSurface: "rgb(229, 229, 229)", surfaceVariant: "rgb(28, 28, 30)", onSurfaceVariant: "rgb(205, 196, 206)", outline: "rgb(150, 142, 152)", @@ -295,15 +295,15 @@ const MaterialDarkColors = { shadow: "rgb(0, 0, 0)", scrim: "rgb(0, 0, 0)", inverseSurface: "rgb(231, 225, 229)", - inverseOnSurface: "rgb(50, 47, 51)", - inversePrimary: "rgb(135, 44, 204)", + inverseOnSurface: "rgb(50, 50, 50)", + inversePrimary: "rgb(0,0,0)", elevation: { level0: "transparent", level1: "rgb(39, 35, 41)", - level2: "rgb(45, 39, 48)", - level3: "rgb(50, 44, 55)", - level4: "rgb(52, 46, 57)", - level5: "rgb(56, 49, 62)", + level2: "rgb(45, 45, 45)", + level3: "rgb(50, 50, 50)", + level4: "rgb(52, 52, 52)", + level5: "rgb(56, 56, 56)", }, surfaceDisabled: "rgba(231, 225, 229, 0.12)", onSurfaceDisabled: "rgba(231, 225, 229, 0.38)", diff --git a/utils/contextMenu/constants.ts b/utils/contextMenu/constants.ts index c74d76a82..88d701b08 100644 --- a/utils/contextMenu/constants.ts +++ b/utils/contextMenu/constants.ts @@ -52,4 +52,4 @@ export const contextMenuStyleGuide = { export const BACKDROP_LIGHT_BACKGROUND_COLOR = Platform.OS === "ios" ? "rgba(0,0,0,0.2)" : "rgba(19, 19, 19, 0.95)"; export const BACKDROP_DARK_BACKGROUND_COLOR = - Platform.OS === "ios" ? "rgba(0,0,0,0.75)" : "rgba(0,0,0,0.95)"; + Platform.OS === "ios" ? "rgba(0,0,0,0.75)" : "rgba(120,120,120,0.2)";