Merge pull request #12 from cometchat-pro/notification

v1.2.1
cometchat · Sep 30, 2020 · c7483ff · c7483ff
2 parents 3fcdf18 + fbcc51e
commit c7483ff
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ CometChat Kitchen Sink Sample App is a real-time messaging app capable of **one-
 * Voice & Video calling
 
 ## Prerequisite
-To run this app, you must create an account with CometChat and obtain your `App ID`, `Auth Key` and `Region`.  If you don't have an account, you can create one from <a href="https://app.cometchat.com/" target="_blank">CometChat Dashboard</a>.
+To run this app, you must create an account with CometChat and obtain your `App ID`, `Auth Key` and `Region`.  If you don't have an account, you can create one from <a href="https://app.cometchat.io/" target="_blank">CometChat Dashboard</a>.
 
 
 ## Usage

diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.5",
   "private": true,
   "dependencies": {
-    "@cometchat-pro/chat": "^2.1.0",
+    "@cometchat-pro/chat": "^2.1.1",
     "@emotion/core": "^10.0.35",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",

diff --git a/src/defaultPages/HomePage/style.js b/src/defaultPages/HomePage/style.js
@@ -18,6 +18,7 @@ export const titleStyle = () => {
         color: "rgb(67, 171, 255)",
         fontSize: "24px",
         width: "100%",
+        padding: "0 1em",
         [mq[0]]: {
             fontSize: "20px",
         }
@@ -33,6 +34,7 @@ export const subTitleStyle = () => {
         color: "#AAA",
         fontSize: "16px",
         width: "100%",
+        padding: "0 1em",
         [mq[0]]: {
             fontSize: "16px",
         }
@@ -46,27 +48,35 @@ export const helpTextStyle = () => {
         textAlign: "center",
         width: "100%",
         color: "#333",
+        padding: "0 1em",
     }
 }
 
 export const componentStyle = () => {
 
-    const mq = [`@media (min-width : 320px) and (max-width: 767px)`];
+    const mq = [`@media (min-width : 320px) and (max-width: 767px)`, `@media (min-width : 768px) and (max-width: 1024px)`];
 
     return {
         display: "flex",
         alignItems: "center",
-        justifyContent: "space-around",
-        margin: "50px 100px",
+        justifyContent: "center",
+        padding: "25px 50px",
+        width: "100%",
         [mq[0]]: {
             flexDirection: "column",
-            margin: "20px 30px",
+            padding: "50px 100px",
+        },
+        [mq[1]]: {
+            flexDirection: "column",
+            padding: "50px 50px",
         }
     }
 }
 
 export const boxStyle = () => {
 
+    const mq = [`@media (min-width : 768px) and (max-width: 1024px)`];
+
     return {
         margin: "10px 20px",
         padding: "20px",
@@ -76,6 +86,11 @@ export const boxStyle = () => {
         flexDirection: "column",
         alignItems: "center",
         justifyContent: "center",
+        flex: "1",
+        minWidth: "300px",
+        [mq[0]]: {
+            width: "400px",
+        }
     }
 }