Update TypeScript demo styles

typescript/src/App.tsx

@@ -3,28 +3,34 @@ import { useMutation, useQuery } from "../convex/_generated/react";
 
 export default function App() {
  const messages = useQuery("listMessages") || [];
-
- const [newMessageText, setNewMessageText] = useState("");
  const sendMessage = useMutation("sendMessage");
-
+ const [newMessageText, setNewMessageText] = useState("");
  const [name] = useState(() => "User " + Math.floor(Math.random() * 10000));
+
  async function handleSendMessage(event: FormEvent) {
  event.preventDefault();
  setNewMessageText("");
  await sendMessage(newMessageText, name);
  }
+
  return (
  <main>
- <h1>Convex Chat</h1>
- <p className="badge">
+ <header>
+  <h1>Convex Chat</h1>
  <span>{name}</span>
- </p>
+ </header>
  <ul>
  {messages.map(message => (
- <li key={message._id.toString()}>
- <span>{message.author}:</span>
- <span>{message.body}</span>
- <span>{new Date(message._creationTime).toLocaleTimeString()}</span>
+ <li
+ key={message._id.toString()}
+ className={message.author === name ? "sent" : "received"}
+ >
+ <p>{message.body}</p>
+ <span>
+ {message.author}
+ {message.author === name && " (You)"} &bull;{" "}
+ {new Date(message._creationTime).toLocaleTimeString()}
+ </span>
  </li>
  ))}
  </ul>
@@ -34,7 +40,9 @@ export default function App() {
  onChange={event => setNewMessageText(event.target.value)}
  placeholder="Write a message…"
  />
- <input type="submit" value="Send" disabled={!newMessageText} />
+ <button type="submit" disabled={!newMessageText}>
+ Send
+ </button>
  </form>
  </main>
  );

typescript/src/index.css

@@ -1,111 +1,124 @@
-/* reset */
-* {
- margin: 0;
- padding: 0;
- border: 0;
- line-height: 1.5;
-}
+@import url("shared.css");
 
 body {
- font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", helvetica,
- sans-serif;
+ align-items: center;
+ background-color: var(--color-n12);
+ color: var(--color-white);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ min-height: 100vh;
 }
 
 main {
- padding-top: 1em;
- padding-bottom: 1em;
- width: min(800px, 95vw);
- margin: 0 auto;
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+@media (min-width: 50rem) {
+ main {
+ border: 1px solid var(--color-p5);
+ width: 40rem;
+ height: min(60rem, 95vh);
+ }
 }
 
-h1 {
- text-align: center;
- margin-bottom: 8px;
- font-size: 1.8em;
- font-weight: 500;
+header {
+ border-bottom: 1px solid var(--color-p5);
+ padding: var(--size-md);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
 }
 
-.badge {
- text-align: center;
- margin-bottom: 16px;
-}
-.badge span {
- background-color: #212529;
- color: #ffffff;
- border-radius: 6px;
- font-weight: bold;
- padding: 4px 8px 4px 8px;
- font-size: 0.75em;
+header span {
+ background: var(--color-p4);
+ padding: var(--size-xs);
+ border-radius: var(--size-md);
+ font-size: var(--size-sm);
 }
 
-ul {
- margin: 8px;
- border-radius: 8px;
- border: solid 1px lightgray;
- box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+h1 {
+ font-size: var(--size-2xl);
+ font-family: var(--font-family-display);
+ font-weight: 500;
+ font-variation-settings: "wdth" 151;
 }
 
-ul:empty {
- display: none;
+ul {
+ flex-grow: 1;
+ padding: var(--size-md);
+ list-style: none;
+ overflow-y: auto;
+ display: flex;
+ flex-direction: column;
+ gap: var(--size-xl);
 }
 
 li {
  display: flex;
- justify-content: flex-start;
- padding: 8px 16px 8px 16px;
- border-bottom: solid 1px lightgray;
- font-size: 16px;
+ flex-direction: column;
+ gap: var(--size-3xs);
 }
-
-li:last-child {
- border: 0;
+li.sent {
+ align-items: flex-end;
+}
+li.received {
+ align-items: flex-start;
 }
 
-li span:nth-child(1) {
- font-weight: bold;
- margin-right: 4px;
- white-space: nowrap;
+li p {
+ padding: var(--size-md);
+ display: inline;
+ border-radius: var(--size-xl);
+ padding: var(--size-md);
+ line-height: var(--line-height-normal);
+}
+li.sent p {
+ background: var(--color-p4);
+ border-bottom-right-radius: 0;
 }
-li span:nth-child(2) {
- margin-right: 4px;
- word-break: break-word;
+li.received p {
+ background: var(--color-n10);
+ border-top-left-radius: 0;
 }
-li span:nth-child(3) {
- color: #6c757d;
- margin-left: auto;
- white-space: nowrap;
+
+li span {
+ color: var(--color-n6);
+ font-size: var(--size-sm);
 }
 
 form {
+ border-top: 1px solid var(--color-p5);
+ flex-basis: 4rem;
+ flex-shrink: 0;
  display: flex;
- justify-content: center;
 }
 
-input:not([type]) {
- padding: 6px 12px 6px 12px;
- color: rgb(33, 37, 41);
- border: solid 1px rgb(206, 212, 218);
- border-radius: 8px;
- font-size: 16px;
+input {
+ flex-grow: 1;
+ border: none;
+ background: transparent;
+ padding: 0 var(--size-md);
+ font-size: var(--size-md);
+ color: var(--color-n1);
 }
-
-input[type="submit"],
-button {
- margin-left: 4px;
- background: lightblue;
- color: white;
- padding: 6px 12px 6px 12px;
- border-radius: 8px;
- font-size: 16px;
- background-color: rgb(49, 108, 244);
+input:focus {
+ outline: none;
 }
 
-input[type="submit"]:hover,
-button:hover {
- background-color: rgb(41, 93, 207);
+button {
+ background: var(--color-p4);
+ color: var(--color-white);
+ padding: 0 var(--size-xl);
+ height: 100%;
+ font-size: var(--size-md);
+ border: none;
+ cursor: pointer;
 }
-
-input[type="submit"]:disabled,
 button:disabled {
- background-color: rgb(122, 160, 248);
+ background: var(--color-p6);
+ color: var(--color-n6);
+ cursor: not-allowed;
 }

typescript/src/shared.css

@@ -0,0 +1,62 @@
+@import url(https://fonts.googleapis.com/css2?family=Inter&family=Roboto+Flex:wdth;wght@25..151;100..1000&display=swap);
+
+/* Variables */
+:root {
+ --color-white: #ffffff;
+ --color-n1: #f6f6f6;
+ --color-n2: #f1f1f1;
+ --color-n3: #e5e5e5;
+ --color-n4: #d7d7d7;
+ --color-n5: #c2c2c2;
+ --color-n6: #adadad;
+ --color-n7: #939393;
+ --color-n8: #797979;
+ --color-n9: #6e6e6e;
+ --color-n10: #3f3f3f;
+ --color-n11: #292929;
+ --color-n12: #141414;
+ --color-n13: #111111;
+ --color-black: #000000;
+
+ --color-p1: #f4e9f1;
+ --color-p2: #e3d0df;
+ --color-p3: #d7b3cf;
+ --color-p4: #8d2676;
+ --color-p5: #711e5e;
+ --color-p6: #47133b;
+
+ --size-3xs: 0.5rem;
+ --size-2xs: 0.625rem;
+ --size-xs: 0.6875rem;
+ --size-sm: 0.875rem;
+ --size-md: 1rem;
+ --size-lg: 1.125rem;
+ --size-xl: 1.25rem;
+ --size-2xl: 2.375rem;
+ --size-3xl: 2.5rem;
+ --size-4xl: 2.625rem;
+ --size-5xl: 2.875rem;
+ --size-6xl: 3.125rem;
+ --size-7xl: 3.5rem;
+ --size-8xl: 3.75rem;
+
+ --font-family-display: "Roboto Flex", sans-serif;
+ --font-family-body: "Inter", sans-serif;
+
+ --line-height-none: 1;
+ --line-height-tight: 1.25;
+ --line-height-snug: 1.375;
+ --line-height-normal: 1.5;
+ --line-height-relaxed: 1.625;
+ --line-height-loose: 2;
+}
+
+/* Reset */
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ font-family: var(--font-family-body);
+ margin: 0;
+ padding: 0;
+}