updated listGroups

Author: Yeliazar

src/config.js

@@ -67,7 +67,14 @@ export default {
       ['fifth','#d6dfe6'],
       ['sixth','#13191d'],
       ['seventh','#20ae8c'],
-      ['info', '#10CFD0']
+      ['info', '#10CFD0'],
+      ['primary', '#6FB0F9'],
+      ['secondary', '#798892'],
+      ['success', '#26CD5F'],
+      ['warning', '#EBB834'],
+      ['danger', '#FF5574'],
+      ['inverse', '#30324C'],
+      ['default', '#9083F7']
     ],
     chartColors: {
       axisColor: '#8EA1AB'

src/pages/Ui/ListGroups/ListGroups.vue

@@ -33,7 +33,7 @@
         in the whole world. Can you? Touch devices supported
       </p>
       <b-row class={s.nestable}>
-        <b-col md="6" xs="12" className="mb-xs">
+        <b-col md="6" xs="12" className="mb-sm-1">
           <DraggableTree class="tree" :data="nestableFirstItems"
             draggable="draggable" cross-tree="cross-tree">
             <div slot-scope="{data, store}">
@@ -43,15 +43,15 @@
                     v-if="data.children && data.children.length"
                     @click="store.toggleOpen(data)"
                   >
-                    <span class="bg-default border circle mr-sm">{{data.open ? '-' : '+'}}</span>
+                    <span class="bg-secondary border circle me-3 text-white">{{data.open ? '-' : '+'}}</span>
                   </div>
-                  <span  :class="{ 'px-4 py-3 border list-element d-flex': true,
+                  <div  :class="{ 'px-3 py-3 border list-element d-flex': true,
                     'no-child': !data.children.length }">
-                    <div class="drag bg-default px-4 py-3">
-                      <i class="fa fa-bars"></i>
+                    <div class="drag bg-secondary px-3 py-3">
+                      <i class="fa fa-bars text-white"></i>
                     </div>
                     <span class="ml">{{data.text}}</span>
-                  </span>
+                  </div>
                 </div>
               </template>
             </div>
@@ -67,15 +67,15 @@
                     v-if="data.children && data.children.length"
                     @click="store.toggleOpen(data)"
                   >
-                    <span class="bg-default border circle mr-sm">{{data.open ? '-' : '+'}}</span>
+                    <span class="bg-secondary border circle me-3 text-white">{{data.open ? '-' : '+'}}</span>
                   </div>
-                  <span  :class="{ 'px-4 py-3 border list-element d-flex': true,
+                  <div  :class="{ 'px-3 py-3 border list-element d-flex': true,
                     'no-child': !data.children.length }">
-                    <div class="drag bg-default px-4 py-3">
-                      <i class="fa fa-bars"></i>
+                    <div class="drag bg-secondary px-3 py-3">
+                      <i class="fa fa-bars text-white"></i>
                     </div>
                     <span class="ml">{{data.text}}</span>
-                  </span>
+                  </div>
                 </div>
               </template>
             </div>