Fix jumbo sized WebAuthn logo (#1251)
* Fix jumbo sized WebAuthn logo * Fix styling on 2FA modals * Fix so that text does not go below image * Rearrange items in modal and add new icons * make spacing a little wider * Remove 1 from mfaTypes, we now have both versions Co-authored-by: Thomas Rittson <trittson@bitwarden.com>
This commit is contained in:
parent
523b18156c
commit
2700caf2a8
|
@ -1,5 +1,5 @@
|
||||||
<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="twoStepOptionsTitle">
|
<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="twoStepOptionsTitle">
|
||||||
<div class="modal-dialog modal-dialog-scrollable" role="document">
|
<div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h2 class="modal-title" id="twoStepOptionsTitle">{{'twoStepOptions' | i18n}}</h2>
|
<h2 class="modal-title" id="twoStepOptionsTitle">{{'twoStepOptions' | i18n}}</h2>
|
||||||
|
@ -8,21 +8,46 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<div class="list-group list-group-flush">
|
<div class="list-group list-group-flush-2fa">
|
||||||
<a href="#" appStopClick *ngFor="let p of providers" (click)="choose(p)"
|
<div *ngFor="let p of providers" class="list-group-item list-group-item-action">
|
||||||
class="list-group-item list-group-item-action">
|
<div class="two-factor-content">
|
||||||
<img [src]="'images/two-factor/' + p.type + '.png'" alt="" class="pull-right">
|
<div class="logo-col">
|
||||||
<h3>{{p.name}}</h3>
|
<img [class]="'mfaType' + p.type" [alt]="p.name + ' logo'">
|
||||||
{{p.description}}
|
</div>
|
||||||
</a>
|
<div class="text-col">
|
||||||
<a href="#" appStopClick class="list-group-item list-group-item-action" (click)="recover()">
|
<h3>{{p.name}}</h3>
|
||||||
<h3>{{'recoveryCodeTitle' | i18n}}</h3>
|
{{p.description}}
|
||||||
{{'recoveryCodeDesc' | i18n}}
|
</div>
|
||||||
</a>
|
<div class="btn-col">
|
||||||
|
<button [attr.aria-describedby]="p.name" type="button"
|
||||||
|
class="btn btn-outline-secondary btn-sm" (click)="choose(p)">
|
||||||
|
{{'select' | i18n}}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="list-group-item list-group-item-action" (click)="recover()">
|
||||||
|
<div class="two-factor-content">
|
||||||
|
<div class="logo-col">
|
||||||
|
<img class="recovery-code-img" alt="rc logo">
|
||||||
|
</div>
|
||||||
|
<div class="text-col">
|
||||||
|
<h3>{{'recoveryCodeTitle' | i18n}}</h3>
|
||||||
|
{{'recoveryCodeDesc' | i18n}}
|
||||||
|
</div>
|
||||||
|
<div class="btn-col">
|
||||||
|
<button [attr.aria-descibedby]="'recoveryCodeTitle' | i18n" type="button"
|
||||||
|
class="btn btn-outline-secondary btn-sm" (click)="recover()">
|
||||||
|
{{'select' | i18n}}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
|
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' |
|
||||||
|
i18n}}</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
After Width: | Height: | Size: 7.2 KiB |
|
@ -160,8 +160,32 @@ input[type="radio"], input[type="checkbox"] {
|
||||||
@include themify($themes) {
|
@include themify($themes) {
|
||||||
background-color: themed('foregroundColor');
|
background-color: themed('foregroundColor');
|
||||||
border-color: themed('listItemBorder');
|
border-color: themed('listItemBorder');
|
||||||
color: themed('listItemColor');
|
color: themed('textColor');
|
||||||
font-weight: themed('linkWeight');
|
}
|
||||||
|
>.two-factor-content {
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: row;
|
||||||
|
display: flex;
|
||||||
|
>.text-col {
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
>.logo-col {
|
||||||
|
min-width: 100px;
|
||||||
|
margin-right: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
img {
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>.btn-col {
|
||||||
|
width: 85px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -52,6 +52,20 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.modal .list-group-flush-2fa {
|
||||||
|
div {
|
||||||
|
border-left: none;
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
div:first-child {
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
div:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.modal-footer {
|
.modal-footer {
|
||||||
border-radius: 0.3rem 0.3rem 0 0;
|
border-radius: 0.3rem 0.3rem 0 0;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
|
|
@ -43,6 +43,14 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mfaType1 {
|
||||||
|
@include themify($themes) {
|
||||||
|
content: url('../images/two-factor/1' + themed('mfaLogoSuffix'));
|
||||||
|
max-width: 100px;
|
||||||
|
max-height: 45px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.mfaType7 {
|
.mfaType7 {
|
||||||
@include themify($themes) {
|
@include themify($themes) {
|
||||||
content: url('../images/two-factor/7' + themed('mfaLogoSuffix'));
|
content: url('../images/two-factor/7' + themed('mfaLogoSuffix'));
|
||||||
|
@ -50,6 +58,14 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.recovery-code-img {
|
||||||
|
@include themify($themes) {
|
||||||
|
content: url('../images/two-factor/rc' + themed('mfaLogoSuffix'));
|
||||||
|
max-width: 100px;
|
||||||
|
max-height: 45px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.progress {
|
.progress {
|
||||||
@include themify($themes) {
|
@include themify($themes) {
|
||||||
background-color: themed('pwStrengthBackground');
|
background-color: themed('pwStrengthBackground');
|
||||||
|
|
|
@ -79,7 +79,7 @@ $fa-font-path: "~font-awesome/fonts";
|
||||||
|
|
||||||
// MFA Types for logo styling with no dark theme alternative
|
// MFA Types for logo styling with no dark theme alternative
|
||||||
|
|
||||||
$mfaTypes: 0, 1, 2, 3, 4, 6;
|
$mfaTypes: 0, 2, 3, 4, 6;
|
||||||
|
|
||||||
// Theme Variables
|
// Theme Variables
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue