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 ${
+                  className={`flex flex-row items-center hover:bg-zinc-600 group py-4 px-2 cursor-pointer ${
-                    isSelected ? "bg-slate-600" : ""
+                    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 
+        className="border-t border-t-zinc-500 py-5 flex flex-row justify-start 
-      items-center w-full hover:bg-slate-600 cursor-pointer group"
+      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">
+          <button className="hover:bg-zinc-300 p-1 flex flex-row items-center justify-center ml-auto">
-            <FaAngleRight className="group-hover:text-slate-300 text-lg" />
+            <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>

packages/web/components/footer/index.tsx

@@ -0,0 +1,12 @@
+import FullMottoLogo from "../../../components/logo/fullMotto";
+export default function Footer() {
+  return (
+    <div className="container mx-auto flex justify-between mt-auto items-center">
+      <span className="ml-20">
+        <span className="text-zinc-400 text-sm">Wanna chat? </span>
+        <span className="font-bold text-white">arjunpatel@berkeley.edu</span>
+      </span>
+      <FullMottoLogo className="text-center scale-50" />
+    </div>
+  );
+}

packages/web/components/header/index.tsx

@@ -0,0 +1,9 @@
+import HorizontalLogo from "../../../components/logo/horizontal";
+
+export default function Header() {
+  return (
+    <div className="container mx-auto p-0 flex flex-row justify-start">
+      <HorizontalLogo className="scale-[0.5]" />
+    </div>
+  );
+}

packages/web/pages/_app.tsx

@@ -7,6 +7,10 @@ function MyApp({ Component, pageProps }: AppProps) {
   return (
     <>
       <Head>
+        <title>Nirvana - virtual office</title>
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/logos/1024x1024.ico" />
+
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
         <link
@@ -14,7 +18,10 @@ function MyApp({ Component, pageProps }: AppProps) {
           rel="stylesheet"
         />
       </Head>
-      <Component {...pageProps} />
+
+      <main className="min-h-screen min-w-screen bg-zinc-700 flex flex-col">
+        <Component {...pageProps} />
+      </main>
     </>
   );
 }

packages/web/pages/auth/success.tsx

@@ -0,0 +1,23 @@
+import { FcGoogle } from "react-icons/fc";
+import Footer from "../../components/footer";
+import Header from "../../components/header";
+
+export default function AuthSuccess() {
+  return (
+    <>
+      <Header />
+
+      <div className="my-auto flex flex-col items-center justify-center">
+        <FcGoogle className="text-6xl m-10" />
+        <span className="text-white text-6xl leading-[1.2] font-extrabold">
+          {"You're Signed In"}
+        </span>
+
+        <span className="text-zinc-400 text-xl mt-5">
+          Go back to the desktop app that you download.
+        </span>
+      </div>
+      <Footer />
+    </>
+  );
+}

packages/web/pages/index.tsx

@@ -1,8 +1,10 @@
 import { BsApple, BsWindows } from "react-icons/bs";
 import { FaPeopleCarry, FaRunning } from "react-icons/fa";
 
+import Footer from "../components/footer";
 import FullMottoLogo from "../../components/logo/fullMotto";
 import Head from "next/head";
+import Header from "../components/header";
 import HorizontalLogo from "../../components/logo/horizontal";
 import Image from "next/image";
 import { LogoType } from "../../components/logo/full";
@@ -13,113 +15,94 @@ import styles from "../styles/Home.module.css";
 const Home: NextPage = () => {
   return (
     <>
-      <Head>
+      {/* header */}
-        <title>Nirvana - virtual office</title>
+      <Header />
-        <meta name="description" content="Generated by create next app" />
-        <link rel="icon" href="/logos/1024x1024.ico" />
-      </Head>
 
-      <main className="min-h-screen min-w-screen bg-zinc-700 flex flex-col">
+      <div className="container mx-auto px-20">
-        {/* header */}
+        {/* above fold experience */}
-        <div className="container mx-auto p-0 flex flex-row justify-start">
+        <div className="flex flex-row items-center space-x-10 mt-10">
-          {/* <img className="text-md" src={"/logos/horizontal.svg"} /> */}
+          <div className="flex flex-col items-start">
-          <HorizontalLogo className="scale-[0.5]" />
+            <span className="text-white text-6xl leading-[1.2] font-extrabold">
-        </div>
+              The <span className="text-nirvanaTeal">walkie-talkie</span> <br />{" "}
+              for remote teams.
+            </span>
 
-        <div className="container mx-auto px-20">
+            <span className="text-zinc-400 text-xl mt-5">
-          {/* above fold experience */}
+              The <span className="text-nirvanaTeal">{"'less is more'"}</span>{" "}
-          <div className="flex flex-row items-center space-x-10 mt-10">
+              approach. Skip zoom scheduling, <br></br> slack notifications, and
-            <div className="flex flex-col items-start">
+              email threads. <br /> Just talk to your team.
-              <span className="text-white text-6xl leading-[1.2] font-extrabold">
+            </span>
-                The <span className="text-nirvanaTeal">walkie-talkie</span>{" "}
+
-                <br /> for remote teams.
+            {/* download */}
+            <span className="flex flex-col justify-start mt-20">
+              <span className="text-white font-bold text-md mb-2">
+                Download the desktop app
               </span>
 
-              <span className="text-zinc-400 text-xl mt-5">
+              <span className="flex flex-row space-x-2">
-                The <span className="text-nirvanaTeal">{"'less is more'"}</span>{" "}
+                <span className="p-2 rounded bg-zinc-500 cursor-pointer">
-                approach. Skip zoom scheduling, <br></br> slack notifications,
+                  <BsWindows className="text-white text-xl" />
-                and email threads. <br /> Just talk to your team.
-              </span>
-
-              {/* download */}
-              <span className="flex flex-col justify-start mt-20">
-                <span className="text-white font-bold text-md mb-2">
-                  Download the desktop app
                 </span>
 
-                <span className="flex flex-row space-x-2">
+                <span className="p-2 rounded bg-zinc-500 cursor-pointer">
-                  <span className="p-2 rounded bg-zinc-500 cursor-pointer">
+                  <BsApple className="text-white text-xl" />
-                    <BsWindows className="text-white text-xl" />
-                  </span>
-
-                  <span className="p-2 rounded bg-zinc-500 cursor-pointer">
-                    <BsApple className="text-white text-xl" />
-                  </span>
                 </span>
               </span>
-            </div>
+            </span>
-
-            <img
-              src="/illustrations/undraw_co-working_re_w93t.svg"
-              className="h-[30em]"
-            />
           </div>
+
+          <img
+            src="/illustrations/undraw_co-working_re_w93t.svg"
+            className="h-[30em]"
+          />
         </div>
+      </div>
 
-        {/* value points */}
+      {/* value points */}
-        <div className="flex flex-row w-full mx-auto px-20 py-10 bg-zinc-500 my-10 space-x-5">
+      <div className="flex flex-row w-full mx-auto px-20 py-10 bg-zinc-500 my-10 space-x-5">
-          <span className="p-5 bg-zinc-600 flex flex-col items-start flex-1 shadow">
+        <span className="p-5 bg-zinc-600 flex flex-col items-start flex-1 shadow">
-            <span className="flex flex-row items-center space-x-2">
+          <span className="flex flex-row items-center space-x-2">
-              <FaRunning className="text-white text-xl" />
+            <FaRunning className="text-white text-xl" />
-              <span className="text-white font-semibold text-lg">
+            <span className="text-white font-semibold text-lg">
-                Move Faster
+              Move Faster
-              </span>
-            </span>
-
-            <span className="text-zinc-300 text-sm">
-              No more back and forth chatter. Resolve issues in seconds with
-              spontaneous conversations.
             </span>
           </span>
 
-          <span className="p-5 bg-zinc-600 flex flex-col items-start flex-1 shadow">
+          <span className="text-zinc-300 text-sm">
-            <span className="flex flex-row items-center space-x-2">
+            No more back and forth chatter. Resolve issues in seconds with
-              <MdOutlineNaturePeople className="text-white text-xl" />
+            spontaneous conversations.
-              <span className="text-white font-semibold text-lg">Minimal</span>
+          </span>
-            </span>
+        </span>
 
-            <span className="text-zinc-300 text-sm">
+        <span className="p-5 bg-zinc-600 flex flex-col items-start flex-1 shadow">
-              All of your team’s converstions in one place. Nirvana’s built for
+          <span className="flex flex-row items-center space-x-2">
-              flow state. Communication as simple and human as possible.
+            <MdOutlineNaturePeople className="text-white text-xl" />
+            <span className="text-white font-semibold text-lg">Minimal</span>
+          </span>
+
+          <span className="text-zinc-300 text-sm">
+            All of your team’s converstions in one place. Nirvana’s built for
+            flow state. Communication as simple and human as possible.
+          </span>
+        </span>
+
+        <span className="p-5 bg-zinc-600 flex flex-col items-start flex-1 shadow">
+          <span className="flex flex-row items-center space-x-2">
+            <FaPeopleCarry className="text-white text-lg" />
+            <span className="text-white font-semibold text-lg">
+              Build Culture
             </span>
           </span>
 
-          <span className="p-5 bg-zinc-600 flex flex-col items-start flex-1 shadow">
+          <span className="text-zinc-300 text-sm">
-            <span className="flex flex-row items-center space-x-2">
+            Close-knit culture and increased serendipity by knowing your team’s
-              <FaPeopleCarry className="text-white text-lg" />
+            right there with you.
-              <span className="text-white font-semibold text-lg">
-                Build Culture
-              </span>
-            </span>
-
-            <span className="text-zinc-300 text-sm">
-              Close-knit culture and increased serendipity by knowing your
-              team’s right there with you.
-            </span>
           </span>
-        </div>
+        </span>
+      </div>
 
-        {/* footer */}
+      {/* footer */}
-        <div className="container mx-auto flex justify-between mt-auto items-center">
+      <Footer />
-          <span>
-            <span className="text-zinc-400 text-sm">Wanna chat? </span>
-            <span className="font-bold text-white">
-              arjunpatel@berkeley.edu
-            </span>
-          </span>
-          <FullMottoLogo className="text-center scale-50" />
-        </div>
-      </main>
     </>
   );
 };