mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better empty states for phone calls and messages

Browse Source
This commit is contained in:
m5r 2021-10-15 22:41:41 +02:00
parent c3bdef4800
commit c8f707af9c
3 changed files with 10 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
app/messages/components/empty-messages.tsx
View File

@ -1,5 +1,6 @@
import { HiPlus } from "react-icons/hi"; import { IoCreateOutline, IoMailOutline } from "react-icons/io5";
import { useAtom } from "jotai"; import { useAtom } from "jotai";
import { bottomSheetOpenAtom } from "../pages/messages"; import { bottomSheetOpenAtom } from "../pages/messages";
export default function EmptyMessages() { export default function EmptyMessages() {
@ -8,21 +9,8 @@ export default function EmptyMessages() {
return ( return (
<div className="text-center my-auto"> <div className="text-center my-auto">
<svg <IoMailOutline className="mx-auto h-12 w-12 text-gray-400" aria-hidden="true" />
className="mx-auto h-12 w-12 text-gray-400" <h3 className="mt-2 text-sm font-medium text-gray-900">You don&#39;t have any messages yet</h3>
fill="none"
stroke="currentColor"
viewBox="0 0 48 48"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M34 40h10v-4a6 6 0 00-10.712-3.714M34 40H14m20 0v-4a9.971 9.971 0 00-.712-3.714M14 40H4v-4a6 6 0 0110.713-3.714M14 40v-4c0-1.313.253-2.566.713-3.714m0 0A10.003 10.003 0 0124 26c4.21 0 7.813 2.602 9.288 6.286M30 14a6 6 0 11-12 0 6 6 0 0112 0zm12 6a4 4 0 11-8 0 4 4 0 018 0zm-28 0a4 4 0 11-8 0 4 4 0 018 0z"
/>
</svg>
<h3 className="mt-2 text-sm font-medium text-gray-900">No messages</h3>
<p className="mt-1 text-sm text-gray-500"> <p className="mt-1 text-sm text-gray-500">
Get started by sending a message Get started by sending a message
<br /> <br />
@ -34,8 +22,8 @@ export default function EmptyMessages() {
className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-[#007AFF] focus:outline-none focus:ring-2 focus:ring-offset-2" className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-[#007AFF] focus:outline-none focus:ring-2 focus:ring-offset-2"
onClick={openNewMessageArea} onClick={openNewMessageArea}
> >
<HiPlus className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" /> <IoCreateOutline className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
New Message Type a new message
</button> </button>
</div> </div>
</div> </div>

2
app/messages/components/new-message-button.tsx
View File

@ -12,7 +12,7 @@ const NewMessageButton: FunctionComponent<Props> = ({ onClick }) => {
className="absolute bottom-20 right-6 className="absolute bottom-20 right-6
w-14 h-14 bg-gray-800 rounded-full hover:bg-gray-900 active:shadow-lg shadow transition ease-in duration-200 focus:outline-none" w-14 h-14 bg-gray-800 rounded-full hover:bg-gray-900 active:shadow-lg shadow transition ease-in duration-200 focus:outline-none"
> >
<IoCreateOutline className="m-auto pl-1.5 text-white w-8 h-8" /> <IoCreateOutline className="m-auto pl-0.5 text-white w-8 h-8" />
</button> </button>
); );
}; };

6
app/phone-calls/components/empty-calls.tsx
View File

@ -1,5 +1,5 @@
import { Link, Routes } from "blitz"; import { Link, Routes } from "blitz";
import { HiPlus } from "react-icons/hi"; import { IoKeypad } from "react-icons/io5";
export default function EmptyMessages() { export default function EmptyMessages() {
return ( return (
@ -18,12 +18,12 @@ export default function EmptyMessages() {
d="M34 40h10v-4a6 6 0 00-10.712-3.714M34 40H14m20 0v-4a9.971 9.971 0 00-.712-3.714M14 40H4v-4a6 6 0 0110.713-3.714M14 40v-4c0-1.313.253-2.566.713-3.714m0 0A10.003 10.003 0 0124 26c4.21 0 7.813 2.602 9.288 6.286M30 14a6 6 0 11-12 0 6 6 0 0112 0zm12 6a4 4 0 11-8 0 4 4 0 018 0zm-28 0a4 4 0 11-8 0 4 4 0 018 0z" d="M34 40h10v-4a6 6 0 00-10.712-3.714M34 40H14m20 0v-4a9.971 9.971 0 00-.712-3.714M14 40H4v-4a6 6 0 0110.713-3.714M14 40v-4c0-1.313.253-2.566.713-3.714m0 0A10.003 10.003 0 0124 26c4.21 0 7.813 2.602 9.288 6.286M30 14a6 6 0 11-12 0 6 6 0 0112 0zm12 6a4 4 0 11-8 0 4 4 0 018 0zm-28 0a4 4 0 11-8 0 4 4 0 018 0z"
/> />
</svg> </svg>
<h3 className="mt-2 text-sm font-medium text-gray-900">No phone calls</h3> <h3 className="mt-2 text-sm font-medium text-gray-900">You don&#39;t have any phone calls yet</h3>
<p className="mt-1 text-sm text-gray-500">Get started by calling someone you know.</p> <p className="mt-1 text-sm text-gray-500">Get started by calling someone you know.</p>
<div className="mt-6"> <div className="mt-6">
<Link href={Routes.KeypadPage()}> <Link href={Routes.KeypadPage()}>
<a className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-[#007AFF] focus:outline-none focus:ring-2 focus:ring-offset-2"> <a className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-[#007AFF] focus:outline-none focus:ring-2 focus:ring-offset-2">
<HiPlus className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" /> <IoKeypad className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
Open keypad Open keypad
</a> </a>
</Link> </Link>