diff --git a/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.html b/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.html index 91a380f53d..e01c4ca175 100644 --- a/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.html +++ b/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.html @@ -4,25 +4,25 @@ </bit-section-header> <bit-card> <div - class="tw-mb-4 tw-border-secondary-300 tw-bg-background" + class="tw-border-secondary-300" *ngFor="let field of fields; let last = last" - [ngClass]="{ 'tw-border-0 tw-border-b tw-border-solid tw-pb-2 tw-mb-4': !last }" + [ngClass]="{ 'tw-mb-4': !last }" > <ng-container *ngIf="field.type === fieldType.Text"> <label class="tw-text-xs tw-text-muted tw-select-none"> {{ field.name }} </label> - <div class="tw-flex tw-justify-between"> + <bit-form-field> <input readonly bitInput type="text" [value]="field.value" aria-readonly="true" /> <button bitIconButton="bwi-clone" - size="small" + bitSuffix type="button" [appCopyClick]="field.value" showToast [appA11yTitle]="'copyValue' | i18n" ></button> - </div> + </bit-form-field> </ng-container> <ng-container *ngIf="field.type === fieldType.Hidden"> <label class="tw-text-xs tw-text-muted tw-select-none"> @@ -30,10 +30,10 @@ </label> <bit-form-field> <input readonly bitInput type="password" [value]="field.value" aria-readonly="true" /> - <button type="button" bitIconButton bitPasswordInputToggle></button> + <button bitSuffix type="button" bitIconButton bitPasswordInputToggle></button> <button bitIconButton="bwi-clone" - size="small" + bitSuffix type="button" [appCopyClick]="field.value" showToast @@ -42,18 +42,22 @@ </bit-form-field> </ng-container> <ng-container *ngIf="field.type === fieldType.Boolean"> - <div class="tw-flex tw-my-2"> - <input type="checkbox" [value]="field.value" readonly aria-readonly="true" /> - <h5 class="tw-ml-3"> - {{ field.name }} - </h5> - </div> + <bit-form-control> + <input + bitCheckbox + type="checkbox" + [checked]="field.value" + aria-readonly="true" + disabled + /> + <bit-label> {{ field.name }} </bit-label> + </bit-form-control> </ng-container> <ng-container *ngIf="field.type === fieldType.Linked"> <label class="tw-text-xs tw-text-muted tw-select-none"> {{ "linked" | i18n }}: {{ field.name }} </label> - <div class="tw-flex tw-justify-between"> + <bit-form-field> <input readonly bitInput @@ -63,13 +67,13 @@ /> <button bitIconButton="bwi-clone" - size="small" + bitSuffix type="button" [appCopyClick]="field.name" showToast [appA11yTitle]="'copyValue' | i18n" ></button> - </div> + </bit-form-field> </ng-container> </div> </bit-card> diff --git a/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.ts b/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.ts index e54e5996eb..762af73e31 100644 --- a/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.ts +++ b/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.ts @@ -13,6 +13,7 @@ import { SectionComponent, SectionHeaderComponent, TypographyModule, + CheckboxModule, } from "@bitwarden/components"; @Component({ @@ -29,6 +30,7 @@ import { SectionComponent, SectionHeaderComponent, TypographyModule, + CheckboxModule, ], }) export class CustomFieldV2Component {