Style incoming call notification

styles/src/styleTree/incomingCallNotification.ts

@@ -1,22 +1,38 @@
 import Theme from "../themes/common/theme";
-import { text } from "./components";
+import { backgroundColor, borderColor, text } from "./components";
 
 export default function incomingCallNotification(theme: Theme): Object {
-  const avatarSize = 12;
+  const avatarSize = 32;
   return {
+    background: backgroundColor(theme, 300),
+    callerContainer: {
+      padding: 12,
+    },
     callerAvatar: {
       height: avatarSize,
       width: avatarSize,
-      cornerRadius: 6,
+      cornerRadius: avatarSize / 2,
+    },
+    callerMetadata: {
+      margin: { left: 10 },
     },
     callerUsername: {
-      ...text(theme, "sans", "primary", { size: "xs" }),
+      ...text(theme, "sans", "active", { size: "sm", weight: "bold" }),
+      margin: { top: -3 },
     },
+    callerMessage: {
+      ...text(theme, "sans", "secondary", { size: "xs" }),
+      margin: { top: -3 },
+    },
+    buttonWidth: 96,
     acceptButton: {
-      ...text(theme, "sans", "primary", { size: "xs" })
+      background: backgroundColor(theme, "ok", "active"),
+      border: { left: true, bottom: true, width: 1, color: borderColor(theme, "primary") },
+      ...text(theme, "sans", "ok", { size: "xs", weight: "extra_bold" })
     },
     declineButton: {
-      ...text(theme, "sans", "primary", { size: "xs" })
+      border: { left: true, width: 1, color: borderColor(theme, "primary") },
+      ...text(theme, "sans", "error", { size: "xs", weight: "extra_bold" })
     },
   };
 }