From 81690617c5d686c381e87986fdf1228b37bd73e0 Mon Sep 17 00:00:00 2001 From: Jeffrey Holland Date: Wed, 20 Aug 2025 16:20:33 +0200 Subject: [PATCH] Use tailwind-alike classes for new styles --- apps/desktop/electron-builder.json | 4 +--- .../credentials/fido2-create.component.html | 6 +++--- .../fido2-excluded-ciphers.component.html | 4 ++-- .../credentials/fido2-vault.component.html | 6 +++--- .../modal/credentials/fido2-vault.component.ts | 11 ++++++++++- apps/desktop/src/scss/header.scss | 14 -------------- eslint.config.mjs | 8 +++++++- libs/components/src/tw-theme.css | 18 ++++++++++++++++++ 8 files changed, 44 insertions(+), 27 deletions(-) diff --git a/apps/desktop/electron-builder.json b/apps/desktop/electron-builder.json index 800cdd848a7..a6480b54370 100644 --- a/apps/desktop/electron-builder.json +++ b/apps/desktop/electron-builder.json @@ -67,7 +67,6 @@ ], "CFBundleDevelopmentRegion": "en" }, - "provisioningProfile": "bitwarden_desktop_developer_id.provisionprofile", "singleArchFiles": "node_modules/@bitwarden/desktop-napi/desktop_napi.darwin-*.node", "extraFiles": [ { @@ -146,8 +145,7 @@ "extendInfo": { "LSMinimumSystemVersion": "12", "ElectronTeamID": "LTZ2PFU5D6" - }, - "provisioningProfile": "bitwarden_desktop_appstore.provisionprofile" + } }, "nsisWeb": { "oneClick": false, diff --git a/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html b/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html index d4241679604..0f9d27dd3c8 100644 --- a/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html +++ b/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html @@ -1,9 +1,9 @@
- +
@@ -16,7 +16,7 @@ type="button" bitIconButton="bwi-close" slot="end" - class="passkey-header-close tw-mb-4 tw-mr-2" + class="tw-app-region-no-drag tw-mb-4 tw-mr-2" (click)="closeModal()" > {{ "close" | i18n }} diff --git a/apps/desktop/src/autofill/modal/credentials/fido2-excluded-ciphers.component.html b/apps/desktop/src/autofill/modal/credentials/fido2-excluded-ciphers.component.html index 4ddf7cc4840..22a00c602f8 100644 --- a/apps/desktop/src/autofill/modal/credentials/fido2-excluded-ciphers.component.html +++ b/apps/desktop/src/autofill/modal/credentials/fido2-excluded-ciphers.component.html @@ -3,7 +3,7 @@ disableMargin class="tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300" > - +
@@ -16,7 +16,7 @@ type="button" bitIconButton="bwi-close" slot="end" - class="passkey-header-close tw-mb-4 tw-mr-2" + class="tw-app-region-no-drag tw-mb-4 tw-mr-2" (click)="closeModal()" > {{ "close" | i18n }} diff --git a/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.html b/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.html index 473b457c13f..e43320dcb65 100644 --- a/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.html +++ b/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.html @@ -1,9 +1,9 @@
- +
@@ -13,7 +13,7 @@ type="button" bitIconButton="bwi-close" slot="end" - class="passkey-header-close tw-mb-4 tw-mr-2" + class="tw-app-region-no-drag tw-mb-4 tw-mr-2" (click)="closeModal()" > {{ "close" | i18n }} diff --git a/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.ts b/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.ts index c595f1bbfde..27dcab1b3c0 100644 --- a/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.ts +++ b/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.ts @@ -1,7 +1,16 @@ import { CommonModule } from "@angular/common"; import { Component, OnInit, OnDestroy } from "@angular/core"; import { RouterModule, Router } from "@angular/router"; -import { firstValueFrom, map, BehaviorSubject, Observable, Subject, takeUntil } from "rxjs"; +import { + firstValueFrom, + map, + combineLatest, + of, + BehaviorSubject, + Observable, + Subject, + takeUntil, +} from "rxjs"; import { JslibModule } from "@bitwarden/angular/jslib.module"; import { AccountService } from "@bitwarden/common/auth/abstractions/account.service"; diff --git a/apps/desktop/src/scss/header.scss b/apps/desktop/src/scss/header.scss index c0c763ad429..cdd579a6554 100644 --- a/apps/desktop/src/scss/header.scss +++ b/apps/desktop/src/scss/header.scss @@ -232,17 +232,3 @@ font-size: $font-size-small; } } - -.passkey-header { - -webkit-app-region: drag; -} - -.passkey-header-close { - -webkit-app-region: no-drag; -} - -.passkey-header-sticky { - position: sticky; - top: 0; - z-index: 1; -} diff --git a/eslint.config.mjs b/eslint.config.mjs index c4018b7625e..05a7d4b2394 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -182,7 +182,12 @@ export default tseslint.config( { // uses negative lookahead to whitelist any class that doesn't start with "tw-" // in other words: classnames that start with tw- must be valid TailwindCSS classes - whitelist: ["(?!(tw)\\-).*"], + whitelist: [ + "(?!(tw)\\-).*", + "tw-app-region-drag", + "tw-app-region-no-drag", + "tw-app-region-header-sticky", + ], }, ], "tailwindcss/enforces-negative-arbitrary-values": "error", @@ -325,6 +330,7 @@ export default tseslint.config( "file-selector", "mfaType.*", "filter.*", // Temporary until filters are migrated + "tw-app-region*", // Custom utility for native passkey modals ], }, ], diff --git a/libs/components/src/tw-theme.css b/libs/components/src/tw-theme.css index bfdd976366b..ae8b36a24bc 100644 --- a/libs/components/src/tw-theme.css +++ b/libs/components/src/tw-theme.css @@ -172,6 +172,24 @@ text-align: unset; } + /** + * tw-app-region-drag and tw-app-region-no-drag are used for Electron window dragging behavior + * These will replace direct -webkit-app-region usage as part of the migration to Tailwind CSS + */ + .tw-app-region-drag { + -webkit-app-region: drag; + } + + .tw-app-region-no-drag { + -webkit-app-region: no-drag; + } + + .tw-app-region-header-sticky { + position: sticky; + top: 0; + z-index: 1; + } + /** * Bootstrap uses z-index: 1050 for modals, dialogs and drag-and-drop previews should appear above them. * When bootstrap is removed, test if these styles are still needed and that overlays display properly over other content.