User a card base for both plugin and theme cards

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

@@ -1,4 +1,4 @@
-.bd-theme-card {
+.bd-card {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
@@ -9,14 +9,14 @@
     color: #b9bbbe;
     margin-top: 10px;
 
-    .bd-theme-header {
+    .bd-card-header {
         padding-bottom: 5px;
         display: flex;
         flex-grow: 0;
         font-weight: 700;
         align-items: center;
 
-        .bd-theme-icon {
+        .bd-card-icon {
             width: 30px;
             height: 30px;
         }
@@ -30,12 +30,12 @@
         }
     }
 
-    .bd-theme-body {
+    .bd-card-body {
         display: flex;
         flex-grow: 1;
         flex-direction: column;
 
-        .bd-theme-description {
+        .bd-card-description {
             flex-grow: 1;
             overflow-y: auto;
             max-height: 60px;
@@ -48,12 +48,12 @@
             margin-top: 5px;
         }
 
-        .bd-theme-footer {
+        .bd-card-footer {
             display: flex;
             flex-grow: 1;
             align-items: flex-end;
 
-            .bd-theme-extra {
+            .bd-card-extra {
                 color: rgba(255, 255, 255, 0.15);
                 font-size: 10px;
                 font-weight: 700;

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

@@ -1,7 +1,6 @@
 @import './button.scss';
 @import './sidebarview.scss';
 @import './plugins.scss';
-@import './plugincard.scss';
+@import './card.scss';
-@import './themecard.scss';
 @import './tooltips.scss';
 @import './plugin-settings-modal.scss';

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

@@ -1,126 +0,0 @@
-.bd-plugin-card {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    background: transparent;
-    border-bottom: 1px solid rgba(114, 118, 126, 0.3);
-    padding: 10px 5px;
-    min-height: 150px;
-    color: #b9bbbe;
-    margin-top: 10px;
-
-    .bd-plugin-header {
-        padding-bottom: 5px;
-        display: flex;
-        flex-grow: 0;
-        font-weight: 700;
-        align-items: center;
-
-        .bd-plugin-icon {
-            width: 30px;
-            height: 30px;
-        }
-
-        > span {
-            margin-left: 10px;
-        }
-
-        svg {
-            fill: #afb1b4;
-        }
-    }
-
-    .bd-plugin-body {
-        display: flex;
-        flex-grow: 1;
-        flex-direction: column;
-
-        .bd-plugin-description {
-            flex-grow: 1;
-            overflow-y: auto;
-            max-height: 60px;
-            min-height: 60px;
-            color: #8a8c90;
-            font-size: 12px;
-            font-weight: 600;
-            padding: 5px;
-            border-radius: 8px;
-            margin-top: 5px;
-        }
-
-        .bd-plugin-footer {
-            display: flex;
-            flex-grow: 1;
-            align-items: flex-end;
-
-            .bd-plugin-extra {
-                color: rgba(255, 255, 255, 0.15);
-                font-size: 10px;
-                font-weight: 700;
-                flex-grow: 1;
-            }
-
-            .bd-controls {
-                .bd-button-group {
-                    .bd-button {
-                        fill: #FFF;
-                        width: 30px;
-                        height: 30px;
-                    }
-                }
-            }
-        }
-    }
-
-    .bd-switch-wrapper {
-        flex: 0 0 auto;
-        user-select: none;
-        position: relative;
-        width: 40px;
-        height: 20px;
-        display: block;
-
-        input {
-            position: absolute;
-            opacity: 0;
-            cursor: pointer;
-            width: 100%;
-            height: 100%;
-            z-index: 1;
-        }
-
-        .bd-switch {
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            background: #72767d;
-            border-radius: 14px;
-            transition: background .15s ease-in-out,box-shadow .15s ease-in-out,border .15s ease-in-out;
-
-            &:before {
-                content: "";
-                display: block;
-                width: 14px;
-                height: 14px;
-                position: absolute;
-                top: 3px;
-                left: 3px;
-                bottom: 3px;
-                background: #f6f6f7;
-                border-radius: 10px;
-                transition: all .15s ease;
-                box-shadow: 0 3px 1px 0 rgba(0,0,0,.05), 0 2px 2px 0 rgba(0,0,0,.1), 0 3px 3px 0 rgba(0,0,0,.05);
-            }
-
-            &.bd-checked {
-                background: $colbdblue;
-
-                &::before {
-                    transform: translateX(20px);
-                }
-            }
-        }
-    }
-}

client/src/ui/components/bd/Card.vue

@@ -0,0 +1,42 @@
+/**
+ * BetterDiscord Card Component
+ * 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.
+*/
+
+<template>
+    <div class="bd-card">
+        <div class="bd-card-header">
+            <div class="bd-card-icon" :style="{backgroundImage: item.icon ? `url(${item.icon})` : null}">
+                <MiExtension v-if="!item.icon" :size="30" />
+            </div>
+            <span>{{item.name}}</span>
+            <div class="bd-flex-spacer" />
+            <slot name="toggle"/>
+        </div>
+        <div class="bd-card-body">
+            <div class="bd-card-description">{{item.description}}</div>
+            <div class="bd-card-footer">
+                <div class="bd-card-extra">v{{item.version}} by {{item.authors.join(', ').replace(/,(?!.*,)/gmi, ' and')}}</div>
+                <div class="bd-controls">
+                    <slot name="controls"/>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    // Imports
+    import { MiExtension } from '../common';
+
+    export default {
+        props: ['item'],
+        components: {
+            MiExtension
+        }
+    }
+</script>

client/src/ui/components/bd/PluginCard.vue

@@ -9,26 +9,14 @@
 */
 
 <template>
-    <div class="bd-plugin-card">
+    <Card :item="plugin">
-        <div class="bd-plugin-header">
+        <label slot="toggle" class="bd-switch-wrapper" @click="() => { togglePlugin(plugin); this.$forceUpdate(); }">
-            <div class="bd-plugin-icon" :style="{backgroundImage: plugin.icon ? `url(${plugin.icon})` : null}">
-                <MiExtension v-if="!plugin.icon" :size="30"/>
-            </div>
-            <span>{{plugin.name}}</span>
-            <div class="bd-flex-spacer" />
-            <label class="bd-switch-wrapper" @click="() => { togglePlugin(plugin); this.$forceUpdate(); }">
             <input type="checkbox" class="bd-switch-checkbox" />
             <div class="bd-switch" :class="{'bd-checked': plugin.enabled}" />
         </label>
-        </div>
+        <ButtonGroup slot="controls">
-        <div class="bd-plugin-body">
-            <div class="bd-plugin-description">{{plugin.description}}</div>
-            <div class="bd-plugin-footer">
-                <div class="bd-plugin-extra">v{{plugin.version}} by {{plugin.authors.join(', ').replace(/,(?!.*,)/gmi, ' and')}}</div>
-                <div class="bd-controls">
-                    <ButtonGroup>
             <Button v-tooltip="'Settings'" v-if="plugin.hasSettings" :onClick="() => showSettings(plugin)">
-                            <MiSettings size="18"/>
+                <MiSettings size="18" />
             </Button>
             <Button v-tooltip="'Reload'" :onClick="() => reloadPlugin(plugin)">
                 <MiRefresh size="18" />
@@ -40,14 +28,12 @@
                 <MiDelete size="18" />
             </Button>
         </ButtonGroup>
-                </div>
+    </Card>
-            </div>
-        </div>
-    </div>
 </template>
 <script>
     // Imports
     import { shell } from 'electron';
+    import Card from './Card.vue';
     import { Button, ButtonGroup, SettingSwitch, MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension } from '../common';
 
     export default {
@@ -58,7 +44,7 @@
         },
         props: ['plugin', 'togglePlugin', 'reloadPlugin', 'showSettings'],
         components: {
-            Button, ButtonGroup, SettingSwitch, MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension
+            Card, Button, ButtonGroup, SettingSwitch, MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension
         },
         methods: {
             editPlugin() {

client/src/ui/components/bd/ThemeCard.vue

@@ -9,24 +9,12 @@
 */
 
 <template>
-    <div class="bd-theme-card">
+    <Card :item="theme">
-        <div class="bd-theme-header">
+        <label slot="toggle" class="bd-switch-wrapper" @click="() => { toggleTheme(theme); this.$forceUpdate(); }">
-            <div class="bd-theme-icon" :style="{backgroundImage: theme.icon ? `url(${theme.icon})` : null}">
-                <MiExtension v-if="!theme.icon" :size="30" />
-            </div>
-            <span>{{theme.name}}</span>
-            <div class="bd-flex-spacer" />
-            <label class="bd-switch-wrapper" @click="() => { toggleTheme(theme); this.$forceUpdate(); }">
             <input type="checkbox" class="bd-switch-checkbox" />
             <div class="bd-switch" :class="{'bd-checked': theme.enabled}" />
         </label>
-        </div>
+        <ButtonGroup slot="controls">
-        <div class="bd-theme-body">
-            <div class="bd-theme-description">{{theme.description}}</div>
-            <div class="bd-theme-footer">
-                <div class="bd-theme-extra">v{{theme.version}} by {{theme.authors.join(', ').replace(/,(?!.*,)/gmi, ' and')}}</div>
-                <div class="bd-controls">
-                    <ButtonGroup>
             <Button v-tooltip="'Settings'" v-if="theme.hasSettings" :onClick="() => showSettings(theme)">
                 <MiSettings size="18" />
             </Button>
@@ -40,14 +28,12 @@
                 <MiDelete size="18" />
             </Button>
         </ButtonGroup>
-                </div>
+    </Card>
-            </div>
-        </div>
-    </div>
 </template>
 <script>
     // Imports
     import { shell } from 'electron';
+    import Card from './Card.vue';
     import { Button, ButtonGroup, SettingSwitch, MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension } from '../common';
 
     export default {
@@ -58,7 +44,7 @@
         },
         props: ['theme', 'toggleTheme', 'reloadTheme', 'showSettings'],
         components: {
-            Button, ButtonGroup, SettingSwitch, MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension
+            Card, Button, ButtonGroup, SettingSwitch, MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension
         },
         methods: {
             editTheme() {