feat(add scrolltop theme): add scrolltop to target the theme

trycourier · Aug 16, 2023 · c56929c · c56929c
1 parent d02c4a9
commit c56929c
Show file tree

Hide file tree

Showing 16 changed files with 75 additions and 69 deletions.
diff --git a/packages/client-api/package.json b/packages/client-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/client-api",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "",
   "main": "dist/index.js",
   "private": true,

diff --git a/packages/client-graphql/package.json b/packages/client-graphql/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/client-graphql",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "",
   "main": "dist/index.js",
   "types": "typings/index.d.ts",

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/components",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "private": true,
   "description": "Beautiful, easy React toast notifications",
   "author": "Courier <[email protected]>",
@@ -18,11 +18,11 @@
   "license": "MIT",
   "dependencies": {
     "@trycourier/courier": "^1.3.0",
-    "@trycourier/react-brand-designer": "^4.1.0",
-    "@trycourier/react-inbox": "^4.1.0",
-    "@trycourier/react-preferences": "^4.1.0",
-    "@trycourier/react-provider": "^4.1.0",
-    "@trycourier/react-toast": "^4.1.0",
+    "@trycourier/react-brand-designer": "^4.2.0",
+    "@trycourier/react-inbox": "^4.2.0",
+    "@trycourier/react-preferences": "^4.2.0",
+    "@trycourier/react-provider": "^4.2.0",
+    "@trycourier/react-toast": "^4.2.0",
     "babel-loader": "^8.0.6",
     "babel-preset-preact": "^2.0.0",
     "camel-case": "^4.1.2",

diff --git a/packages/react-brand-designer/package.json b/packages/react-brand-designer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-brand-designer",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "Embeddable brand designer for multi-channel notifications",
   "homepage": "https://github.com/trycourier/courier-react/tree/main/packages/react-elements#readme",
   "license": "ISC",
@@ -29,7 +29,7 @@
     "url": "https://github.com/trycourier/courier-react/issues"
   },
   "dependencies": {
-    "@trycourier/react-elements": "^4.1.0",
+    "@trycourier/react-elements": "^4.2.0",
     "rimraf": "^3.0.2"
   },
   "devDependencies": {

diff --git a/packages/react-elements/package.json b/packages/react-elements/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-elements",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "Shareable components for each Courier package",
   "author": "Drew Youngwerth <[email protected]>",
   "homepage": "https://github.com/trycourier/courier-react/tree/main/packages/react-elements#readme",

diff --git a/packages/react-hooks/package.json b/packages/react-hooks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-hooks",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "",
   "main": "dist/index.js",
   "types": "typings/index.d.ts",
@@ -20,7 +20,7 @@
     "concat-md": "^0.3.5"
   },
   "dependencies": {
-    "@trycourier/client-graphql": "^4.1.0",
+    "@trycourier/client-graphql": "^4.2.0",
     "deep-extend": "^0.6.0",
     "rimraf": "^3.0.2"
   },

diff --git a/packages/react-inbox-next/package.json b/packages/react-inbox-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-inbox-next",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "",
   "private": true,
   "main": "dist/index.js",

diff --git a/packages/react-inbox/README.md b/packages/react-inbox/README.md
@@ -446,6 +446,7 @@ interface ITheme {
   };
   messageList?: {
     container?: CSSObject;
+    scrollTop?: CSSObject;
   };
   message?: {
     actionElement?: CSSObject;

diff --git a/packages/react-inbox/package.json b/packages/react-inbox/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-inbox",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "",
   "main": "dist/index.js",
   "types": "typings/index.d.ts",
@@ -20,10 +20,10 @@
   "dependencies": {
     "@fontsource/poppins": "^4.5.9",
     "@tippyjs/react": "^4.2.3",
-    "@trycourier/client-graphql": "^4.1.0",
-    "@trycourier/react-elements": "^4.1.0",
-    "@trycourier/react-hooks": "^4.1.0",
-    "@trycourier/react-preferences": "^4.1.0",
+    "@trycourier/client-graphql": "^4.2.0",
+    "@trycourier/react-elements": "^4.2.0",
+    "@trycourier/react-hooks": "^4.2.0",
+    "@trycourier/react-preferences": "^4.2.0",
     "classnames": "^2.2.6",
     "date-fns": "^2.19.0",
     "deep-extend": "^0.6.0",

diff --git a/packages/react-inbox/src/components/Messages2.0/index.tsx b/packages/react-inbox/src/components/Messages2.0/index.tsx
@@ -132,47 +132,51 @@ const ScrollTop = styled.button<{ text: string }>(({ theme, text }) => {
   const tcPrimaryColor = tinycolor2(primaryColor);
   const lighten30 = tcPrimaryColor.lighten(30);
 
-  return {
-    position: "sticky",
-    top: "-1px",
-    width: "100%",
-    height: "3px",
-    zIndex: 1,
-    fontSize: "12px",
-    cursor: "pointer",
-    background: lighten30.toString(),
-    transition: "all 150ms ease-in",
-
-    "&.hidden": {
-      opacity: 0,
-      visibility: "hidden",
-    },
-
-    "&::before": {
-      transition: "all 150ms ease-in",
-      boxSizing: "border-box",
-      marginTop: "-10px",
-      content: `'${text}'`,
-      position: "absolute",
-      left: "50%",
-      transform: "translateX(-50%)",
-      padding: "2px 8px",
-      display: "inline-block",
-      borderRadius: "10px",
+  return deepExtend(
+    {},
+    {
+      position: "sticky",
+      top: "-1px",
+      width: "100%",
+      height: "3px",
+      zIndex: 1,
+      fontSize: "12px",
+      cursor: "pointer",
       background: lighten30.toString(),
-      height: "18px",
-      "&:hover": {
-        background: lighten30.darken(10).toString(),
+      transition: "all 150ms ease-in",
+
+      "&.hidden": {
+        opacity: 0,
+        visibility: "hidden",
       },
-    },
-    "&.stickied": {
+
       "&::before": {
-        marginTop: "6px",
+        transition: "all 150ms ease-in",
+        boxSizing: "border-box",
+        marginTop: "-10px",
+        content: `'${text}'`,
+        position: "absolute",
+        left: "50%",
+        transform: "translateX(-50%)",
+        padding: "2px 8px",
+        display: "inline-block",
+        borderRadius: "10px",
+        background: lighten30.toString(),
+        height: "18px",
+        "&:hover": {
+          background: lighten30.darken(10).toString(),
+        },
+      },
+      "&.stickied": {
+        "&::before": {
+          marginTop: "6px",
+        },
+        boxShadow: "0px 8px 24px rgba(28, 39, 58, 0.3)",
       },
-      boxShadow: "0px 8px 24px rgba(28, 39, 58, 0.3)",
+      border: "none",
     },
-    border: "none",
-  };
+    theme?.messageList?.scrollTop
+  );
 });
 
 const Messages: React.ForwardRefExoticComponent<

diff --git a/packages/react-inbox/src/types.ts b/packages/react-inbox/src/types.ts
@@ -24,6 +24,7 @@ export interface InboxTheme {
   };
   messageList?: {
     container?: CSSObject;
+    scrollTop?: CSSObject;
   };
   message?: {
     actionElement?: CSSObject;

diff --git a/packages/react-preferences/package.json b/packages/react-preferences/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-preferences",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "main": "dist/index.js",
   "types": "typings/index.d.ts",
   "scripts": {
@@ -23,7 +23,7 @@
   ],
   "license": "ISC",
   "dependencies": {
-    "@trycourier/react-hooks": "^4.1.0",
+    "@trycourier/react-hooks": "^4.2.0",
     "react-toggle": "^4.1.2",
     "styled-components": "^5.3.6"
   }

diff --git a/packages/react-provider/package.json b/packages/react-provider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-provider",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "",
   "main": "dist/index.js",
   "types": "typings/index.d.ts",
@@ -16,7 +16,7 @@
   },
   "license": "ISC",
   "dependencies": {
-    "@trycourier/client-graphql": "^4.1.0",
+    "@trycourier/client-graphql": "^4.2.0",
     "buffer": "^6.0.3",
     "jwt-decode": "^3.1.2",
     "react-use": "^17.2.1",

diff --git a/packages/react-toast/package.json b/packages/react-toast/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-toast",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "Beautiful, easy React toast notifications",
   "main": "dist/index.js",
   "types": "typings/index.d.ts",
@@ -24,7 +24,7 @@
     "concat-md": "^0.3.5"
   },
   "dependencies": {
-    "@trycourier/react-hooks": "^4.1.0",
+    "@trycourier/react-hooks": "^4.2.0",
     "deep-extend": "^0.6.0",
     "markdown-to-jsx": "^7.1.7",
     "react-toastify": "^9.1.3",

diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/storybook",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "private": true,
   "description": "Beautiful, easy React toast notifications",
   "author": "Courier <[email protected]>",
@@ -23,12 +23,12 @@
     "@storybook/addon-links": "^6.5.9",
     "@storybook/addon-viewport": "^6.5.9",
     "@storybook/react": "^6.5.9",
-    "@trycourier/components": "^4.1.0",
-    "@trycourier/react-brand-designer": "^4.1.0",
-    "@trycourier/react-inbox": "^4.1.0",
-    "@trycourier/react-preferences": "^4.1.0",
-    "@trycourier/react-provider": "^4.1.0",
-    "@trycourier/react-toast": "^4.1.0",
+    "@trycourier/components": "^4.2.0",
+    "@trycourier/react-brand-designer": "^4.2.0",
+    "@trycourier/react-inbox": "^4.2.0",
+    "@trycourier/react-preferences": "^4.2.0",
+    "@trycourier/react-provider": "^4.2.0",
+    "@trycourier/react-toast": "^4.2.0",
     "react-frame-component": "^5.2.3",
     "react-markdown": "^8.0.1",
     "rehype-raw": "^6.1.1",

diff --git a/packages/types/package.json b/packages/types/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@trycourier/types",
   "private": true,
-  "version": "4.1.0",
+  "version": "4.2.0",
   "main": "index.d.ts",
   "types": "index.d.ts",
   "scripts": {}