Make the selector dropdown more visible.

frontend/app/features/content/pages/content/content-field.component.ts

@@ -19,6 +19,9 @@ export class ContentFieldComponent implements OnChanges {
     @Output()
     public languageChange = new EventEmitter<AppLanguageDto>();
 
+    @Input()
+    public compact = false;
+
     @Input()
     public form: EditContentForm;
 
@@ -49,7 +52,7 @@ export class ContentFieldComponent implements OnChanges {
     }
 
     public get isHalfWidth() {
-        return this.formModel.field.properties.isHalfWidth && !this.formCompare;
+        return this.formModel.field.properties.isHalfWidth && !this.compact && !this.formCompare;
     }
 
     public showAllControls = false;

frontend/app/features/content/pages/content/content-section.component.html

@@ -20,6 +20,7 @@
 <div class="row small-gutters" [class.hidden]="isCollapsed && !formCompare">
     <sqx-content-field *ngFor="let field of formSection.fields; trackBy: trackByField"
         (languageChange)="languageChange.emit($event)"
+        [compact]="compact"
         [form]="form"
         [formCompare]="formCompare"
         [formContext]="formContext"

frontend/app/features/content/pages/content/content-section.component.ts

@@ -18,6 +18,9 @@ export class ContentSectionComponent implements OnChanges {
     @Output()
     public languageChange = new EventEmitter<AppLanguageDto>();
 
+    @Input()
+    public compact = false;
+
     @Input()
     public form: EditContentForm;
 

frontend/app/features/content/shared/references/content-creator.component.html

@@ -38,6 +38,7 @@
             <form [formGroup]="contentForm.form" (ngSubmit)="saveAndPublish()">
                 <sqx-content-section *ngFor="let section of contentForm.sections"
                     [(language)]="language"
+                    [compact]="true"
                     [form]="contentForm"
                     [formContext]="contentFormContext"
                     [formSection]="section"

frontend/app/features/content/shared/references/content-creator.component.scss

@@ -8,4 +8,8 @@
     .modal-content {
         background: $color-background;
     }
+
+    .form-control-dark {
+        border: 1px solid darken($color-modal-header-foreground, 20%);
+    }
 }

frontend/app/features/content/shared/references/content-selector.component.scss

@@ -6,6 +6,10 @@
     .modal-tabs {
         background: $color-dark-foreground;
     }
+
+    .form-control-dark {
+        border: 1px solid darken($color-modal-header-foreground, 20%);
+    }
 }
 
 .col-selector {

frontend/app/theme/_forms.scss

@@ -260,11 +260,14 @@ label {
     }
 }
 
+// sass-lint:disable quotes
+$select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#ccc' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default;;
+
 // Dark form control for the dark panel.
 .form-control-dark {
     & {
         @include placeholder-color($color-dark2-placeholder);
-        background: $color-dark2-control;
+        background-color: $color-dark2-control;
         border: 1px solid $color-dark2-control;
         color: darken($color-dark-foreground, 20%);
         transition: background-color .3s ease;
@@ -275,6 +278,10 @@ label {
         border-color: lighten($color-dark2-control, 2%);
         color: $color-dark2-focus-foreground;
     }
+
+    &.custom-select {
+        background: $color-dark2-control escape-svg($select-indicator) no-repeat right .75rem center / 8px 10px;
+    }
 }
 
 input {