Fix usability of settings components using dark color theme

* Fixed group select
  * Fixed `close`-icon was black on dark background
  * Fixed focussed item was displayed white on white background
  * Fixed input color was dark on dark background
  * Fixed input select has flickering background when hovering
* Fixed Quota dropdown was not aligned with advanced permissions dropdown
* Fixed advanced permission
  * Input had white background even on dark color theme
  * Fixed selected option was grey on grey background
  * Fixed focussed option was displayed white on white background
* Fixed rename icon (pencil) which was black on dark backbround

Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>

src/settings/App.scss

@@ -49,7 +49,7 @@
 				content: '';
 				width: 16px;
 				height: 16px;
-				background: url('../../img/rename.svg') no-repeat center;
+				background: var(--icon-rename-dark) no-repeat center;
 				opacity: 0;
 
 				&:hover {

src/settings/App.tsx

@@ -398,7 +398,18 @@ function ManageAclSelect({onChange, onSearch, folder}: ManageAclSelectProps) {
 			control: base => ({
 				...base,
 				minHeight: 25,
-				borderWidth: 1
+				backgroundColor: 'var(--color-main-background)',
+				border: '2px solid var(--color-border-dark)',
+				borderRadius: 'var(--border-radius-large)',
+				color: 'var(--color-main-text)',
+				outline: 'none',
+				'&:hover': {
+					borderColor: 'var(--color-primary-element)'
+				}
+			}),
+			option: (base, state) => ({
+				...base,
+				backgroundColor: state.isFocused ? 'var(--color-background-dark)' : 'transparent'
 			}),
 			dropdownIndicator: base => ({
 				...base,
@@ -411,7 +422,11 @@ function ManageAclSelect({onChange, onSearch, folder}: ManageAclSelectProps) {
 			multiValue: base => ({
 				...base,
 				backgroundColor: 'var(--color-background-dark)',
-				color: 'var(--color-text)'
+				color: 'var(--color-primary-text)'
+			}),
+			multiValueLabel: base => ({
+				...base,
+				color: 'var(--color-primary-text-dark)'
 			}),
 			valueContainer: base => ({
 				...base,

src/settings/EditSelect.scss

@@ -21,6 +21,7 @@
 		position: absolute;
 		top: 0;
 		left: 0;
+		margin: 0;
 	}
 
 	.quotabar-holder {
@@ -33,9 +34,9 @@
 		position: absolute;
 		margin: 3px 0;
 		border-radius: 3px;
-		top: 0;
+		top: -7px;
 		left: 0;
-		background-color: #eee;
-		height: 34px;
+		background-color: var(--color-loading-dark);
+		height: 4px; // top - margin
 	}
 }

src/settings/FolderGroups.scss

@@ -8,6 +8,22 @@
 
 	td {
 		padding: 2px 10px;
+
+		// Provide close icon which automatically fits color scheme
+		.close-btn {
+			background: transparent var(--icon-close-dark) no-repeat;
+			min-width: 16px;
+			min-height: 16px;
+		}
+
+		// Fit group selection
+		&[colspan="5"] {
+			padding: 0;
+
+			.no-options-available {
+				padding: 2px 10px;
+			}
+		}
 	}
 
 	td:last-child > a {
@@ -25,6 +41,11 @@
 
 	td.permissions {
 		text-align: center;
+
+		// Align checkboxes with close button and text
+		input[type="checkbox"] {
+			vertical-align: middle;
+		}
 	}
 
 	input {

src/settings/FolderGroups.tsx

@@ -54,9 +54,7 @@ export function FolderGroups({groups, allGroups = [], onAddGroup, removeGroup, e
 						   checked={hasPermissions(permissions, (OC.PERMISSION_DELETE))}/>
 				</td>
 				<td>
-					<a onClick={removeGroup.bind(this, groupId)}>
-						<img src={OC.imagePath('core', 'actions/close')}/>
-					</a>
+					<a onClick={removeGroup.bind(this, groupId)} className="close-btn"></a>
 				</td>
 			</tr>
 		});
@@ -110,7 +108,7 @@ interface AdminGroupSelectProps {
 
 function AdminGroupSelect({allGroups, onChange}: AdminGroupSelectProps) {
 	if (allGroups.length === 0) {
-		return <div>
+		return <div className="no-options-available">
 			<p>No other groups available</p>
 		</div>;
 	}
@@ -130,16 +128,21 @@ function AdminGroupSelect({allGroups, onChange}: AdminGroupSelectProps) {
 		styles={{
 			input: (provided) => ({
 				...provided,
-				height: 30
+				height: 30,
+				color: 'var(--color-primary-text)'
 			}),
 			control: (provided) => ({
 				...provided,
-				backgroundColor: 'var(--color-main-background)'
+				backgroundColor: 'var(--color-main-background)',
 			}),
 			menu: (provided) => ({
 				...provided,
 				backgroundColor: 'var(--color-main-background)',
 				borderColor: '#888'
+			}),
+			option: (provided, state) => ({
+				...provided,
+				backgroundColor: state.isFocused ? 'var(--color-background-dark)' : 'transparent'
 			})
 		}}
 	/>