Merge pull request #449 from xmtp-labs/dj/mobile

Design fixes

src/component-library/components/Mobile/Mobile.tsx

@@ -1,24 +1,28 @@
-import { DeviceMobileIcon } from "@heroicons/react/solid";
+import xmtpIcon from "../../../../public/xmtp-icon.png";
 
 const LinkEle = ({ url, text }: { url: string; text: string }) => (
   <a
     href={url}
     target="_blank"
-    className="text-blue-600 m-1 text-center cursor-pointer"
+    className="text-indigo-600 m-1 pb-4 cursor-pointer font-bold"
     rel="noreferrer">
     {text}
   </a>
 );
 
 export const Mobile = () => (
-  <div className="flex flex-col items-start justify-center h-screen p-8 text-left">
+  <div className="flex flex-col items-center justify-center h-screen p-8 text-center">
     <div className="flex flex-col w-full items-center">
-      <DeviceMobileIcon width="100" className="text-indigo-600" />
-      <h1 className="text-2xl font-bold">Looks like you&apos;re on mobile!</h1>
+      <img
+        src={xmtpIcon as string}
+        alt="XMTP logo"
+        className="h-24 w-24 mb-4"
+      />
+      <h1 className="text-3xl font-bold">Looks like you&apos;re on mobile!</h1>
     </div>
-    <p className="text-left mt-8">For mobile-friendly XMTP chat:</p>
-    <ul className="list-disc m-4">
-      <li className="ml-1">
+    <p className="text-left mt-4 font-bold">For mobile-friendly chat:</p>
+    <ul>
+      <li className="mt-4">
         Try group chat on the dev network in Converse Preview:
       </li>
       <LinkEle url="https://testflight.apple.com/join/xEJOvzEx" text="iOS" />
@@ -27,12 +31,12 @@ export const Mobile = () => (
         url="https://drive.google.com/file/d/1rUtCmtIB6VzHNW8PDJ1TMBRuI2OEOdcg/view?usp=drive_link"
         text="Android"
       />
-      <li className="ml-1">
+      <li className="mt-4">
         Try subscription notifications and 1:1 chats in
         <LinkEle url="https://go.cb-w.com" text="Coinbase Wallet" />
       </li>
-      <li className="ml-1">
-        Devs: Build on the open source
+      <li className="mt-4">
+        Devs, build on the open source
         <LinkEle
           url="https://github.com/xmtp-labs/xmtp-inbox-mobile"
           text="XMTP React Native Reference App"