UI2 theming (#416)

papermerge/core/routers/nodes.py

@@ -280,7 +280,7 @@ def assign_node_tags(
             scopes=[scopes.NODE_UPDATE]
         )
     ]
-) -> PyNode:
+) -> schemas.Document | schemas.Folder:
     """
     Assigns given list of tag names to the node.
 
@@ -302,9 +302,12 @@ def assign_node_tags(
         )
 
     node.tags.set(tags, tag_kwargs={"user_id": user.id})
-    _notify_index(node_id)
+    _notify_index(str(node_id))
 
-    return PyNode.model_validate(node)
+    if node.ctype == "folder":
+        return schemas.Folder.model_validate(node)
+
+    return schemas.Document.model_validate(node)
 
 
 @router.patch("/{node_id}/tags")

ui2/src/app/App.css

@@ -0,0 +1,6 @@
+#root {
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+  overflow: hidden;
+}

ui2/src/app/App.tsx

@@ -1,23 +1,33 @@
+import {useEffect} from "react"
 import "@mantine/core/styles.css"
 import {AppShell} from "@mantine/core"
-import {Outlet} from "react-router-dom"
+import {Outlet, useNavigate} from "react-router-dom"
 import {useSelector} from "react-redux"
 
 import NavBar from "@/components/NavBar"
 import Header from "@/components/Header/Header"
 import {
   selectCurrentUserError,
-  selectCurrentUserStatus
+  selectCurrentUserStatus,
+  selectCurrentUser
 } from "@/slices/currentUser"
 
-import classes from "./App.module.css"
+import "./App.css"
 import {selectNavBarWidth} from "@/slices/navBar"
 import Uploader from "@/components/Uploader"
 
 function App() {
+  const navigate = useNavigate()
   const status = useSelector(selectCurrentUserStatus)
   const error = useSelector(selectCurrentUserError)
   const navBarWidth = useSelector(selectNavBarWidth)
+  const user = useSelector(selectCurrentUser)
+
+  useEffect(() => {
+    if (status == "succeeded" && user) {
+      navigate(`/home/${user.home_folder_id}`)
+    }
+  }, [status])
 
   if (status == "failed") {
     return <>{error}</>
@@ -29,15 +39,15 @@ function App() {
         header={{height: 60}}
         navbar={{
           width: navBarWidth,
-          breakpoint: "sm"
+          breakpoint: 0
         }}
         padding="md"
       >
-        <AppShell.Header className={classes.header}>
+        <AppShell.Header>
           <Header />
         </AppShell.Header>
 
-        <AppShell.Navbar className={classes.navbar}>
+        <AppShell.Navbar>
           <NavBar />
         </AppShell.Navbar>
 

ui2/src/components/Breadcrumbs/Breadcrumbs.module.css

@@ -1,5 +1,6 @@
 .breadcrumbs {
   a {
     padding: 0.5rem 0;
+    color: light-dark(var(--mantine-color-pmg-9), var(--mantine-color-pmg-2));
   }
 }

ui2/src/components/ColorSchemeToggle/ColorSchemeToggle.tsx

@@ -1,15 +1,38 @@
 import {useState} from "react"
-import {Switch, useMantineColorScheme} from "@mantine/core"
+import {
+  Switch,
+  useMantineColorScheme,
+  useMantineTheme,
+  rem
+} from "@mantine/core"
+import {IconSun, IconMoonStars} from "@tabler/icons-react"
 
 export function ColorSchemeToggle() {
+  const theme = useMantineTheme()
   const {setColorScheme} = useMantineColorScheme()
   const [checked, setChecked] = useState(false)
 
+  const sunIcon = (
+    <IconSun
+      style={{width: rem(16), height: rem(16)}}
+      stroke={2.5}
+      color={theme.colors.yellow[4]}
+    />
+  )
+
+  const moonIcon = (
+    <IconMoonStars
+      style={{width: rem(16), height: rem(16)}}
+      stroke={2.5}
+      color={theme.colors.pmg[9]}
+    />
+  )
+
   const onToggleColorScheme = () => {
     if (checked) {
-      setColorScheme("dark")
-    } else {
       setColorScheme("light")
+    } else {
+      setColorScheme("dark")
     }
     setChecked(!checked)
   }
@@ -18,7 +41,9 @@ export function ColorSchemeToggle() {
     <Switch
       checked={checked}
       onChange={onToggleColorScheme}
-      label="Dark mode"
+      color="dark.4"
+      onLabel={sunIcon}
+      offLabel={moonIcon}
     />
   )
 }

ui2/src/components/Header/Header.module.css

@@ -1,15 +1,6 @@
 .logo {
   width: 5rem;
 }
-.header {
-  margin-bottom: rem(120px);
-  background-color: #1c47a7;
-  color: rgb(241, 241, 241);
-  border-bottom: rem(1px) solid
-    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
-  padding-left: var(--mantine-spacing-md);
-  padding-right: var(--mantine-spacing-md);
-}
 
 .search {
   flex: 0.7;
@@ -19,22 +10,5 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-}
-
-.link {
-  display: block;
-  line-height: 1;
-  padding: rem(8px) rem(12px);
-  border-radius: var(--mantine-radius-sm);
-  text-decoration: none;
-  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
-  font-size: var(--mantine-font-size-sm);
-  font-weight: 500;
-
-  @mixin hover {
-    background-color: light-dark(
-      var(--mantine-color-gray-0),
-      var(--mantine-color-dark-6)
-    );
-  }
+  padding: 0.75rem;
 }

ui2/src/components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import {Group} from "@mantine/core"
+import {Group, useMantineTheme} from "@mantine/core"
 
 import {ColorSchemeToggle} from "@/components/ColorSchemeToggle/ColorSchemeToggle"
 import classes from "./Header.module.css"
@@ -7,9 +7,16 @@ import SidebarToggle from "./SidebarToggle"
 import UserMenu from "./UserMenu"
 import Search from "./Search"
 
-function Topbar() {
+function Header() {
+  const theme = useMantineTheme()
+
   return (
-    <header className={classes.header}>
+    <header
+      style={{
+        backgroundColor: theme.colors.pmg[9],
+        color: theme.colors.pmg[0]
+      }}
+    >
       <div className={classes.inner}>
         <Group>
           <SidebarToggle />
@@ -27,4 +34,4 @@ function Topbar() {
   )
 }
 
-export default Topbar
+export default Header

ui2/src/components/NavBar/NavBar.tsx

@@ -16,7 +16,6 @@ import {
 import {selectNavBarCollapsed} from "@/slices/navBar"
 
 import type {User} from "@/types.ts"
-import "./NavBar.css"
 
 function NavBarFull() {
   const user = useSelector(selectCurrentUser) as User

ui2/src/components/Node/Document/Document.module.css

@@ -10,4 +10,8 @@
   img {
     height: 64px;
   }
+
+  a {
+    color: light-dark(var(--mantine-color-pmg-9), var(--mantine-color-pmg-2));
+  }
 }

ui2/src/components/Node/Folder/Folder.module.css

@@ -6,6 +6,10 @@
     background-color: #8ed2fe66;
     outline: 1px solid #6fc5ff;
   }
+
+  a {
+    color: light-dark(var(--mantine-color-pmg-9), var(--mantine-color-pmg-2));
+  }
 }
 
 .folderIcon {

ui2/src/components/modals/DropFiles.tsx

@@ -1,7 +1,7 @@
 import {useContext, useState} from "react"
 import {createRoot} from "react-dom/client"
 import {Checkbox, MantineProvider, Text} from "@mantine/core"
-import {theme} from "@/app/theme"
+import theme from "@/themes"
 import GenericModal from "@/components/modals/Generic"
 import Error from "@/components/modals/Error"
 import type {NodeType, FolderType} from "@/types"

ui2/src/components/modals/EditNodeTags.tsx

@@ -1,7 +1,7 @@
 import {useState} from "react"
 import {createRoot} from "react-dom/client"
 import {MantineProvider, TagsInput} from "@mantine/core"
-import {theme} from "@/app/theme"
+import theme from "@/themes"
 import GenericModal from "@/components/modals/Generic"
 import Error from "@/components/modals/Error"
 import type {NodeType} from "@/types"
@@ -26,7 +26,7 @@ const EditNodeTagsModal = ({node, onOK, onCancel}: Args) => {
       let response = await axios.post(`/api/nodes/${node.id}/tags`, tags, {
         signal
       })
-      let new_node: NodeType = response.data as NodeType
+      let new_node = response.data as NodeType
       onOK(new_node)
     } catch (error: any | AxiosError) {
       if (axios.isAxiosError(error)) {

ui2/src/components/modals/EditNodeTitle.tsx

@@ -2,7 +2,7 @@ import {ChangeEvent} from "react"
 import {useState} from "react"
 import {createRoot} from "react-dom/client"
 import {MantineProvider, TextInput} from "@mantine/core"
-import {theme} from "@/app/theme"
+import theme from "@/themes"
 import GenericModal from "@/components/modals/Generic"
 import Error from "@/components/modals/Error"
 import type {NodeType} from "@/types"

ui2/src/components/modals/Generic.tsx

@@ -2,7 +2,7 @@ import {createRoot} from "react-dom/client"
 import {useEffect, useState, useRef} from "react"
 import {Provider} from "react-redux"
 import React from "react"
-import {theme} from "@/app/theme"
+import theme from "@/themes"
 import {store} from "@/app/store"
 
 import {
@@ -109,7 +109,7 @@ const GenericModal = ({
             leftSection={inProgress && <Loader size={"sm"} />}
             onClick={handleSubmit}
             disabled={inProgress}
-            color={submit_button_color || "blue"}
+            color={submit_button_color || "pmg.9"}
           >
             {submit_button_title || "Submit"}
           </Button>

ui2/src/components/modals/NewFolder.tsx

@@ -2,7 +2,7 @@ import {ChangeEvent} from "react"
 import {useState} from "react"
 import {createRoot} from "react-dom/client"
 import {MantineProvider, TextInput} from "@mantine/core"
-import {theme} from "@/app/theme"
+import theme from "@/themes"
 import GenericModal from "@/components/modals/Generic"
 
 import type {NodeType} from "@/types"