Added theme to bootstrap

client/package.json

@@ -18,6 +18,8 @@
     "@vue/cli-plugin-babel": "^3.0.0-beta.15",
     "@vue/cli-plugin-eslint": "^3.0.0-beta.15",
     "@vue/cli-service": "^3.0.0-beta.15",
+    "node-sass": "^4.9.0",
+    "sass-loader": "^7.0.3",
     "vue-template-compiler": "^2.5.16"
   },
   "eslintConfig": {

client/src/App.vue

@@ -8,7 +8,10 @@
   </div>
 </template>
 
-<style>
+<style lang="scss">
+@import 'src/assets/darkly.scss';
+
+
 #app {
   margin-top: 60px;
 }

client/src/assets/darkly.scss

@@ -0,0 +1,171 @@
+// Darkly 4.1.1
+// Bootswatch
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #ebebeb !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #999 !default;
+$gray-700: #444 !default;
+$gray-800: #303030 !default;
+$gray-900: #222 !default;
+$black:    #000 !default;
+
+$blue:    #375a7f !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #E74C3C !default;
+$orange:  #fd7e14 !default;
+$yellow:  #F39C12 !default;
+$green:   #00bc8c !default;
+$teal:    #20c997 !default;
+$cyan:    #3498DB !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-700 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-800 !default;
+$dark:          $gray-800 !default;
+
+// Body
+
+$body-bg:                   $gray-900 !default;
+$body-color:                $white !default;
+
+// Links
+
+$link-color:                $success !default;
+
+// Fonts
+
+$font-family-sans-serif:      "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+
+$font-size-base:              0.9375rem !default;
+
+// Tables
+
+$table-accent-bg:             $gray-800 !default;
+
+$table-border-color:          $gray-700 !default;
+
+$table-dark-bg:               $gray-500 !default;
+$table-dark-border-color:     darken($gray-500, 7.5%) !default;
+$table-dark-color:            $body-bg !default;
+
+// Forms
+
+$input-border-color:                    transparent !default;
+
+$input-group-addon-color:               $gray-500 !default;
+$input-group-addon-bg:                  $gray-700 !default;
+
+// Dropdowns
+
+$dropdown-bg:                       $gray-900 !default;
+$dropdown-border-color:             $gray-700 !default;
+$dropdown-divider-bg:               $gray-700 !default;
+
+$dropdown-link-color:               $white !default;
+$dropdown-link-hover-color:         $white !default;
+$dropdown-link-hover-bg:            $primary !default;
+
+// Navs
+
+$nav-link-padding-x:                2rem !default;
+$nav-link-disabled-color:           $gray-200 !default;
+
+$nav-tabs-border-color:             $gray-700 !default;
+$nav-tabs-link-hover-border-color:  $nav-tabs-border-color !default;
+$nav-tabs-link-active-border-color: $nav-tabs-border-color !default;
+
+// Navbar
+
+$navbar-padding-y:                  1rem !default;
+
+$navbar-dark-color:                 $white !default;
+$navbar-dark-hover-color:           $success !default;
+
+$navbar-light-color:                rgba($white,.5) !default;
+$navbar-light-hover-color:          $white !default;
+$navbar-light-active-color:         $white !default;
+$navbar-light-disabled-color:       rgba($white,.3) !default;
+$navbar-light-toggler-border-color: rgba($white,.1) !default;
+
+// Pagination
+
+$pagination-color:                  $white !default;
+$pagination-bg:                     $success !default;
+$pagination-border-width:           0 !default;
+$pagination-border-color:           transparent !default;
+
+$pagination-hover-color:            $white !default;
+$pagination-hover-bg:               lighten($success, 10%) !default;
+$pagination-hover-border-color:     transparent !default;
+
+$pagination-active-bg:              $pagination-hover-bg !default;
+$pagination-active-border-color:    transparent !default;
+
+$pagination-disabled-color:         $white !default;
+$pagination-disabled-bg:            darken($success, 15%) !default;
+$pagination-disabled-border-color:  transparent !default;
+
+// Jumbotron
+
+$jumbotron-bg:                      $gray-800 !default;
+
+// Cards
+
+$card-cap-bg:                       $gray-700 !default;
+$card-bg:                           $gray-800 !default;
+
+// Popovers
+
+$popover-bg:                        $gray-800 !default;
+
+$popover-header-bg:                 $gray-700 !default;
+
+// Modals
+
+$modal-content-bg:                  $gray-800 !default;
+$modal-content-border-color:        $gray-700 !default;
+
+$modal-header-border-color:         $gray-700 !default;
+
+// Progress bars
+
+$progress-height:                   0.625rem !default;
+$progress-font-size:                0.625rem !default;
+$progress-bg:                       $gray-700 !default;
+
+// List group
+
+$list-group-bg:                     $gray-800 !default;
+$list-group-border-color:           $gray-700 !default;
+
+$list-group-hover-bg:               $gray-700 !default;
+
+// Breadcrumbs
+
+$breadcrumb-bg:                     $gray-700 !default;
+
+// Close
+
+$close-color:                       $white !default;
+$close-text-shadow:                 none !default;
+
+// Code
+
+$pre-color:                         inherit !default;
+
+
+@import "node_modules/bootstrap/scss/bootstrap";

client/src/components/Books.vue

@@ -0,0 +1,34 @@
+<template>
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-10">
+                <h1>Books</h1>
+                <hr>
+                <br><br>
+                <button type="button" class="btn btn-success btn-sm">Add Book</button>
+                <br><br>
+                <table class="table table-hover">
+                    <thead>
+                    <tr>
+                        <th scope="col">Title</th>
+                        <th scope="col">Author</th>
+                        <th scope="col">Read?</th>
+                        <th></th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>foo</td>
+                            <td>bar</td>
+                            <td>foobar</td>
+                            <td>
+                                <button type="button" class="btn btn-warning btn-sm">Update</button>
+                                <button type="button" class="btn btn-danger btn-sm">Delete</button>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</template>

client/src/main.js

@@ -1,4 +1,3 @@
-import 'bootstrap/dist/css/bootstrap.css'
 import Vue from 'vue'
 import App from './App.vue'
 import store from './store'

client/src/views/Home.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="home">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <Books></Books>
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
+import Books from '@/components/Books.vue'
 
 export default {
   name: 'home',
   components: {
-    HelloWorld
+    Books
   }
 }
 </script>