feat: vertically aligning text (#96)

public/assets/css/app-header.css

@@ -117,6 +117,10 @@
     background: var(--accent-color-1-light);
     border-radius: var(--border-radius);
     white-space: nowrap;
+
+    span {
+      text-box: trim-both cap alphabetic;
+    }
 
     &:hover {
       background-color: var(--accent-color-1-intense);

public/assets/css/app-menu.css

@@ -4,7 +4,9 @@
 
 @media only screen and (max-width: 599px) {
   #app-menu-toggle {
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 }
 

public/assets/css/globals.css

@@ -147,6 +147,7 @@
 
 h1 {
   font-size: var(--h1-font-size);
+  text-box: trim-both cap alphabetic;
 }
 
 input,
@@ -321,12 +322,17 @@ dialog {
   .dialog-text {
     margin-top: 0;
     font-size: var(--large-font-size);
+    text-box: trim-both cap alphabetic;
   }
 
   .dialog-action-bar {
     display: flex;
     flex-wrap: wrap;
     gap: var(--default-gap);
+
+    & > button {
+      flex-grow: 10;
+    }
   }
 }
 
@@ -337,6 +343,14 @@ button {
   color: var(--font-color);
   font-size: var(--default-font-size);
 
+  &:not(:has(img)) {
+    text-box: trim-both cap alphabetic;
+  }
+
+  & > span {
+    text-box: trim-both cap alphabetic;
+  }
+
   &[disabled] {
     cursor: inherit;
     color: var(--alt-content-color);
@@ -354,7 +368,7 @@ button {
 .default-button {
   border-radius: var(--border-radius);
   font-size: var(--large-font-size);
-  padding: var(--small-interactive-element-padding) 1.25rem;
+  padding: 1rem;
   user-select: none;
 
   &:disabled {
@@ -407,7 +421,8 @@ button {
 }
 
 .floating-action-button {
-  display: block;
+  display: flex;
+  align-items: center;
   position: fixed;
   bottom: 1.25rem;
   right: 1.25rem;

src/components/Dialog.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef } from "react";
 import Overlay from "./Overlay";
 
 const Dialog = ({
@@ -9,10 +10,17 @@ const Dialog = ({
   onClickOnOverlay: () => void;
   className?: string;
 }) => {
+  const ref = useRef<HTMLDialogElement | null>(null);
+
+  useEffect(() => {
+    ref.current?.showModal();
+  });
+
   return <Overlay
     onClick={onClickOnOverlay}
   >
     <dialog
+      ref={ref}
       className={className ?? ""}
       onClick={(e) => e.stopPropagation()}
     >

src/components/HeaderButton.tsx

@@ -31,8 +31,7 @@ const HeaderButton = ({
     onDragEnd={onDragEnd}
     onDragOver={onDragOver}
     className={
-      "header-button "
-      + (icon ? "with-icon" : "without-icon")
+      (icon ? "with-icon" : "without-icon")
       + (className ? (" " + className) : "")
       + (dangerous ? (" dangerous") : "")
     }

src/components/NoteContentBlockAudio.tsx

@@ -15,7 +15,7 @@ const NoteContentBlockAudio = ({
   file,
   notesProvider,
 }: NoteContentBlockAudioProps) => {
-  const [url, setUrl] = useState<string>("");
+  const [url, setUrl] = useState<string | undefined>(undefined);
 
   useEffect(() => {
     getObjectUrlForArbitraryGraphFile(file)

src/components/NoteContentBlockVideo.tsx

@@ -15,7 +15,7 @@ const NoteContentBlockVideo = ({
   file,
   notesProvider,
 }: NoteContentBlockVideoProps) => {
-  const [url, setUrl] = useState<string>("");
+  const [url, setUrl] = useState<string | undefined>(undefined);
 
   useEffect(() => {
     getObjectUrlForArbitraryGraphFile(file)

src/components/Pagination.tsx

@@ -83,7 +83,7 @@ const Pagination = ({
                   }
                   {...item}
                 >
-                  {type === "previous" ? "<" : ">"}
+                  {type === "previous" ? "←" : "→"}
                 </button>
               );
             }

tests/visual-regression/editor.spec.ts

@@ -263,4 +263,24 @@ test.describe("Editor", () => {
     expect(await page.locator(".note").screenshot())
       .toMatchSnapshot("editor-note-stats-with-files-light.png");
   });
+
+  test("modal - light", async ({ page }) => {
+    page.emulateMedia({ colorScheme: "light" });
+
+    page.keyboard.type(" ");
+    await page.click("#button_new");
+
+    expect(await page.screenshot())
+      .toMatchSnapshot("editor-modal-light.png");
+  });
+
+  test("modal - dark", async ({ page }) => {
+    page.emulateMedia({ colorScheme: "dark" });
+
+    page.keyboard.type(" ");
+    await page.click("#button_new");
+
+    expect(await page.screenshot())
+      .toMatchSnapshot("editor-modal-dark.png");
+  });
 });