A new about dialog

apps/client/src/translations/en/translation.json

@@ -1,13 +1,19 @@
 {
-  "about": {
-    "title": "About Trilium Notes",
-    "homepage": "Homepage:",
-    "app_version": "App version:",
-    "db_version": "DB version:",
-    "sync_version": "Sync version:",
-    "build_date": "Build date:",
-    "build_revision": "Build revision:",
-    "data_directory": "Data directory:"
+  "about": {   
+    "version_label": "Version:",
+    "version": "app: {{appVersion}}, database: {{dbVersion}}, sync protocol: {{syncVersion}}",
+    "build_info": "{{buildDate}}, revision: <buildRevision />",
+    "contributors_label": "Contributors:",
+    "contributor_roles": {
+      "lead-dev": "lead developer",
+      "original-dev": "original developer"
+    },
+    "contributor_full_list": "See the entire community",
+    "data_directory": "Data directory:",
+    "github_tooltip": "Report bugs, suggest features, or contribute on GitHub",
+    "license_tooltip": "View license",
+    "donate": "Donate",
+    "donate_tooltip": "Donate to support this project"
   },
   "toast": {
     "critical-error": {

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

@@ -0,0 +1,166 @@
+.about-dialog {
+
+    body.light-theme & {
+        --donate-button-color: #d78382;
+    }
+
+    body.dark-theme & {
+        --donate-button-color: #fba6a5;
+    }
+
+    --bs-modal-width: 680px;
+
+    .icon {
+        width: 160px;
+        height: 160px;
+
+        &.icon-default {
+            background-image: url(../../assets/icon.svg);
+        }
+
+        &.icon-nightly {
+            background-image: url(../../assets/icon-nightly.svg);
+        }
+
+        &.icon-default,
+        &.icon-nightly {
+            animation: icon-intro 500ms ease-out;
+            will-change: opacity, transform;
+        }
+
+        &.icon-classic {
+            mask-image: url(../../assets/icon-classic.svg);
+            background-color: var(--muted-text-color);
+            animation: icon-classic-intro 300ms ease-in-out;
+            will-change: opacity, transform;
+        }
+    }
+
+    h2 {
+        all: unset;
+        font-size: 2em;
+        font-weight: 300;
+        letter-spacing: 1pt;
+
+        .channel-name {
+            opacity: .75;
+        }
+    }
+
+    .about-dialog-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .property-sheet-table {
+        margin-block: 30px;
+        font-size: .85em;
+        margin-inline: 20px;  
+    }
+
+    .build-info {
+        color: var(--muted-text-color);
+        font-size: .9em;
+    }
+
+    .contributor-list {
+        a, span {
+            white-space: nowrap;
+        }
+    }
+
+    footer {
+        display: flex;
+        justify-content: center;
+        gap: 10px;
+        margin-bottom: 30px;
+
+        a {
+            --_icon-size: 28px;
+
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 8px 10px;
+            border-radius: 6px;
+            font-size: .9rem;
+            color: var(--main-text-color);
+
+            &:hover {
+                background: var(--icon-button-hover-background);
+            }
+
+            &::after {
+                display: none;
+            }
+
+            i {
+                font-size: var(--_icon-size);
+            }
+
+            svg {
+                fill: currentColor;
+                height: var(--_icon-size);
+            }
+
+            &.donate-link {
+                color: var(--donate-button-color);
+            }
+        }
+    }
+}
+
+@keyframes icon-intro {
+    from {
+        opacity: 0;
+        transform: scale(.5);
+    } to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes icon-classic-intro {
+    from {
+        opacity: 0;
+        transform: rotate(50deg) scale(.5);
+    } to {
+        opacity: 1;
+        transform: rotate(0deg) scale(1.25); 
+    }
+}
+
+/* TODO: move to global styles */
+.property-sheet-table {
+    border-spacing: 0 2px;
+    border-collapse: separate;
+
+    tr {
+        --_br: 8px;
+
+        background: var(--card-background-color);
+
+        &: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));
+        }
+    }
+
+    td {
+        padding: 10px 16px;
+        vertical-align: top;
+
+        &:first-child {
+            white-space: nowrap;
+            color: var(--muted-text-color);
+        }
+
+        &:last-child {
+            width: 100%;
+        }
+    }
+}