Styling

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

@@ -4,7 +4,10 @@
     /*Imports*/
     import { Button, ButtonGroup } from '../generic';
     import MiSettings from 'vue-material-design-icons/settings.vue';
-    const components = { MiSettings, Button, ButtonGroup };
+    import MiReload from 'vue-material-design-icons/refresh.vue';
+    import MiEdit from 'vue-material-design-icons/pencil.vue';
+    import MiDelete from 'vue-material-design-icons/delete.vue';
+    const components = { MiSettings, Button, ButtonGroup, MiReload, MiEdit, MiDelete };
 
     export default {
         props: ['plugin', 'togglePlugin'],

client/src/modules/ui/components/bd/templates/PluginCard.html

@@ -17,13 +17,13 @@
                         <MiSettings/>
                     </Button>
                     <Button>
-                        <MiSettings/>
+                        <MiReload/>
                     </Button>
                     <Button>
-                        <MiSettings/>
+                        <MiEdit/>
                     </Button>
-                    <Button>
+                    <Button type="err">
-                        <MiSettings/>
+                        <MiDelete/>
                     </Button>
                 </ButtonGroup>
             </div>

client/src/modules/ui/components/generic/Button.vue

@@ -1,11 +1,11 @@
 <template>
-    <div class="bd-button" :class="{'bd-disabled': disabled}" @click="!disabled && !loading ? onClick() : null">
+    <div class="bd-button" :class="[{'bd-disabled': disabled}, {'bd-err': type === 'err'}]" @click="!disabled && !loading ? onClick() : null">
         <div v-if="loading" class="bd-spinner-7"></div>
         <slot v-else />
     </div>
 </template>
 <script>
     export default {
-        props: ['loading', 'disabled', 'type', 'onClick']
+        props: ['loading', 'disabled', 'type', 'onClick', 'type']
     }
 </script>

client/src/styles/partials/bdsettings.scss

@@ -1,30 +1,5 @@
 @import './plugincard.scss';
 
-.bd-pluginsView {
-    .bd-button {
-        text-align: center;
-        background: transparent;
-        h3 {
-            -webkit-user-select: none;
-            user-select: none;
-            display: block;
-            font-size: 1.17em;
-            margin-top: 1em;
-            margin-bottom: 1em;
-            margin-left: 0;
-            margin-right: 0;
-            font-weight: bold;
-        }
-
-        &:hover,
-        &.bd-active {
-            color: #fff;
-            background: transparent;
-            border-bottom: 2px solid #3e82e5;
-        }
-    }
-}
-
 .bd-settings-button {
     position: absolute;
     z-index: 1;

client/src/styles/partials/buttons.scss

@@ -4,6 +4,7 @@
     justify-content: center;
     cursor: pointer;
     color: #FFF;
+    background: #44474c;
     text-align: center;
     user-select: none;
     font-weight: 500;
@@ -18,6 +19,18 @@
         cursor: not-allowed;
     }
 
+    &.bd-err {
+        background: $colerr;
+    }
+
+    &.bd-warn {
+        background: $colwarn;
+    }
+
+    &.bd-ok {
+        background: $colok;
+    }
+
     .bd-spinner-7 {
         opacity: .3;
     }
@@ -28,6 +41,7 @@
 
     .bd-button,
     .bd-material-button {
+
         &:first-of-type {
             border-radius: 6px 0 0 6px;
         }
@@ -49,9 +63,18 @@
 .bd-tabheader {
     .bd-button {
         background: transparent;
-        border-bottom: 2px solid #2b2d31;
+        border-bottom: 2px solid rgba(114, 118, 126, 0.3);
 
         h3 {
+            -webkit-user-select: none;
+            user-select: none;
+            display: block;
+            font-size: 1.17em;
+            margin-top: 1em;
+            margin-bottom: 1em;
+            margin-left: 0;
+            margin-right: 0;
+            font-weight: bold;
             flex-grow: 1;
         }
 

client/src/styles/partials/generic.scss

@@ -219,7 +219,4 @@
     .bd-switch:before {
         background: #888888;
     }
-}
+}
-
-
-

client/src/styles/partials/plugincard.scss

@@ -2,12 +2,11 @@
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-    background: #2f3136;
+    background: transparent;
-    border: 1px solid #202225;
+    border-bottom: 1px solid rgba(114, 118, 126, 0.3);
     padding: 10px 5px;
     min-height: 150px;
     color: #b9bbbe;
-    border-radius: 8px;
     margin-top: 10px;
 
     .bd-plugin-header {
@@ -30,7 +29,6 @@
             color: #8a8c90;
             font-size: 12px;
             font-weight: 600;
-            background: rgba(0,0,0,.05);
             padding: 5px;
             border-radius: 8px;
             margin-top: 5px;
@@ -38,7 +36,6 @@
 
         .bd-plugin-footer {
             display: flex;
-            justify-content: flex-end;
             flex-grow: 1;
             align-items: flex-end;
 
@@ -46,6 +43,17 @@
                 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;
+                    }
+                }
             }
         }
     }