C 7165 (#289)

* fixes * brandon work in progress * try to fix test * keep 25px logo
trycourier · Sep 30, 2022 · 45e3e6c · 45e3e6c
1 parent f14b86e
commit 45e3e6c
Show file tree

Hide file tree

Showing 14 changed files with 212 additions and 141 deletions.
diff --git a/jest.config.base.js b/jest.config.base.js
@@ -43,6 +43,7 @@ module.exports = (babelConfig) => ({
       "<rootDir>/__mocks__/fileMock.js",
     "\\.(scss|sass|css)$": "identity-obj-proxy",
     "~(.*)$": "<rootDir>/src/$1",
+    "@fontsource/poppins": "identity-obj-proxy",
   },
   testPathIgnorePatterns: ["/node_modules/", "helpers"],
 });
diff --git a/packages/react-inbox/package.json b/packages/react-inbox/package.json
@@ -19,6 +19,7 @@
     "concat-md": "^0.3.5"
   },
   "dependencies": {
+    "@fontsource/poppins": "^4.5.9",
     "@tippyjs/react": "^4.2.3",
     "@trycourier/client-graphql": "^1.45.3",
     "@trycourier/react-elements": "^1.45.3",

diff --git a/packages/react-inbox/src/assets/courier_big_icon.svg b/packages/react-inbox/src/assets/courier_big_icon.svg
diff --git a/packages/react-inbox/src/components/Inbox/index.tsx b/packages/react-inbox/src/components/Inbox/index.tsx
@@ -57,7 +57,7 @@ const StyledTippy = styled(LazyTippy)<{
   return deepExtend(
     {
       fontFamily: `'Nunito Sans', sans-serif`,
-      boxShadow: "0px 12px 32px rgba(86, 43, 85, 0.3)",
+      boxShadow: "0px 8px 24px rgba(28, 39, 58, 0.3)",
       width: theme.name === "2.0" ? "396px" : "483px",
       maxWidth: "initial !important",
 

diff --git a/packages/react-inbox/src/components/Message/styled.tsx b/packages/react-inbox/src/components/Message/styled.tsx
@@ -2,6 +2,8 @@ import React, { useMemo } from "react";
 import deepExtend from "deep-extend";
 import styled from "styled-components";
 import CourierSvg from "~/assets/courier_icon.svg";
+import CourierBigSvg from "~/assets/courier_big_icon.svg";
+import "@fontsource/poppins";
 
 export const Container = styled.div(({ theme }) =>
   deepExtend(
@@ -35,15 +37,16 @@ export const Contents = styled.div(({ theme }) => ({
 export const Title = styled.div(({ theme }) =>
   deepExtend(
     {
-      fontSize: "14px",
+      fontFamily: "Poppins",
+      fontSize: "12px",
       fontStyle: "normal",
       fontWeight: "600",
       lineHeight: "19px",
       textAlign: "left",
       display: "-webkit-box",
       overflow: "hidden",
       textOverflow: "ellipsis",
-      color: "#24324B",
+      color: "rgb(28, 39, 58)",
     },
     theme.message?.title
   )
@@ -52,7 +55,7 @@ export const Title = styled.div(({ theme }) =>
 export const TextBlock = styled.div(({ theme }) =>
   deepExtend(
     {
-      color: "#73819B",
+      color: "rgb(28, 39, 58) ",
       marginTop: "1px",
       wordBreak: "break-word",
       fontSize: "12px",
@@ -100,13 +103,13 @@ export const ActionBlock = styled.div(({ theme }) =>
 export const TimeAgo = styled.div(({ theme }) =>
   deepExtend(
     {
-      color: "#aaa",
-      fontSize: "10px",
+      color: "rgb(86, 96, 116)",
+      fontSize: "12px",
       fontStyle: "normal",
       fontWeight: "400",
       lineHeight: "14px",
       whiteSpace: "nowrap",
-      paddingRight: 6,
+      paddingRight: 2,
       maxWidth: "65px",
       textOverflow: "ellipsis",
       overflow: "hidden",
@@ -128,6 +131,19 @@ const iconStyles = ({ theme }) =>
     theme.message?.icon
   );
 
+const bigIconStyles = ({ theme }) =>
+  deepExtend(
+    {
+      height: 36,
+      width: 36,
+      flexShrink: "0",
+      path: {
+        fill: theme?.brand?.colors?.primary ?? "#9121c2",
+      },
+    },
+    theme.message?.icon
+  );
+
 export const UnreadIndicator = styled.div(({ theme }) =>
   deepExtend(
     {
@@ -144,8 +160,9 @@ export const UnreadIndicator = styled.div(({ theme }) =>
 
 export const Icon = styled.img(iconStyles);
 const CourierIcon = styled(CourierSvg)(iconStyles);
+const CourierBigIcon = styled(CourierBigSvg)(bigIconStyles);
 
-export const getIcon = (icon?: false | string) => {
+export const getIcon = (icon?: false | string, big?: boolean) => {
   return useMemo(() => {
     if (icon === false) {
       return;
@@ -155,6 +172,10 @@ export const getIcon = (icon?: false | string) => {
       return <Icon src={icon} />;
     }
 
+    if (big) {
+      return <CourierBigIcon />;
+    }
+
     return <CourierIcon />;
   }, [icon]);
 };
diff --git a/packages/react-inbox/src/components/Messages2.0/Header.tsx b/packages/react-inbox/src/components/Messages2.0/Header.tsx
@@ -66,6 +66,7 @@ const DropdownOptionButton = styled.button(({ theme, disabled }) => {
 
     ".message-count": {
       fontSize: 14,
+      fontWeight: 400,
       margin: "0 3px",
       backgroundImage: `linear-gradient(180deg, ${primaryColor} 0%, ${tcPrimaryColor.setAlpha(
         0.6

diff --git a/packages/react-inbox/src/components/Messages2.0/Message.tsx b/packages/react-inbox/src/components/Messages2.0/Message.tsx
@@ -67,7 +67,8 @@ const UnreadIndicator = styled.div<{ read?: boolean }>(({ theme, read }) => {
 
   return deepExtend(
     {
-      height: "100%",
+      display: "block",
+      height: "auto",
       width: 2,
       background: read
         ? "linear-gradient(180deg, rgba(86, 96, 116, 0.3) 0%, rgba(86, 96, 116, 0.12) 100%)"
@@ -76,6 +77,8 @@ const UnreadIndicator = styled.div<{ read?: boolean }>(({ theme, read }) => {
           )} 100%)`,
       position: "absolute",
       left: "1px",
+      top: "1px",
+      bottom: "1px",
     },
     theme?.message?.unreadIndicator
   );
@@ -86,27 +89,27 @@ const MessageContainer = styled.div(({ theme }) => {
     {
       display: "flex",
       position: "relative",
-      padding: "10px",
+      padding: "12px",
       backgroundColor: "#F9FAFB",
       alignItems: "center",
-      borderBottom: "1px solid rgba(203,213,224,.5)",
+      borderBottom: "1px solid rgb(222, 232, 240)",
       "&:hover.read": {
         zIndex: 1,
       },
       "&.read": {
         background: "#F2F6F9",
         "img, svg": {
           filter: "grayscale(100%)",
-          opacity: "0.5",
+          opacity: "0.3",
         },
       },
 
       ".actions": {
         display: "flex",
         alignItems: "center",
         position: "absolute",
-        top: 10,
-        right: 10,
+        top: 6,
+        right: 6,
       },
     },
     theme?.message?.container
@@ -269,7 +272,8 @@ const MessageWrapper: React.FunctionComponent<
 
     brand?.inapp?.disableMessageIcon
       ? false
-      : (icon || defaultIcon) ?? brand?.inapp?.icons?.message
+      : (icon || defaultIcon) ?? brand?.inapp?.icons?.message,
+    true // 36px icon
   );
 
   const formattedTime = formatDate

diff --git a/packages/react-inbox/src/components/Messages2.0/NoMessages.tsx b/packages/react-inbox/src/components/Messages2.0/NoMessages.tsx
@@ -23,7 +23,7 @@ const Empty = styled.div(({ theme }) =>
       background: "white",
       width: "100%",
 
-      color: theme?.brand?.inapp?.emptyState?.textColor ?? "#566074",
+      color: theme?.brand?.inapp?.emptyState?.textColor ?? "rgb(28, 39, 58)",
       margin: "auto",
       svg: {
         path: {

diff --git a/packages/react-inbox/src/components/Messages2.0/PaginationEnd.tsx b/packages/react-inbox/src/components/Messages2.0/PaginationEnd.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import styled from "styled-components";
+import "@fontsource/poppins";
 
 const Styled = styled.div`
   display: flex;
@@ -8,8 +9,10 @@ const Styled = styled.div`
   height: 100%;
   width: 100%;
   flex-direction: column;
-  color: #566074;
+  color: rgb(28, 39, 58);
   font-size: 12px;
+  font-family: Poppins;
+  font-weight: 600;
   padding: 12px;
   font-weight: 600;
   div {

diff --git a/packages/react-inbox/src/components/Messages2.0/actions/CloseInbox.tsx b/packages/react-inbox/src/components/Messages2.0/actions/CloseInbox.tsx
@@ -13,6 +13,8 @@ const StyledButton = styled.button(({ theme }) => {
     background: "transparent",
     borderRadius: "6px",
     padding: 0,
+    height: "24px",
+    opacity: 1,
 
     "&:hover": {
       backgroundImage: `linear-gradient(180deg, ${tcPrimaryColor.setAlpha(

diff --git a/packages/react-inbox/src/components/Messages2.0/actions/MarkAllRead.tsx b/packages/react-inbox/src/components/Messages2.0/actions/MarkAllRead.tsx
@@ -13,6 +13,8 @@ const StyledButton = styled.button(({ theme }) => {
     background: "transparent",
     borderRadius: "6px",
     padding: 0,
+    marginRight: "6px",
+    height: "24px",
 
     path: {
       fill: theme?.brand?.colors?.primary,
@@ -34,6 +36,7 @@ const MarkAllRead: React.FunctionComponent<{
   return (
     <StyledTippy content={"Mark All as Read"}>
       <StyledButton onClick={onClick}>
+        <div id="arrow" data-popper-arrow></div>
         <svg
           width="24"
           height="24"

diff --git a/packages/react-inbox/src/components/Messages2.0/index.tsx b/packages/react-inbox/src/components/Messages2.0/index.tsx
@@ -63,7 +63,7 @@ const DismissInbox = styled.button(({ theme }) =>
 
 const MessageList = styled.div<{ isMobile?: boolean }>(
   ({ isMobile, theme }) => {
-    const defaultHeight = 300;
+    const defaultHeight = 342;
 
     const height = (() => {
       if (!isMobile) {
@@ -81,7 +81,7 @@ const MessageList = styled.div<{ isMobile?: boolean }>(
         height,
         maxHeight: height,
         flexDirection: "column",
-        borderTop: "1px solid rgba(203,213,224,.5)",
+        borderTop: "1px solid rgb(222, 232, 240)",
       },
       theme?.messageList?.container
     );
@@ -100,6 +100,7 @@ export const Footer = styled.div(({ theme }) =>
       zIndex: 1,
       fontWeight: "700",
       lineHeight: "14px",
+      letterSpacing: "0.1rem",
       height: 36,
       justifyContent: "center",
       paddingRight: 18,