fixes

apps/client/public/locales/en-US/translation.json

@@ -416,6 +416,7 @@
   "{{latestVersion}} is available": "{{latestVersion}} is available",
   "Default page edit mode": "Default page edit mode",
   "Choose your preferred page edit mode. Avoid accidental edits.": "Choose your preferred page edit mode. Avoid accidental edits.",
+  "Choose {{format}} file": "Choose {{format}} file",
   "Reading": "Reading",
   "Delete member": "Delete member",
   "Member deleted successfully": "Member deleted successfully",

apps/client/src/components/layouts/global/global-sidebar.module.css

@@ -50,7 +50,7 @@
 .sectionHeader {
     padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
     font-size: var(--mantine-font-size-xs);
-    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-3));
+    color: var(--mantine-color-dimmed);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;

apps/client/src/components/settings/app-version.tsx

@@ -29,7 +29,7 @@ export default function AppVersion() {
       >
         <Indicator
           label={t("New update")}
-          color="gray"
+          color="dark"
           inline
           size={16}
           position="middle-end"

apps/client/src/ee/page-verification/components/page-verification-modal.tsx

@@ -1,4 +1,12 @@
-import { ActionIcon, Group, Menu, Modal, Text, Tooltip } from "@mantine/core";
+import {
+  ActionIcon,
+  Group,
+  Menu,
+  Modal,
+  Text,
+  ThemeIcon,
+  Tooltip,
+} from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import {
   IconRosetteDiscountCheckFilled,
@@ -98,9 +106,9 @@ export function PageVerificationBadge({
         withArrow
         openDelay={250}
       >
-        <ActionIcon variant="subtle" color="gray">
+        <ThemeIcon variant="subtle" color="gray">
           <IconShieldCheck size={20} stroke={1.5} />
-        </ActionIcon>
+        </ThemeIcon>
       </Tooltip>
     );
   }
@@ -131,7 +139,12 @@ export function PageVerificationBadge({
         </Tooltip>
       ) : !readOnly ? (
         <Tooltip label={t("Set up verification")} withArrow openDelay={250}>
-          <ActionIcon variant="subtle" color="gray" onClick={open}>
+          <ActionIcon
+            variant="subtle"
+            color="gray"
+            aria-label={t("Set up verification")}
+            onClick={open}
+          >
             <IconShieldCheck size={20} stroke={1.5} />
           </ActionIcon>
         </Tooltip>

apps/client/src/features/page/components/page-import-modal.tsx

@@ -67,7 +67,7 @@ export default function PageImportModal({
         <Modal.Content style={{ overflow: "hidden" }}>
           <Modal.Header py={0}>
             <Modal.Title fw={500}>{t("Import pages")}</Modal.Title>
-            <Modal.CloseButton />
+            <Modal.CloseButton aria-label={t("Close")} />
           </Modal.Header>
           <Modal.Body>
             <ImportFormatSelection spaceId={spaceId} onClose={onClose} />
@@ -332,7 +332,15 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
   return (
     <>
       <SimpleGrid cols={2}>
-        <FileButton onChange={handleFileUpload} accept=".md" multiple resetRef={markdownFileRef}>
+        <FileButton
+          onChange={handleFileUpload}
+          accept=".md"
+          multiple
+          resetRef={markdownFileRef}
+          inputProps={{
+            "aria-label": t("Choose {{format}} file", { format: "Markdown" }),
+          }}
+        >
           {(props) => (
             <Button
               justify="start"
@@ -345,7 +353,15 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
           )}
         </FileButton>
 
-        <FileButton onChange={handleFileUpload} accept="text/html" multiple resetRef={htmlFileRef}>
+        <FileButton
+          onChange={handleFileUpload}
+          accept="text/html"
+          multiple
+          resetRef={htmlFileRef}
+          inputProps={{
+            "aria-label": t("Choose {{format}} file", { format: "HTML" }),
+          }}
+        >
           {(props) => (
             <Button
               justify="start"
@@ -363,6 +379,9 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
           accept=".docx"
           multiple
           resetRef={docxFileRef}
+          inputProps={{
+            "aria-label": t("Choose {{format}} file", { format: "Word (DOCX)" }),
+          }}
         >
           {(props) => (
             <Tooltip
@@ -387,6 +406,9 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
           accept=".pdf"
           multiple
           resetRef={pdfFileRef}
+          inputProps={{
+            "aria-label": t("Choose {{format}} file", { format: "PDF" }),
+          }}
         >
           {(props) => (
             <Tooltip
@@ -410,6 +432,9 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
           onChange={(file) => handleZipUpload(file, "notion")}
           accept="application/zip"
           resetRef={notionFileRef}
+          inputProps={{
+            "aria-label": t("Choose {{format}} file", { format: "Notion" }),
+          }}
         >
           {(props) => (
             <Button
@@ -426,6 +451,9 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
           onChange={(file) => handleZipUpload(file, "confluence")}
           accept="application/zip"
           resetRef={confluenceFileRef}
+          inputProps={{
+            "aria-label": t("Choose {{format}} file", { format: "Confluence" }),
+          }}
         >
           {(props) => (
             <Tooltip
@@ -463,6 +491,9 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
             onChange={(file) => handleZipUpload(file, "generic")}
             accept="application/zip"
             resetRef={zipFileRef}
+            inputProps={{
+              "aria-label": t("Choose {{format}} file", { format: "ZIP" }),
+            }}
           >
             {(props) => (
               <Group justify="center">

apps/client/src/features/search/components/search-control.tsx

@@ -47,6 +47,7 @@ export function SearchMobileControl({ onSearch }: SearchMobileControlProps) {
       <ActionIcon
         variant="subtle"
         color="dark"
+        aria-label={t("Search")}
         onClick={onSearch}
         size="sm"
       >

apps/client/src/pages/favorites/favorites-page.tsx

@@ -6,7 +6,7 @@ import {
   Table,
   Container,
   Title,
-  ActionIcon,
+  ThemeIcon,
   Button,
 } from "@mantine/core";
 import { Link } from "react-router-dom";
@@ -71,13 +71,13 @@ export default function FavoritesPage() {
                         >
                           <Group wrap="nowrap">
                             {fav.page.icon || (
-                              <ActionIcon
+                              <ThemeIcon
                                 variant="transparent"
                                 color="gray"
                                 size={18}
                               >
                                 <IconFileDescription size={18} />
-                              </ActionIcon>
+                              </ThemeIcon>
                             )}
                             <Text fw={500} size="md" lineClamp={1}>
                               {fav.page.title || t("Untitled")}

apps/client/src/theme.ts

@@ -71,7 +71,7 @@ export const mantineCssResolver: CSSVariablesResolver = (theme) => ({
     "--input-error-size": theme.fontSizes.sm,
   },
   light: {
-    "--mantine-color-dimmed": "#6b7280",
+    "--mantine-color-dimmed": "#4b5563",
     "--mantine-color-dark-light-color": "#4e5359",
     "--mantine-color-dark-light-hover": "var(--mantine-color-gray-light-hover)",
   },