Merge pull request #9117 from streetwriters/fix/monograph-ui

Fix monograph ui

apps/monograph/app/components/header.tsx

@@ -39,7 +39,16 @@ export function Header() {
       >
         <span style={{ color: "var(--accent)" }}>Mono</span>graph
       </Text>
-      <Button variant="accent">Publish a note</Button>
+      <Button
+        as="a"
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        href="https://app.notesnook.com/"
+        target="_blank"
+        variant="accent"
+      >
+        Publish a note
+      </Button>
     </Flex>
   );
 }

apps/monograph/app/components/monograph-chat.tsx

@@ -139,7 +139,7 @@ const ChatItem = ({
     >
       <Flex
         sx={{
-          backgroundColor: incoming ? "background-secondary" : "shade",
+          backgroundColor: incoming ? "background" : "shade",
           borderRadius: 10,
           p: 2,
           pb: 1,
@@ -147,7 +147,7 @@ const ChatItem = ({
           maxWidth: "70%"
         }}
       >
-        <Text sx={{ fontSize: "13px", color: "paragraph" }}>{message}</Text>
+        <Text sx={{ fontSize: "subBody", color: "paragraph" }}>{message}</Text>
         <Timer time={time} />
       </Flex>
     </Flex>

apps/monograph/app/components/theme-provider.tsx

@@ -72,7 +72,23 @@ export function BaseThemeProvider(
 
   return (
     <>
-      <EmotionThemeProvider {...restProps} scope={scope}>
+      <EmotionThemeProvider
+        {...restProps}
+        theme={{
+          fontSizes: {
+            heading: "24px",
+            subheading: "20px",
+            input: "12px",
+            title: "16px",
+            subtitle: "14px",
+            body: "14px",
+            subBody: "12px",
+            menu: "12px",
+            code: "14px"
+          }
+        }}
+        scope={scope}
+      >
         {children}
       </EmotionThemeProvider>
     </>

apps/monograph/app/root.css

@@ -1,98 +1,75 @@
-/* open-sans-regular - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */
+
 @font-face {
-  font-family: "Open Sans";
+  font-family: "Inter";
   font-style: normal;
-  font-display: fallback;
+  font-display: swap;
   font-weight: 400;
-  src: local(""),
-    url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff2")
-      format("woff2"),
-    /* Super Modern Browsers */
-      url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff")
-      format("woff"),
-    /* Modern Browsers */
-      url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.ttf")
-      format("truetype");
+  src: local(""), url("./assets/fonts/Inter-Regular.woff2") format("woff2"),
+    url("./assets/fonts/Inter-Regular.ttf") format("truetype");
 }
-/* open-sans-600 - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */
+
 @font-face {
-  font-family: "Open Sans";
+  font-family: "Inter";
   font-style: normal;
+  font-display: swap;
   font-weight: 600;
-  font-display: fallback;
-  src: local(""),
-    url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff2")
-      format("woff2"),
-    /* Super Modern Browsers */
-      url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff")
-      format("woff"),
-    /* Modern Browsers */
-      url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.ttf")
-      format("truetype");
+  src: local(""), url("./assets/fonts/Inter-SemiBold.woff2") format("woff2"),
+    url("./assets/fonts/Inter-SemiBold.ttf") format("truetype");
 }
-/* open-sans-700 - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */
+
 @font-face {
-  font-family: "Open Sans";
+  font-family: "Inter";
   font-style: normal;
+  font-display: swap;
   font-weight: 700;
-  font-display: fallback;
-  src: local(""),
-    url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff2")
-      format("woff2"),
-    /* Super Modern Browsers */
-      url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff")
-      format("woff"),
-    /* Modern Browsers */
-      url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.ttf")
-      format("truetype");
+  src: local(""), url("./assets/fonts/Inter-Bold.woff2") format("woff2"),
+    url("./assets/fonts/Inter-Bold.ttf") format("truetype");
 }
-/* open-sans-italic - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */
+
 @font-face {
-  font-family: "Open Sans";
+  font-family: "Inter";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: local(""), url("./assets/fonts/Inter-Medium.woff2") format("woff2"),
+    url("./assets/fonts/Inter-Medium.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Inter";
   font-style: italic;
+  font-display: swap;
   font-weight: 400;
-  font-display: fallback;
-  src: local(""),
-    url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-italic.woff2")
-      format("woff2"),
-    /* Super Modern Browsers */
-      url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-italic.woff")
-      format("woff"),
-    /* Modern Browsers */
-      url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-italic.ttf")
-      format("truetype");
+  src: local(""), url("./assets/fonts/Inter-Italic.woff2") format("woff2"),
+    url("./assets/fonts/Inter-Italic.ttf") format("truetype");
 }
-/* open-sans-600italic - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */
+
 @font-face {
-  font-family: "Open Sans";
+  font-family: "Inter";
   font-style: italic;
+  font-display: swap;
   font-weight: 600;
-  font-display: fallback;
   src: local(""),
-    url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600italic.woff2")
-      format("woff2"),
-    /* Super Modern Browsers */
-      url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600italic.woff")
-      format("woff"),
-    /* Modern Browsers */
-      url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600italic.ttf")
-      format("truetype");
+    url("./assets/fonts/Inter-SemiBoldItalic.woff2") format("woff2"),
+    url("./assets/fonts/Inter-SemiBoldItalic.ttf") format("truetype");
 }
-/* open-sans-700italic - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */
+
 @font-face {
-  font-family: "Open Sans";
+  font-family: "Inter";
   font-style: italic;
+  font-display: swap;
   font-weight: 700;
-  font-display: fallback;
-  src: local(""),
-    url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700italic.woff2")
-      format("woff2"),
-    /* Super Modern Browsers */
-      url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700italic.woff")
-      format("woff"),
-    /* Modern Browsers */
-      url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700italic.ttf")
-      format("truetype");
+  src: local(""), url("./assets/fonts/Inter-BoldItalic.woff2") format("woff2"),
+    url("./assets/fonts/Inter-BoldItalic.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-display: swap;
+  font-weight: 500;
+  src: local(""), url("./assets/fonts/Inter-MediumItalic.woff2") format("woff2"),
+    url("./assets/fonts/Inter-MediumItalic.ttf") format("truetype");
 }
 
 body {

apps/monograph/app/routes/_index.tsx

@@ -127,6 +127,7 @@ export default function Monograph() {
           mt={6}
         >
           <ButtonLink
+            as="a"
             variant="accent"
             href="https://app.notesnook.com/"
             target="_blank"
@@ -134,6 +135,7 @@ export default function Monograph() {
             Publish a note
           </ButtonLink>
           <ButtonLink
+            as="a"
             variant="secondary"
             sx={{
               bg: "background-secondary",
@@ -182,7 +184,7 @@ export default function Monograph() {
           >
             <Icon path={feature.Icon} color="var(--accent)" size={42} />
             <Text variant="heading">{feature.name}</Text>
-            <Text>{feature.body}</Text>
+            <Text variant="body">{feature.body}</Text>
           </Flex>
         ))}
       </Box>

apps/monograph/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@notesnook/monograph",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@notesnook/monograph",
-      "version": "1.2.6",
+      "version": "1.2.7",
       "dependencies": {
         "@emotion/cache": "11.11.0",
         "@emotion/react": "11.11.1",

apps/monograph/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@notesnook/monograph",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "private": true,
   "sideEffects": false,
   "type": "module",

apps/monograph/vite.config.ts

@@ -20,7 +20,7 @@ import { vitePlugin as remix } from "@remix-run/dev";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 import arraybuffer from "vite-plugin-arraybuffer";
-import ThemeDark from "@notesnook/theme/theme-engine/themes/default-dark.json" with {type:"json"};
+import ThemeDark from "@notesnook/theme/theme-engine/themes/default-dark.json" with { type:"json" };
 import type { Plugin, ResolvedConfig } from "vite";
 import { writeFile } from "fs/promises";
 import path from "path";
@@ -51,8 +51,9 @@ export default defineConfig(({ isSsrBuild }) => ({
         scripts: { start: pkg.scripts.start },
         dependencies: {
           "@napi-rs/canvas": pkg.dependencies["@napi-rs/canvas"],
-          "@remix-run/server-runtime": pkg.devDependencies["@remix-run/server-runtime"],
-        },
+          "@remix-run/server-runtime":
+            pkg.devDependencies["@remix-run/server-runtime"]
+        }
       })
     }),
     remix({
@@ -65,13 +66,15 @@ export default defineConfig(({ isSsrBuild }) => ({
     }),
     tsconfigPaths(),
     arraybuffer(),
-    isSsrBuild ?  viteStaticCopy({
-      targets: [
-        { src: "./server.ts", dest: "../../" },
-        { src: "./app/assets", dest: "../" },
-        { src: "./fonts", dest: "../" }
-      ]
-    }) : undefined
+    isSsrBuild
+      ? viteStaticCopy({
+          targets: [
+            { src: "./server.ts", dest: "../../" },
+            { src: "./app/assets", dest: "../" },
+            { src: "./fonts", dest: "../" }
+          ]
+        })
+      : undefined
   ],
   worker: {
     format: "es",
@@ -90,7 +93,7 @@ export default defineConfig(({ isSsrBuild }) => ({
   build: {
     target: isSsrBuild ? "node20" : undefined,
     rollupOptions: {
-      external: ["@napi-rs/canvas"]
+      external: ["@napi-rs/canvas"],
     }
   },
   define: {