client/about dialog: refactor

apps/client/src/widgets/dialogs/about.css

@@ -169,85 +169,4 @@
     } 100% {
         transform: scale(1);
     }
-}
-
-/* TODO: move to global styles */
-.property-sheet-table {
-    --border-radius: 8px;
-
-    dl {
-        background: var(--card-background-color);
-
-        dt {
-            color: var(--muted-text-color);
-        }
-    }
-}
-
-@media (min-width: 600px) {
-    .property-sheet-table {
-        display: table;
-        border-spacing: 0 2px;
-        border-collapse: separate;
-
-        dl {
-            display: table-row;
-            --_br: var(--border-radius);
-            
-            &:first-child {
-                clip-path: inset(0 round var(--_br) var(--_br) 0 0);
-            }
-
-            &:last-child {
-                clip-path: inset(0 round 0 0 var(--_br) var(--_br));
-            }
-        }
-
-        dt, dd {
-            display: table-cell;
-            padding: 10px 16px;
-            vertical-align: top;
-        }
-
-        dt {
-            white-space: nowrap;
-        }
-
-        dl {
-            width: 100%;
-    }
-    }
-}
-
-@media (max-width: 599px) {
-    .property-sheet-table {
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-
-        dl {
-            margin: 0;
-            padding: 12px 20px;
-
-            &:first-child {
-                border-radius: var(--border-radius) var(--border-radius) 0 0;
-            }
-
-            &:last-child {
-                border-radius: 0 0 var(--border-radius) var(--border-radius);
-            }
-
-            dt {
-                margin-bottom: 8px;
-                font-size: .85em;
-                font-weight: 500;
-                text-transform: uppercase;
-                letter-spacing: .4pt;
-            }
-            
-            dd {
-                margin: 0;
-            }
-        }
-    }
 }

apps/client/src/widgets/dialogs/about.tsx

@@ -7,6 +7,7 @@ import openService from "../../services/open.js";
 import { useState, useCallback, useRef } from "preact/hooks";
 import type { AppInfo, Contributor, ContributorList } from "@triliumnext/commons";
 import { useTooltip, useTriliumEvent } from "../react/hooks.jsx";
+import { PropertySheet, PropertySheetItem } from "../react/PropertySheet.js";
 import "./about.css";
 import { Trans } from "react-i18next";
 import type React from "react";
@@ -79,10 +80,9 @@ export default function AboutDialog() {
                     triliumnotes.org
                 </a>
 
-                <div className="property-sheet-table">
-                    <dl>
-                        <dt>{t("about.version_label")}</dt>
-                        <dd className="selectable-text">
+                <PropertySheet>
+                    <PropertySheetItem label={t("about.version_label")}>
+                        <div className="selectable-text">
                             {t("about.version", {
                                 appVersion: appInfo?.appVersion,
                                 dbVersion: appInfo?.dbVersion,
@@ -99,27 +99,25 @@ export default function AboutDialog() {
                                     }}
                                 />
                             </div>
-                        </dd>
-                    </dl>
+                        </div>
+                    </PropertySheetItem>
 
-                    <dl>
-                        <dt>{t("about.contributors_label")}</dt>
-                        <dd className="contributor-list use-tn-links">
+                    <PropertySheetItem label={t("about.contributors_label")}>
+                        <div className="contributor-list use-tn-links">
                             <CachedContributors />
 
                             <a href="https://github.com/TriliumNext/Trilium/graphs/contributors" target="_blank">
                                 {t("about.contributor_full_list")}
                             </a>
-                        </dd>
-                    </dl>
+                        </div>
+                    </PropertySheetItem>
 
-                    <dl>
-                        <dt>{t("about.data_directory")}</dt>
-                        <dd className="selectable-text" style={{wordBreak: "break-all"}}>
+                    <PropertySheetItem label={t("about.data_directory")}>
+                        <div className="selectable-text" style={{wordBreak: "break-all"}}>
                             {appInfo?.dataDirectory && (<DirectoryLink directory={appInfo.dataDirectory} />)}
-                        </dd>
-                    </dl>
-                </div>
+                        </div>
+                    </PropertySheetItem>
+                </PropertySheet>
            </div>
 
            <footer>