Add styles to tasks page.

example-wasm/src/App.tsx

@@ -1,6 +1,7 @@
 import { Navigate, Outlet } from 'react-router-dom';
 
 import { Task } from './models/Task';
+import { PageLayout } from './components/PageLayout';
 
 const { RealmProvider, UserProvider, useApp } = await import('@realm/react');
 
@@ -23,7 +24,9 @@ export function App() {
           },
         }}
       >
-        <Outlet />
+        <PageLayout>
+          <Outlet />
+        </PageLayout>
       </RealmProvider>
     </UserProvider>
   );

example-wasm/src/AppWrapper.tsx

@@ -29,7 +29,7 @@ const router = createBrowserRouter([
 function AppWrapper() {
   return (
     <div className={styles.container}>
-      <AppProvider id={config.ATLAS_APP_ID} logLevel='all'>
+      <AppProvider id={config.ATLAS_APP_ID}>
         <RouterProvider router={router}/>
       </AppProvider>
     </div>

example-wasm/src/components/AddTaskForm.tsx

@@ -1,5 +1,7 @@
 import { FormEvent, useState } from 'react';
 
+import styles from '../styles/AddTaskForm.module.css';
+
 type AddTaskFormProps = {
   onSubmit: (description: string) => void;
 };
@@ -14,20 +16,19 @@ export function AddTaskForm({ onSubmit }: AddTaskFormProps) {
   };
 
   return (
-    <div>
-      <form onSubmit={handleSubmit}>
-        <input
-          type='text'
-          placeholder='Enter new task description'
-          value={description}
-          onChange={(event) => setDescription(event.currentTarget.value)}
-          autoCorrect='off'     // Safari only
-          autoCapitalize='none' // Safari only
-        />
-        <button type='submit'>
-          ＋
-        </button>
-      </form>
-    </div>
+    <form className={styles.form} onSubmit={handleSubmit}>
+      <input
+        className={styles.input}
+        type='text'
+        placeholder='Add a new task'
+        value={description}
+        onChange={(event) => setDescription(event.currentTarget.value)}
+        autoCorrect='off'     // Safari only
+        autoCapitalize='none' // Safari only
+      />
+      <button className={styles.button} type='submit'>
+        ＋
+      </button>
+    </form>
   );
 }

example-wasm/src/components/IntroText.tsx

@@ -1,13 +1,15 @@
+import styles from '../styles/IntroText.module.css';
+
 export function IntroText() {
   return (
-    <div>
+    <div className={styles.container}>
       <p>
-        Welcome to the MongoDB Realm + WASM example app!
+        Welcome to a MongoDB Realm, WASM, and Sync app!
       </p>
       <p>
-        Start adding a task using the form at the top of the screen to see it get
-        created in Realm (local-first) then MongoDB Atlas. You can also toggle the
-        task status or remove it from the list.
+        Add a task using the form at the top of the screen. It will create a
+        task and store it in an in-memory realm, then sync it to MongoDB Atlas
+        and any other apps connected to the same Atlas App.
       </p>
     </div>
   );

example-wasm/src/components/NavBar.tsx

@@ -0,0 +1,29 @@
+import { useNavigate } from 'react-router-dom';
+
+import logo from '../logo.png';
+import styles from '../styles/NavBar.module.css';
+
+const { useUser } = await import('@realm/react');
+
+export function NavBar() {
+  const navigate = useNavigate();
+  const user = useUser();
+
+  const handleLogout = async () => {
+    await user.logOut();
+    navigate('/');
+  };
+
+  return (
+    <nav className={styles.nav}>
+      <img
+        className={styles.logo}
+        src={logo}
+        alt='Realm by MongoDB'
+      />
+      <button className={styles.button} onClick={handleLogout}>
+        Log out
+      </button>
+    </nav>
+  );
+}

example-wasm/src/components/PageLayout.tsx

@@ -0,0 +1,17 @@
+import { NavBar } from './NavBar';
+import styles from '../styles/PageLayout.module.css';
+
+type PageLayoutProps = {
+  children: React.ReactNode;
+};
+
+export function PageLayout({ children }: PageLayoutProps) {
+  return (
+    <div className={styles.container}>
+      <NavBar />
+      <main>
+        {children}
+      </main>
+    </div>
+  );
+}

example-wasm/src/components/TaskItem.tsx

@@ -1,4 +1,5 @@
 import { Task } from '../models/Task';
+import styles from '../styles/TaskItem.module.css';
 
 type TaskItemProps = {
   task: Task;
@@ -9,16 +10,24 @@ type TaskItemProps = {
 // TODO: Memoize
 export function TaskItem({ task, onToggleStatus, onDelete }: TaskItemProps) {
   return (
-    <div>
-      <button onClick={onToggleStatus}>
-        {task.isComplete ? '✓' : '○'}
-      </button>
-      <p>
+    <div className={task.isComplete ? [styles.task, styles.completed].join(' ') : styles.task}>
+      <p className={styles.description}>
         {task.description}
       </p>
-      <button onClick={onDelete}>
-        Delete
-      </button>
+      <div className={styles.buttons}>
+        <button
+          className={[styles.button, styles.toggleBtn].join(' ')}
+          onClick={onToggleStatus}
+        >
+          ✓
+        </button>
+        <button
+          className={[styles.button, styles.deleteBtn].join(' ')}
+          onClick={onDelete}
+        >
+          x
+        </button>
+      </div>
     </div>
   );
 }

example-wasm/src/components/TaskList.tsx

@@ -2,6 +2,7 @@ import Realm from 'realm';
 
 import { Task } from '../models/Task';
 import { TaskItem } from './TaskItem';
+import styles from '../styles/TaskList.module.css';
 
 type TaskListProps = {
   tasks: Realm.Results<Task /*& Realm.Object*/>;
@@ -11,7 +12,7 @@ type TaskListProps = {
 
 export function TaskList({ tasks, onToggleTaskStatus, onDeleteTask }: TaskListProps) {
   return (
-    <div>
+    <div className={styles.tasks}>
       {tasks.map((task) => (
         <TaskItem
           key={task._id.toHexString()}

example-wasm/src/index.css

@@ -1,18 +1,30 @@
 :root {
   --primary-color: #7e41f8;
+  --primary-color-dark: #671ff7;
+  --light-gray: #dddde3;
+  --gray: #9f9f9f;
+  --black: #333333;
 }
 
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: sans-serif;
-  color: #333333;
+  color: var(--black);
 }
 
 h1 {
   font-weight: 700;
-  font-size: 2.4rem;
+  font-size: 2.5rem;
   font-family: "Gill Sans", sans-serif;
   text-align: center;
+  color: #2b0676;
+}
+
+button {
+  border: none;
+  background: none;
+  outline: none;
+  cursor: pointer;
 }

example-wasm/src/pages/TaskPage.tsx

@@ -2,6 +2,7 @@ import { AddTaskForm } from '../components/AddTaskForm';
 import { IntroText } from '../components/IntroText';
 import { TaskList } from '../components/TaskList';
 import { useTaskManager } from '../hooks/useTaskManager';
+import styles from '../styles/TaskPage.module.css';
 
 export function TaskPage() {
   const {
@@ -12,7 +13,7 @@ export function TaskPage() {
   } = useTaskManager();
 
   return (
-    <div>
+    <div className={styles.container}>
       <AddTaskForm onSubmit={addTask} />
       {tasks.length === 0 ? (
         <IntroText />

example-wasm/src/styles/AddTaskForm.module.css

@@ -0,0 +1,46 @@
+.form {
+  width: 80%;
+  max-width: 900px;
+  margin: 20px auto 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.input {
+  width: 100%;
+  padding: 3px 10px;
+  height: 50px;
+  border: 1px solid var(--light-gray);
+  border-radius: 4px;
+  background: white;
+  color: var(--black);
+  font-size: 16px;
+  text-align: center;
+  outline: none;
+  transition: all 150ms ease-in-out;
+}
+
+.input::placeholder {
+  color: var(--gray);
+}
+
+.input:focus {
+  width: 110%;
+}
+
+.button {
+  width: 50px;
+  height: 50px;
+  margin-top: 13px;
+  border-radius: 50%;
+  background-color: var(--primary-color-dark);
+  color: white;
+  font-size: 16px;
+  font-weight: bold;
+  transition: all 150ms ease-in-out;
+}
+
+.button:hover {
+  background-color: var(--primary-color);
+}

example-wasm/src/styles/AppWrapper.module.css

@@ -2,7 +2,6 @@
   width: 100vw;
   height: 100vh;
   min-height: 100vh;
-  padding: 30px 15px;
   overflow-x: hidden;
   overflow-y: auto;
   background-image: linear-gradient(to top, #ebebeb 0%, #f9f9f9 100%);

example-wasm/src/styles/IntroText.module.css

@@ -0,0 +1,15 @@
+.container {
+  width: 50%;
+  min-width: 230px;
+  max-width: 590px;
+  margin: 100px auto 0;
+}
+
+.container p {
+  margin-bottom: 70px;
+  color: var(--gray);
+  font-family: "Gill Sans", sans-serif;
+  font-size: 20px;
+  text-align: center;
+  line-height: 1.5;
+}

example-wasm/src/styles/LoginPage.module.css

@@ -18,26 +18,26 @@ h1 {
   padding: 40px;
   display: flex;
   flex-direction: column;
-  border: 1px solid #dddde3;
+  border: 1px solid var(--light-gray);
   border-radius: 5px;
   background-color: white;
-  box-shadow: 0 4px 20px -5px #dddde3;
+  box-shadow: 0 4px 20px -5px var(--light-gray);
 }
 
 .input {
   margin: 10px 0;
   padding: 3px 10px;
   height: 40px;
-  border: 1px solid #dddde3;
+  border: 1px solid var(--light-gray);
   border-radius: 4px;
   background: rgb(252, 252, 252);
-  color: #333333;
+  color: var(--black);
   font-size: 16px;
   outline: none;
 }
 
 .input::placeholder {
-  color: #9f9f9f;
+  color: var(--gray);
 }
 
 .buttons {
@@ -52,17 +52,14 @@ h1 {
   width: 160px;
   margin: 10px 15px;
   padding: 14px 0;
-  border: none;
   border-radius: 25px;
-  background-color: var(--primary-color);
+  background-color: var(--primary-color-dark);
   color: white;
   font-size: 16px;
   font-weight: bold;
-  outline: none;
-  cursor: pointer;
+  transition: all 150ms ease-in-out;
 }
 
 .button:hover {
-  background-color: #671ff7;
-  transition: all 150ms ease-in-out;
+  background-color: var(--primary-color);
 }