Merge pull request #793 from ephemeraHQ/saulmc/android-styles

android black and white styles
ephemeraHQ · Sep 20, 2024 · 22b3985 · 22b3985
2 parents 5433522 + 1ee3b11
commit 22b3985
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 38 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,36 +246,36 @@ 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)",
   backdrop: "rgba(52, 46, 55, 0.4)",
 };
 
 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,25 +285,25 @@ 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)",
   outlineVariant: "rgb(28, 28, 30)",
   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
@@ -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)";