White icons fix for preview, fix 927

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

css/ContactDetailsAvatar.scss

@@ -53,7 +53,7 @@
 		background-position: center;
 		cursor: pointer;
 	}
-	label.icon-upload-white {
+	label.icon-upload-force-white {
 		opacity: .5;
 		z-index: 2;
 		position: absolute;
@@ -65,7 +65,7 @@
 			opacity: .7;
 		}
 	}
-	&__photo +  label.icon-upload-white {
+	&__photo +  label.icon-upload-force-white {
 		opacity: 0;
 	}
 	&__options {
@@ -98,7 +98,7 @@
 			background-size: contain;
 			margin: 50px;
 		}
-		label.icon-upload-white {
+		label.icon-upload-force-white {
 			position: relative;
 		}
 		.contact-header-avatar__options {

css/icons.scss

@@ -39,3 +39,18 @@
 .icon-up {
 	@include icon-color('up', 'contacts', $color-black, 1);
 }
+
+.icon-delete-force-white {
+	// using #fffffe to trick the accessibility dark theme icon invert
+	@include icon-color('delete', 'contacts', '#fffffe', 1);
+}
+
+.icon-download-force-white {
+	// using #fffffe to trick the accessibility dark theme icon invert
+	@include icon-color('download', 'contacts', '#fffffe', 1);
+}
+
+.icon-upload-force-white {
+	// using #fffffe to trick the accessibility dark theme icon invert
+	@include icon-color('upload', 'contacts', '#fffffe', 1);
+}

package.json

@@ -89,6 +89,7 @@
 		"stylelint-config-recommended-scss": "^3.2.0",
 		"stylelint-scss": "^3.5.4",
 		"stylelint-webpack-plugin": "^0.10.5",
+		"url-loader": "^1.1.2",
 		"vue-loader": "^15.7.0",
 		"vue-template-compiler": "^2.6.8",
 		"webpack": "^4.29.6",

src/components/ContactDetails/ContactDetailsAvatar.vue

@@ -32,9 +32,9 @@
 				<input id="contact-avatar-upload" type="file" class="hidden"
 					accept="image/*" @change="processFile">
 				<label v-if="!contact.addressbook.readOnly" v-tooltip.auto="t('contacts', 'Upload a new picture')"
-					for="contact-avatar-upload" class="icon-upload-white" @click="processFile" />
-				<div v-if="maximizeAvatar && !contact.addressbook.readOnly" class="icon-delete-white" @click="removePhoto" />
-				<a v-if="maximizeAvatar" :href="contact.url + '?photo'" class="icon-download-white" />
+					for="contact-avatar-upload" class="icon-upload-force-white" @click="processFile" />
+				<div v-if="maximizeAvatar && !contact.addressbook.readOnly" class="icon-delete-force-white" @click="removePhoto" />
+				<a v-if="maximizeAvatar" :href="contact.url + '?photo'" class="icon-download-force-white" />
 			</div>
 		</div>
 	</div>

webpack.common.js

@@ -37,10 +37,7 @@ module.exports = {
 			},
 			{
 				test: /\.(png|jpg|gif|svg)$/,
-				loader: 'file-loader',
-				options: {
-					name: '[name].[ext]?[hash]'
-				}
+				loader: 'url-loader'
 			}
 		]
 	},