add and use material/close

client/src/styles/partials/bdsettings/sidebarview.scss

@@ -28,7 +28,7 @@
         align-items: center;
         cursor: pointer;
 
-        span {
+        .bd-x-text {
             color: #72767d;
             position: absolute;
             top: 32px;
@@ -36,8 +36,18 @@
             font-size: 13px;
         }
 
+        .bd-material-design-icon {
+            justify-content: center;
+            display: flex;
+            fill: #72767d;
+        }
+
         &:hover {
             background-color: hsla(218,5%,47%,.3);
+
+            .bd-material-design-icon {
+                fill: #FFF;
+            }
         }
     }
 
@@ -72,6 +82,7 @@
 
         .bd-material-design-icon {
             fill: #414245;
+
             &:hover {
                 fill: #FFF;
             }

client/src/styles/partials/generic/modals.scss

@@ -55,7 +55,7 @@
         display: flex;
         padding: 15px;
 
-        span {
+        .bd-modal-headertext {
             color: #FFF;
             font-weight: 700;
             margin-bottom: 15px;
@@ -74,6 +74,10 @@
             justify-content: center;
             align-items: center;
 
+            .bd-material-design-icon {
+                fill: #FFF;
+            }
+
             &:hover {
                 background: #2d2f34;
             }

client/src/ui/components/BdSettings.vue

@@ -13,8 +13,8 @@
         <SidebarView :contentVisible="this.activeIndex >= 0" :animating="this.animating">
             <Sidebar slot="sidebar">
                 <div class="bd-settings-x" @click="close">
-                    <SvgX size="17"/>
+                    <MiClose size="17"/>
-                    <span>ESC</span>
+                    <span class="bd-x-text">ESC</span>
                 </div>
                 <SidebarItem v-for="item in sidebarItems" :item="item" :key="item.id" :onClick="itemOnClick" />
                 <div class="bd-info">
@@ -53,7 +53,7 @@
     import { Settings } from 'modules';
     import { SidebarView, Sidebar, SidebarItem, ContentColumn } from './sidebar';
     import { CoreSettings, UISettings, EmoteSettings, CssEditorView, PluginsView } from './bd';
-    import { SvgX, MiGithubCircle, MiWeb } from './common';
+    import { SvgX, MiGithubCircle, MiWeb, MiClose } from './common';
 
     // Constants
     const sidebarItems = [
@@ -86,8 +86,7 @@
         },
         components: {
             SidebarView, Sidebar, SidebarItem, ContentColumn,
-            CoreSettings, UISettings, EmoteSettings, CssEditorView, PluginsView, MiGithubCircle, MiWeb,
+            CoreSettings, UISettings, EmoteSettings, CssEditorView, PluginsView, MiGithubCircle, MiWeb, MiClose
-            SvgX
         },
         methods: {
             itemOnClick(id) {

client/src/ui/components/common/MaterialIcon.js

@@ -4,3 +4,4 @@ export { default as MiPencil } from './materialicons/Pencil.vue';
 export { default as MiDelete } from './materialicons/Delete.vue';
 export { default as MiGithubCircle } from './materialicons/GithubCircle.vue';
 export { default as MiWeb } from './materialicons/Web.vue';
+export { default as MiClose } from './materialicons/Close.vue';

client/src/ui/components/common/Modal.vue

@@ -12,9 +12,9 @@
     <div class="bd-modal">
         <div class="bd-modal-inner">
             <div class="bd-modal-header">
-                <span>{{headerText}}</span>
+                <span class="bd-modal-headertext">{{headerText}}</span>
                 <div class="bd-modal-x" @click="close">
-                    <SvgX size="18"/>
+                    <MiClose size="18"/>
                 </div>
             </div>
             <div class="bd-modal-body">
@@ -33,12 +33,12 @@
 
 <script>
     // Imports
-    import SvgX from './SvgX.vue';
+    import { MiClose } from './MaterialIcon';
 
     export default {
         props: ['headerText', 'close'],
         components: {
-            SvgX
+            MiClose
         }
     }
 </script>

client/src/ui/components/common/SvgX.vue

@@ -1,13 +0,0 @@
-<template>
-    <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 0 12 12">
-        <g fill="none" fill-rule="evenodd">
-            <path d="M0 0h12v12H0"></path>
-            <path class="fill" fill="#dcddde" d="M9.5 3.205L8.795 2.5 6 5.295 3.205 2.5l-.705.705L5.295 6 2.5 8.795l.705.705L6 6.705 8.795 9.5l.705-.705L6.705 6"></path>
-        </g>
-    </svg>
-</template>
-<script>
-    export default {
-        props: ['size']
-    }
-</script>

client/src/ui/components/common/index.js

@@ -4,5 +4,4 @@ export { default as FormButton } from './FormButton.vue';
 export { default as ButtonGroup } from './ButtonGroup.vue';
 export { default as Button } from './Button.vue';
 export { default as Modal } from './Modal.vue';
-export { default as SvgX } from './SvgX.vue';
 export * from './MaterialIcon';

client/src/ui/components/common/materialicons/Close.vue

@@ -0,0 +1,27 @@
+/**
+ * BetterDiscord Material Design Icon
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * Material Design Icons
+ * Copyright (c) 2014 Google
+ * Apache 2.0 LICENSE
+ * https://www.apache.org/licenses/LICENSE-2.0.txt
+*/
+
+<template>
+    <span class="bd-material-design-icon">
+        <svg :width="size || 24" :height="size || 24" viewBox="0 0 24 24">
+            <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path>
+        </svg>
+    </span>
+</template>
+<script>
+    export default {
+        props: ['size']
+    }
+</script>