Fix 133

package.json

@@ -16,8 +16,8 @@
   },
   "dependencies": {
     "axios": "^0.16.1",
-    "bootstrap": "4.0.0-alpha.6",
-    "bootstrap-vue": "^0.21.0",
+    "bootstrap": "4.0.0-beta",
+    "bootstrap-vue": "^1.0.0-beta.9",
     "chartist": "^0.11.0",
     "chartist-plugin-legend": "^0.6.2",
     "chartist-plugin-tooltips": "0.0.17",
@@ -34,12 +34,12 @@
     "moment": "^2.18.1",
     "pluralize": "^7.0.0",
     "pnotify": "^3.2.1",
+    "popper.js": "^1.12.5",
     "progressbar.js": "^1.0.1",
     "raven-js": "^3.17.0",
     "scrollreveal": "^3.3.6",
     "spinkit": "^1.2.5",
     "sweetalert2": "^6.9.0",
-    "tether": "^1.4.0",
     "vue": "^2.4.2",
     "vue-analytics": "^4.2.2",
     "vue-awesome": "^2.3.1",

src/assets/style/main.scss

@@ -8,65 +8,61 @@ $headings-font-weight:             400;
 $line-height-base:                 1.6;
 
 /* Colors */
-$brand-primary:                    #D00000;
-$brand-success:                    #408E40;
-$brand-info:                       #2589BD;
-$brand-warning:                    #E38D13;
-$brand-danger:                     #E4572E;
-$brand-inverse:                    #111111;
-$body-color:                       #26333F;
+$blue:                             #2589BD !default;
+$indigo:                           #6610f2 !default;
+$purple:                           #6f42c1 !default;
+$pink:                             #e83e8c !default;
+$red:                              #D00000 !default;
+$orange:                           #E38D13 !default;
+$yellow:                           #ffc107 !default;
+$green:                            #408E40 !default;
+$teal:                             #20c997 !default;
+$cyan:                             #03B5AA !default;
+
+$body-color:                       #202B35;
+
+$gray-100:                         #f7f7f7;
+$gray-1000:                        #1A1D21;
+$gray-1100:                        #14171A;
+$gray-1200:                        #0D1012;
+
+$grays: (
+  "1000": $gray-1000,
+  "1100": $gray-1100,
+  "1200": $gray-1200
+);
 
 $white:                            #FFFFFF;
-$gray:                             #404446;
-$gray-light:                       #888888;
 $black:                            #000000;
 $twitter:                          #00ACEE;
 $facebook:                         #3B5998;
 $googleplus:                       #D34836;
 $linkedin:                         #0E76A8;
 
 /* Links */
-$link-color:                       #03B5AA;
+$link-color:                       $cyan;
 $link-hover-color:                 darken($link-color, 5%);
 $link-hover-decoration:            underline;
 
-/* Components */
-$component-active-bg:              $brand-info;
-
 /* Buttons */
-$btn-secondary-color:              $brand-inverse;
-$btn-secondary-bg:                 $white;
-$btn-secondary-border:             $brand-inverse;
 $btn-border-radius:                0px;
 $btn-border-radius-lg:             0px;
 $btn-border-radius-sm:             0px;
 
-/* Navbar */
+/* Navbars */
 $navbar-light-color:               rgba($black, .7);
-$navbar-inverse-color:             $white;
-$navbar-inverse-toggler-border:    none;
 $app-navbar-height:                50px;
-
-/* Nav Pills*/
-$nav-pills-active-link-bg:         transparent;
-
-/* Input */
-$input-padding-x:                  1.25rem;
-$input-padding-y:                  .75rem;
-$input-border-focus:               $brand-info;
-$custom-select-focus-border-color: lighten($brand-info, 25%);
+$navbar-dark-color:                $white;
+$navbar-dark-toggler-border-color: transparent;
 
 /* Tables */
 $table-cell-padding:               .75rem 1.25rem;
-$table-bg-accent:                  darken($white, 3%);
-$table-bg-hover:                   darken($white, 5%);
-$table-border-color:               rgba($black, .075);
+$table-accent-bg:                  darken($white, 3%);
+$table-hover-bg:                   darken($white, 5%);
 
 /* Pagination */
-$pagination-color:                 $brand-info;
-$pagination-hover-color:           darken($brand-info, 10%);
-$pagination-active-bg:             $brand-info;
-$pagination-active-border:         $brand-info;
+$pagination-color:                 $blue;
+$pagination-hover-color:           darken($blue, 10%);
 
 /* Cards */
 $card-border-radius:               0px;
@@ -75,9 +71,6 @@ $card-columns-count:               2;
 /* Alerts */
 $alert-border-radius:              0;
 
-/* Forms */
-$form-group-margin-bottom:         1rem;
-
 /* List Groups */
 $list-group-border-radius:         0px;
 $list-group-item-padding-y:        0.5rem;
@@ -90,7 +83,7 @@ $spacer:                           2.5rem;
 $modal-backdrop-opacity:           0.8;
 $modal-inner-padding:              0;
 $modal-dialog-margin-y-sm-up:      50px;
-$modal-backdrop-bg:                #EFEFEF;
+$modal-backdrop-bg:                $gray-100;
 
 /* Hamburger */
 $hamburger-hover-opacity:          100%;
@@ -104,7 +97,7 @@ $lg-path-fonts:                    '~lightgallery/src/fonts';
 $lg-path-images:                   '~lightgallery/src/img';
 
 /* SpinKit */
-$spinkit-spinner-color:            $brand-info;
+$spinkit-spinner-color:            $blue;
 
 /* Chartist */
 $ct-series-colors:

src/assets/style/partials/_cards.scss

@@ -1,4 +1,8 @@
 .card {
+  .card-body {
+    overflow-y: auto;
+  }
+
   .card-header {
     font-family: $headings-font-family;
     background-color: $white;

src/assets/style/partials/_tables.scss

@@ -1,9 +1,9 @@
 .table {
+  display: table;
   font-size: $font-size-sm;
   margin-bottom: 0;
   background-color: $white;
   border: $table-border-width solid $table-border-color;
-  display: block;
   overflow-y: auto;
 
   th {

src/components/PreviewCard.vue

@@ -1,7 +1,7 @@
 <template>
   <b-card
     class="preview-card"
-    :header="'Preview'">
+    header="Preview">
     <b-card>
       <div
         v-for="(field, index) in previewFields"
@@ -78,7 +78,7 @@ export default {
 @import 'src/assets/style/main';
 
 .preview-card {
-  @extend .bg-faded;
+  @extend .bg-light;
 
   * {
     &:not(:last-child) {
@@ -95,13 +95,13 @@ export default {
     font-family: $font-family-base;
     font-weight: 600;
     text-transform: uppercase;
-    color: $gray-dark;
+    color: $gray-1000;
   }
 
   .info {
     font-size: $font-size-sm;
     font-style: italic;
-    color: $gray-light;
+    color: $gray-600;
   }
 }
 </style>

src/components/buttons/ProjectContrib.vue

@@ -22,7 +22,7 @@ export default {
     },
     size: {
       type: String,
-      default: 'md'
+      default: ''
     },
     variant: {
       type: String,

src/components/buttons/SocialMedia.vue

@@ -1,37 +1,41 @@
 <template>
   <div class="social-media-buttons">
 
-    <b-tooltip content="Share on Facebook" triggers="hover">
       <b-btn
+        v-b-tooltip
+        title="Share on Facebook"
         variant="facebook"
+        :size="size"
         @click="share(facebookUrl, 980, 620)">
         <icon name="facebook"></icon>
       </b-btn>
-    </b-tooltip>
 
-    <b-tooltip content="Share on Twitter" triggers="hover">
       <b-btn
+        v-b-tooltip
+        title="Share on Twitter"
         variant="twitter"
+        :size="size"
         @click="share(twitterUrl, 450, 550)">
         <icon name="twitter"></icon>
       </b-btn>
-    </b-tooltip>
 
-    <b-tooltip content="Share on Google Plus" triggers="hover">
       <b-btn
+        v-b-tooltip
+        title="Share on Google Plus"
         variant="googleplus"
+        :size="size"
         @click="share(googleplusUrl, 510, 725)">
         <icon name="google-plus"></icon>
       </b-btn>
-    </b-tooltip>
 
-    <b-tooltip content="Share on LinkedIn" triggers="hover">
       <b-btn
+        v-b-tooltip
+        title="Share on LinkedIn"
         variant="linkedin"
+        :size="size"
         @click="share(linkedinUrl, 510, 520)">
         <icon name="linkedin"></icon>
       </b-btn>
-    </b-tooltip>
 
   </div>
 </template>
@@ -63,6 +67,10 @@ export default {
     tweet: {
       type: String,
       default: `Crowdsourcing from ${siteConfig.company}`
+    },
+    size: {
+      type: String,
+      default: ''
     }
   },