badass auth success page

packages/desktop/src/components/ProtectedRoute/index.tsx

@@ -22,7 +22,7 @@ export default function ProtectedRoute({
 
   if (isLoading)
     return (
-      <div className="container h-screen w-screen">
+      <div className="container h-screen w-screen flex flex-col justify-center mx-10">
         <SkeletonLoader />
       </div>
     );

packages/desktop/src/components/User/userAvatarWithStatus.tsx

@@ -5,7 +5,7 @@ export default function UserAvatarWithStatus(props: { user: User }) {
     <span className="relative">
       <img
         src={props.user.picture}
-        className="rounded-lg h-8 hover:bg-slate-200 hover:cursor-pointer hover:scale-110"
+        className="rounded-lg h-8 hover:bg-zinc-200 hover:cursor-pointer hover:scale-110"
         alt=""
       />
 
@@ -18,19 +18,19 @@ export function UserStatusBubble(props: { status: UserStatus }) {
   switch (props.status) {
     case UserStatus.ONLINE:
       return (
-        <span className="absolute -bottom-1 -right-1 rounded-full bg-emerald-600 h-3 w-3 border border-slate-300"></span>
+        <span className="absolute -bottom-1 -right-1 rounded-full bg-emerald-600 h-3 w-3 border border-zinc-300"></span>
       );
     case UserStatus.OFFLINE:
       return (
-        <span className="absolute -bottom-1 -right-1 rounded-full bg-slate-400 h-3 w-3 border border-slate-300"></span>
+        <span className="absolute -bottom-1 -right-1 rounded-full bg-zinc-400 h-3 w-3 border border-zinc-300"></span>
       );
     case UserStatus.FLOW_STATE:
       return (
-        <span className="absolute -bottom-1 -right-1 rounded-full bg-pink-400 h-3 w-3 border border-slate-300"></span>
+        <span className="absolute -bottom-1 -right-1 rounded-full bg-pink-400 h-3 w-3 border border-zinc-300"></span>
       );
     default:
       return (
-        <span className="absolute -bottom-1 -right-1 rounded-full bg-pink-400 h-3 w-3 border border-slate-300"></span>
+        <span className="absolute -bottom-1 -right-1 rounded-full bg-pink-400 h-3 w-3 border border-zinc-300"></span>
       );
   }
 }

packages/desktop/src/pages/Home/conversations/index.tsx

@@ -34,11 +34,11 @@ export default function Conversations() {
   return (
     <>
       {/* pinned conversations */}
-      <div className="m-5 p-4 bg-slate-500 shadow-lg rounded">
+      <div className="m-5 p-4 bg-zinc-500 shadow-lg rounded">
         <Tooltip title="Listen in like a walkie-talkie.">
           <span className="flex flex-row justify-start items-center cursor-pointer">
             <FaVolumeUp className="text-red-500" />
-            <span className="ml-2 tracking-wider text-slate-100 uppercase text-sm font-semibold">
+            <span className="ml-2 tracking-wider text-zinc-100 uppercase text-sm font-semibold">
               Live
             </span>
           </span>
@@ -60,8 +60,8 @@ export default function Conversations() {
                   onClick={() =>
                     selectContact(contactDetail.otherUser.googleId)
                   }
-                  className={`flex flex-row items-center hover:bg-slate-600 group py-4 px-2 cursor-pointer ${
-                    isSelected ? "bg-slate-600" : ""
+                  className={`flex flex-row items-center hover:bg-zinc-600 group py-4 px-2 cursor-pointer ${
+                    isSelected ? "bg-zinc-600" : ""
                   } rounded`}
                 >
                   <UserAvatarWithStatus user={contactDetail.otherUser} />

packages/desktop/src/pages/Home/header/index.tsx

@@ -72,19 +72,19 @@ export default function Header() {
     <>
       <GlobalHotKeys handlers={handlers} keyMap={keyMap}></GlobalHotKeys>
 
-      <div className="flex flex-row items-center bg-slate-800 h-20 px-5">
+      <div className="flex flex-row items-center bg-zinc-800 h-20 px-5">
         <Logo type={LogoType.small} className="scale-[0.4]" />
         <input
           ref={inputRef}
           placeholder="type / to search"
-          className="placeholder:text-slate-400 bg-transparent outline-none text-slate-100"
+          className="placeholder:text-zinc-400 bg-transparent outline-none text-zinc-100"
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.target.value)}
         />
 
         <button
           onClick={() => updateStatus(UserStatus.FLOW_STATE)}
-          className="ml-auto mr-2 hover:scale-110 bg-slate-600 text-teal-500 py-1 px-2 rounded-lg text-sm"
+          className="ml-auto mr-2 hover:scale-110 bg-zinc-600 text-teal-500 py-1 px-2 rounded-lg text-sm"
         >
           flow state
         </button>

packages/desktop/src/pages/Home/index.tsx

@@ -14,7 +14,7 @@ export default function Home() {
   const searchQuery = useRecoilValue($searchQuery);
 
   return (
-    <div className="h-screen bg-slate-700 flex flex-row">
+    <div className="h-screen bg-zinc-700 flex flex-row">
       <div className="flex-1">
         {/* header */}
         <Header />

packages/desktop/src/pages/Home/search/index.tsx

@@ -58,30 +58,30 @@ export default function Search() {
       <span
         key={user.googleId}
         onClick={() => selectContact(user.googleId)}
-        className="border-t border-t-slate-500 py-5 flex flex-row justify-start 
-      items-center w-full hover:bg-slate-600 cursor-pointer group"
+        className="border-t border-t-zinc-500 py-5 flex flex-row justify-start 
+      items-center w-full hover:bg-zinc-600 cursor-pointer group"
       >
         <span className="relative mx-5">
           <img
             src={user.picture}
-            className="rounded-lg h-8 hover:bg-slate-200 hover:cursor-pointer hover:scale-110"
+            className="rounded-lg h-8 hover:bg-zinc-200 hover:cursor-pointer hover:scale-110"
             alt=""
           />
           <span className="absolute bottom-0 -right-1.5 rounded-full bg-emerald-600 h-3 w-3"></span>
         </span>
 
         <span className="flex flex-col items-start">
-          <span className="text-slate-200 text-lg font-semibold">
+          <span className="text-zinc-200 text-lg font-semibold">
             {user.name}
           </span>
 
-          <span className="text-slate-300">{user.email}</span>
+          <span className="text-zinc-300">{user.email}</span>
         </span>
 
         {/* actions */}
         <Tooltip title="Request connect">
-          <button className="hover:bg-slate-300 p-1 flex flex-row items-center justify-center ml-auto">
-            <FaAngleRight className="group-hover:text-slate-300 text-lg" />
+          <button className="hover:bg-zinc-300 p-1 flex flex-row items-center justify-center ml-auto">
+            <FaAngleRight className="group-hover:text-zinc-300 text-lg" />
           </button>
         </Tooltip>
       </span>
@@ -92,7 +92,7 @@ export default function Search() {
     <div className="px-5">
       <button
         onClick={goBack}
-        className="rounded shadow border border-slate-300 text-slate-300 p-1 my-2"
+        className="rounded shadow border border-zinc-300 text-zinc-300 p-1 my-2"
       >
         Go back
       </button>

packages/desktop/src/pages/Home/selectedConversation/index.tsx

@@ -281,11 +281,11 @@ export default function SelectedConversation() {
     <>
       <GlobalHotKeys handlers={handlers} keyMap={keyMap} />
 
-      <div className="bg-slate-800 flex-1 flex flex-col relative">
+      <div className="bg-zinc-800 flex-1 flex flex-col relative">
         {/* close marker */}
         <FaWindowClose
           onClick={handleClose}
-          className="text-slate-400 text-xl hover:text-slate-200 hover:scale-110 absolute top-0 right-0 m-1 cursor-pointer"
+          className="text-zinc-400 text-xl hover:text-zinc-200 hover:scale-110 absolute top-0 right-0 m-1 cursor-pointer"
         />
 
         {/* top header/profile information */}
@@ -304,7 +304,7 @@ export default function SelectedConversation() {
               />
             </span>
 
-            <span className="text-slate-300 text-sm">{`joined ${moment(
+            <span className="text-zinc-300 text-sm">{`joined ${moment(
               convoDetailsResponse.contactUser.createdDate
             ).fromNow()}`}</span>
           </span>
@@ -313,7 +313,7 @@ export default function SelectedConversation() {
         {renderMainContent()}
 
         <span className="flex flex-row my-5 items-center justify-center space-x-5">
-          <span className="flex flex-row justify-center items-center p-1 rounded shadow-lg h-10 w-10 bg-slate-500 cursor-pointer">
+          <span className="flex flex-row justify-center items-center p-1 rounded shadow-lg h-10 w-10 bg-zinc-500 cursor-pointer">
             {isRecording ? (
               <FaMicrophone className="text-red-600 text-xl animate-pulse" />
             ) : (
@@ -321,7 +321,7 @@ export default function SelectedConversation() {
             )}
           </span>
 
-          <span className="flex flex-row justify-center items-center p-1 rounded shadow-lg h-10 w-10 bg-slate-500 cursor-pointer">
+          <span className="flex flex-row justify-center items-center p-1 rounded shadow-lg h-10 w-10 bg-zinc-500 cursor-pointer">
             <FaPlay className="text-blue-600 text-lg" />
           </span>
         </span>

packages/desktop/src/pages/Login/index.tsx

@@ -7,7 +7,7 @@ import { CircularProgress } from "@mui/material";
 import { FcGoogle } from "react-icons/fc";
 import Logo from "../../components/Logo";
 
-export default function Login({ onReady }: { onReady: Function }) {
+export default function Login({ onReady }: { onReady: () => void }) {
   const setAuthTokens = useSetRecoilState($authTokens);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [authFailureCount, setAuthFailureCount] =
@@ -85,7 +85,7 @@ export default function Login({ onReady }: { onReady: Function }) {
   }, []);
 
   return (
-    <div className="container flex flex-col space-y-5 justify-center items-center h-screen bg-slate-900">
+    <div className="container flex flex-col space-y-5 justify-center items-center h-screen bg-zinc-700">
       <Logo className="scale-50" />
 
       {isLoading ? (
@@ -96,7 +96,7 @@ export default function Login({ onReady }: { onReady: Function }) {
       ) : (
         <button
           onClick={continueAuth}
-          className=" text-md text-slate-200 py-2 px-5 border border-gray-200 transition-all hover:bg-gray-200 hover:text-teal-500 rounded flex flex-row items-center space-x-2"
+          className=" text-md text-zinc-200 py-2 px-5 border border-gray-200 transition-all hover:bg-gray-200 hover:text-teal-500 rounded flex flex-row items-center space-x-2"
         >
           <FcGoogle className="text-lg" />
           <span>Continue with Google</span>