adjust messages empty state padding

onsol-labs · Dec 22, 2022 · 2b3b13d · 2b3b13d
1 parent 6c1ce10
commit 2b3b13d
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 19 deletions.
diff --git a/packages/message-sdk/src/components/Inbox.tsx b/packages/message-sdk/src/components/Inbox.tsx
@@ -108,24 +108,30 @@ export function Inbox() {
           <UserList users={searchedUsersDistinct} />
         </div>
       )}
-      {!messagesLoading && searchFilter.length < 3 && activeChats.length === 0 && (
-        <div
-          style={{
-            flexGrow: 1,
-            justifyContent: "center",
-            flexDirection: "column",
-            display: "flex",
-            paddingBottom: 50,
-          }}
-        >
-          {" "}
-          <EmptyState
-            icon={(props: any) => <ChatBubbleIcon {...props} />}
-            title={"No messages"}
-            subtitle={"Search for someone to send a message to!"}
-          />
-        </div>
-      )}
+      {!messagesLoading &&
+        searchFilter.length < 3 &&
+        activeChats.length === 0 && (
+          <div
+            style={{
+              flexGrow: 1,
+              justifyContent: "center",
+              flexDirection: "column",
+              display: "flex",
+              paddingBottom: 50,
+            }}
+          >
+            {" "}
+            <EmptyState
+              icon={(props: any) => <ChatBubbleIcon {...props} />}
+              title={"No messages"}
+              subtitle={"Search for someone to send a message!"}
+              style={{
+                paddingLeft: 0,
+                paddingRight: 0,
+              }}
+            />
+          </div>
+        )}
     </div>
   );
 }
diff --git a/packages/react-common/src/components/base/EmptyState.tsx b/packages/react-common/src/components/base/EmptyState.tsx
@@ -9,16 +9,18 @@ export const EmptyState: React.FC<{
   subtitle: string;
   buttonText?: string;
   onClick?: () => void;
-  contentStyle?: React.CSSProperties;
   minimize?: boolean;
   verticallyCentered?: boolean;
+  contentStyle?: React.CSSProperties;
+  style?: React.CSSProperties;
 }> = ({
   icon,
   title,
   subtitle,
   buttonText,
   onClick,
   contentStyle,
+  style,
   minimize,
   verticallyCentered = true,
 }) => {
@@ -34,6 +36,7 @@ export const EmptyState: React.FC<{
         display: "flex",
         flexDirection: "column",
         justifyContent: "center",
+        ...style,
       }}
     >
       <div