Updated icons

src/app.js

@@ -11,6 +11,7 @@ import '@/styles/css/normalize.css'
 import '@/styles/css/base.css'
 import '@/styles/css/components.css'
 import '@/styles/css/helpers.css'
+import '@/styles/css/icons.css'
 import '@/styles/css/typography.css'
 
 import '@/styles/scss/tables.scss'
@@ -96,7 +97,7 @@ async function startApp() {
 		const updates = await fetchData('checkForUpdates')
 		store.dispatch('setUpdateInfo', updates).catch(console.error)
 		if (updates.updateAvailable) {
-			toast(i18n.t('toasts.updateAvailable'), 'chevron-triple-up', true, 'updates-toast')
+			toast(i18n.t('toasts.updateAvailable'), 'browser_updated', false, 'updates-toast')
 		} else {
 			toast(i18n.t('toasts.noUpdateAvailable'), 'done', true, 'updates-toast')
 		}

src/styles/css/icons.css

@@ -0,0 +1,25 @@
+.material-icons.title-icon {
+	margin-right: 0.3125em;
+	margin-left: -3px;
+}
+
+.material-icons.title-icon.title-icon--right {
+	margin-right: 0px;
+	margin-left: 0.3125em;
+}
+
+.material-icons.title-icon.title-icon--explicit {
+	color: hsl(240, 5%, 59%);
+}
+
+.material-icons.title-icon.title-icon--new {
+	color: hsl(27, 100%, 50%);
+}
+
+.material-icons.disabled {
+	@apply opacity-50 cursor-default;
+}
+
+.material-icons.mirrored {
+	transform: scaleX(-1);
+}

src/styles/css/toasts.css

@@ -1,5 +1,5 @@
 .toast-icon {
-	@apply inline-block mr-2;
+	@apply flex items-center mr-2;
 }
 
 .circle-loader {
@@ -17,6 +17,10 @@
 	color: var(--toast-text);
 }
 
+.toastify toast {
+	@apply flex items-center;
+}
+
 .toastify .circle-loader {
 	border-bottom-color: var(--toast-secondary);
 }

src/styles/vendor/material-icons.css

@@ -3,10 +3,7 @@
 	font-family: 'Material Icons';
 	font-style: normal;
 	font-weight: 400;
-	src: url('fonts/icons/MaterialIcons-Regular.eot'); /* For IE6-8 */
+	src: url('fonts/icons/MaterialIcons-Regular.ttf') format('truetype');
-	src: url('fonts/icons/MaterialIcons-Regular.woff2') format('woff2'),
-		url('fonts/icons/MaterialIcons-Regular.woff') format('woff'),
-		url('fonts/icons/MaterialIcons-Regular.ttf') format('truetype');
 }
 
 .material-icons {
@@ -25,29 +22,3 @@
 	font-feature-settings: 'liga';
 	-webkit-font-smoothing: antialiased;
 }
-
-.material-icons.title-icon {
-	margin-right: 0.3125em;
-	margin-left: -3px;
-}
-
-.material-icons.title-icon.title-icon--right {
-	margin-right: 0px;
-	margin-left: 0.3125em;
-}
-
-.material-icons.title-icon.title-icon--explicit {
-	color: hsl(240, 5%, 59%);
-}
-
-.material-icons.title-icon.title-icon--new {
-	color: hsl(27, 100%, 50%);
-}
-
-.material-icons.disabled {
-	@apply opacity-50 cursor-default;
-}
-
-.material-icons.mirrored {
-	transform: scaleX(-1);
-}