Merge pull request #192 from paperless-ngx/fix-angular13-bs5-fixes-1

Angular 13 / Bootstrap 5 Fixes no. 1

Closes #189 and closes #188

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.scss

@@ -46,7 +46,6 @@
   }
 }
 
-
 small > svg {
   margin-top: -2px;
 }
@@ -58,3 +57,7 @@ small > svg {
     font-size: 65%;
   }
 }
+
+.show .btn-outline-primary {
+  color: #fff;
+}

src-ui/src/app/components/manage/settings/settings.component.html

@@ -18,7 +18,7 @@
           </div>
           <div class="col">
 
-            <select class="form-control" formControlName="displayLanguage">
+            <select class="form-select" formControlName="displayLanguage">
               <option *ngFor="let lang of displayLanguageOptions" [ngValue]="lang.code">{{lang.name}}<span *ngIf="lang.code && currentLocale != 'en-US'"> - {{lang.englishName}}</span></option>
             </select>
 
@@ -33,7 +33,7 @@
           </div>
           <div class="col">
 
-            <select class="form-control" formControlName="dateLocale">
+            <select class="form-select" formControlName="dateLocale">
               <option *ngFor="let lang of dateLocaleOptions" [ngValue]="lang.code">{{lang.name}}<span *ngIf="lang.code"> - {{today | customDate:'shortDate':null:lang.code}}</span></option>
             </select>
 
@@ -68,7 +68,7 @@
           </div>
           <div class="col">
 
-            <select class="form-control" formControlName="documentListItemPerPage">
+            <select class="form-select" formControlName="documentListItemPerPage">
               <option [ngValue]="10">10</option>
               <option [ngValue]="25">25</option>
               <option [ngValue]="50">50</option>

src-ui/src/theme_dark.scss

@@ -332,6 +332,10 @@ $border-color-dark-mode: #47494f;
     }
   }
 
+  .form-select:not(.is-invalid):not(:disabled) {
+    border-color: $border-color-dark-mode;
+  }
+
   .ng-select-container,
   .ng-select.ng-select-opened > .ng-select-container,
   .ng-dropdown-panel,