mirror of
https://github.com/bitwarden/browser
synced 2025-12-17 08:43:33 +00:00
[CL-265] CL/extension refresh feature branch (#8696)
* [CL-245] Update palette to new light and dark theme colors (#8633) * [CL-245] Add new color swatches to storybook (#8697) * [CL-238] update typography (#8997) * [CL-230] [CL-296] Update button styles (#9345) * [CL-237] Update menu styles for extension refresh (#9525) * [CL-267] Add 100-level color variants and update primary-600 (#9550) * [CL-286] Update badge to use focus-visible instead of focus (#9551) * [CL-250] Update badge styles for extension refresh (#9572) * [CL-234] callout style refresh (#9920) * [CL-233] Update form field styles (#9776) * [CL-239][CL-251][CL-342] dialog style refresh (#10096) * [CL-239] simple dialog style refresh * [CL-342] fix text overflow in dialog; add story * [CL-244] readonly fields (#10164) * [CL-352] Fix Angular errors related to form element changes (#10211) * [CL-273] Update styles for checkbox and form control (#10146) * [CL-274] Update styling for radio button (#10333) * [CL-338] Remove extra space in item content when end slot is empty (#10350) * [CL-377] Fix extension style conflict for input background (#10351) * [CL-271] Update styles for toggle (#10377) * [CL-381] Update spacing around form elements (#10432) * [CL-229] Update icon button styles (#10405) * [CL-380] Remove hover state from disabled form fields (#10639) * [CL-405] Allow toggle group input to be full width (#10658) * [CL-389] Exclude end slot label content from truncation (#10508) * [CL-383] Remove manual focus when password toggle is clicked (#10749) * [CL-278][CL-391] misc bit-item style fixes (#10758) * [CL-391] use pointer cursor on hover when link or button * [CL-210] Change base font size from 14px to 16px (#10779) * [CL-291] Finalize styling for chip select (#10771) * [CL-257] update banner component styles (#10766) * [CL-443] Fix sizing issues (#10893) * [CL-445] Fix small sizing and spacing issues (#10962) * [CL-382] Reduce element shifting on readonly hover (#10956) * [CL-396] Update theme colors to new hexes (#10968) * [CL-395] Remove text headers color (#10997) * [CL-404] Switch to primary-600 for all focus indicators (#11015) * [CL-397] Remove primary-500 (#11036) * [CL-447] Ensure DM Sans displays correctly at all font weights (#11041) * [CL-448] Scrollbar Styles (#11111) * CL-252/update toast (#10996) * [CL-275] Update link styles (#11174) * [CL-446] Update hover state for unselected chip selects (#11172) * [CL-454] Improve color a11y for toast and banner interactive elements (#11200) * [CL-457] Center input text for select and multiselect (#11239) * [CL-455] Do not use responsive margin for sections in dialogs or extension (#11243) * [CL-459] Fix chip behavior when opening menu while item is selected (#11227) * [CL-388] Update vertical nav colors for new palette (#11226) * scope styled scrollbar to only select elements (#11247) * edit radio buttons to be block inputs and update spacing (#11291) * [CL-453] Fix multiselect chip spacing and truncation (#11300) * [PM-11131] Prevent duplicated sr labels on form field icon buttons (#11383) * [CL-303] Prevent chip menu from running offscreen (#11348) * [CL-476] Fix DM Sans font on Windows (#11409) * implements scrollbar styles for firefox/chrome and safari (#11447) * [CL-472] Fix search background color in extension (#11466) * [CL-481] Style updates for bit-item, bit-card, and primary-100 (#11473) * [CL-478] Remove underline on hover for most components (#11477) * [CL-477] Remove focus styles for readonly input (#11510) * [CL-487] Fix vault items virtual scroll height (#11581) * [PM-8625] Increase popup width (#11686) * [CL-494] Wrap long words in toggle group (#11659) * [CL-13820] Add class to remove link underline (#11762) * [CL-435] Prevent Windows extension from shifting (#11851) * [CL-503] Add notification color variables (#11802) * [PM-14043] Update size of toggle group label to fit more content (#11881) * [CL-498] Set chip menu width minimum to chip select width (#11905) --------- Co-authored-by: Will Martin <contact@willmartian.com> Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com> Co-authored-by: Nick Krantz <125900171+nick-livefront@users.noreply.github.com> Co-authored-by: Merissa Weinstein <merissa.k.weinstein@gmail.com> Co-authored-by: Danielle Flinn <43477473+danielleflinn@users.noreply.github.com>
This commit is contained in:
Victoria League
GitHub
@@ -30,7 +30,7 @@
|
||||
|
||||
<a href="/" class="tw-btn-secondary tw-inline-block">Go to your web vault</a>
|
||||
</main>
|
||||
<footer class="tw-mt-auto tw-h-40 tw-bg-primary-500 tw-flex tw-justify-center tw-items-center">
|
||||
<footer class="tw-mt-auto tw-h-40 tw-bg-primary-600 tw-flex tw-justify-center tw-items-center">
|
||||
<i class="bwi bwi-shield tw-text-contrast tw-text-4xl"></i>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
@@ -81,8 +81,8 @@ export class GroupsComponent {
|
||||
protected searchControl = new FormControl("");
|
||||
|
||||
// Fixed sizes used for cdkVirtualScroll
|
||||
protected rowHeight = 46;
|
||||
protected rowHeightClass = `tw-h-[46px]`;
|
||||
protected rowHeight = 52;
|
||||
protected rowHeightClass = `tw-h-[52px]`;
|
||||
|
||||
protected ModalTabType = GroupAddEditTabType;
|
||||
private refreshGroups$ = new BehaviorSubject<void>(null);
|
||||
|
||||
@@ -104,8 +104,8 @@ export class MembersComponent extends BaseMembersComponent<OrganizationUserView>
|
||||
);
|
||||
|
||||
// Fixed sizes used for cdkVirtualScroll
|
||||
protected rowHeight = 62;
|
||||
protected rowHeightClass = `tw-h-[62px]`;
|
||||
protected rowHeight = 69;
|
||||
protected rowHeightClass = `tw-h-[69px]`;
|
||||
|
||||
constructor(
|
||||
apiService: ApiService,
|
||||
|
||||
@@ -3,13 +3,7 @@
|
||||
<div class="tw-flex" *ngIf="!hideMultiSelect">
|
||||
<bit-form-field *ngIf="permissionMode == 'edit'" class="tw-mr-3 tw-shrink-0">
|
||||
<bit-label>{{ "permission" | i18n }}</bit-label>
|
||||
<!--
|
||||
Built-in select height differs between browsers, this fix makes sure we match bit-multi-select height.
|
||||
We might want to reconsider this fix when/if we implement
|
||||
[CL-78] [Improvement] Completely restyled selects (https://bitwarden.atlassian.net/browse/CL-78)
|
||||
-->
|
||||
<select
|
||||
class="tw-h-[35px]"
|
||||
bitInput
|
||||
[disabled]="disabled"
|
||||
[(ngModel)]="initialPermission"
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<button
|
||||
id="sendBtn"
|
||||
bitLink
|
||||
linkType="contrast"
|
||||
linkType="secondary"
|
||||
bitButton
|
||||
type="button"
|
||||
buttonType="unstyled"
|
||||
|
||||
@@ -65,7 +65,7 @@
|
||||
{{ "launchCloudSubscription" | i18n }}
|
||||
</a>
|
||||
<form [formGroup]="form">
|
||||
<bit-radio-group formControlName="updateMethod">
|
||||
<bit-radio-group formControlName="updateMethod" [block]="true">
|
||||
<h2 class="mt-5">
|
||||
{{ "licenseAndBillingManagement" | i18n }}
|
||||
</h2>
|
||||
@@ -73,7 +73,6 @@
|
||||
id="automatic-sync"
|
||||
[value]="licenseOptions.SYNC"
|
||||
[disabled]="disableLicenseSyncControl"
|
||||
class="tw-block"
|
||||
*ngIf="showAutomaticSyncAndManualUpload"
|
||||
>
|
||||
<bit-label
|
||||
@@ -94,29 +93,31 @@
|
||||
</bit-hint>
|
||||
</bit-radio-button>
|
||||
<ng-container *ngIf="updateMethod === licenseOptions.SYNC">
|
||||
<button
|
||||
bitButton
|
||||
buttonType="secondary"
|
||||
type="button"
|
||||
(click)="manageBillingSyncSelfHosted()"
|
||||
>
|
||||
{{ "manageBillingTokenSync" | i18n }}
|
||||
</button>
|
||||
<button
|
||||
bitButton
|
||||
buttonType="primary"
|
||||
type="button"
|
||||
[bitAction]="syncLicense"
|
||||
[disabled]="!billingSyncEnabled"
|
||||
>
|
||||
{{ "syncLicense" | i18n }}
|
||||
</button>
|
||||
<div class="tw-mt-6">
|
||||
<button
|
||||
bitButton
|
||||
buttonType="secondary"
|
||||
type="button"
|
||||
(click)="manageBillingSyncSelfHosted()"
|
||||
>
|
||||
{{ "manageBillingTokenSync" | i18n }}
|
||||
</button>
|
||||
<button
|
||||
bitButton
|
||||
buttonType="primary"
|
||||
type="button"
|
||||
[bitAction]="syncLicense"
|
||||
[disabled]="!billingSyncEnabled"
|
||||
>
|
||||
{{ "syncLicense" | i18n }}
|
||||
</button>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<bit-radio-button
|
||||
id="manual-upload"
|
||||
[value]="licenseOptions.UPLOAD"
|
||||
class="tw-mt-6 tw-block"
|
||||
class="tw-mt-6"
|
||||
*ngIf="showAutomaticSyncAndManualUpload"
|
||||
>
|
||||
<bit-label>{{ "manualUpload" | i18n }}</bit-label>
|
||||
@@ -128,7 +129,7 @@
|
||||
<bit-label class="tw-mb-6 tw-block" *ngIf="!showAutomaticSyncAndManualUpload">
|
||||
{{ "licenseAndBillingManagementDesc" | i18n }}
|
||||
</bit-label>
|
||||
<h3 *ngIf="showAutomaticSyncAndManualUpload" class="tw-font-semibold">
|
||||
<h3 *ngIf="showAutomaticSyncAndManualUpload" class="tw-font-semibold tw-mt-6">
|
||||
{{ "uploadLicense" | i18n }}
|
||||
</h3>
|
||||
<app-update-license
|
||||
|
||||
@@ -157,9 +157,9 @@ export class StripeService {
|
||||
base: {
|
||||
color: null,
|
||||
fontFamily:
|
||||
'"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, ' +
|
||||
'"DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, ' +
|
||||
'"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
|
||||
fontSize: "14px",
|
||||
fontSize: "16px",
|
||||
fontSmoothing: "antialiased",
|
||||
"::placeholder": {
|
||||
color: null,
|
||||
|
||||
@@ -84,9 +84,9 @@ export class PaymentComponent implements OnInit, OnDestroy {
|
||||
base: {
|
||||
color: null,
|
||||
fontFamily:
|
||||
'"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, ' +
|
||||
'"DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, ' +
|
||||
'"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
|
||||
fontSize: "14px",
|
||||
fontSize: "16px",
|
||||
fontSmoothing: "antialiased",
|
||||
"::placeholder": {
|
||||
color: null,
|
||||
|
||||
@@ -16,8 +16,8 @@ import { VaultItem } from "./vault-item";
|
||||
import { VaultItemEvent } from "./vault-item-event";
|
||||
|
||||
// Fixed manual row height required due to how cdk-virtual-scroll works
|
||||
export const RowHeight = 65;
|
||||
export const RowHeightClass = `tw-h-[65px]`;
|
||||
export const RowHeight = 75.5;
|
||||
export const RowHeightClass = `tw-h-[75.5px]`;
|
||||
|
||||
const MaxSelectionCount = 500;
|
||||
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
{{ "updateBrowserDesc" | i18n }}
|
||||
<a
|
||||
bitLink
|
||||
linkType="contrast"
|
||||
linkType="secondary"
|
||||
target="_blank"
|
||||
href="https://browser-update.org/update-browser.html"
|
||||
rel="noreferrer noopener"
|
||||
@@ -45,7 +45,7 @@
|
||||
(onClose)="dismissBanner(VisibleVaultBanner.KDFSettings)"
|
||||
>
|
||||
{{ "lowKDFIterationsBanner" | i18n }}
|
||||
<a bitLink linkType="contrast" routerLink="/settings/security/security-keys">
|
||||
<a bitLink linkType="secondary" routerLink="/settings/security/security-keys">
|
||||
{{ "changeKDFSettings" | i18n }}
|
||||
</a>
|
||||
</bit-banner>
|
||||
@@ -66,7 +66,7 @@
|
||||
(onClose)="dismissBanner(VisibleVaultBanner.Premium)"
|
||||
>
|
||||
{{ "premiumUpgradeUnlockFeatures" | i18n }}
|
||||
<a bitLink linkType="contrast" routerLink="/settings/subscription/premium">
|
||||
<a bitLink linkType="secondary" routerLink="/settings/subscription/premium">
|
||||
{{ "goPremium" | i18n }}
|
||||
</a>
|
||||
</bit-banner>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%">
|
||||
<text fill="%23FBFBFB" x="50%" y="50%" font-family="\'Open Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
|
||||
<text fill="%23FBFBFB" x="50%" y="50%" font-family="\'DM Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
|
||||
font-size="18" text-anchor="middle">
|
||||
Loading...
|
||||
</text>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%">
|
||||
<text fill="%23333333" x="50%" y="50%" font-family="\'Open Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
|
||||
<text fill="%23333333" x="50%" y="50%" font-family="\'DM Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
|
||||
font-size="18" text-anchor="middle">
|
||||
Loading...
|
||||
</text>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
html {
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
@@ -20,7 +20,7 @@ input[type="search"]::-webkit-search-cancel-button {
|
||||
-webkit-appearance: -cancel-button;
|
||||
}
|
||||
|
||||
label:not(.form-check-label):not(.btn),
|
||||
label:not(.form-check-label):not(.btn):not(:has(bit-label)),
|
||||
label.bold {
|
||||
font-weight: 600;
|
||||
@include themify($themes) {
|
||||
@@ -136,12 +136,12 @@ input[type="checkbox"] {
|
||||
background-color: rgb(var(--color-background));
|
||||
|
||||
&:hover {
|
||||
border-color: rgb(var(--color-primary-500));
|
||||
border-color: rgb(var(--color-primary-600));
|
||||
}
|
||||
|
||||
&.is-focused {
|
||||
outline: 0;
|
||||
border-color: rgb(var(--color-primary-500));
|
||||
border-color: rgb(var(--color-primary-600));
|
||||
}
|
||||
|
||||
&.is-invalid {
|
||||
|
||||
@@ -20,7 +20,7 @@ $theme-colors: (
|
||||
$body-bg: $white;
|
||||
$body-color: #333333;
|
||||
|
||||
$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif,
|
||||
$font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
|
||||
$h1-font-size: 1.7rem;
|
||||
|
||||
Reference in New Issue
Block a user