Reapply changes to refactored templates

Initial commit for responsive and dark mode updates
Further work maybe required on resolved merge conflicts

bitwarden_license/src/app/providers/manage/manage.component.html

@@ -1,6 +1,6 @@
 <div class="container page-content">
     <div class="row">
-        <div class="col-3">
+        <div class="col-md-3">
             <div class="card" *ngIf="provider">
                 <div class="card-header">{{'manage' | i18n}}</div>
                 <div class="list-group list-group-flush">
@@ -15,7 +15,7 @@
                 </div>
             </div>
         </div>
-        <div class="col-9">
+        <div class="col-md-9 mt-4 mt-md-0">
             <router-outlet></router-outlet>
         </div>
     </div>

bitwarden_license/src/app/providers/settings/account.component.html

@@ -7,7 +7,7 @@
 </div>
 <form *ngIf="provider && !loading" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <div class="row">
-        <div class="col-6">
+        <div class="col-md-6 mt-4 mt-md-0">
             <div class="form-group">
                 <label for="name">{{'providerName' | i18n}}</label>
                 <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="provider.name"
@@ -19,7 +19,7 @@
                     [(ngModel)]="provider.billingEmail" [disabled]="selfHosted">
             </div>
         </div>
-        <div class="col-6">
+        <div class="col-md-6 mt-4 mt-md-0">
             <app-avatar data="{{provider.name}}" dynamic="true" size="75" fontSize="35"></app-avatar>
         </div>
     </div>

bitwarden_license/src/app/providers/setup/setup.component.html

@@ -8,11 +8,11 @@
     <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="loading">
         <h2 class="mt-5">{{'generalInformation' | i18n}}</h2>
         <div class="row">
-            <div class="form-group col-6">
+            <div class="form-group col-md-6 mt-4 mt-md-0">
                 <label for="name">{{'providerName' | i18n}}</label>
                 <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="name" required>
             </div>
-            <div class="form-group col-6">
+            <div class="form-group col-md-6 mt-4 mt-md-0">
                 <label for="billingEmail">{{'billingEmail' | i18n}}</label>
                 <input id="billingEmail" class="form-control" type="text" name="BillingEmail" [(ngModel)]="billingEmail" required>
             </div>

src/app/accounts/lock.component.html

@@ -1,6 +1,6 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
-    <div class="row justify-content-md-center mt-5">
-        <div class="col-5">
+    <div class="row justify-content-center mt-5">
+        <div class="col-10 col-md-5">
             <p class="text-center mb-4">
                 <i class="fa fa-lock fa-4x text-muted" aria-hidden="true"></i>
             </p>

src/app/accounts/login.component.html

@@ -1,6 +1,6 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
-    <div class="row justify-content-md-center mt-5">
-        <div class="col-5">
+    <div class="row justify-content-center mt-5">
+        <div class="col-10 col-md-5">
             <img class="mb-2 logo logo-themed" alt="Bitwarden">
             <p class="lead text-center mx-4 mb-4">{{'loginOrCreateNewAccount' | i18n}}</p>
             <div class="card d-block">

src/app/accounts/register.component.html

@@ -2,7 +2,7 @@
     <header class="header" *ngIf="layout === 'enterprise2'">
         <div class="container">
             <div class="row">
-                <div class="col-7">
+                <div class="col-md-7">
                     <img alt="Bitwarden" class="logo mb-2" src="../../images/register-layout/logo-horizontal-white.png">
                 </div>
             </div>
@@ -10,7 +10,7 @@
     </header>
     <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
         <div class="row">
-            <div class="col-7" *ngIf="layout">
+            <div class="col-md-7" *ngIf="layout">
                 <div class="mt-5">
                     <div *ngIf="layout === 'enterprise2'">
                         <h2>Companies globally trust Bitwarden for password management.</h2>
@@ -38,9 +38,9 @@
                     </div>
                 </div>
             </div>
-            <div [ngClass]="{'col-5': layout, 'col-12': !layout}">
+            <div [ngClass]="{'col-md-6': layout, 'col-12': !layout}">
                 <div class="row justify-content-md-center mt-5">
-                    <div [ngClass]="{'col-5': !layout, 'col-12': layout}">
+                    <div [ngClass]="{'col-md-6': !layout, 'col-12': layout}">
                         <p class="lead text-center mb-4" *ngIf="!layout">{{'createAccount' | i18n}}</p>
                         <div class="card d-block">
                             <div class="card-body">

src/app/accounts/two-factor.component.html

@@ -1,7 +1,7 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate autocomplete="off">
     <div class="row justify-content-md-center mt-5">
-        <div class="col-5"
-            [ngClass]="{'col-9': selectedProviderType === providerType.Duo || selectedProviderType === providerType.OrganizationDuo}">
+        <div class="col-md-5"
+            [ngClass]="{'col-md-9': selectedProviderType === providerType.Duo || selectedProviderType === providerType.OrganizationDuo}">
             <p class="lead text-center mb-4">{{title}}</p>
             <div class="card d-block">
                 <div class="card-body">

src/app/accounts/update-temp-password.component.html

@@ -1,6 +1,6 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate autocomplete="off">
     <div class="row justify-content-md-center mt-5">
-        <div class="col-4">
+        <div class="col-md-4">
             <p class="lead text-center mb-4">{{'updateMasterPassword' | i18n}}</p>
             <div class="card d-block">
                 <div class="card-body">

src/app/organizations/manage/manage.component.html

@@ -1,6 +1,6 @@
 <div class="container page-content">
     <div class="row">
-        <div class="col-3">
+        <div class="col-12 col-md-4 col-lg-3 mt-4 mt-md-0">
             <div class="card" *ngIf="organization">
                 <div class="card-header">{{'manage' | i18n}}</div>
                 <div class="list-group list-group-flush">
@@ -31,7 +31,7 @@
                 </div>
             </div>
         </div>
-        <div class="col-9">
+        <div class="col-12 col-md-8 col-lg-9 mt-4 mt-md-0">
             <router-outlet></router-outlet>
         </div>
     </div>

src/app/organizations/manage/user-add-edit.component.html

@@ -76,7 +76,7 @@
                         {{'permissions' | i18n}}
                     </h3>
                     <div class="row">
-                        <div class="col-6">
+                        <div class="col-12 col-md-6 mt-4 mt-md-0">
                             <div class="mb-3">
                                 <label class="font-weight-bold mb-0">Manager Permissions</label>
                                 <hr class="my-0 mr-2" />
@@ -85,7 +85,7 @@
                                 </app-nested-checkbox>
                             </div>
                         </div>
-                        <div class="col-6">
+                        <div class="col-12 col-md-6 mt-4 mt-md-0">
                             <div class="mb-3">
                                 <label class="font-weight-bold mb-0">Admin Permissions</label>
                                 <hr class="my-0 mr-2" />

src/app/organizations/policies/master-password.component.html

@@ -7,13 +7,13 @@
     </div>
 
     <div class="row">
-        <div class="col-6 form-group">
+        <div class="col-12 col-md-6 mt-4 mt-md-0 form-group">
             <label for="minComplexity">{{'minComplexityScore' | i18n}}</label>
             <select id="minComplexity" name="minComplexity" formControlName="minComplexity" class="form-control">
                 <option *ngFor="let o of passwordScores" [ngValue]="o.value">{{o.name}}</option>
             </select>
         </div>
-        <div class="col-6 form-group">
+        <div class="col-12 col-md-6 mt-4 mt-md-0 form-group">
             <label for="minLength">{{'minLength' | i18n}}</label>
             <input id="minLength" class="form-control" type="number" min="8" name="minLength"
                 formControlName="minLength">

src/app/organizations/policies/password-generator.component.html

@@ -7,7 +7,7 @@
     </div>
 
     <div class="row">
-        <div class="col-6 form-group  mb-0">
+        <div class="col-12 col-md-6 mt-4 mt-md-0 form-group  mb-0">
             <label for="defaultType">{{'defaultType' | i18n}}</label>
             <select id="defaultType" name="defaultType" formControlName="defaultType" class="form-control">
                 <option *ngFor="let o of defaultTypes" [ngValue]="o.value">{{o.name}}</option>
@@ -16,19 +16,19 @@
     </div>
     <h3 class="mt-4">{{'password' | i18n}}</h3>
     <div class="row">
-        <div class="col-6 form-group">
+        <div class="col-12 col-md-6 mt-4 mt-md-0 form-group">
             <label for="minLength">{{'minLength' | i18n}}</label>
             <input id="minLength" class="form-control" type="number" name="minLength" min="5" max="128"
                 formControlName="minLength">
         </div>
     </div>
     <div class="row">
-        <div class="col-6 form-group">
+        <div class="col-12 col-md-6 mt-4 mt-md-0 form-group">
             <label for="minNumbers">{{'minNumbers' | i18n}}</label>
             <input id="minNumbers" class="form-control" type="number" name="minNumbers" min="0" max="9"
                 formControlName="minNumbers">
         </div>
-        <div class="col-6 form-group">
+        <div class="col-12 col-md-6 mt-4 mt-md-0 form-group">
             <label for="minSpecial">{{'minSpecial' | i18n}}</label>
             <input id="minSpecial" class="form-control" type="number" name="minSpecial" min="0" max="9"
                 formControlName="minSpecial">
@@ -53,7 +53,7 @@
     </div>
     <h3 class="mt-4">{{'passphrase' | i18n}}</h3>
     <div class="row">
-        <div class="col-6 form-group">
+        <div class="col-12 col-md-6 mt-4 mt-md-0 form-group">
             <label for="minNumberWords">{{'minimumNumberOfWords' | i18n}}</label>
             <input id="minNumberWords" class="form-control" type="number" name="minNumberWords" min="3" max="20"
                 formControlName="minNumberWords">

src/app/organizations/settings/account.component.html

@@ -7,7 +7,7 @@
 </div>
 <form *ngIf="org && !loading" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <div class="form-group">
                 <label for="name">{{'organizationName' | i18n}}</label>
                 <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="org.name"
@@ -29,7 +29,7 @@
                     [(ngModel)]="org.identifier">
             </div>
         </div>
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <app-avatar data="{{org.name}}" dynamic="true" size="75" fontSize="35"></app-avatar>
         </div>
     </div>

src/app/organizations/settings/download-license.component.html

@@ -4,7 +4,7 @@
                 aria-hidden="true">&times;</span></button>
         <h3 class="card-body-header">{{'downloadLicense' | i18n}}</h3>
         <div class="row">
-            <div class="form-group col-6">
+            <div class="form-group col-12 col-md-6">
                 <div class="d-flex">
                     <label for="installationId">{{'enterInstallationId' | i18n}}</label>
                     <a class="ml-auto" target="_blank" rel="noopener" appA11yTitle="{{'learnMore' | i18n}}"

src/app/organizations/settings/settings.component.html

@@ -1,6 +1,6 @@
 <div class="container page-content">
     <div class="row">
-        <div class="col-3">
+        <div class="col-md-4 col-lg-3 mt-4 mt-md-0">
             <div class="card">
                 <div class="card-header">{{'settings' | i18n}}</div>
                 <div class="list-group list-group-flush">
@@ -19,7 +19,7 @@
                 </div>
             </div>
         </div>
-        <div class="col-9">
+        <div class="col-md-8 col-lg-9 mt-4 mt-md-0">
             <router-outlet></router-outlet>
         </div>
     </div>

src/app/organizations/tools/tools.component.html

@@ -5,7 +5,7 @@
     </ng-container>
     <ng-container *ngIf="!loading">
         <div class="row">
-            <div class="col-3">
+            <div class="col-12 col-md-4 col-lg-3">
                 <div class="card mb-4" *ngIf="organization.canAccessImportExport">
                     <div class="card-header">{{'tools' | i18n}}</div>
                     <div class="list-group list-group-flush">
@@ -46,7 +46,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-9">
+            <div class="col-12 col-md-8 col-lg-9">
                 <router-outlet></router-outlet>
             </div>
         </div>

src/app/organizations/vault/vault.component.html

@@ -1,13 +1,13 @@
 <div class="container page-content">
     <div class="row">
-        <div class="col-3">
+        <div class="col-12 col-md-4 col-lg-3">
             <app-org-vault-groupings [showFolders]="false" [showFavorites]="false" [showTrash]="true"
                 (onAllClicked)="clearGroupingFilters()" (onCipherTypeClicked)="filterCipherType($event)"
                 (onCollectionClicked)="filterCollection($event.id)" (onSearchTextChanged)="filterSearchText($event)"
                 (onTrashClicked)="filterDeleted()">
             </app-org-vault-groupings>
         </div>
-        <div class="col-9">
+        <div class="col-12 col-md-8 col-lg-9">
             <div class="page-header d-flex">
                 <h1>
                     {{'vault' | i18n}}

src/app/send/access.component.html

@@ -6,7 +6,7 @@
         <div class="col-12 text-center" *ngIf="creatorIdentifier != null">
             <p>{{'sendCreatorIdentifier' | i18n: creatorIdentifier }}</p>
         </div>
-        <div class="col-8" *ngIf="hideEmail">
+        <div class="col-12 col-md-8" *ngIf="hideEmail">
             <app-callout type="warning" title="{{'warning' | i18n}}">
                 {{'viewSendHiddenEmailWarning' | i18n }} 
                 <a href="https://bitwarden.com/help/article/receive-send/" target="_blank">{{'learnMore' | i18n}}</a>.
@@ -14,7 +14,7 @@
         </div>
     </div>
     <div class="row justify-content-center">
-        <div class="col-5">
+        <div class="col-12 col-md-5">
             <div class="card d-block">
                 <div class="card-body" *ngIf="loading" class="text-center">
                     <i class="fa fa-spinner fa-spin fa-2x text-muted" title="{{'loading' | i18n}}"

src/app/send/add-edit.component.html

@@ -19,7 +19,7 @@
                     </ul>
                 </app-callout>
                 <div class="row">
-                    <div class="col-6 form-group">
+                    <div class="col-md-6 mt-4 mt-md-0 form-group">
                         <label for="name">{{'name' | i18n}}</label>
                         <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="send.name" required
                             [readOnly]="disableSend">
@@ -27,7 +27,7 @@
                     </div>
                 </div>
                 <div class="row" *ngIf="!editMode">
-                    <div class="col-6 form-group">
+                    <div class="col-md-6 mt-4 mt-md-0 form-group">
                         <label>{{'whatTypeOfSend' | i18n}}</label>
                         <div class="form-check" *ngFor="let o of typeOptions">
                             <input class="form-check-input" type="radio" [(ngModel)]="send.type" name="Type_{{o.value}}"
@@ -97,20 +97,20 @@
                         [editMode]="editMode" [disabled]="disableSend" (datesChanged)="setDates($event)">
                     </app-send-efflux-dates>
                     <div class="row">
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="maxAccessCount">{{'maxAccessCount' | i18n}}</label>
                             <input id="maxAccessCount" class="form-control" type="number" name="MaxAccessCount"
                                 [(ngModel)]="send.maxAccessCount" min="1" [readOnly]="disableSend">
                             <div class="form-text text-muted small">{{'maxAccessCountDesc' | i18n}}</div>
                         </div>
-                        <div class="col-6 form-group" *ngIf="editMode">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group" *ngIf="editMode">
                             <label for="accessCount">{{'currentAccessCount' | i18n}}</label>
                             <input id="accessCount" class="form-control" type="text" name="AccessCount" readonly
                                 [(ngModel)]="send.accessCount">
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="password" *ngIf="!hasPassword">{{'password' | i18n}}</label>
                             <label for="password" *ngIf="hasPassword">{{'newPassword' | i18n}}</label>
                             <div class="input-group">

src/app/send/efflux-dates.component.html

@@ -1,5 +1,5 @@
 <div class="row" [formGroup]="datesForm">
-    <div class="col-6 form-group">
+    <div class="col-md-6 mt-4 mt-md-0 form-group">
         <label for="deletionDate">{{'deletionDate' | i18n}}</label>
         <ng-template #deletionDateCustom>
             <ng-container [ngSwitch]="browserPath">
@@ -48,7 +48,7 @@
         </div>
         <div class="form-text text-muted small">{{'deletionDateDesc' | i18n}}</div>
     </div>
-    <div class="col-6 form-group">
+    <div class="col-md-6 mt-4 mt-md-0 form-group">
         <div class="d-flex">
             <label for="expirationDate">{{'expirationDate' | i18n}}</label>
             <a href="#" appStopClick (click)="clearExpiration()" class="ml-auto"

src/app/send/send.component.html

@@ -3,7 +3,7 @@
         <span>{{'sendDisabledWarning' | i18n}}</span>
     </app-callout>
     <div class="row">
-        <div class="col-3 groupings">
+        <div class="col-12 col-md-3 groupings">
             <div class="card vault-filters">
                 <div class="card-header d-flex">
                     {{'filters' | i18n}}
@@ -35,7 +35,7 @@
                 </div>
             </div>
         </div>
-        <div class="col-9">
+        <div class="col-12 col-md-9 mt-4 mt-md-0">
             <div class="page-header d-flex">
                 <h1>
                     {{'send' | i18n}}

src/app/settings/add-credit.component.html

@@ -19,7 +19,7 @@
         </div>
         <div class="form-group">
             <div class="row">
-                <div class="col-4">
+                <div class="col-12 col-md-4 mt-4 mt-md-0">
                     <label for="creditAmount">{{'amount' | i18n}}</label>
                     <div class="input-group">
                         <div class="input-group-prepend"><span class="input-group-text">$USD</span></div>

src/app/settings/adjust-storage.component.html

@@ -4,7 +4,7 @@
                 aria-hidden="true">&times;</span></button>
         <h3 class="card-body-header">{{(add ? 'addStorage' : 'removeStorage') | i18n}}</h3>
         <div class="row">
-            <div class="form-group col-6">
+            <div class="form-group col-md-6">
                 <label for="storageAdjustment">{{(add ? 'gbStorageAdd' : 'gbStorageRemove') | i18n}}</label>
                 <input id="storageAdjustment" class="form-control" type="number" name="StroageGbAdjustment"
                     [(ngModel)]="storageAdjustment" min="0" max="99" step="1" required>

src/app/settings/change-email.component.html

@@ -3,7 +3,7 @@
         {{'changeEmailTwoFactorWarning' | i18n}}
     </app-callout>
     <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <div class="form-group">
                 <label for="masterPassword">{{'masterPass' | i18n}}</label>
                 <input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control"
@@ -21,7 +21,7 @@
         <p>{{'changeEmailDesc' | i18n : newEmail}}</p>
         <app-callout type="warning">{{'loggedOutWarning' | i18n}}</app-callout>
         <div class="row">
-            <div class="col-6">
+            <div class="col-12 col-md-6 mt-4 mt-md-0">
                 <div class="form-group">
                     <label for="token">{{'code' | i18n}}</label>
                     <input id="token" class="form-control" type="text" name="Token" [(ngModel)]="token" required

src/app/settings/change-kdf.component.html

@@ -1,7 +1,7 @@
 <app-callout type="warning">{{'loggedOutWarning' | i18n}}</app-callout>
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate autocomplete="off">
     <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <div class="form-group">
                 <label for="kdfMasterPassword">{{'masterPass' | i18n}}</label>
                 <input id="kdfMasterPassword" type="password" name="MasterPasswordHash" class="form-control"
@@ -10,7 +10,7 @@
         </div>
     </div>
     <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <div class="form-group mb-0">
                 <label for="kdf">{{'kdfAlgorithm' | i18n}}</label>
                 <a class="ml-auto" href="https://en.wikipedia.org/wiki/Key_derivation_function" target="_blank"
@@ -22,7 +22,7 @@
                 </select>
             </div>
         </div>
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <div class="form-group mb-0">
                 <label for="kdfIterations">{{'kdfIterations' | i18n}}</label>
                 <a class="ml-auto" href="https://bitwarden.com/help/article/what-encryption-is-used/#pbkdf2" target="_blank" rel="noopener"

src/app/settings/change-password.component.html

@@ -4,7 +4,7 @@
 
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate autocomplete="off">
     <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <div class="form-group">
                 <label for="currentMasterPassword">{{'currentMasterPass' | i18n}}</label>
                 <input id="currentMasterPassword" type="password" name="MasterPasswordHash" class="form-control"
@@ -13,7 +13,7 @@
         </div>
     </div>
     <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <div class="form-group">
                 <label for="newMasterPassword">{{'newMasterPass' | i18n}}</label>
                 <input id="newMasterPassword" type="password" name="NewMasterPasswordHash" class="form-control mb-1"
@@ -22,7 +22,7 @@
                 <app-password-strength [score]="masterPasswordScore" [showText]="true"></app-password-strength>
             </div>
         </div>
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <div class="form-group">
                 <label for="masterPasswordRetype">{{'confirmNewMasterPass' | i18n}}</label>
                 <input id="masterPasswordRetype" type="password" name="MasterPasswordRetype" class="form-control"

src/app/settings/emergency-access-add-edit.component.html

@@ -46,7 +46,7 @@
                         <small>{{'takeoverDesc' | i18n}}</small>
                     </label>
                 </div>
-                <div class="form-group col-6 mt-4">
+                <div class="form-group col-12 col-md-6 mt-4">
                     <label for="waitTime">{{'waitTime' | i18n}}</label>
                     <select id="waitTime" name="waitTime" [(ngModel)]="waitTime" class="form-control" [disabled]="readOnly">
                         <option *ngFor="let o of waitTimes" [ngValue]="o.value">{{o.name}}</option>

src/app/settings/emergency-access-takeover.component.html

@@ -15,7 +15,7 @@
                 <app-callout type="info" [enforcedPolicyOptions]="enforcedPolicyOptions" *ngIf="enforcedPolicyOptions">
                 </app-callout>
                 <div class="row">
-                    <div class="col-6">
+                    <div class="col-12 col-md-6 mt-4 mt-md-0">
                         <div class="form-group">
                             <label for="masterPassword">{{'newMasterPass' | i18n}}</label>
                             <input id="masterPassword" type="password" name="NewMasterPasswordHash"
@@ -26,7 +26,7 @@
                             </app-password-strength>
                         </div>
                     </div>
-                    <div class="col-6">
+                    <div class="col-12 col-md-6 mt-4 mt-md-0">
                         <div class="form-group">
                             <label for="masterPasswordRetype">{{'confirmNewMasterPass' | i18n}}</label>
                             <input id="masterPasswordRetype" type="password" name="MasterPasswordRetype"

src/app/settings/options.component.html

@@ -4,7 +4,7 @@
 <p>{{'optionsDesc' | i18n}}</p>
 <form (ngSubmit)="submit()" ngNativeValidate>
     <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <app-vault-timeout-input [vaultTimeouts]="vaultTimeouts" [formControl]="vaultTimeout" ngDefaultControl>
             </app-vault-timeout-input>
         </div>
@@ -29,7 +29,7 @@
         </div>
     </div>
     <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <div class="form-group">
                 <div class="d-flex">
                     <label for="locale">{{'language' | i18n}}</label>
@@ -83,7 +83,7 @@
         <small class="form-text text-muted">{{'enableFullWidthDesc' | i18n}}</small>
     </div>
     <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <div class="form-group">
                 <label for="theme">{{'theme' | i18n}}</label>
                 <select id="theme" name="theme" [(ngModel)]="theme" class="form-control">

src/app/settings/organization-plans.component.html

@@ -21,16 +21,16 @@
     *ngIf="!loading && !selfHosted && this.plans">
     <h2 class="mt-5">{{'generalInformation' | i18n}}</h2>
     <div class="row" *ngIf="createOrganization">
-        <div class="form-group col-6">
+        <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
             <label for="name">{{'organizationName' | i18n}}</label>
             <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="name" required>
         </div>
-        <div class="form-group col-6">
+        <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
             <label for="billingEmail">{{'billingEmail' | i18n}}</label>
             <input id="billingEmail" class="form-control" type="text" name="BillingEmail" [(ngModel)]="billingEmail"
                 required>
         </div>
-        <div class="form-group col-6" *ngIf="!!providerId">
+        <div class="form-group col-12 col-md-6 mt-4 mt-md-0" *ngIf="!!providerId">
             <label for="email">{{'clientOwnerEmail' | i18n}}</label>
             <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="clientOwnerEmail" required>
             <small class="text-muted">{{'clientOwnerDesc' | i18n : '20'}}</small>
@@ -43,7 +43,7 @@
             <label for="ownedBusiness" class="form-check-label">{{'accountOwnedBusiness' | i18n}}</label>
         </div>
         <div class="row" *ngIf="ownedBusiness">
-            <div class="form-group col-6">
+            <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
                 <label for="businessName">{{'businessName' | i18n}}</label>
                 <input id="businessName" class="form-control" type="text" name="BusinessName"
                     [(ngModel)]="businessName">
@@ -111,7 +111,7 @@
         <ng-container *ngIf="selectedPlan.hasAdditionalSeatsOption && !selectedPlan.baseSeats">
             <h2 class="mt-5">{{'users' | i18n}}</h2>
             <div class="row">
-                <div class="col-6">
+                <div class="col-12 col-md-6 mt-4 mt-md-0">
                     <label for="additionalSeats">{{'userSeats' | i18n}}</label>
                     <input id="additionalSeats" class="form-control" type="number" name="AdditionalSeats"
                         [(ngModel)]="additionalSeats" min="1" max="100000" placeholder="{{'userSeatsDesc' | i18n}}"
@@ -122,7 +122,7 @@
         </ng-container>
         <h2 class="mt-5">{{'addons' | i18n}}</h2>
         <div class="row" *ngIf="selectedPlan.hasAdditionalSeatsOption && selectedPlan.baseSeats">
-            <div class="form-group col-6">
+            <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
                 <label for="additionalSeats">{{'additionalUserSeats' | i18n}}</label>
                 <input id="additionalSeats" class="form-control" type="number" name="AdditionalSeats"
                     [(ngModel)]="additionalSeats" min="0" max="100000" placeholder="{{'userSeatsDesc' | i18n}}">
@@ -131,7 +131,7 @@
             </div>
         </div>
         <div class="row">
-            <div class="form-group col-6">
+            <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
                 <label for="additionalStorage">{{'additionalStorageGb' | i18n}}</label>
                 <input id="additionalStorage" class="form-control" type="number" name="AdditionalStorageGb"
                     [(ngModel)]="additionalStorage" min="0" max="99" step="1"
@@ -141,7 +141,7 @@
             </div>
         </div>
         <div class="row">
-            <div class="form-group col-6" *ngIf="selectedPlan.hasPremiumAccessOption">
+            <div class="form-group col-12 col-md-6 mt-4 mt-md-0" *ngIf="selectedPlan.hasPremiumAccessOption">
                 <div class="form-check">
                     <input id="premiumAccess" class="form-check-input" type="checkbox" name="PremiumAccessAddon"
                         [(ngModel)]="premiumAccessAddon">
@@ -229,7 +229,7 @@
                     {{ 'estimatedTax' | i18n }}: {{ taxCharges | currency: 'USD $' }}
                 </ng-container>
             </div>
-            <hr class="my-1 col-3 ml-0">
+            <hr class="my-1 col-6 col-md-3 ml-0">
             <p class="text-lg"><strong>{{'total' | i18n}}:</strong>
                 {{total | currency:'USD $'}}/{{selectedPlanInterval | i18n}}</p>
         </div>

src/app/settings/payment.component.html

@@ -26,19 +26,19 @@
 </div>
 <ng-container *ngIf="showMethods && method === paymentMethodType.Card">
     <div class="row">
-        <div class="form-group col-4">
+        <div class="form-group col-12 col-md-4 mt-4 mt-md-0">
             <label for="stripe-card-number-element">{{'number' | i18n}}</label>
             <div id="stripe-card-number-element" class="form-control stripe-form-control"></div>
         </div>
-        <div class="form-group col-8 d-flex align-items-end">
+        <div class="form-group col-12 col-md-8 mt-4 mt-md-0 d-flex align-items-end">
             <img src="../../images/cards.png" alt="Visa, MasterCard, Discover, AmEx, JCB, Diners Club, UnionPay"
                 width="323" height="32">
         </div>
-        <div class="form-group col-4">
+        <div class="form-group col-12 col-md-4 mt-4 mt-md-0">
             <label for="stripe-card-expiry-element">{{'expiration' | i18n}}</label>
             <div id="stripe-card-expiry-element" class="form-control stripe-form-control"></div>
         </div>
-        <div class="form-group col-4">
+        <div class="form-group col-12 col-md-4 mt-4 mt-md-0">
             <div class="d-flex">
                 <label for="stripe-card-cvc-element">
                     {{'securityCode' | i18n}}
@@ -57,22 +57,22 @@
         {{'verifyBankAccountInitialDesc' | i18n}} {{'verifyBankAccountFailureWarning' | i18n}}
     </app-callout>
     <div class="row">
-        <div class="form-group col-6">
+        <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
             <label for="routing_number">{{'routingNumber' | i18n}}</label>
             <input id="routing_number" class="form-control" type="text" name="routing_number"
                 [(ngModel)]="bank.routing_number" required appInputVerbatim>
         </div>
-        <div class="form-group col-6">
+        <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
             <label for="account_number">{{'accountNumber' | i18n}}</label>
             <input id="account_number" class="form-control" type="text" name="account_number"
                 [(ngModel)]="bank.account_number" required appInputVerbatim>
         </div>
-        <div class="form-group col-6">
+        <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
             <label for="account_holder_name">{{'accountHolderName' | i18n}}</label>
             <input id="account_holder_name" class="form-control" type="text" name="account_holder_name"
                 [(ngModel)]="bank.account_holder_name" required>
         </div>
-        <div class="form-group col-6">
+        <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
             <label for="account_holder_type">{{'bankAccountType' | i18n}}</label>
             <select id="account_holder_type" class="form-control" name="account_holder_type"
                 [(ngModel)]="bank.account_holder_type" required>

src/app/settings/premium.component.html

@@ -59,7 +59,7 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="!selfHosted">
     <h2 class="mt-5">{{'addons' | i18n}}</h2>
     <div class="row">
-        <div class="form-group col-6">
+        <div class="form-group col-12 col-md-6">
             <label for="additionalStorage">{{'additionalStorageGb' | i18n}}</label>
             <input id="additionalStorage" class="form-control" type="number" name="AdditionalStorageGb"
                 [(ngModel)]="additionalStorage" min="0" max="99" step="1"
@@ -84,7 +84,7 @@
                 {{ 'estimatedTax' | i18n }}: {{ taxCharges | currency: 'USD $' }}
             </ng-container>
         </div>
-        <hr class="my-1 col-3 ml-0">
+        <hr class="my-1 col-12 col-md-3 ml-0">
         <p class="text-lg"><strong>{{'total' | i18n}}:</strong>
             {{total | currency:'USD $'}}/{{'year' | i18n}}</p>
     </div>

src/app/settings/profile.component.html

@@ -4,7 +4,7 @@
 </div>
 <form *ngIf="profile && !loading" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <div class="row">
-        <div class="col-6">
+        <div class="col-md-6 mt-4 mt-md-0">
             <div class="form-group">
                 <label for="name">{{'name' | i18n}}</label>
                 <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="profile.name">
@@ -19,7 +19,7 @@
                     [(ngModel)]="profile.masterPasswordHint">
             </div>
         </div>
-        <div class="col-6">
+        <div class="col-md-6 mt-4 mt-md-0">
             <div class="mb-3">
                 <app-avatar data="{{profile | userName}}" [email]="profile.email" dynamic="true" size="75"
                     fontSize="35"></app-avatar>

src/app/settings/settings.component.html

@@ -1,6 +1,6 @@
 <div class="container page-content">
     <div class="row">
-        <div class="col-3">
+        <div class="col-12 col-md-4 col-lg-3 mt-4 mt-md-0">
             <div class="card">
                 <div class="card-header">{{'settings' | i18n}}</div>
                 <div class="list-group list-group-flush">
@@ -34,7 +34,7 @@
                 </div>
             </div>
         </div>
-        <div class="col-9">
+        <div class="col-12 col-md-8 col-lg-9 mt-4 mt-md-0">
             <router-outlet></router-outlet>
         </div>
     </div>

src/app/settings/tax-info.component.html

@@ -1,5 +1,5 @@
 <div class="row">
-    <div class="col-6">
+    <div class="col-12 col-md-6 mt-4 mt-md-0">
         <div class="form-group">
             <label for="addressCountry">{{'country' | i18n}}</label>
             <select id="addressCountry" class="form-control" [(ngModel)]="taxInfo.country" required name="addressCountry" 
@@ -258,14 +258,14 @@
             </select>
         </div>
     </div>
-    <div class="col-3">
+    <div class="col-12 col-md-3 mt-4 mt-md-0">
         <div class="form-group">
             <label for="addressPostalCode">{{'zipPostalCode' | i18n}}</label>
             <input id="addressPostalCode" class="form-control" type="text" name="addressPostalCode" 
                 [(ngModel)]="taxInfo.postalCode" [required]="taxInfo.country === 'US'" autocomplete="postal-code">
         </div>
     </div>
-    <div class="col-6" *ngIf="organizationId && taxInfo.country !== 'US'">
+    <div class="col-12 col-md-6 mt-4 mt-md-0" *ngIf="organizationId && taxInfo.country !== 'US'">
         <div class="form-group form-check">
             <input class="form-check-input" id="addressIncludeTaxId" name="addressIncludeTaxId" type="checkbox" 
                 [(ngModel)]="taxInfo.includeTaxId">
@@ -274,7 +274,7 @@
     </div>
 </div>
 <div class="row" *ngIf="organizationId && taxInfo.includeTaxId">
-    <div class="col-6">
+    <div class="col-12 col-md-6 mt-4 mt-md-0">
         <div class="form-group">
             <label for="taxId">{{'taxIdNumber' | i18n}}</label>
             <input id="taxId" class="form-control" type="text" name="taxId" [(ngModel)]="taxInfo.taxId">
@@ -282,28 +282,28 @@
     </div>
 </div>
 <div class="row" *ngIf="organizationId && taxInfo.includeTaxId">
-    <div class="col-6">
+    <div class="col-12 col-md-6 mt-4 mt-md-0">
         <div class="form-group">
             <label for="addressLine1">{{'address1' | i18n}}</label>
             <input id="addressLine1" class="form-control" type="text" name="addressLine1" 
                 [(ngModel)]="taxInfo.line1" autocomplete="address-line1">
         </div>
     </div>
-    <div class="col-6">
+    <div class="col-12 col-md-6 mt-4 mt-md-0">
         <div class="form-group">
             <label for="addressLine2">{{'address2' | i18n}}</label>
             <input id="addressLine2" class="form-control" type="text" name="addressLine2" 
                 [(ngModel)]="taxInfo.line2" autocomplete="address-line2">
         </div>
     </div>
-    <div class="col-6">
+    <div class="col-12 col-md-6 mt-4 mt-md-0">
         <div class="form-group">
             <label for="addressCity">{{'cityTown' | i18n}}</label>
             <input id="addressCity" class="form-control" type="text" name="addressCity" 
                 [(ngModel)]="taxInfo.city" autocomplete="address-level2">
         </div>
     </div>
-    <div class="col-6">
+    <div class="col-12 col-md-6 mt-4 mt-md-0">
         <div class="form-group">
             <label for="addressState">{{'stateProvince' | i18n}}</label>
             <input id="addressState" class="form-control" type="text" name="addressState" 

src/app/settings/two-factor-webauthn.component.html

@@ -52,7 +52,7 @@
                         <li>{{'twoFactorU2fSaveForm' | i18n}}</li>
                     </ol>
                     <div class="row">
-                        <div class="form-group col-6">
+                        <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
                             <label for="name">{{'name' | i18n}}</label>
                             <input id="name" type="text" name="Name" class="form-control" [(ngModel)]="name"
                                 [disabled]="!keyIdAvailable">

src/app/settings/two-factor-yubikey.component.html

@@ -36,7 +36,7 @@
                     </ol>
                     <hr>
                     <div class="row">
-                        <div class="form-group col-6" *ngFor="let k of keys; let i = index">
+                        <div class="form-group col-12 col-md-6 mt-4 mt-md-0" *ngFor="let k of keys; let i = index">
                             <label for="key{{i + 1}}">{{'yubikeyX' | i18n : i + 1}}</label>
                             <input id="key{{i + 1}}" type="password" name="Key{{i + 1}}" class="form-control"
                                 [(ngModel)]="k.key" *ngIf="!k.existingKey" appInputVerbatim autocomplete="new-password">

src/app/settings/user-subscription.component.html

@@ -28,7 +28,7 @@
         <dd *ngIf="!sub.expiration">{{'neverExpires' | i18n}}</dd>
     </dl>
     <div class="row" *ngIf="!selfHosted">
-        <div class="col-4">
+        <div class="col-12 col-md-4 mt-4 mt-md-0">
             <dl>
                 <dt>{{'status' | i18n}}</dt>
                 <dd>
@@ -42,7 +42,7 @@
                 </dd>
             </dl>
         </div>
-        <div class="col-8" *ngIf="subscription">
+        <div class="col-12 col-md-8 mt-4 mt-md-0" *ngIf="subscription">
             <strong class="d-block mb-1">{{'details' | i18n}}</strong>
             <table class="table">
                 <tbody>

src/app/tools/breach-report.component.html

@@ -4,7 +4,7 @@
 <p>{{'breachDesc' | i18n}}</p>
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <div class="row">
-        <div class="form-group col-6">
+        <div class="form-group col-12 col-md-6">
             <label for="username">{{'username' | i18n}}</label>
             <input id="username" type="text" name="Username" class="form-control" [(ngModel)]="username" required>
             <small class="form-text text-muted">{{'breachCheckUsernameEmail' | i18n}}</small>
@@ -27,10 +27,10 @@
         <ul class="list-group list-group-breach" *ngIf="breachedAccounts.length">
             <li *ngFor="let a of breachedAccounts" class="list-group-item min-height-fix">
                 <div class="row">
-                    <div class="col-2 text-center">
-                        <img [src]="a.logoPath" alt="" class="img-fluid">
+                    <div class="col-md-2 mt-2 mt-md-0 text-center">
+                        <img [src]="a.logoPath" alt="" class="img-fluid" style="max-width: 115px;">
                     </div>
-                    <div class="col-7">
+                    <div class="col-md-7 mt-2 mt-md-0">
                         <h3 class="text-lg">{{a.title}}</h3>
                         <p [innerHTML]="a.description"></p>
                         <p class="mb-1">{{'compromisedData' | i18n}}:</p>
@@ -38,7 +38,7 @@
                             <li *ngFor="let d of a.dataClasses">{{d}}</li>
                         </ul>
                     </div>
-                    <div class="col-3">
+                    <div class="col-md-3 mt-2 mt-md-0">
                         <dl>
                             <dt>{{'website' | i18n}}</dt>
                             <dd>{{a.domain}}</dd>

src/app/tools/export.component.html

@@ -9,7 +9,7 @@
 
     <p>{{'exportMasterPassword' | i18n}}</p>
     <div class="row">
-        <div class="form-group col-6">
+        <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
             <label for="format">{{'fileFormat' | i18n}}</label>
             <select class="form-control" id="format" name="Format" [(ngModel)]="format" [disabled]="disabledByPolicy">
                 <option value="json">.json</option>
@@ -19,7 +19,7 @@
         </div>
     </div>
     <div class="row">
-        <div class="form-group col-6">
+        <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
             <label for="masterPassword">{{'masterPass' | i18n}}</label>
             <input id="masterPassword" type="password" name="MasterPassword" class="form-control"
                 [(ngModel)]="masterPassword" required appInputVerbatim [disabled]="disabledByPolicy">

src/app/tools/import.component.html

@@ -6,7 +6,7 @@
 </app-callout>
 <form #form (ngSubmit)="submit()" ngNativeValidate>
     <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6">
             <div class="form-group">
                 <label for="type">1. {{'selectFormat' | i18n}}</label>
                 <select id="type" name="Format" [(ngModel)]="format" class="form-control"
@@ -241,7 +241,7 @@
         </ng-container>
     </app-callout>
     <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6">
             <div class="form-group">
                 <label for="file">2. {{'selectImportFile' | i18n}}</label>
                 <input type="file" id="file" class="form-control-file" name="file" [disabled]="importBlockedByPolicy">

src/app/tools/password-generator.component.html

@@ -20,12 +20,12 @@
 </div>
 <ng-container *ngIf="options.type === 'passphrase'">
     <div class="row">
-        <div class="form-group col-4">
+        <div class="form-group col-12 col-md-4 mt-4 mt-md-0">
             <label for="num-words">{{'numWords' | i18n}}</label>
             <input id="num-words" class="form-control" type="number" min="3" max="20" [(ngModel)]="options.numWords"
                 (blur)="saveOptions()">
         </div>
-        <div class="form-group col-4">
+        <div class="form-group col-12 col-md-4 mt-4 mt-md-0">
             <label for="word-separator">{{'wordSeparator' | i18n}}</label>
             <input id="word-separator" class="form-control" type="text" maxlength="1"
                 [(ngModel)]="options.wordSeparator" (blur)="saveOptions()">
@@ -46,17 +46,17 @@
 </ng-container>
 <ng-container *ngIf="options.type === 'password'">
     <div class="row">
-        <div class="form-group col-4">
+        <div class="form-group col-12 col-md-4 mt-4 mt-md-0">
             <label for="length">{{'length' | i18n}}</label>
             <input id="length" class="form-control" type="number" min="5" max="128" [(ngModel)]="options.length"
                 (blur)="saveOptions()" (change)="lengthChanged()">
         </div>
-        <div class="form-group col-4">
+        <div class="form-group col-12 col-md-4 mt-4 mt-md-0">
             <label for="min-number">{{'minNumbers' | i18n}}</label>
             <input id="min-number" class="form-control" type="number" min="0" max="9" (blur)="saveOptions()"
                 [(ngModel)]="options.minNumber" (change)="minNumberChanged()">
         </div>
-        <div class="form-group col-4">
+        <div class="form-group col-12 col-md-4 mt-4 mt-md-0">
             <label for="min-special">{{'minSpecial' | i18n}}</label>
             <input id="min-special" class="form-control" type="number" min="0" max="9" (blur)="saveOptions()"
                 [(ngModel)]="options.minSpecial" (change)="minSpecialChanged()">

src/app/tools/tools.component.html

@@ -1,6 +1,6 @@
 <div class="container page-content">
     <div class="row">
-        <div class="col-3">
+        <div class="col-12 col-md-3">
             <div class="card mb-4">
                 <div class="card-header">{{'tools' | i18n}}</div>
                 <div class="list-group list-group-flush">
@@ -52,7 +52,7 @@
                 </div>
             </div>
         </div>
-        <div class="col-9">
+        <div class="col-12 col-md-9 mt-4 mt-md-0">
             <router-outlet></router-outlet>
         </div>
     </div>

src/app/vault/add-edit-custom-fields.component.html

@@ -2,7 +2,7 @@
     <h3 class="mt-4">{{'customFields' | i18n}}</h3>
     <div cdkDropList (cdkDropListDropped)="drop($event)" *ngIf="cipher.hasFields">
         <div class="row" cdkDrag *ngFor="let f of cipher.fields; let i = index; trackBy:trackByFunction">
-            <div class="col-5 form-group">
+            <div class="col-md-5 mt-4 mt-md-0 form-group">
                 <div class="d-flex">
                     <label for="fieldName{{i}}">{{'name' | i18n}}</label>
                     <a class="ml-auto" href="https://help.bitwarden.com/article/custom-fields/"
@@ -13,7 +13,7 @@
                 <input id="fieldName{{i}}" type="text" name="Field.Name{{i}}" [(ngModel)]="f.name"
                     class="form-control" appInputVerbatim [disabled]="cipher.isDeleted || viewOnly">
             </div>
-            <div class="col-7 form-group">
+            <div class="col-md-7 mt-4 mt-md-0 form-group">
                 <label for="fieldValue{{i}}">{{'value' | i18n}}</label>
                 <div class="d-flex align-items-center">
                     <div class="input-group" *ngIf="f.type === fieldType.Text">
@@ -71,7 +71,7 @@
         <i class="fa fa-plus-circle fa-fw" aria-hidden="true"></i> {{'newCustomField' | i18n}}
     </a>
     <div class="row" *ngIf="!cipher.isDeleted && !viewOnly">
-        <div class="col-5">
+        <div class="col-md-5">
             <label for="addFieldType" class="sr-only">{{'type' | i18n}}</label>
             <select id="addFieldType" class="form-control" name="AddFieldType" [(ngModel)]="addFieldType">
                 <option *ngFor="let o of addFieldTypeOptions" [ngValue]="o.value">{{o.name}}</option>

src/app/vault/add-edit.component.html

@@ -13,7 +13,7 @@
                     {{'personalOwnershipPolicyInEffect' | i18n}}
                 </app-callout>
                 <div class="row" *ngIf="!editMode && !viewOnly">
-                    <div class="col-6 form-group">
+                    <div class="col-md-6 mt-4 mt-md-0 form-group">
                         <label for="type">{{'whatTypeOfItem' | i18n}}</label>
                         <select id="type" name="Type" [(ngModel)]="cipher.type" class="form-control"
                             [disabled]="cipher.isDeleted" appAutofocus>
@@ -22,12 +22,12 @@
                     </div>
                 </div>
                 <div class="row">
-                    <div class="col-6 form-group">
+                    <div class="col-md-6 mt-4 mt-md-0 form-group">
                         <label for="name">{{'name' | i18n}}</label>
                         <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="cipher.name" required
                             [disabled]="cipher.isDeleted || viewOnly">
                     </div>
-                    <div class="col-6 form-group" *ngIf="!organization">
+                    <div class="col-md-6 mt-4 mt-md-0 form-group" *ngIf="!organization">
                         <label for="folder">{{'folder' | i18n}}</label>
                         <select id="folder" name="FolderId" [(ngModel)]="cipher.folderId" class="form-control"
                             [disabled]="cipher.isDeleted || viewOnly">
@@ -38,7 +38,7 @@
                 <!-- Login -->
                 <ng-container *ngIf="cipher.type === cipherType.Login">
                     <div class="row">
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="loginUsername">{{'username' | i18n}}</label>
                             <div class="input-group">
                                 <input id="loginUsername" class="form-control" type="text" name="Login.Username"
@@ -53,7 +53,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <div class="d-flex">
                                 <label for="loginPassword">{{'password' | i18n}}</label>
                                 <div class="ml-auto d-flex" *ngIf="!cipher.isDeleted && !viewOnly">
@@ -95,13 +95,13 @@
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="loginTotp">{{'authenticatorKeyTotp' | i18n}}</label>
                             <input id="loginTotp" type="{{cipher.viewPassword ? 'text' : 'password'}}" name="Login.Totp"
                                 class="form-control text-monospace" [(ngModel)]="cipher.login.totp" appInputVerbatim
                                 [disabled]="cipher.isDeleted || !cipher.viewPassword || viewOnly">
                         </div>
-                        <div class="col-6 form-group totp d-flex align-items-end" [ngClass]="{'low': totpLow}">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group totp d-flex align-items-end" [ngClass]="{'low': totpLow}">
                             <div *ngIf="!cipher.login.totp || !totpCode">
                                 <img src="../../images/totp-countdown.png" id="totpImage" title="{{'verificationCodeTotp' | i18n}}"
                                     class="ml-2">
@@ -138,7 +138,7 @@
                     </div>
                     <ng-container *ngIf="cipher.login.hasUris">
                         <div class="row" *ngFor="let u of cipher.login.uris; let i = index; trackBy:trackByFunction">
-                            <div class="col-7 form-group">
+                            <div class="col-md-7 form-group">
                                 <label for="loginUri{{i}}">{{'uriPosition' | i18n : (i + 1)}}</label>
                                 <div class="input-group">
                                     <input class="form-control" id="loginUri{{i}}" type="text"
@@ -158,7 +158,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-5 form-group">
+                            <div class="col-md-5 form-group">
                                 <div class="d-flex">
                                     <label for="loginUriMatch{{i}}">
                                         {{'matchDetection' | i18n}}
@@ -191,13 +191,13 @@
                 <!-- Card -->
                 <ng-container *ngIf="cipher.type === cipherType.Card">
                     <div class="row">
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="cardCardholderName">{{'cardholderName' | i18n}}</label>
                             <input id="cardCardholderName" class="form-control" type="text"
                                 name="Card.CardCardholderName" [(ngModel)]="cipher.card.cardholderName"
                                 [disabled]="cipher.isDeleted || viewOnly">
                         </div>
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="cardBrand">{{'brand' | i18n}}</label>
                             <select id="cardBrand" class="form-control" name="Card.Brand"
                                 [(ngModel)]="cipher.card.brand" [disabled]="cipher.isDeleted || viewOnly">
@@ -206,7 +206,7 @@
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="cardNumber">{{'number' | i18n}}</label>
                             <div class="input-group">
                                 <input id="cardNumber" class="form-control text-monospace"
@@ -227,14 +227,14 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col form-group">
+                        <div class="col-md-6 form-group">
                             <label for="cardExpMonth">{{'expirationMonth' | i18n}}</label>
                             <select id="cardExpMonth" class="form-control" name="Card.ExpMonth"
                                 [(ngModel)]="cipher.card.expMonth" [disabled]="cipher.isDeleted || viewOnly">
                                 <option *ngFor="let o of cardExpMonthOptions" [ngValue]="o.value">{{o.name}}</option>
                             </select>
                         </div>
-                        <div class="col form-group">
+                        <div class="col-md-6 form-group">
                             <label for="cardExpYear">{{'expirationYear' | i18n}}</label>
                             <input id="cardExpYear" class="form-control" type="text" name="Card.ExpYear"
                                 [(ngModel)]="cipher.card.expYear" placeholder="{{'ex' | i18n}} 2019"
@@ -242,7 +242,7 @@
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="cardCode">{{'securityCode' | i18n}}</label>
                             <div class="input-group">
                                 <input id="cardCode" class="form-control text-monospace"
@@ -268,7 +268,7 @@
                 <!-- Identity -->
                 <ng-container *ngIf="cipher.type === cipherType.Identity">
                     <div class="row">
-                        <div class="col-4 form-group">
+                        <div class="col-md-4 mt-4 mt-md-0 form-group">
                             <label for="idTitle">{{'title' | i18n}}</label>
                             <select id="idTitle" class="form-control" name="Identity.Title"
                                 [(ngModel)]="cipher.identity.title" [disabled]="cipher.isDeleted || viewOnly">
@@ -277,49 +277,49 @@
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-4 form-group">
+                        <div class="col-md-4 mt-4 mt-md-0 form-group">
                             <label for="idFirstName">{{'firstName' | i18n}}</label>
                             <input id="idFirstName" class="form-control" type="text" name="Identity.FirstName"
                                 [(ngModel)]="cipher.identity.firstName" [disabled]="cipher.isDeleted || viewOnly">
                         </div>
-                        <div class="col-4 form-group">
+                        <div class="col-md-4 mt-4 mt-md-0 form-group">
                             <label for="idMiddleName">{{'middleName' | i18n}}</label>
                             <input id="idMiddleName" class="form-control" type="text" name="Identity.MiddleName"
                                 [(ngModel)]="cipher.identity.middleName" [disabled]="cipher.isDeleted || viewOnly">
                         </div>
-                        <div class="col-4 form-group">
+                        <div class="col-md-4 mt-4 mt-md-0 form-group">
                             <label for="idLastName">{{'lastName' | i18n}}</label>
                             <input id="idLastName" class="form-control" type="text" name="Identity.LastName"
                                 [(ngModel)]="cipher.identity.lastName" [disabled]="cipher.isDeleted || viewOnly">
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-4 form-group">
+                        <div class="col-md-4 mt-4 mt-md-0 form-group">
                             <label for="idUsername">{{'username' | i18n}}</label>
                             <input id="idUsername" class="form-control" type="text" name="Identity.Username"
                                 [(ngModel)]="cipher.identity.username" appInputVerbatim
                                 [disabled]="cipher.isDeleted || viewOnly">
                         </div>
-                        <div class="col-4 form-group">
+                        <div class="col-md-4 mt-4 mt-md-0 form-group">
                             <label for="idCompany">{{'company' | i18n}}</label>
                             <input id="idCompany" class="form-control" type="text" name="Identity.Company"
                                 [(ngModel)]="cipher.identity.company" [disabled]="cipher.isDeleted || viewOnly">
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-4 form-group">
+                        <div class="col-md-4 mt-4 mt-md-0 form-group">
                             <label for="idSsn">{{'ssn' | i18n}}</label>
                             <input id="idSsn" class="form-control" type="text" name="Identity.SSN"
                                 [(ngModel)]="cipher.identity.ssn" appInputVerbatim
                                 [disabled]="cipher.isDeleted || viewOnly">
                         </div>
-                        <div class="col-4 form-group">
+                        <div class="col-md-4 mt-4 mt-md-0 form-group">
                             <label for="idPassportNumber">{{'passportNumber' | i18n}}</label>
                             <input id="idPassportNumber" class="form-control" type="text" name="Identity.PassportNumber"
                                 [(ngModel)]="cipher.identity.passportNumber" appInputVerbatim
                                 [disabled]="cipher.isDeleted || viewOnly">
                         </div>
-                        <div class="col-4 form-group">
+                        <div class="col-md-4 mt-4 mt-md-0 form-group">
                             <label for="idLicenseNumber">{{'licenseNumber' | i18n}}</label>
                             <input id="idLicenseNumber" class="form-control" type="text" name="Identity.LicenseNumber"
                                 [(ngModel)]="cipher.identity.licenseNumber" appInputVerbatim
@@ -327,56 +327,56 @@
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="idEmail">{{'email' | i18n}}</label>
                             <input id="idEmail" class="form-control" type="text" name="Identity.Email"
                                 [(ngModel)]="cipher.identity.email" appInputVerbatim
                                 [disabled]="cipher.isDeleted || viewOnly">
                         </div>
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="idPhone">{{'phone' | i18n}}</label>
                             <input id="idPhone" class="form-control" type="text" name="Identity.Phone"
                                 [(ngModel)]="cipher.identity.phone" [disabled]="cipher.isDeleted || viewOnly">
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="idAddress1">{{'address1' | i18n}}</label>
                             <input id="idAddress1" class="form-control" type="text" name="Identity.Address1"
                                 [(ngModel)]="cipher.identity.address1" [disabled]="cipher.isDeleted || viewOnly">
                         </div>
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="idAddress2">{{'address2' | i18n}}</label>
                             <input id="idAddress2" class="form-control" type="text" name="Identity.Address2"
                                 [(ngModel)]="cipher.identity.address2" [disabled]="cipher.isDeleted || viewOnly">
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="idAddress3">{{'address3' | i18n}}</label>
                             <input id="idAddress3" class="form-control" type="text" name="Identity.Address3"
                                 [(ngModel)]="cipher.identity.address3" [disabled]="cipher.isDeleted || viewOnly">
                         </div>
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="idCity">{{'cityTown' | i18n}}</label>
                             <input id="idCity" class="form-control" type="text" name="Identity.City"
                                 [(ngModel)]="cipher.identity.city" [disabled]="cipher.isDeleted || viewOnly">
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="idState">{{'stateProvince' | i18n}}</label>
                             <input id="idState" class="form-control" type="text" name="Identity.State"
                                 [(ngModel)]="cipher.identity.state" [disabled]="cipher.isDeleted || viewOnly">
                         </div>
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="idPostalCode">{{'zipPostalCode' | i18n}}</label>
                             <input id="idPostalCode" class="form-control" type="text" name="Identity.PostalCode"
                                 [(ngModel)]="cipher.identity.postalCode" [disabled]="cipher.isDeleted || viewOnly">
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="idCountry">{{'country' | i18n}}</label>
                             <input id="idCountry" class="form-control" type="text" name="Identity.Country"
                                 [(ngModel)]="cipher.identity.country" [disabled]="cipher.isDeleted || viewOnly">
@@ -393,7 +393,7 @@
                 <ng-container *ngIf="allowOwnershipAssignment()">
                     <h3 class="mt-4">{{'ownership' | i18n}}</h3>
                     <div class="row">
-                        <div class="col-5">
+                        <div class="col-md-5">
                             <label for="organizationId">{{'whoOwnsThisItem' | i18n}}</label>
                             <select id="organizationId" class="form-control" name="OrganizationId"
                                 [(ngModel)]="cipher.organizationId" (change)="organizationChanged()"

src/app/vault/ciphers.component.html

@@ -1,15 +1,16 @@
 <ng-container *ngIf="(isPaging() ? pagedCiphers : ciphers) as filteredCiphers">
-    <table class="table table-hover table-list table-ciphers" *ngIf="filteredCiphers.length" infiniteScroll
+    <div class="d-flex flex-row flex-wrap justify-content-between" *ngIf="filteredCiphers.length" infiniteScroll
         [infiniteScrollDistance]="1" [infiniteScrollDisabled]="!isPaging()" (scrolled)="loadMore()">
-        <tbody>
-            <tr *ngFor="let c of filteredCiphers">
-                <td (click)="checkCipher(c)" class="table-list-checkbox">
+
+        <div *ngFor="let c of filteredCiphers" class="col-lg-6">
+            <div class="vault-item">
+                <div (click)="checkCipher(c)" class="table-list-checkbox">
                     <input type="checkbox" [(ngModel)]="c.checked" appStopProp>
-                </td>
-                <td (click)="checkCipher(c)" class="table-list-icon">
+                </div>
+                <div (click)="checkCipher(c)" class="table-list-icon" style="width: 30px;">
                     <app-vault-icon [cipher]="c"></app-vault-icon>
-                </td>
-                <td (click)="checkCipher(c)" class="reduced-lh wrap">
+                </div>
+                <div (click)="checkCipher(c)" class="reduced-lh wrap">
                     <a href="#" appStopClick appStopProp (click)="selectCipher(c)"
                         title="{{'editItem' | i18n}}">{{c.name}}</a>
                     <ng-container *ngIf="!organization && c.organizationId">
@@ -27,8 +28,8 @@
                     </ng-container>
                     <br>
                     <small appStopProp>{{c.subTitle}}</small>
-                </td>
-                <td class="table-list-options">
+                </div>
+                <div class="table-list-options ml-auto">
                     <div class="dropdown" appListDropdown>
                         <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                             data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
@@ -93,10 +94,10 @@
                             </a>
                         </div>
                     </div>
-                </td>
-            </tr>
-        </tbody>
-    </table>
+                </div>
+            </div>
+        </div>
+    </div>
     <div class="no-items" *ngIf="!filteredCiphers.length">
         <ng-container *ngIf="!loaded">
             <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>

src/app/vault/vault.component.html

@@ -1,6 +1,6 @@
 <div class="container page-content">
     <div class="row">
-        <div class="col-3">
+        <div class="col-12 col-md-4 col-lg-3">
             <app-vault-groupings (onAllClicked)="clearGroupingFilters()" (onFavoritesClicked)="filterFavorites()"
                 (onCipherTypeClicked)="filterCipherType($event)" (onFolderClicked)="filterFolder($event.id)"
                 (onAddFolder)="addFolder()" (onEditFolder)="editFolder($event.id)"
@@ -8,7 +8,7 @@
                 (onTrashClicked)="filterDeleted()">
             </app-vault-groupings>
         </div>
-        <div class="col-6">
+        <div class="col-12 col-md-8 col-lg-9 mt-4 mt-md-0">
             <div class="page-header d-flex">
                 <h1>
                     {{'myVault' | i18n}}
@@ -73,7 +73,7 @@
                     </a>
                 </div>
             </div>
-            <div class="card">
+            <div class="card mt-4">
                 <div class="card-header d-flex">
                     {{'organizations' | i18n}}
                     <a class="ml-auto" href="https://help.bitwarden.com/article/what-is-an-organization/"

src/images/bwi-globe.svg

@@ -0,0 +1,3 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M89.2765 41.7842C87.8565 34.768 84.5365 28.2628 79.6665 22.9649C74.7965 17.6669 68.564 13.7737 61.629 11.6975C54.694 9.62376 47.3215 9.44601 40.294 11.1865C33.2665 12.9269 26.849 16.5165 21.724 21.5774C16.6015 26.6359 12.964 32.9732 11.2015 39.9153C9.43899 46.8574 9.61899 54.1378 11.719 60.9836C13.819 67.8319 17.7615 73.9865 23.129 78.7957C28.4965 83.6048 35.0815 86.8833 42.1865 88.2855C48.649 89.5841 55.339 89.2804 61.654 87.4017C67.969 85.523 73.7165 82.1309 78.379 77.5267C83.0415 72.9225 86.479 67.2468 88.379 61.0108C90.2815 54.7747 90.589 48.1683 89.274 41.7866L89.2765 41.7842ZM29.1365 21.8268C35.164 17.3658 42.494 14.9587 50.0265 14.9637C50.4565 14.9637 50.8665 15.0377 51.2965 15.0575C52.8515 15.5018 51.6665 16.7708 51.6665 16.7708C46.344 19.4963 41.8665 23.5919 38.7015 28.6208C37.2015 31.0105 36.0115 30.9858 35.6265 30.9414C33.4215 30.8476 30.7115 27.8209 28.6565 24.7448C28.3515 24.2881 28.2315 23.7351 28.319 23.1945C28.4065 22.6538 28.699 22.165 29.1365 21.8268V21.8268ZM39.6365 81.1854C39.3365 81.4891 38.9515 81.6989 38.529 81.7878C38.1065 81.8767 37.669 81.8372 37.2715 81.6792C30.9315 79.2252 25.4515 74.9962 21.5065 69.5156C17.5615 64.035 15.3165 57.5348 15.0515 50.8148L16.5265 48.672C21.2815 46.9192 25.9665 45.9712 27.2315 47.0525C27.8165 47.5462 27.4165 49.0768 27.2315 49.7088C23.6565 61.149 32.9015 64.0868 36.3915 65.1978C36.7765 65.3212 37.1065 65.4298 37.3915 65.5237C41.0465 66.916 43.1315 68.9355 43.5965 71.5178C43.684 73.315 43.3765 75.1098 42.6965 76.7762C42.0165 78.4426 40.979 79.9486 39.6565 81.1854H39.6365V81.1854ZM74.5815 74.0063C68.0715 80.4448 59.2415 84.0714 50.0265 84.0887C48.4965 84.0788 46.9665 83.9652 45.4515 83.748C45.1565 83.7011 44.879 83.585 44.6415 83.4048C44.404 83.2246 44.2165 82.9925 44.094 82.7234C43.9715 82.4543 43.919 82.1606 43.9415 81.8668C43.964 81.573 44.059 81.2891 44.219 81.0422C46.4265 78.1464 47.419 74.5223 46.994 70.9203C46.5215 68.8663 45.489 66.9778 44.009 65.4595C42.529 63.9412 40.659 62.85 38.599 62.3044C38.289 62.1859 37.889 62.0526 37.429 61.9094C32.649 60.3887 28.184 58.2754 30.524 50.7309C31.624 47.2055 30.564 45.3638 29.484 44.4405C27.184 42.4655 22.769 43.063 18.709 44.2529C18.3365 44.3517 17.9465 44.3541 17.574 44.2578C17.2015 44.1616 16.8615 43.9715 16.5865 43.7073C16.3115 43.4432 16.109 43.1099 16.004 42.747C15.899 42.3841 15.889 41.9965 15.979 41.6262C17.2015 36.4665 19.6115 31.6573 23.024 27.5691C23.239 27.3222 23.509 27.1272 23.8115 26.9988C24.114 26.8704 24.444 26.8112 24.7715 26.826C25.1015 26.8408 25.4215 26.9297 25.7115 27.0852C26.0015 27.2408 26.2515 27.4605 26.4415 27.7271C28.6765 30.8476 31.9165 34.2693 35.4415 34.4223H35.6915C36.959 34.3557 38.184 33.9508 39.234 33.2497C40.284 32.5486 41.124 31.5783 41.6615 30.4427C45.629 24.4708 51.454 19.9357 58.2615 17.5213C59.7465 17.067 61.3315 17.0399 62.8315 17.4423C67.4715 19.242 71.6665 21.9996 75.1415 25.5299C75.4215 25.8163 75.619 26.1718 75.709 26.5594C75.799 26.947 75.7815 27.3518 75.6565 27.7296C75.5315 28.1073 75.304 28.4455 74.999 28.7072C74.694 28.9689 74.324 29.1417 73.9265 29.2083C67.5065 30.3094 59.2065 32.477 58.1315 36.4319C57.6315 38.3477 58.5865 40.2091 61.0315 41.9668C70.4515 48.7164 73.2165 53.9008 71.7765 56.0437C70.449 57.7249 69.5515 59.6974 69.1565 61.7909C68.7615 63.8844 68.879 66.0446 69.5015 68.0862C70.424 69.7255 71.9215 70.9747 73.7115 71.6017C73.7115 71.6017 75.4865 72.609 74.5965 74.0063H74.5765H74.5815ZM80.0265 67.0642C79.564 67.6246 78.974 68.0714 78.304 68.3677C77.634 68.6639 76.904 68.7997 76.1715 68.7676C75.454 68.654 74.7665 68.3948 74.154 68.0072C73.5415 67.6196 73.019 67.1086 72.6165 66.5112C71.4315 64.2547 72.9965 60.5022 74.6965 57.9693C76.4615 55.3277 77.3115 49.378 63.0865 39.1821C61.8915 38.3279 61.4315 37.6268 61.5115 37.3404C62.0115 35.5185 69.7315 33.1633 78.5115 32.0425C78.9565 31.9857 79.4065 32.0622 79.809 32.2597C80.2115 32.4572 80.5415 32.7683 80.7615 33.1534C83.6615 38.3723 85.119 44.2529 84.9915 50.2051C84.864 56.1572 83.1515 61.9711 80.0265 67.0642V67.0642Z" fill="#BAC0CE"/>
+</svg>

src/scss/base.scss

@@ -3,7 +3,7 @@ html {
 }
 
 body {
-    min-width: 1010px;
+    // min-width: 1010px;
 
     &.layout_frontend {
         @media (prefers-color-scheme: dark) {
@@ -33,9 +33,9 @@ body {
 
 .container {
     margin: 0 auto;
-    max-width: none !important;
-    padding: 0;
-    width: 980px;
+    max-width: 1200px !important;
+    padding: 0 15px;
+    width: 100%;
 }
 
 .page-header, .secondary-header {
@@ -269,3 +269,35 @@ code {
         color: themed('textMuted') !important;
     }
 }
+
+
+.vault-item {
+    display: flex;
+    align-items: center;
+    padding: 15px;
+    margin: 10px 0;
+    border-radius: 6px;
+    border: 1px solid rgba(0, 0, 0, 0.125);
+    
+    @include themify($themes) {
+        background-color: themed('bgSwapColor');
+        &:hover {
+            background-color: rgba(32, 36, 45, 0.5);
+            border-color: rgba(255, 255, 255, 0.125)
+        }
+    }
+
+    &:hover {
+        background-color: rgba(32, 36, 45, 0.06);
+        border-color: rgba(32, 36, 45, 0.5);
+    }
+
+    .table-list-icon {
+        max-width: 30px;
+        width: 30px;
+        padding: 0 4px;
+        img {
+            max-width: 100%;
+        }
+    }
+}

src/scss/cards.scss

@@ -1,7 +1,6 @@
 .card {
     @include themify($themes) {
         background-color: themed('foregroundColor');
-        border-color: themed('borderColor');
         color: themed('textColor');
     }
     

src/scss/navigation.scss

@@ -26,6 +26,9 @@
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
+                @include themify($themes) {
+                    color: themed('infoTextColor') !important;
+                }
                 &.text-muted {
                     @include themify($themes) {
                         color: themed('dropdownTextMuted') !important;

src/scss/tables.scss

@@ -3,6 +3,36 @@
         color: themed('textColor');
     }
 
+    &.table td, .table th {
+        &:not(tr:first-child td) {
+            @include themify($themes) {
+                border-top: 1px solid themed('separator');
+            }
+        }
+    }
+
+    thead th {
+        border-top: none;
+    }
+
+    tr:first-child {
+        td {
+            border: none;
+        }
+    }
+
+    tr.vault-item {
+        display: flex;
+        width: calc(50% - 10px);
+        align-items: center;
+        padding: 15px;
+        margin: 10px 0;
+        border-radius: 6px;
+        @include themify($themes) {
+            background-color: themed('bgSwapColor');
+        }
+    }
+
     td {
         vertical-align: middle;
         @include themify($themes) {
@@ -75,14 +105,15 @@
     }
 
     td.table-list-icon {
-        max-width: 45px;
+        max-width: 30px;
         text-align: center;
-        width: 45px;
+        width: 30px;
         
         img {
-            @extend .rounded;
-            @extend .img-fluid;
-            max-height: 24px;
+            // @extend .rounded;
+            // @extend .img-fluid;
+            // max-height: 24px;
+            max-width: 100%;
         }
     }
 

src/scss/variables.scss

@@ -65,11 +65,11 @@ $btn-font-weight: 600;
 $lead-font-weight: normal;
 
 $grid-breakpoints: (
-  xs: 0,
-  sm: 1px,
-  md: 2px,
-  lg: 3px,
-  xl: 4px
+    xs: 0,
+    sm: 576px,
+    md: 768px,
+    lg: 992px,
+    xl: 1200px
 );
 
 $text-color: #333333;
@@ -250,6 +250,7 @@ $themes: (
         badgeSecondaryText: $white,
         bgPrimaryColor: $darkPrimary,
         bgLightColor: $darkDarkBlue2,
+        bgSwapColor: $darkDarkBlue2,
         borderColor: $darkBlue1,
         borderPrimaryColor: $darkPrimary,
         btnDanger: $darkDanger,