From 5fef51f5136099a04c834e2c7e6103c30de590c9 Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Tue, 10 Oct 2017 15:23:56 +0200
Subject: [PATCH] React v16, Reactstrap v5

---
 CHANGELOG.md                                  |  32 ++++-
 React_Full_Project/.gitignore                 |   1 +
 React_Full_Project/CHANGELOG.md               |  35 -----
 React_Full_Project/REACT.md                   |  36 -----
 React_Full_Project/package.json               |  30 ++---
 .../scss/core/_dropdown-menu-right.scss       |  11 +-
 React_Full_Project/scss/core/_footer.scss     |   5 +-
 React_Full_Project/scss/core/_layout.scss     |   9 +-
 React_Full_Project/scss/core/_navbar.scss     |  19 +--
 React_Full_Project/scss/core/_sidebar.scss    |   4 +-
 React_Full_Project/scss/core/_variables.scss  |   7 +-
 React_Full_Project/scss/style.scss            |  10 +-
 .../scss/vendors/_variables.scss              |   9 ++
 React_Full_Project/scss/vendors/_vendors.scss |   1 -
 .../scss/vendors/chart.js/chart.scss          |   3 +
 .../src/components/Aside/package.json         |   2 +-
 .../src/components/Breadcrumb/package.json    |   2 +-
 .../src/components/Footer/Footer.js           |   4 +-
 .../src/components/Footer/package.json        |   2 +-
 .../src/components/Header/Header.js           |  59 ++++-----
 .../src/components/Header/package.json        |   2 +-
 .../src/components/Sidebar/Sidebar.js         |   2 +-
 .../src/components/Sidebar/package.json       |   2 +-
 .../src/components/SidebarFooter/package.json |   2 +-
 .../src/components/SidebarForm/package.json   |   2 +-
 .../src/components/SidebarHeader/package.json |   2 +-
 .../components/SidebarMinimizer/package.json  |   2 +-
 .../src/containers/Full/package.json          |   2 +-
 React_Full_Project/src/views/Charts/Charts.js |  30 ++---
 .../src/views/Charts/package.json             |   2 +-
 .../src/views/Components/Buttons/Buttons.js   |  60 ++++-----
 .../src/views/Components/Buttons/package.json |   2 +-
 .../src/views/Components/Cards/Cards.js       | 120 ++++++++---------
 .../src/views/Components/Cards/package.json   |   2 +-
 .../src/views/Components/Forms/Forms.js       | 125 ++++++++++--------
 .../src/views/Components/Forms/package.json   |   2 +-
 .../src/views/Components/Modals/Modals.js     |   8 +-
 .../src/views/Components/Modals/package.json  |   2 +-
 .../Components/SocialButtons/SocialButtons.js |  16 +--
 .../Components/SocialButtons/package.json     |   2 +-
 .../src/views/Components/Switches/Switches.js |  84 ++++++------
 .../views/Components/Switches/package.json    |   2 +-
 .../src/views/Components/Tables/Tables.js     |  28 ++--
 .../src/views/Components/Tables/package.json  |   2 +-
 .../src/views/Components/Tabs/Tabs.js         |   6 +-
 .../src/views/Components/Tabs/package.json    |   2 +-
 .../src/views/Dashboard/Dashboard.js          |  44 +++---
 .../src/views/Dashboard/package.json          |   2 +-
 .../views/Icons/FontAwesome/FontAwesome.js    |  70 +++++-----
 .../src/views/Icons/FontAwesome/package.json  |   2 +-
 .../Icons/SimpleLineIcons/SimpleLineIcons.js  |  10 +-
 .../views/Icons/SimpleLineIcons/package.json  |   2 +-
 .../src/views/Pages/Login/Login.js            |  12 +-
 .../src/views/Pages/Login/package.json        |   2 +-
 .../src/views/Pages/Page404/Page404.js        |   4 +-
 .../src/views/Pages/Page404/package.json      |   2 +-
 .../src/views/Pages/Page500/Page500.js        |   4 +-
 .../src/views/Pages/Page500/package.json      |   2 +-
 .../src/views/Pages/Register/Register.js      |   8 +-
 .../src/views/Pages/Register/package.json     |   2 +-
 .../src/views/Widgets/Widget01.js             |   8 +-
 .../src/views/Widgets/Widget02.js             |  10 +-
 .../src/views/Widgets/Widget03.js             |   2 +-
 .../src/views/Widgets/Widget04.js             |   8 +-
 .../src/views/Widgets/Widgets.js              |  22 +--
 .../src/views/Widgets/package.json            |   2 +-
 React_Starter/.gitignore                      |   1 +
 React_Starter/CHANGELOG.md                    |  35 -----
 React_Starter/REACT.md                        |  36 -----
 React_Starter/package.json                    |  28 ++--
 .../scss/core/_dropdown-menu-right.scss       |  11 +-
 React_Starter/scss/core/_footer.scss          |   5 +-
 React_Starter/scss/core/_layout.scss          |   9 +-
 React_Starter/scss/core/_navbar.scss          |  19 +--
 React_Starter/scss/core/_sidebar.scss         |   4 +-
 React_Starter/scss/core/_variables.scss       |   7 +-
 React_Starter/scss/style.scss                 |  10 +-
 React_Starter/scss/vendors/_variables.scss    |   9 ++
 React_Starter/scss/vendors/_vendors.scss      |   1 -
 .../scss/vendors/chart.js/chart.scss          |   3 +
 React_Starter/src/components/Aside/Aside.js   |   2 +-
 .../src/components/Aside/package.json         |   2 +-
 .../src/components/Breadcrumb/package.json    |   2 +-
 React_Starter/src/components/Footer/Footer.js |   4 +-
 .../src/components/Footer/package.json        |   2 +-
 React_Starter/src/components/Header/Header.js |   1 +
 .../src/components/Header/package.json        |   2 +-
 .../src/components/Sidebar/Sidebar.js         |   1 -
 .../src/components/Sidebar/package.json       |   2 +-
 .../src/components/SidebarFooter/package.json |   2 +-
 .../src/components/SidebarForm/package.json   |   2 +-
 .../src/components/SidebarHeader/package.json |   2 +-
 .../components/SidebarMinimizer/package.json  |   2 +-
 .../src/containers/Full/package.json          |   2 +-
 .../src/views/Dashboard/package.json          |   2 +-
 95 files changed, 564 insertions(+), 654 deletions(-)
 delete mode 100644 React_Full_Project/CHANGELOG.md
 delete mode 100644 React_Full_Project/REACT.md
 create mode 100644 React_Full_Project/scss/vendors/_variables.scss
 delete mode 100644 React_Full_Project/scss/vendors/_vendors.scss
 delete mode 100644 React_Starter/CHANGELOG.md
 delete mode 100644 React_Starter/REACT.md
 create mode 100644 React_Starter/scss/vendors/_variables.scss
 delete mode 100644 React_Starter/scss/vendors/_vendors.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 32c33d5..f5326b8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,24 +1,44 @@
-## Changelog [react](./REACT.md) version
+## [react](./REACT.md) version `changelog`
 
-##### 2017.08.24
+###### `v1.0.1`
+- moved to react: `^16.0.0`
+- moved to reactstrap: `^5.0.0-alpha.3`
+- moved to react-text-mask-hoc: `^0.10.4`
+- moved from deprecated CardBlock to `CardBody` reactstrap component
+- moved to `NavDropdown` in `Header` component
+- fix for app-header navbar-nav dropdown-menu-right
+- fix typo in Tables component PaginationItem
+
+###### `v1.0.0`
+- Sidebar component:
+	- item with optional class (_nav.js)
+	- nav link with optional variant (_nav.js)
+	- external urls allowed (_nav.js)
+	- optional SidebarFooter, SidebarHeader, SidebarForm components
+- SidebarMinimizer component
+- .brand-minimized
+- .sidebar-minimized,
+- Header component - sidebarMinimize
+- react-transition-group downgrade to v1 : (modals and alerts reactstrap:v4.8 issue)
+
+###### `2017.08.24`
 - webpack.config env.prod
 - Dashboard .dropdown-menu-right temp.scss hotfix (full)
 - callout.scss .chart-wrapper hotfix (full)
 
-##### 2017.08.11
+###### `2017.08.11`
 - Bootstrap 4 beta
 - Dashboard component (full):
 	- line chart for social box
 	- sparkline chart for callout
 
-##### 2017.08.01
+###### `2017.08.01`
 - Sidebar component: 
 	- title item with optional wrapper and class (_nav.js)
 	- nav link item with optional badge
 	- code refactoring
 
-##### 2017.07.31
+###### `2017.07.31`
 - moved to [reactstrap](https://reactstrap.github.io/)
 - moved to [webpack](https://webpack.js.org/) (dropping gulp)
 - data driven Sidebar component (_nav.js)
-
diff --git a/React_Full_Project/.gitignore b/React_Full_Project/.gitignore
index 85f9a0b..85905ac 100644
--- a/React_Full_Project/.gitignore
+++ b/React_Full_Project/.gitignore
@@ -2,6 +2,7 @@
 
 # dependencies
 node_modules
+package-lock.json
 
 # testing
 coverage
diff --git a/React_Full_Project/CHANGELOG.md b/React_Full_Project/CHANGELOG.md
deleted file mode 100644
index 3c69f44..0000000
--- a/React_Full_Project/CHANGELOG.md
+++ /dev/null
@@ -1,35 +0,0 @@
-### Changelog [react](./REACT.md) version
-
-#### 2017.08.26
-- Sidebar component:
-	- item with optional class (_nav.js)
-	- nav link with optional variant (_nav.js)
-	- external urls allowed (_nav.js)
-	- optional SidebarFooter, SidebarHeader, SidebarForm components
-- SidebarMinimizer component
-- .brand-minimized
-- .sidebar-minimized,
-- Header component - sidebarMinimize
-- react-transition-group downgrade to v1 : (modals and alerts reactstrap:v4.8 issue)
-
-#### 2017.08.24
-- webpack.config env.prod
-- Dashboard .dropdown-menu-right temp.scss hotfix (full)
-- callout.scss .chart-wrapper hotfix (full)
-
-#### 2017.08.11
-- Bootstrap 4 beta
-- Dashboard component (full):
-	- line chart for social box
-	- sparkline chart for callout
-
-#### 2017.08.01
-- Sidebar component: 
-	- title item with optional wrapper and class (_nav.js)
-	- nav link item with optional badge
-	- code refactoring
-
-#### 2017.07.31
-- moved to [reactstrap](https://reactstrap.github.io/)
-- moved to [webpack](https://webpack.js.org/) (dropping gulp)
-- data driven Sidebar component (_nav.js)
diff --git a/React_Full_Project/REACT.md b/React_Full_Project/REACT.md
deleted file mode 100644
index e992b2b..0000000
--- a/React_Full_Project/REACT.md
+++ /dev/null
@@ -1,36 +0,0 @@
-# React version
-
-## Intro 
-
-It uses Sass (with .scss). The style is loaded at the component level.
-
-Dependencies can be handled by **npm**.
-
-## Directories
-
-```
-src (js|jsx source)
-scss (scss source)
-public (html template)
-public/img (images)
-```
-
-## Usage
-
-**npm i** - to install dependencies
-
-## Sctipts
-
-**npm start** for developing (it runs webpack-dev-server)
-
-**npm run build** to run a dev build
-
-**npm run clean** to clean build dir
-
-**npm run dev** to run a dev build with watching filesystem for changes 
-
-
-## See also
-
-[Changelog](./CHANGELOG.md)
-[Readme](./README.md)
\ No newline at end of file
diff --git a/React_Full_Project/package.json b/React_Full_Project/package.json
index c885710..2f18ab7 100644
--- a/React_Full_Project/package.json
+++ b/React_Full_Project/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
   "author": "Łukasz Holeczek <lukasz@holeczek.pl>",
   "url": "http://coreui.io",
@@ -14,22 +14,22 @@
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
-    "copy-webpack-plugin": "^4.0.1",
-    "css-hot-loader": "^1.3.1",
+    "copy-webpack-plugin": "^4.1.1",
+    "css-hot-loader": "^1.3.2",
     "css-loader": "^0.28.7",
-    "extract-text-webpack-plugin": "^3.0.0",
-    "file-loader": "^0.11.2",
+    "extract-text-webpack-plugin": "^3.0.1",
+    "file-loader": "^1.1.5",
     "html-loader": "^0.5.1",
     "html-webpack-plugin": "^2.30.1",
     "node-sass": "^4.5.3",
     "rimraf": "^2.6.2",
     "sass-loader": "^6.0.6",
     "source-list-map": "^2.0.0",
-    "style-loader": "^0.18.2",
-    "uglify-js": "^3.1.1",
-    "url-loader": "^0.5.9",
+    "style-loader": "^0.19.0",
+    "uglify-js": "^3.1.3",
+    "url-loader": "^0.6.2",
     "webpack": "^3.6.0",
-    "webpack-dev-server": "^2.8.2"
+    "webpack-dev-server": "^2.9.1"
   },
   "dependencies": {
     "bootstrap": "^4.0.0-beta",
@@ -37,12 +37,12 @@
     "font-awesome": "^4.7.0",
     "history": "4.7.2",
     "is-url-external": "^1.0.3",
-    "react": "^15.6.1",
-    "react-chartjs-2": "2.6.2",
-    "react-dom": "^15.6.1",
-    "react-router-dom": "4.2.2",
-    "react-transition-group": "^1.2.0",
-    "reactstrap": "^4.8.0",
+    "react": "^16.0.0",
+    "react-chartjs-2": "2.6.4",
+    "react-dom": "^16.0.0",
+    "react-router-dom": "^4.2.2",
+    "react-transition-group": "^2.2.1",
+    "reactstrap": "^5.0.0-alpha.3",
     "simple-line-icons": "^2.4.1"
   },
   "scripts": {
diff --git a/React_Full_Project/scss/core/_dropdown-menu-right.scss b/React_Full_Project/scss/core/_dropdown-menu-right.scss
index eec74e8..427ab59 100644
--- a/React_Full_Project/scss/core/_dropdown-menu-right.scss
+++ b/React_Full_Project/scss/core/_dropdown-menu-right.scss
@@ -1,7 +1,8 @@
 // Temp fix for reactstrap
-.show {
-  > .dropdown-menu-right {
-    right: 0;
-    left: auto; // Reset the default from `.dropdown-menu`
+.app-header {
+  .navbar-nav {
+    .dropdown-menu-right {
+      right: auto;
+    }
   }
-}
+}
\ No newline at end of file
diff --git a/React_Full_Project/scss/core/_footer.scss b/React_Full_Project/scss/core/_footer.scss
index 2d678c8..1c1748b 100644
--- a/React_Full_Project/scss/core/_footer.scss
+++ b/React_Full_Project/scss/core/_footer.scss
@@ -1,8 +1,9 @@
 .app-footer {
-  min-height: $footer-height;
+  display: flex;
   padding: 0 $spacer;
-  line-height: $footer-height;
   color: $footer-color;
   background: $footer-bg;
+  flex-wrap: wrap;
+  align-items: center;
   @include borders($footer-borders);
 }
diff --git a/React_Full_Project/scss/core/_layout.scss b/React_Full_Project/scss/core/_layout.scss
index cbab8f0..6e4034d 100644
--- a/React_Full_Project/scss/core/_layout.scss
+++ b/React_Full_Project/scss/core/_layout.scss
@@ -11,8 +11,8 @@
 app-dashboard,
 app-root {
   display: flex;
-  flex-direction: column;
   min-height: 100vh;
+  flex-direction: column;
 }
 
 .app-header {
@@ -26,12 +26,12 @@ app-root {
 .app-body {
   display: flex;
   flex-direction: row;
-  flex-grow: 1;
   overflow-x: hidden;
+  flex-grow: 1;
 
   .main {
-    flex: 1;
     min-width: 0;
+    flex: 1;
   }
 
   .sidebar {
@@ -328,7 +328,8 @@ app-root {
     margin-top: $navbar-height;
   }
 
-  .sidebar {
+  .sidebar,
+  .sidebar-fixed .sidebar {
     position: fixed;
     z-index: $zindex-sticky - 1;
     width: $mobile-sidebar-width;
diff --git a/React_Full_Project/scss/core/_navbar.scss b/React_Full_Project/scss/core/_navbar.scss
index ba49147..780d66a 100644
--- a/React_Full_Project/scss/core/_navbar.scss
+++ b/React_Full_Project/scss/core/_navbar.scss
@@ -1,7 +1,7 @@
 .app-header.navbar {
   position: relative;
-  flex-direction: row;
   height: $navbar-height;
+  flex-direction: row;
   padding: 0;
   margin: 0;
   background-color: $navbar-bg;
@@ -102,13 +102,16 @@
   background-color: rgba(0,0,0,.075);
 }
 
-.brand-minimized {
-  .app-header.navbar {
-    .navbar-brand {
-      width: $navbar-brand-minimized-width;
-      background-color: $navbar-brand-minimized-bg;
-      background-image: $navbar-brand-minimized-logo;
-      background-size: $navbar-brand-minimized-logo-size;
+@include media-breakpoint-up(lg) {
+  .brand-minimized {
+    .app-header.navbar {
+      .navbar-brand {
+        width: $navbar-brand-minimized-width;
+        background-color: $navbar-brand-minimized-bg;
+        background-image: $navbar-brand-minimized-logo;
+        background-size: $navbar-brand-minimized-logo-size;
+        @include borders($navbar-brand-minimized-border);
+      }
     }
   }
 }
diff --git a/React_Full_Project/scss/core/_sidebar.scss b/React_Full_Project/scss/core/_sidebar.scss
index 407ed22..3f83a0d 100644
--- a/React_Full_Project/scss/core/_sidebar.scss
+++ b/React_Full_Project/scss/core/_sidebar.scss
@@ -78,8 +78,8 @@
 
   .nav {
     @include sidebar-width($sidebar-borders, $sidebar-width);
-    flex-direction: column;
     min-height: 100%;
+    flex-direction: column;
   }
 
   .nav-title {
@@ -254,6 +254,7 @@
     flex: 0 0 $sidebar-footer-height;
     padding: $sidebar-footer-padding-y $sidebar-footer-padding-x;
     background: $sidebar-footer-bg;
+    @include borders($sidebar-footer-borders);
   }
 
   .sidebar-minimizer {
@@ -261,6 +262,7 @@
     flex: 0 0 $sidebar-minimizer-height;
     background-color: $sidebar-minimizer-bg;
     border: 0;
+    @include borders($sidebar-minimizer-borders);
 
     &::before {
       position: absolute;
diff --git a/React_Full_Project/scss/core/_variables.scss b/React_Full_Project/scss/core/_variables.scss
index 790e519..a2bebe8 100644
--- a/React_Full_Project/scss/core/_variables.scss
+++ b/React_Full_Project/scss/core/_variables.scss
@@ -58,10 +58,11 @@ $navbar-brand-border: (
   )
 ) !default;
 
-$navbar-brand-minimized-width:        50px !default
-$navbar-brand-minimized-bg:           #fff !default;
+$navbar-brand-minimized-width:        50px !default;
+$navbar-brand-minimized-bg:           $navbar-brand-bg !default;
 $navbar-brand-minimized-logo:         url('../img/logo-symbol.png') !default;
 $navbar-brand-minimized-logo-size:    24px !default;
+$navbar-brand-minimized-border:       $navbar-brand-border !default;
 
 $navbar-color:                        $gray-600 !default;
 $navbar-hover-color:                  $gray-800 !default;
@@ -132,11 +133,13 @@ $sidebar-footer-height:               auto !default;
 $sidebar-footer-bg:                   rgba(0,0,0,.2) !default;
 $sidebar-footer-padding-y:            .75rem !default;
 $sidebar-footer-padding-x:            1rem !default;
+$sidebar-footer-borders:              0 !default;
 
 // Sidebar Minimizer
 
 $sidebar-minimizer-height:            50px !default;
 $sidebar-minimizer-bg:                rgba(0,0,0,.2) !default;
+$sidebar-minimizer-borders:           0 !default;
 $sidebar-minimizer-indicator-color:   $gray-600 !default;
 $sidebar-minimizer-indicator:         str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-minimizer-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
 $sidebar-minimizer-hover-bg:          rgba(0,0,0,.3) !default;
diff --git a/React_Full_Project/scss/style.scss b/React_Full_Project/scss/style.scss
index 4296d77..151efff 100644
--- a/React_Full_Project/scss/style.scss
+++ b/React_Full_Project/scss/style.scss
@@ -1,6 +1,6 @@
 /*!
  * CoreUI - Open Source Bootstrap Admin Template
- * @version v1.0.0
+ * @version v1.0.1
  * @link http://coreui.io
  * Copyright (c) 2017 creativeLabs Łukasz Holeczek
  * @license MIT
@@ -11,23 +11,17 @@
 // Import Bootstrap source files
 @import "bootstrap/bootstrap";
 
-// If you want you can import bootstrap scss files directly from node_modules or bower_components.
+// If you want you can import bootstrap scss files directly from node_modules.
 // To do this please remove @import "bootstrap/bootstrap"; and uncomment proper line.
 
 // Import Bootstrap source files from node_modules
 // @import "node_modules/bootstrap/scss/bootstrap";
 
-// Import Bootstrap source files from bower_components
-// @import "bower_components/bootstrap/scss/bootstrap";
-
 // Override core variables
 @import "core-variables";
 
 // Import core styles
 @import "core/core";
 
-// Import vendors styles
-@import "vendors/vendors";
-
 // Custom styles
 @import "custom";
diff --git a/React_Full_Project/scss/vendors/_variables.scss b/React_Full_Project/scss/vendors/_variables.scss
new file mode 100644
index 0000000..02636b9
--- /dev/null
+++ b/React_Full_Project/scss/vendors/_variables.scss
@@ -0,0 +1,9 @@
+// @import "node_modules/bootstrap/scss/bootstrap/functions";
+@import "../bootstrap/functions";
+@import "../bootstrap-variables";
+// @import "node_modules/bootstrap/scss/bootstrap/variables";
+@import "../bootstrap/variables";
+// @import "node_modules/bootstrap/scss/bootstrap/mixins";
+@import "../bootstrap/mixins";
+@import "../core-variables";
+@import "../core/variables";
diff --git a/React_Full_Project/scss/vendors/_vendors.scss b/React_Full_Project/scss/vendors/_vendors.scss
deleted file mode 100644
index 7aab687..0000000
--- a/React_Full_Project/scss/vendors/_vendors.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "chart.js/chart";
diff --git a/React_Full_Project/scss/vendors/chart.js/chart.scss b/React_Full_Project/scss/vendors/chart.js/chart.scss
index 41eda00..7e99cca 100644
--- a/React_Full_Project/scss/vendors/chart.js/chart.scss
+++ b/React_Full_Project/scss/vendors/chart.js/chart.scss
@@ -1,3 +1,6 @@
+// Import variables
+@import '../variables';
+
 .chart-legend,
 .bar-legend,
 .line-legend,
diff --git a/React_Full_Project/src/components/Aside/package.json b/React_Full_Project/src/components/Aside/package.json
index 905959b..01a49f1 100644
--- a/React_Full_Project/src/components/Aside/package.json
+++ b/React_Full_Project/src/components/Aside/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Aside",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./Aside.js"
 }
diff --git a/React_Full_Project/src/components/Breadcrumb/package.json b/React_Full_Project/src/components/Breadcrumb/package.json
index db34964..0d7d8f5 100644
--- a/React_Full_Project/src/components/Breadcrumb/package.json
+++ b/React_Full_Project/src/components/Breadcrumb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Breadcrumb",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./Breadcrumb.js"
 }
diff --git a/React_Full_Project/src/components/Footer/Footer.js b/React_Full_Project/src/components/Footer/Footer.js
index 371453a..6dfaf74 100644
--- a/React_Full_Project/src/components/Footer/Footer.js
+++ b/React_Full_Project/src/components/Footer/Footer.js
@@ -4,8 +4,8 @@ class Footer extends Component {
   render() {
     return (
       <footer className="app-footer">
-        <a href="http://coreui.io">CoreUI</a> &copy; 2017 creativeLabs.
-        <span className="float-right">Powered by <a href="http://coreui.io">CoreUI</a></span>
+        <span><a href="http://coreui.io">CoreUI</a> &copy; 2017 creativeLabs.</span>
+        <span className="ml-auto">Powered by <a href="http://coreui.io">CoreUI</a></span>
       </footer>
     )
   }
diff --git a/React_Full_Project/src/components/Footer/package.json b/React_Full_Project/src/components/Footer/package.json
index ad7b5cb..8dfb1cd 100644
--- a/React_Full_Project/src/components/Footer/package.json
+++ b/React_Full_Project/src/components/Footer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Footer",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./Footer.js"
 }
diff --git a/React_Full_Project/src/components/Header/Header.js b/React_Full_Project/src/components/Header/Header.js
index aafa56c..8139a56 100644
--- a/React_Full_Project/src/components/Header/Header.js
+++ b/React_Full_Project/src/components/Header/Header.js
@@ -1,15 +1,6 @@
 import React, {Component} from 'react';
 import {
-  Badge,
-  Dropdown,
-  DropdownMenu,
-  DropdownItem,
-  Nav,
-  NavItem,
-  NavLink,
-  NavbarToggler,
-  NavbarBrand,
-  DropdownToggle
+  Badge, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavbarBrand, NavbarToggler, NavDropdown, NavItem, NavLink
 } from 'reactstrap';
 
 class Header extends Component {
@@ -76,33 +67,31 @@ class Header extends Component {
           <NavItem className="d-md-down-none">
             <NavLink href="#"><i className="icon-location-pin"></i></NavLink>
           </NavItem>
-          <NavItem>
-            <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
-              <DropdownToggle className="nav-link dropdown-toggle">
-                <img src={'img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
-                <span className="d-md-down-none">admin</span>
-              </DropdownToggle>
-              <DropdownMenu right className={this.state.dropdownOpen ? 'show' : ''}>
-                <DropdownItem header tag="div" className="text-center"><strong>Account</strong></DropdownItem>
-                <DropdownItem><i className="fa fa-bell-o"></i> Updates<Badge color="info">42</Badge></DropdownItem>
-                <DropdownItem><i className="fa fa-envelope-o"></i> Messages<Badge color="success">42</Badge></DropdownItem>
-                <DropdownItem><i className="fa fa-tasks"></i> Tasks<Badge color="danger">42</Badge></DropdownItem>
-                <DropdownItem><i className="fa fa-comments"></i> Comments<Badge color="warning">42</Badge></DropdownItem>
-                <DropdownItem header tag="div" className="text-center"><strong>Settings</strong></DropdownItem>
-                <DropdownItem><i className="fa fa-user"></i> Profile</DropdownItem>
-                <DropdownItem><i className="fa fa-wrench"></i> Settings</DropdownItem>
-                <DropdownItem><i className="fa fa-usd"></i> Payments<Badge color="secondary">42</Badge></DropdownItem>
-                <DropdownItem><i className="fa fa-file"></i> Projects<Badge color="primary">42</Badge></DropdownItem>
-                <DropdownItem divider/>
-                <DropdownItem><i className="fa fa-shield"></i> Lock Account</DropdownItem>
-                <DropdownItem><i className="fa fa-lock"></i> Logout</DropdownItem>
-              </DropdownMenu>
-            </Dropdown>
-          </NavItem>
+          <NavDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
+            <DropdownToggle nav caret>
+              <img src={'img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
+              <span className="d-md-down-none">admin</span>
+            </DropdownToggle>
+            <DropdownMenu right>
+              <DropdownItem header tag="div" className="text-center"><strong>Account</strong></DropdownItem>
+              <DropdownItem><i className="fa fa-bell-o"></i> Updates<Badge color="info">42</Badge></DropdownItem>
+              <DropdownItem><i className="fa fa-envelope-o"></i> Messages<Badge color="success">42</Badge></DropdownItem>
+              <DropdownItem><i className="fa fa-tasks"></i> Tasks<Badge color="danger">42</Badge></DropdownItem>
+              <DropdownItem><i className="fa fa-comments"></i> Comments<Badge color="warning">42</Badge></DropdownItem>
+              <DropdownItem header tag="div" className="text-center"><strong>Settings</strong></DropdownItem>
+              <DropdownItem><i className="fa fa-user"></i> Profile</DropdownItem>
+              <DropdownItem><i className="fa fa-wrench"></i> Settings</DropdownItem>
+              <DropdownItem><i className="fa fa-usd"></i> Payments<Badge color="secondary">42</Badge></DropdownItem>
+              <DropdownItem><i className="fa fa-file"></i> Projects<Badge color="primary">42</Badge></DropdownItem>
+              <DropdownItem divider/>
+              <DropdownItem><i className="fa fa-shield"></i> Lock Account</DropdownItem>
+              <DropdownItem><i className="fa fa-lock"></i> Logout</DropdownItem>
+            </DropdownMenu>
+          </NavDropdown>
         </Nav>
-        <NavbarToggler className="d-md-down-none" type="button" onClick={this.asideToggle}>&#9776;</NavbarToggler>
+        <NavbarToggler className="d-md-down-none" onClick={this.asideToggle}>&#9776;</NavbarToggler>
       </header>
-    )
+    );
   }
 }
 
diff --git a/React_Full_Project/src/components/Header/package.json b/React_Full_Project/src/components/Header/package.json
index 0a2c907..5e2b227 100644
--- a/React_Full_Project/src/components/Header/package.json
+++ b/React_Full_Project/src/components/Header/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Header",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./Header.js"
 }
diff --git a/React_Full_Project/src/components/Sidebar/Sidebar.js b/React_Full_Project/src/components/Sidebar/Sidebar.js
index 1020944..586bedc 100644
--- a/React_Full_Project/src/components/Sidebar/Sidebar.js
+++ b/React_Full_Project/src/components/Sidebar/Sidebar.js
@@ -61,7 +61,7 @@ class Sidebar extends Component {
       return (
         <NavItem key={key} className={classes}>
           { isExternal(item.url) ?
-              <RsNavLink href={item.url} className={variant} activeClassName="active">
+              <RsNavLink href={item.url} className={variant} active>
                 <i className={item.icon}></i>{item.name}{badge(item.badge)}
               </RsNavLink>
             :
diff --git a/React_Full_Project/src/components/Sidebar/package.json b/React_Full_Project/src/components/Sidebar/package.json
index c5b3732..edac54e 100644
--- a/React_Full_Project/src/components/Sidebar/package.json
+++ b/React_Full_Project/src/components/Sidebar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Sidebar",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./Sidebar.js"
 }
diff --git a/React_Full_Project/src/components/SidebarFooter/package.json b/React_Full_Project/src/components/SidebarFooter/package.json
index 74ff5c6..ccf79ae 100644
--- a/React_Full_Project/src/components/SidebarFooter/package.json
+++ b/React_Full_Project/src/components/SidebarFooter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "SidebarFooter",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./SidebarFooter.js"
 }
diff --git a/React_Full_Project/src/components/SidebarForm/package.json b/React_Full_Project/src/components/SidebarForm/package.json
index 2e413a3..c52cf88 100644
--- a/React_Full_Project/src/components/SidebarForm/package.json
+++ b/React_Full_Project/src/components/SidebarForm/package.json
@@ -1,6 +1,6 @@
 {
   "name": "SidebarForm",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./SidebarForm.js"
 }
diff --git a/React_Full_Project/src/components/SidebarHeader/package.json b/React_Full_Project/src/components/SidebarHeader/package.json
index 4dde07a..abd7dea 100644
--- a/React_Full_Project/src/components/SidebarHeader/package.json
+++ b/React_Full_Project/src/components/SidebarHeader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "SidebarHeader",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./SidebarHeader.js"
 }
diff --git a/React_Full_Project/src/components/SidebarMinimizer/package.json b/React_Full_Project/src/components/SidebarMinimizer/package.json
index e702f99..90f80aa 100644
--- a/React_Full_Project/src/components/SidebarMinimizer/package.json
+++ b/React_Full_Project/src/components/SidebarMinimizer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "SidebarMinimizer",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./SidebarMinimizer.js"
 }
diff --git a/React_Full_Project/src/containers/Full/package.json b/React_Full_Project/src/containers/Full/package.json
index 48b4cb5..0fa075b 100644
--- a/React_Full_Project/src/containers/Full/package.json
+++ b/React_Full_Project/src/containers/Full/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Full",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./Full.js"
 }
diff --git a/React_Full_Project/src/views/Charts/Charts.js b/React_Full_Project/src/views/Charts/Charts.js
index 7666017..619c6b8 100644
--- a/React_Full_Project/src/views/Charts/Charts.js
+++ b/React_Full_Project/src/views/Charts/Charts.js
@@ -1,6 +1,6 @@
-import React, {Component} from "react";
-import {Bar, Doughnut, Line, Pie, Polar, Radar} from "react-chartjs-2";
-import {CardColumns, Card, CardHeader, CardBlock} from "reactstrap";
+import React, {Component} from 'react';
+import {Bar, Doughnut, Line, Pie, Polar, Radar} from 'react-chartjs-2';
+import {CardColumns, Card, CardHeader, CardBody} from 'reactstrap';
 
 const line = {
   labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
@@ -153,7 +153,7 @@ class Charts extends Component {
                 </a>
               </div>
             </CardHeader>
-            <CardBlock className="card-body">
+            <CardBody>
               <div className="chart-wrapper">
                 <Line data={line}
                       options={{
@@ -161,7 +161,7 @@ class Charts extends Component {
                   }}
                 />
               </div>
-            </CardBlock>
+            </CardBody>
           </Card>
           <Card>
             <CardHeader>
@@ -172,7 +172,7 @@ class Charts extends Component {
                 </a>
               </div>
             </CardHeader>
-            <CardBlock className="card-body">
+            <CardBody>
               <div className="chart-wrapper">
                 <Bar data={bar}
                      options={{
@@ -180,7 +180,7 @@ class Charts extends Component {
                 }}
                 />
               </div>
-            </CardBlock>
+            </CardBody>
           </Card>
           <Card>
             <CardHeader>
@@ -191,11 +191,11 @@ class Charts extends Component {
                 </a>
               </div>
             </CardHeader>
-            <CardBlock className="card-body">
+            <CardBody>
               <div className="chart-wrapper">
                 <Doughnut data={doughnut}/>
               </div>
-            </CardBlock>
+            </CardBody>
           </Card>
           <Card>
             <CardHeader>
@@ -206,11 +206,11 @@ class Charts extends Component {
                 </a>
               </div>
             </CardHeader>
-            <CardBlock className="card-body">
+            <CardBody>
               <div className="chart-wrapper">
                 <Radar data={radar}/>
               </div>
-            </CardBlock>
+            </CardBody>
           </Card>
           <Card>
             <CardHeader>
@@ -221,11 +221,11 @@ class Charts extends Component {
                 </a>
               </div>
             </CardHeader>
-            <CardBlock className="card-body">
+            <CardBody>
               <div className="chart-wrapper">
                 <Pie data={pie}/>
               </div>
-            </CardBlock>
+            </CardBody>
           </Card>
           <Card>
             <CardHeader>
@@ -236,11 +236,11 @@ class Charts extends Component {
                 </a>
               </div>
             </CardHeader>
-            <CardBlock className="card-body">
+            <CardBody>
               <div className="chart-wrapper">
                 <Polar data={polar}/>
               </div>
-            </CardBlock>
+            </CardBody>
           </Card>
         </CardColumns>
       </div>
diff --git a/React_Full_Project/src/views/Charts/package.json b/React_Full_Project/src/views/Charts/package.json
index 1634307..166aa8d 100644
--- a/React_Full_Project/src/views/Charts/package.json
+++ b/React_Full_Project/src/views/Charts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Charts",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./Charts.js"
 }
diff --git a/React_Full_Project/src/views/Components/Buttons/Buttons.js b/React_Full_Project/src/views/Components/Buttons/Buttons.js
index 2129ec9..aa979c9 100644
--- a/React_Full_Project/src/views/Components/Buttons/Buttons.js
+++ b/React_Full_Project/src/views/Components/Buttons/Buttons.js
@@ -1,5 +1,5 @@
-import React, {Component} from "react";
-import {Row, Col, Card, CardHeader, CardBlock, Button} from "reactstrap";
+import React, {Component} from 'react';
+import {Row, Col, Card, CardHeader, CardBody, Button} from 'reactstrap';
 
 class Buttons extends Component {
   render() {
@@ -11,34 +11,34 @@ class Buttons extends Component {
               <CardHeader>
                 <strong>Options</strong>
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Button color="primary">Primary</Button>{' '}
                 <Button color="secondary">Secondary</Button>{' '}
                 <Button color="success">Success</Button>{' '}
                 <Button color="warning">Warning</Button>{' '}
                 <Button color="danger">Danger</Button>{' '}
                 <Button color="link">Link</Button>{' '}
-              </CardBlock>
+              </CardBody>
             </Card>
             <Card>
               <CardHeader>
                 <strong>With Icons</strong>
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Button color="primary"><i className="fa fa-star"></i>{'\u00A0'} Primary</Button>
                 <Button color="secondary"><i className="fa fa-lightbulb-o"></i>{'\u00A0 Secondary'}</Button>
                 <Button color="success"><i className="fa fa-magic"></i>&nbsp; Success</Button>
                 <Button color="warning"><i className="fa fa-map-marker"></i>&nbsp; Warning</Button>
                 <Button color="danger"><i className="fa fa-rss"></i>&nbsp; Danger</Button>
                 <Button color="link"><i className="fa fa-link"></i>&nbsp; Link</Button>
-              </CardBlock>
+              </CardBody>
             </Card>
             <Card>
               <CardHeader>
                 <strong>Size Large</strong>
                 <small>Add this class <code>.btn-lg</code></small>
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Button color="primary" size="lg">Primary</Button>
                 <Button color="secondary" size="lg">Secondary</Button>
                 <Button color="success" size="lg">Success</Button>
@@ -46,14 +46,14 @@ class Buttons extends Component {
                 <Button color="warning" size="lg">Warning</Button>
                 <Button color="danger" size="lg">Danger</Button>
                 <Button color="link" size="lg">Link</Button>
-              </CardBlock>
+              </CardBody>
             </Card>
             <Card>
               <CardHeader>
                 <strong>Size Small</strong>
                 <small>Add this class <code>.btn-sm</code></small>
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Button color="primary" size="sm">Primary</Button>
                 <Button color="secondary" size="sm">Secondary</Button>
                 <Button color="success" size="sm">Success</Button>
@@ -61,14 +61,14 @@ class Buttons extends Component {
                 <Button color="warning" size="sm">Warning</Button>
                 <Button color="danger" size="sm">Danger</Button>
                 <Button color="link" size="sm">Link</Button>
-              </CardBlock>
+              </CardBody>
             </Card>
             <Card>
               <CardHeader>
                 <strong>Disabled state</strong>
                 <small>Add this <code>disabled="disabled"</code></small>
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Button color="primary" disabled>Primary</Button>
                 <Button color="secondary" disabled>Secondary</Button>
                 <Button color="success" disabled>Success</Button>
@@ -76,14 +76,14 @@ class Buttons extends Component {
                 <Button color="warning" disabled>Warning</Button>
                 <Button color="danger" disabled>Danger</Button>
                 <Button color="link" disabled>Link</Button>
-              </CardBlock>
+              </CardBody>
             </Card>
             <Card>
               <CardHeader>
                 <strong>Active state</strong>
                 <small>Add this class <code>.active</code></small>
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Button color="primary" active>Primary</Button>
                 <Button color="secondary" active>Secondary</Button>
                 <Button color="success" active>Success</Button>
@@ -91,14 +91,14 @@ class Buttons extends Component {
                 <Button color="warning" active>Warning</Button>
                 <Button color="danger" active>Danger</Button>
                 <Button color="link" active>Link</Button>
-              </CardBlock>
+              </CardBody>
             </Card>
             <Card>
               <CardHeader>
                 <strong>Block Level Buttons</strong>
                 <small>Add this class <code>.btn-block</code></small>
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Button color="secondary" size="lg" block>Block level button</Button>
                 <Button color="primary" size="lg" block>Block level button</Button>
                 <Button color="success" size="lg" block>Block level button</Button>
@@ -106,7 +106,7 @@ class Buttons extends Component {
                 <Button color="warning" size="lg" block>Block level button</Button>
                 <Button color="danger" size="lg" block>Block level button</Button>
                 <Button color="link" size="lg" block>Block level button</Button>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
           <Col xs="12" md="6">
@@ -114,95 +114,95 @@ class Buttons extends Component {
               <CardHeader>
                 <strong>Options</strong>
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Button outline color="primary">Primary</Button>
                 <Button outline color="secondary">Secondary</Button>
                 <Button outline color="success">Success</Button>
                 <Button outline color="warning">Warning</Button>
                 <Button outline color="danger">Danger</Button>
-              </CardBlock>
+              </CardBody>
             </Card>
             <Card>
               <CardHeader>
                 <strong>With Icons</strong>
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Button outline color="primary"><i className="fa fa-star"></i>&nbsp; Primary</Button>
                 <Button outline color="secondary"><i className="fa fa-lightbulb-o"></i>&nbsp; Secondary</Button>
                 <Button outline color="success"><i className="fa fa-magic"></i>&nbsp; Success</Button>
                 <Button outline color="warning"><i className="fa fa-map-marker"></i>&nbsp; Warning</Button>
                 <Button outline color="danger"><i className="fa fa-rss"></i>&nbsp; Danger</Button>
-              </CardBlock>
+              </CardBody>
             </Card>
             <Card>
               <CardHeader>
                 <strong>Size Large</strong>
                 <small>Add this class <code>.btn-lg</code></small>
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Button outline color="primary" size="lg">Primary</Button>
                 <Button outline color="secondary" size="lg">Secondary</Button>
                 <Button outline color="success" size="lg">Success</Button>
                 <Button outline color="info" size="lg">Info</Button>
                 <Button outline color="warning" size="lg">Warning</Button>
                 <Button outline color="danger" size="lg">Danger</Button>
-              </CardBlock>
+              </CardBody>
             </Card>
             <Card>
               <CardHeader>
                 <strong>Size Small</strong>
                 <small>Add this class <code>.btn-sm</code></small>
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Button outline color="primary" size="sm">Primary</Button>
                 <Button outline color="secondary" size="sm">Secondary</Button>
                 <Button outline color="success" size="sm">Success</Button>
                 <Button outline color="info" size="sm">Info</Button>
                 <Button outline color="warning" size="sm">Warning</Button>
                 <Button outline color="danger" size="sm">Danger</Button>
-              </CardBlock>
+              </CardBody>
             </Card>
             <Card>
               <CardHeader>
                 <strong>Disabled state</strong>
                 <small>Add this <code>disabled="disabled"</code></small>
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Button outline color="primary" disabled>Primary</Button>
                 <Button outline color="secondary" disabled>Secondary</Button>
                 <Button color="success" disabled>Success</Button>
                 <Button outline color="info" disabled>Info</Button>
                 <Button outline color="warning" disabled>Warning</Button>
                 <Button outline color="danger" disabled>Danger</Button>
-              </CardBlock>
+              </CardBody>
             </Card>
             <Card>
               <CardHeader>
                 <strong>Active state</strong>
                 <small>Add this class <code>.active</code></small>
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Button outline color="primary" active>Primary</Button>
                 <Button outline color="secondary" active>Secondary</Button>
                 <Button outline color="success" active>Success</Button>
                 <Button outline color="info" active>Info</Button>
                 <Button outline color="warning" active>Warning</Button>
                 <Button outline color="danger" active>Danger</Button>
-              </CardBlock>
+              </CardBody>
             </Card>
             <Card>
               <CardHeader>
                 <strong>Block Level Buttons</strong>
                 <small>Add this class <code>.btn-block</code></small>
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Button outline color="secondary" size="lg" block>Block level button</Button>
                 <Button outline color="primary" size="lg" block>Block level button</Button>
                 <Button outline color="success" size="lg" block>Block level button</Button>
                 <Button outline color="info" size="lg" block>Block level button</Button>
                 <Button outline color="warning" size="lg" block>Block level button</Button>
                 <Button outline color="danger" size="lg" block>Block level button</Button>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
         </Row>
diff --git a/React_Full_Project/src/views/Components/Buttons/package.json b/React_Full_Project/src/views/Components/Buttons/package.json
index 42239be..39a5037 100644
--- a/React_Full_Project/src/views/Components/Buttons/package.json
+++ b/React_Full_Project/src/views/Components/Buttons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Buttons",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./Buttons.js"
 }
diff --git a/React_Full_Project/src/views/Components/Cards/Cards.js b/React_Full_Project/src/views/Components/Cards/Cards.js
index f802680..5638cf3 100644
--- a/React_Full_Project/src/views/Components/Cards/Cards.js
+++ b/React_Full_Project/src/views/Components/Cards/Cards.js
@@ -1,5 +1,5 @@
-import React, {Component} from "react";
-import {Badge, Row, Col, Card, CardHeader, CardFooter, CardBlock, Label, Input} from "reactstrap";
+import React, {Component} from 'react';
+import {Badge, Row, Col, Card, CardHeader, CardFooter, CardBody, Label, Input} from 'reactstrap';
 
 class Cards extends Component {
   render() {
@@ -11,20 +11,20 @@ class Cards extends Component {
               <CardHeader>
                 Card title
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                 laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                 ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
           <Col xs="12" sm="6" md="4">
             <Card>
-              <CardBlock className="card-body">
+              <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                 laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                 ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-              </CardBlock>
+              </CardBody>
               <CardFooter>Card footer</CardFooter>
             </Card>
           </Col>
@@ -33,11 +33,11 @@ class Cards extends Component {
               <CardHeader>
                 <i className="fa fa-check float-right"></i>Card with icon
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                 laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                 ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
           <Col xs="12" sm="6" md="4">
@@ -50,11 +50,11 @@ class Cards extends Component {
                   <span className="switch-handle"></span>
                 </Label>
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                 laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                 ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
           <Col xs="12" sm="6" md="4">
@@ -63,11 +63,11 @@ class Cards extends Component {
                 Card with label
                 <Badge color="success" className="float-right">Success</Badge>
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                 laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                 ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
           <Col xs="12" sm="6" md="4">
@@ -76,11 +76,11 @@ class Cards extends Component {
                 Card with label
                 <Badge pill color="danger" className="float-right">42</Badge>
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                 laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                 ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
         </Row>
@@ -90,11 +90,11 @@ class Cards extends Component {
               <CardHeader>
                 Card outline primary
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                 laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                 ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
           <Col xs="12" sm="6" md="4">
@@ -102,11 +102,11 @@ class Cards extends Component {
               <CardHeader>
                 Card outline secondary
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                 laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                 ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
           <Col xs="12" sm="6" md="4">
@@ -114,11 +114,11 @@ class Cards extends Component {
               <CardHeader>
                 Card outline success
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                 laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                 ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
           <Col xs="12" sm="6" md="4">
@@ -126,11 +126,11 @@ class Cards extends Component {
               <CardHeader>
                 Card outline info
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                 laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                 ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
           <Col xs="12" sm="6" md="4">
@@ -138,11 +138,11 @@ class Cards extends Component {
               <CardHeader>
                 Card outline warning
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                 laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                 ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
           <Col xs="12" sm="6" md="4">
@@ -150,11 +150,11 @@ class Cards extends Component {
               <CardHeader>
                 Card outline danger
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                 laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                 ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
         </Row>
@@ -165,11 +165,11 @@ class Cards extends Component {
               <CardHeader>
                 Card with accent
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                 laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                 ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
           <Col xs="12" sm="6" md="4">
@@ -177,11 +177,11 @@ class Cards extends Component {
               <CardHeader>
                 Card with accent
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                 laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                 ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
           <Col xs="12" sm="6" md="4">
@@ -189,11 +189,11 @@ class Cards extends Component {
               <CardHeader>
                 Card with accent
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                 laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                 ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
           <Col xs="12" sm="6" md="4">
@@ -201,11 +201,11 @@ class Cards extends Component {
               <CardHeader>
                 Card with accent
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                 laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                 ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
           <Col xs="12" sm="6" md="4">
@@ -213,11 +213,11 @@ class Cards extends Component {
               <CardHeader>
                 Card with accent
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                 laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                 ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
           <Col xs="12" sm="6" md="4">
@@ -225,73 +225,73 @@ class Cards extends Component {
               <CardHeader>
                 Card with accent
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                 laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                 ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
         </Row>
         <Row>
           <Col xs="12" sm="6" md="4">
             <Card className="text-white bg-primary text-center">
-              <CardBlock className="card-body">
+              <CardBody>
                 <blockquote className="card-bodyquote">
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                   <footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer>
                 </blockquote>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
           <Col xs="12" sm="6" md="4">
             <Card className="text-white bg-success text-center">
-              <CardBlock className="card-body">
+              <CardBody>
                 <blockquote className="card-bodyquote">
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                   <footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer>
                 </blockquote>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
           <Col xs="12" sm="6" md="4">
             <Card className="text-white bg-info text-center">
-              <CardBlock className="card-body">
+              <CardBody>
                 <blockquote className="card-bodyquote">
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                   <footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer>
                 </blockquote>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
           <Col xs="12" sm="6" md="4">
             <Card className="text-white bg-warning text-center">
-              <CardBlock className="card-body">
+              <CardBody>
                 <blockquote className="card-bodyquote">
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                   <footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer>
                 </blockquote>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
           <Col xs="12" sm="6" md="4">
             <Card className="text-white bg-danger text-center">
-              <CardBlock className="card-body">
+              <CardBody>
                 <blockquote className="card-bodyquote">
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                   <footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer>
                 </blockquote>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
           <Col xs="12" sm="6" md="4">
             <Card className="text-white bg-primary text-center">
-              <CardBlock className="card-body">
+              <CardBody>
                 <blockquote className="card-bodyquote">
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                   <footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer>
                 </blockquote>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
         </Row>
@@ -301,11 +301,11 @@ class Cards extends Component {
               <CardHeader>
                 Card title
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                 laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                 ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
           <Col xs="12" sm="6" md="4">
@@ -313,11 +313,11 @@ class Cards extends Component {
               <CardHeader>
                 Card title
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                 laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                 ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
           <Col xs="12" sm="6" md="4">
@@ -325,11 +325,11 @@ class Cards extends Component {
               <CardHeader>
                 Card title
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                 laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                 ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
           <Col xs="12" sm="6" md="4">
@@ -337,11 +337,11 @@ class Cards extends Component {
               <CardHeader>
                 Card title
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                 laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                 ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
           <Col xs="12" sm="6" md="4">
@@ -349,11 +349,11 @@ class Cards extends Component {
               <CardHeader>
                 Card title
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                 laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                 ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
         </Row>
diff --git a/React_Full_Project/src/views/Components/Cards/package.json b/React_Full_Project/src/views/Components/Cards/package.json
index 9391963..52c6a4c 100644
--- a/React_Full_Project/src/views/Components/Cards/package.json
+++ b/React_Full_Project/src/views/Components/Cards/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Cards",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./Cards.js"
 }
diff --git a/React_Full_Project/src/views/Components/Forms/Forms.js b/React_Full_Project/src/views/Components/Forms/Forms.js
index 0427f5d..a6c9c51 100644
--- a/React_Full_Project/src/views/Components/Forms/Forms.js
+++ b/React_Full_Project/src/views/Components/Forms/Forms.js
@@ -1,4 +1,4 @@
-import React, {Component} from "react";
+import React, {Component} from 'react';
 import {
   Row,
   Col,
@@ -10,7 +10,7 @@ import {
   Card,
   CardHeader,
   CardFooter,
-  CardBlock,
+  CardBody,
   Form,
   FormGroup,
   FormText,
@@ -19,7 +19,7 @@ import {
   InputGroup,
   InputGroupAddon,
   InputGroupButton
-} from "reactstrap";
+} from 'reactstrap';
 
 class Forms extends Component {
   constructor(props) {
@@ -38,7 +38,7 @@ class Forms extends Component {
                 <strong>Credit Card</strong>
                 <small> Form</small>
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Row>
                   <Col xs="12">
                     <FormGroup>
@@ -99,7 +99,7 @@ class Forms extends Component {
                     </FormGroup>
                   </Col>
                 </Row>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
           <Col xs="12" sm="6">
@@ -108,7 +108,7 @@ class Forms extends Component {
                 <strong>Company</strong>
                 <small> Form</small>
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <FormGroup>
                   <Label htmlFor="company">Company</Label>
                   <Input type="text" id="company" placeholder="Enter your company name"/>
@@ -139,7 +139,7 @@ class Forms extends Component {
                   <Label htmlFor="country">Country</Label>
                   <Input type="text" id="country" placeholder="Country name"/>
                 </FormGroup>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
         </Row>
@@ -149,7 +149,7 @@ class Forms extends Component {
               <CardHeader>
                 <strong>Basic Form</strong> Elements
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Form action="" method="post" encType="multipart/form-data" className="form-horizontal">
                   <FormGroup row>
                     <Col md="3">
@@ -371,8 +371,19 @@ class Forms extends Component {
                       <Input type="file" id="file-multiple-input" name="file-multiple-input" multiple/>
                     </Col>
                   </FormGroup>
+                  <FormGroup row hidden>
+                    <Col md="3">
+                      <Label className="custom-file" htmlFor="file-input">Custom file input</Label>
+                    </Col>
+                    <Col xs="12" md="9">
+                      <Label className="custom-file">
+                        <Input className="custom-file" type="file" id="file-input" name="file-input"/>
+                        <span className="custom-file-control"></span>
+                      </Label>
+                    </Col>
+                  </FormGroup>
                 </Form>
-              </CardBlock>
+              </CardBody>
               <CardFooter>
                 <Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
                 <Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
@@ -382,7 +393,7 @@ class Forms extends Component {
               <CardHeader>
                 <strong>Inline</strong> Form
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Form action="" method="post" inline>
                   <FormGroup>
                     <Label htmlFor="exampleInputName2" className="pr-1">Name</Label>
@@ -393,7 +404,7 @@ class Forms extends Component {
                     <Input type="email" id="exampleInputEmail2" placeholder="jane.doe@example.com" required/>
                   </FormGroup>
                 </Form>
-              </CardBlock>
+              </CardBody>
               <CardFooter>
                 <Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
                 <Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
@@ -405,7 +416,7 @@ class Forms extends Component {
               <CardHeader>
                 <strong>Horizontal</strong> Form
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Form action="" method="post" className="form-horizontal">
                   <FormGroup row>
                     <Col md="3">
@@ -426,7 +437,7 @@ class Forms extends Component {
                     </Col>
                   </FormGroup>
                 </Form>
-              </CardBlock>
+              </CardBody>
               <CardFooter>
                 <Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
                 <Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
@@ -436,7 +447,7 @@ class Forms extends Component {
               <CardHeader>
                 <strong>Normal</strong> Form
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Form action="" method="post">
                   <FormGroup>
                     <Label htmlFor="nf-email">Email</Label>
@@ -449,7 +460,7 @@ class Forms extends Component {
                     <span className="help-block">Please enter your password</span>
                   </FormGroup>
                 </Form>
-              </CardBlock>
+              </CardBody>
               <CardFooter>
                 <Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
                 <Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
@@ -459,7 +470,7 @@ class Forms extends Component {
               <CardHeader>
                 Input <strong>Grid</strong>
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Form action="" method="post" className="form-horizontal">
                   <FormGroup row>
                     <Col sm="3">
@@ -512,7 +523,7 @@ class Forms extends Component {
                     </Col>
                   </FormGroup>
                 </Form>
-              </CardBlock>
+              </CardBody>
               <CardFooter>
                 <Button type="submit" size="sm" color="primary"><i className="fa fa-user"></i> Login</Button>
                 <Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
@@ -522,7 +533,7 @@ class Forms extends Component {
               <CardHeader>
                 Input <strong>Sizes</strong>
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Form action="" method="post" className="form-horizontal">
                   <FormGroup row>
                     <Col sm="5">
@@ -551,7 +562,7 @@ class Forms extends Component {
                     </Col>
                   </FormGroup>
                 </Form>
-              </CardBlock>
+              </CardBody>
               <CardFooter>
                 <Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
                 <Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
@@ -563,39 +574,37 @@ class Forms extends Component {
           <Col xs="12" sm="6">
             <Card>
               <CardHeader>
-                <strong>Validation states</strong> Form
+                <strong>Validation feedback</strong> Form
               </CardHeader>
-              <CardBlock className="card-body">
-                <FormGroup color="success">
+              <CardBody>
+                <FormGroup>
                   <Label htmlFor="inputIsValid">Input is valid</Label>
-                  <Input state="success" type="text" className="is-valid" id="inputIsValid"/>
+                  <Input type="text" className="is-valid" id="inputIsValid"/>
                 </FormGroup>
-                <FormGroup className="has-warning">
+                <FormGroup>
                   <Label htmlFor="inputIsInvalid">Input is invalid</Label>
                   <Input type="text" className="is-invalid" id="inputIsInvalid"/>
                 </FormGroup>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
           <Col xs="12" sm="6">
             <Card>
               <CardHeader>
-                <strong>Validation states</strong> with optional icons <em>(deprecated)</em>
+                <strong>Validation feedback</strong> Form
               </CardHeader>
-              <CardBlock className="card-body">
-                <FormGroup className="has-success">
-                  <Label htmlFor="inputSuccess2i">Input with success</Label>
-                  <Input type="text" className="form-control-success" id="inputSuccess2i"/>
-                </FormGroup>
-                <FormGroup className="has-warning">
-                  <Label htmlFor="inputWarning2i">Input with warning</Label>
-                  <Input type="text" className="form-control-warning" id="inputWarning2i"/>
-                </FormGroup>
-                <FormGroup className="has-danger has-feedback">
-                  <Label htmlFor="inputError2i">Input with error</Label>
-                  <Input type="text" className="form-control-danger" id="inputError2i"/>
-                </FormGroup>
-              </CardBlock>
+              <CardBody>
+                <Form className="was-validated">
+                  <FormGroup>
+                    <Label htmlFor="inputSuccess2i">Non-required input</Label>
+                    <Input type="text" className="form-control-success" id="inputSuccess2i"/>
+                  </FormGroup>
+                  <FormGroup>
+                    <Label htmlFor="inputWarning2i">Required input</Label>
+                    <Input type="text" className="form-control-warning" id="inputWarning2i" required/>
+                  </FormGroup>
+                </Form>
+              </CardBody>
             </Card>
           </Col>
         </Row>
@@ -605,7 +614,7 @@ class Forms extends Component {
               <CardHeader>
                 <strong>Icon/Text</strong> Groups
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Form action="" method="post" className="form-horizontal">
                   <FormGroup row>
                     <Col md="12">
@@ -633,7 +642,7 @@ class Forms extends Component {
                     </Col>
                   </FormGroup>
                 </Form>
-              </CardBlock>
+              </CardBody>
               <CardFooter>
                 <Button type="submit" size="sm" color="success"><i className="fa fa-dot-circle-o"></i> Submit</Button>
                 <Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
@@ -645,7 +654,7 @@ class Forms extends Component {
               <CardHeader>
                 <strong>Buttons</strong> Groups
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Form action="" method="post" className="form-horizontal">
                   <FormGroup row>
                     <Col md="12">
@@ -681,7 +690,7 @@ class Forms extends Component {
                     </Col>
                   </FormGroup>
                 </Form>
-              </CardBlock>
+              </CardBody>
               <CardFooter>
                 <Button type="submit" size="sm" color="success"><i className="fa fa-dot-circle-o"></i> Submit</Button>
                 <Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
@@ -693,7 +702,7 @@ class Forms extends Component {
               <CardHeader>
                 <strong>Dropdowns</strong> Groups
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Form className="form-horizontal">
                   <FormGroup row>
                     <Col md="12">
@@ -776,7 +785,7 @@ class Forms extends Component {
                     </Col>
                   </FormGroup>
                 </Form>
-              </CardBlock>
+              </CardBody>
               <CardFooter>
                 <Button type="submit" size="sm" color="success"><i className="fa fa-dot-circle-o"></i> Submit</Button>
                 <Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
@@ -791,7 +800,7 @@ class Forms extends Component {
                 Use the grid for big devices!
                 <small><code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code></small>
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Form action="" method="post" className="form-horizontal">
                   <FormGroup row>
                     <Col md="8">
@@ -834,7 +843,7 @@ class Forms extends Component {
                     </Col>
                   </FormGroup>
                 </Form>
-              </CardBlock>
+              </CardBody>
               <CardFooter>
                 <Button type="submit" size="sm" color="primary">Action</Button>
                 <Button size="sm" color="danger">Action</Button>
@@ -850,7 +859,7 @@ class Forms extends Component {
                 Input Grid for small devices!
                 <small><code>.col-*</code></small>
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Form action="" method="post" className="form-horizontal">
                   <FormGroup row>
                     <Col xs="4">
@@ -893,7 +902,7 @@ class Forms extends Component {
                     </Col>
                   </FormGroup>
                 </Form>
-              </CardBlock>
+              </CardBody>
               <CardFooter>
                 <Button type="submit" size="sm" color="primary">Action</Button>
                 <Button size="sm" color="danger">Action</Button>
@@ -910,7 +919,7 @@ class Forms extends Component {
               <CardHeader>
                 Example Form
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Form action="" method="post">
                   <FormGroup>
                     <InputGroup>
@@ -937,7 +946,7 @@ class Forms extends Component {
                     <Button type="submit" size="sm" color="primary">Submit</Button>
                   </FormGroup>
                 </Form>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
           <Col xs="12" sm="4">
@@ -945,7 +954,7 @@ class Forms extends Component {
               <CardHeader>
                 Example Form
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Form action="" method="post">
                   <FormGroup>
                     <InputGroup>
@@ -969,7 +978,7 @@ class Forms extends Component {
                     <Button type="submit" size="sm" color="secondary">Submit</Button>
                   </FormGroup>
                 </Form>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
           <Col xs="12" sm="4">
@@ -977,7 +986,7 @@ class Forms extends Component {
               <CardHeader>
                 Example Form
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Form action="" method="post">
                   <FormGroup>
                     <InputGroup>
@@ -1001,7 +1010,7 @@ class Forms extends Component {
                     <Button type="submit" size="sm" color="success">Submit</Button>
                   </FormGroup>
                 </Form>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
         </Row>
@@ -1016,7 +1025,7 @@ class Forms extends Component {
                   <a href="#" className="btn-close"><i className="icon-close"></i></a>
                 </div>
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Form className="form-horizontal">
                   <FormGroup>
                     <Label htmlFor="prependedInput">Prepended text</Label>
@@ -1072,7 +1081,7 @@ class Forms extends Component {
                     <Button color="secondary">Cancel</Button>
                   </div>
                 </Form>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
         </Row>
diff --git a/React_Full_Project/src/views/Components/Forms/package.json b/React_Full_Project/src/views/Components/Forms/package.json
index 1943890..07d429d 100644
--- a/React_Full_Project/src/views/Components/Forms/package.json
+++ b/React_Full_Project/src/views/Components/Forms/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Forms",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./Forms.js"
 }
diff --git a/React_Full_Project/src/views/Components/Modals/Modals.js b/React_Full_Project/src/views/Components/Modals/Modals.js
index b850df0..f722e77 100644
--- a/React_Full_Project/src/views/Components/Modals/Modals.js
+++ b/React_Full_Project/src/views/Components/Modals/Modals.js
@@ -1,5 +1,5 @@
-import React, {Component} from "react";
-import {Row, Col, Button, Modal, ModalHeader, ModalBody, ModalFooter, Card, CardHeader, CardBlock} from "reactstrap";
+import React, {Component} from 'react';
+import {Row, Col, Button, Modal, ModalHeader, ModalBody, ModalFooter, Card, CardHeader, CardBody} from 'reactstrap';
 
 
 class Modals extends Component {
@@ -84,7 +84,7 @@ class Modals extends Component {
               <CardHeader>
                 <i className="fa fa-align-justify"></i> Bootstrap Modals
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Button onClick={this.toggle}>Launch demo modal</Button>
                 <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
                   <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
@@ -222,7 +222,7 @@ class Modals extends Component {
                   </ModalFooter>
                 </Modal>
 
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
         </Row>
diff --git a/React_Full_Project/src/views/Components/Modals/package.json b/React_Full_Project/src/views/Components/Modals/package.json
index 1748868..5e31b98 100644
--- a/React_Full_Project/src/views/Components/Modals/package.json
+++ b/React_Full_Project/src/views/Components/Modals/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Modals",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./Modals.js"
 }
diff --git a/React_Full_Project/src/views/Components/SocialButtons/SocialButtons.js b/React_Full_Project/src/views/Components/SocialButtons/SocialButtons.js
index ff94cad..4826233 100644
--- a/React_Full_Project/src/views/Components/SocialButtons/SocialButtons.js
+++ b/React_Full_Project/src/views/Components/SocialButtons/SocialButtons.js
@@ -1,5 +1,5 @@
-import React, {Component} from "react";
-import {Row, Col, Card, CardHeader, CardBlock, Button} from "reactstrap";
+import React, {Component} from 'react';
+import {Row, Col, Card, CardHeader, CardBody, Button} from 'reactstrap';
 
 class SocialButtons extends Component {
   render() {
@@ -14,7 +14,7 @@ class SocialButtons extends Component {
                 <code style={{textTransform: 'lowercase'}}>&lt;button className="btn-facebook"&gt;&lt;span&gt;
                   Facebook&lt;/span&gt;&lt;/Button&gt;</code>
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <h6>Size Small
                   <small>Add this class <code>.btn-sm</code></small>
                 </h6>
@@ -103,7 +103,7 @@ class SocialButtons extends Component {
                   <Button size="lg" className="btn-foursquare"><span>Forsquare</span></Button>
                   <Button size="lg" className="btn-vimeo"><span>Vimeo</span></Button>
                 </p>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
 
@@ -115,7 +115,7 @@ class SocialButtons extends Component {
                 <code style={{textTransform: 'lowercase'}}>&lt;button className="btn-facebook icon"&gt;&lt;span&gt;
                   Facebook&lt;/span&gt;&lt;/Button&gt;</code>
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <h6>Size Small
                   <small>Add this class <code>.btn-sm</code></small>
                 </h6>
@@ -204,7 +204,7 @@ class SocialButtons extends Component {
                   <Button size="lg" className="btn-foursquare icon"><span>Forsquare</span></Button>
                   <Button size="lg" className="btn-vimeo icon"><span>Vimeo</span></Button>
                 </p>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
 
@@ -216,7 +216,7 @@ class SocialButtons extends Component {
                 <code style={{textTransform: 'lowercase'}}>&lt;button className="btn-facebook text"&gt;&lt;span&gt;
                   Facebook&lt;/span&gt;&lt;/Button&gt;</code>
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <h6>Size Small
                   <small>Add this class <code>.btn-sm</code></small>
                 </h6>
@@ -305,7 +305,7 @@ class SocialButtons extends Component {
                   <Button size="lg" className="btn-foursquare text"><span>Forsquare</span></Button>
                   <Button size="lg" className="btn-vimeo text"><span>Vimeo</span></Button>
                 </p>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
         </Row>
diff --git a/React_Full_Project/src/views/Components/SocialButtons/package.json b/React_Full_Project/src/views/Components/SocialButtons/package.json
index 48cd2bb..5594c56 100644
--- a/React_Full_Project/src/views/Components/SocialButtons/package.json
+++ b/React_Full_Project/src/views/Components/SocialButtons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "SocialButtons",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./SocialButtons.js"
 }
diff --git a/React_Full_Project/src/views/Components/Switches/Switches.js b/React_Full_Project/src/views/Components/Switches/Switches.js
index 2b5e809..16833cd 100644
--- a/React_Full_Project/src/views/Components/Switches/Switches.js
+++ b/React_Full_Project/src/views/Components/Switches/Switches.js
@@ -1,5 +1,5 @@
-import React, {Component} from "react";
-import {Row, Col, Card, CardHeader, CardBlock, Label, Input, Table} from "reactstrap";
+import React, {Component} from 'react';
+import {Row, Col, Card, CardHeader, CardBody, Label, Input, Table} from 'reactstrap';
 
 class Switches extends Component {
   render() {
@@ -12,7 +12,7 @@ class Switches extends Component {
               <CardHeader>
                 3d Switch
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Label className="switch switch-3d switch-primary">
                   <Input type="checkbox" className="switch-input" defaultChecked/>
                   <span className="switch-label"></span>
@@ -48,7 +48,7 @@ class Switches extends Component {
                   <span className="switch-label"></span>
                   <span className="switch-handle"></span>
                 </Label>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
 
@@ -57,7 +57,7 @@ class Switches extends Component {
               <CardHeader>
                 Switch default
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Label className="switch switch-default switch-primary">
                   <Input type="checkbox" className="switch-input" defaultChecked/>
                   <span className="switch-label"></span>
@@ -93,7 +93,7 @@ class Switches extends Component {
                   <span className="switch-label"></span>
                   <span className="switch-handle"></span>
                 </Label>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
 
@@ -102,7 +102,7 @@ class Switches extends Component {
               <CardHeader>
                 Switch default - pills
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Label className="switch switch-default switch-pill switch-primary">
                   <Input type="checkbox" className="switch-input" defaultChecked/>
                   <span className="switch-label"></span>
@@ -138,7 +138,7 @@ class Switches extends Component {
                   <span className="switch-label"></span>
                   <span className="switch-handle"></span>
                 </Label>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
 
@@ -147,7 +147,7 @@ class Switches extends Component {
               <CardHeader>
                 Switch outline
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Label className="switch switch-default switch-primary-outline">
                   <Input type="checkbox" className="switch-input" defaultChecked/>
                   <span className="switch-label"></span>
@@ -183,7 +183,7 @@ class Switches extends Component {
                   <span className="switch-label"></span>
                   <span className="switch-handle"></span>
                 </Label>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
 
@@ -192,7 +192,7 @@ class Switches extends Component {
               <CardHeader>
                 Switch outline - pills
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Label className="switch switch-default switch-pill switch-primary-outline">
                   <Input type="checkbox" className="switch-input" defaultChecked/>
                   <span className="switch-label"></span>
@@ -228,7 +228,7 @@ class Switches extends Component {
                   <span className="switch-label"></span>
                   <span className="switch-handle"></span>
                 </Label>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
 
@@ -237,7 +237,7 @@ class Switches extends Component {
               <CardHeader>
                 Switch outline alternative
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Label className="switch switch-default switch-primary-outline-alt">
                   <Input type="checkbox" className="switch-input" defaultChecked/>
                   <span className="switch-label"></span>
@@ -273,7 +273,7 @@ class Switches extends Component {
                   <span className="switch-label"></span>
                   <span className="switch-handle"></span>
                 </Label>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
 
@@ -282,7 +282,7 @@ class Switches extends Component {
               <CardHeader>
                 Switch outline alternative - pills
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Label className="switch switch-default switch-pill switch-primary-outline-alt">
                   <Input type="checkbox" className="switch-input" defaultChecked/>
                   <span className="switch-label"></span>
@@ -318,7 +318,7 @@ class Switches extends Component {
                   <span className="switch-label"></span>
                   <span className="switch-handle"></span>
                 </Label>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
 
@@ -327,7 +327,7 @@ class Switches extends Component {
               <CardHeader>
                 Switch with text
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Label className="switch switch-text switch-primary">
                   <Input type="checkbox" className="switch-input" defaultChecked/>
                   <span className="switch-label" data-on="On" data-off="Off"></span>
@@ -363,7 +363,7 @@ class Switches extends Component {
                   <span className="switch-label" data-on="On" data-off="Off"></span>
                   <span className="switch-handle"></span>
                 </Label>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
 
@@ -372,7 +372,7 @@ class Switches extends Component {
               <CardHeader>
                 Switch with text - pills
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Label className="switch switch-text switch-pill switch-primary">
                   <Input type="checkbox" className="switch-input" defaultChecked/>
                   <span className="switch-label" data-on="On" data-off="Off"></span>
@@ -408,7 +408,7 @@ class Switches extends Component {
                   <span className="switch-label" data-on="On" data-off="Off"></span>
                   <span className="switch-handle"></span>
                 </Label>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
 
@@ -417,7 +417,7 @@ class Switches extends Component {
               <CardHeader>
                 Switch with text outline
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
 
                 <Label className="switch switch-text switch-primary-outline">
                   <Input type="checkbox" className="switch-input" defaultChecked/>
@@ -454,7 +454,7 @@ class Switches extends Component {
                   <span className="switch-label" data-on="On" data-off="Off"></span>
                   <span className="switch-handle"></span>
                 </Label>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
 
@@ -463,7 +463,7 @@ class Switches extends Component {
               <CardHeader>
                 Switch with text outline - pills
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
 
                 <Label className="switch switch-text switch-pill switch-primary-outline">
                   <Input type="checkbox" className="switch-input" defaultChecked/>
@@ -500,7 +500,7 @@ class Switches extends Component {
                   <span className="switch-label" data-on="On" data-off="Off"></span>
                   <span className="switch-handle"></span>
                 </Label>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
 
@@ -509,7 +509,7 @@ class Switches extends Component {
               <CardHeader>
                 Switch with text outline alternative
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Label className="switch switch-text switch-primary-outline-alt">
                   <Input type="checkbox" className="switch-input" defaultChecked/>
                   <span className="switch-label" data-on="On" data-off="Off"></span>
@@ -545,7 +545,7 @@ class Switches extends Component {
                   <span className="switch-label" data-on="On" data-off="Off"></span>
                   <span className="switch-handle"></span>
                 </Label>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
 
@@ -554,7 +554,7 @@ class Switches extends Component {
               <CardHeader>
                 Switch with text outline alternative - pills
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Label className="switch switch-text switch-pill switch-primary-outline-alt">
                   <Input type="checkbox" className="switch-input" defaultChecked/>
                   <span className="switch-label" data-on="On" data-off="Off"></span>
@@ -590,7 +590,7 @@ class Switches extends Component {
                   <span className="switch-label" data-on="On" data-off="Off"></span>
                   <span className="switch-handle"></span>
                 </Label>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
 
@@ -599,7 +599,7 @@ class Switches extends Component {
               <CardHeader>
                 Switch with icon
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Label className="switch switch-icon switch-primary">
                   <Input type="checkbox" className="switch-input" defaultChecked/>
                   <span className="switch-label" data-on={'\uf164'} data-off={'\uf165'}></span>
@@ -635,7 +635,7 @@ class Switches extends Component {
                   <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
                   <span className="switch-handle"></span>
                 </Label>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
 
@@ -644,7 +644,7 @@ class Switches extends Component {
               <CardHeader>
                 Switch with icon - pills
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Label className="switch switch-icon switch-pill switch-primary">
                   <Input type="checkbox" className="switch-input" defaultChecked/>
                   <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
@@ -680,7 +680,7 @@ class Switches extends Component {
                   <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
                   <span className="switch-handle"></span>
                 </Label>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
 
@@ -689,7 +689,7 @@ class Switches extends Component {
               <CardHeader>
                 Switch with icon outline
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Label className="switch switch-icon switch-primary-outline">
                   <Input type="checkbox" className="switch-input" defaultChecked/>
                   <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
@@ -725,7 +725,7 @@ class Switches extends Component {
                   <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
                   <span className="switch-handle"></span>
                 </Label>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
 
@@ -734,7 +734,7 @@ class Switches extends Component {
               <CardHeader>
                 Switch with icon outline - pills
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Label className="switch switch-icon switch-pill switch-primary-outline">
                   <Input type="checkbox" className="switch-input" defaultChecked/>
                   <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
@@ -770,7 +770,7 @@ class Switches extends Component {
                   <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
                   <span className="switch-handle"></span>
                 </Label>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
 
@@ -779,7 +779,7 @@ class Switches extends Component {
               <CardHeader>
                 Switch with icon outline alternative
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Label className="switch switch-icon switch-primary-outline-alt">
                   <Input type="checkbox" className="switch-input" defaultChecked/>
                   <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
@@ -815,7 +815,7 @@ class Switches extends Component {
                   <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
                   <span className="switch-handle"></span>
                 </Label>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
 
@@ -824,7 +824,7 @@ class Switches extends Component {
               <CardHeader>
                 Switch with icon outline alternative - pills
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Label className="switch switch-icon switch-pill switch-primary-outline-alt">
                   <Input type="checkbox" className="switch-input" defaultChecked/>
                   <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
@@ -860,7 +860,7 @@ class Switches extends Component {
                   <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
                   <span className="switch-handle"></span>
                 </Label>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
 
@@ -869,7 +869,7 @@ class Switches extends Component {
               <CardHeader>
                 Sizes
               </CardHeader>
-              <CardBlock className="card-body p-0">
+              <CardBody className="p-0">
                 <Table hover striped className="table-align-middle mb-0">
                   <thead>
                   <tr>
@@ -941,7 +941,7 @@ class Switches extends Component {
                   </tr>
                   </tbody>
                 </Table>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
 
diff --git a/React_Full_Project/src/views/Components/Switches/package.json b/React_Full_Project/src/views/Components/Switches/package.json
index d7b9fc8..c50fa3a 100644
--- a/React_Full_Project/src/views/Components/Switches/package.json
+++ b/React_Full_Project/src/views/Components/Switches/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Switches",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./Switches.js"
 }
diff --git a/React_Full_Project/src/views/Components/Tables/Tables.js b/React_Full_Project/src/views/Components/Tables/Tables.js
index 1ba84ac..521d0dd 100644
--- a/React_Full_Project/src/views/Components/Tables/Tables.js
+++ b/React_Full_Project/src/views/Components/Tables/Tables.js
@@ -1,16 +1,16 @@
-import React, {Component} from "react";
+import React, {Component} from 'react';
 import {
   Badge,
   Row,
   Col,
   Card,
   CardHeader,
-  CardBlock,
+  CardBody,
   Table,
   Pagination,
   PaginationItem,
   PaginationLink
-} from "reactstrap";
+} from 'reactstrap';
 
 
 class Tables extends Component {
@@ -23,7 +23,7 @@ class Tables extends Component {
               <CardHeader>
                 <i className="fa fa-align-justify"></i> Simple Table
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Table responsive>
                   <thead>
                   <tr>
@@ -96,7 +96,7 @@ class Tables extends Component {
                     <PaginationLink next href="#"></PaginationLink>
                   </PaginationItem>
                 </Pagination>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
 
@@ -105,7 +105,7 @@ class Tables extends Component {
               <CardHeader>
                 <i className="fa fa-align-justify"></i> Striped Table
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Table responsive striped>
                   <thead>
                   <tr>
@@ -168,7 +168,7 @@ class Tables extends Component {
                   <PaginationItem><PaginationLink href="#">4</PaginationLink></PaginationItem>
                   <PaginationItem><PaginationLink next href="#">Next</PaginationLink></PaginationItem>
                 </Pagination>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
         </Row>
@@ -180,7 +180,7 @@ class Tables extends Component {
               <CardHeader>
                 <i className="fa fa-align-justify"></i> Condensed Table
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Table responsive size="sm">
                   <thead>
                   <tr>
@@ -243,7 +243,7 @@ class Tables extends Component {
                   <PaginationItem><PaginationLink href="#">4</PaginationLink></PaginationItem>
                   <PaginationItem><PaginationLink next href="#">Next</PaginationLink></PaginationItem>
                 </Pagination>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
 
@@ -252,7 +252,7 @@ class Tables extends Component {
               <CardHeader>
                 <i className="fa fa-align-justify"></i> Bordered Table
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Table responsive bordered>
                   <thead>
                   <tr>
@@ -310,12 +310,12 @@ class Tables extends Component {
                   <PaginationItem active>
                     <PaginationLink href="#">1</PaginationLink>
                   </PaginationItem>
-                  <lPaginationItemi className="page-item"><PaginationLink href="#">2</PaginationLink></lPaginationItemi>
+                  <PaginationItem className="page-item"><PaginationLink href="#">2</PaginationLink></PaginationItem>
                   <PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
                   <PaginationItem><PaginationLink href="#">4</PaginationLink></PaginationItem>
                   <PaginationItem><PaginationLink next href="#">Next</PaginationLink></PaginationItem>
                 </Pagination>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
 
@@ -327,7 +327,7 @@ class Tables extends Component {
               <CardHeader>
                 <i className="fa fa-align-justify"></i> Combined All Table
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Table hover bordered striped responsive size="sm">
                   <thead>
                   <tr>
@@ -392,7 +392,7 @@ class Tables extends Component {
                     <PaginationItem><PaginationLink next href="#">Next</PaginationLink></PaginationItem>
                   </Pagination>
                 </nav>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
         </Row>
diff --git a/React_Full_Project/src/views/Components/Tables/package.json b/React_Full_Project/src/views/Components/Tables/package.json
index e6bfe06..1056977 100644
--- a/React_Full_Project/src/views/Components/Tables/package.json
+++ b/React_Full_Project/src/views/Components/Tables/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Tables",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./Tables.js"
 }
diff --git a/React_Full_Project/src/views/Components/Tabs/Tabs.js b/React_Full_Project/src/views/Components/Tabs/Tabs.js
index 9a3bf39..cb3829b 100644
--- a/React_Full_Project/src/views/Components/Tabs/Tabs.js
+++ b/React_Full_Project/src/views/Components/Tabs/Tabs.js
@@ -1,6 +1,6 @@
-import React, {Component} from "react";
-import {Badge, Row, Col, TabContent, TabPane, Nav, NavItem, NavLink} from "reactstrap";
-import classnames from "classnames";
+import React, {Component} from 'react';
+import {Badge, Row, Col, TabContent, TabPane, Nav, NavItem, NavLink} from 'reactstrap';
+import classnames from 'classnames';
 
 class Tabs extends Component {
 
diff --git a/React_Full_Project/src/views/Components/Tabs/package.json b/React_Full_Project/src/views/Components/Tabs/package.json
index b3e7f81..1d6972c 100644
--- a/React_Full_Project/src/views/Components/Tabs/package.json
+++ b/React_Full_Project/src/views/Components/Tabs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Tabs",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./Tabs.js"
 }
diff --git a/React_Full_Project/src/views/Dashboard/Dashboard.js b/React_Full_Project/src/views/Dashboard/Dashboard.js
index fb32c42..528d42a 100644
--- a/React_Full_Project/src/views/Dashboard/Dashboard.js
+++ b/React_Full_Project/src/views/Dashboard/Dashboard.js
@@ -1,5 +1,5 @@
-import React, {Component} from "react";
-import {Bar, Line} from "react-chartjs-2";
+import React, { Component } from 'react';
+import {Bar, Line} from 'react-chartjs-2';
 import {
   Badge,
   Row,
@@ -11,7 +11,7 @@ import {
   DropdownItem,
   Card,
   CardHeader,
-  CardBlock,
+  CardBody,
   CardFooter,
   CardTitle,
   Button,
@@ -21,7 +21,7 @@ import {
   Label,
   Input,
   Table
-} from "reactstrap";
+} from 'reactstrap';
 
 const brandPrimary = '#20a8d8';
 const brandSuccess = '#4dbd74';
@@ -435,14 +435,14 @@ class Dashboard extends Component {
         <Row>
           <Col xs="12" sm="6" lg="3">
             <Card className="text-white bg-primary">
-              <CardBlock className="card-body pb-0">
+              <CardBody className="pb-0">
                 <ButtonGroup className="float-right">
                   <ButtonDropdown id='card1' isOpen={this.state.card1}
                                   toggle={() => { this.setState({ card1: !this.state.card1 }); }}>
                     <DropdownToggle caret className="p-0" color="transparent">
                       <i className="icon-settings"></i>
                     </DropdownToggle>
-                    <DropdownMenu className={this.state.card1 ? "show" : ""} right>
+                    <DropdownMenu right>
                       <DropdownItem>Action</DropdownItem>
                       <DropdownItem>Another action</DropdownItem>
                       <DropdownItem disabled>Disabled action</DropdownItem>
@@ -452,7 +452,7 @@ class Dashboard extends Component {
                 </ButtonGroup>
                 <h4 className="mb-0">9.823</h4>
                 <p>Members online</p>
-              </CardBlock>
+              </CardBody>
               <div className="chart-wrapper px-3" style={{height:'70px'}}>
                 <Line data={cardChartData1} options={cardChartOpts1} height={70}/>
               </div>
@@ -461,14 +461,14 @@ class Dashboard extends Component {
 
           <Col xs="12" sm="6" lg="3">
             <Card className="text-white bg-info">
-              <CardBlock className="card-body pb-0">
+              <CardBody className="pb-0">
                 <ButtonGroup className="float-right">
                   <Dropdown id='card2' isOpen={this.state.card2}
                             toggle={() => { this.setState({ card2: !this.state.card2 }); }}>
-                    <DropdownToggle caret className="p-0" color="transparent">
-                      <i className="icon-settings"></i>
+                    <DropdownToggle className="p-0" color="transparent">
+                      <i className="icon-location-pin"></i>
                     </DropdownToggle>
-                    <DropdownMenu className={this.state.card2 ? "show" : ""} right>
+                    <DropdownMenu right>
                       <DropdownItem>Action</DropdownItem>
                       <DropdownItem>Another action</DropdownItem>
                       <DropdownItem>Something else here</DropdownItem>
@@ -477,7 +477,7 @@ class Dashboard extends Component {
                 </ButtonGroup>
                 <h4 className="mb-0">9.823</h4>
                 <p>Members online</p>
-              </CardBlock>
+              </CardBody>
               <div className="chart-wrapper px-3" style={{height:'70px'}}>
                 <Line data={cardChartData2} options={cardChartOpts2} height={70}/>
               </div>
@@ -486,14 +486,14 @@ class Dashboard extends Component {
 
           <Col xs="12" sm="6" lg="3">
             <Card className="text-white bg-warning">
-              <CardBlock className="card-body pb-0">
+              <CardBody className="pb-0">
                 <ButtonGroup className="float-right">
                   <Dropdown id='card3' isOpen={this.state.card3}
                             toggle={() => { this.setState({ card3: !this.state.card3 }); }}>
                     <DropdownToggle caret className="p-0" color="transparent">
                       <i className="icon-settings"></i>
                     </DropdownToggle>
-                    <DropdownMenu className={this.state.card3 ? "show" : ""} right>
+                    <DropdownMenu right>
                       <DropdownItem>Action</DropdownItem>
                       <DropdownItem>Another action</DropdownItem>
                       <DropdownItem>Something else here</DropdownItem>
@@ -502,7 +502,7 @@ class Dashboard extends Component {
                 </ButtonGroup>
                 <h4 className="mb-0">9.823</h4>
                 <p>Members online</p>
-              </CardBlock>
+              </CardBody>
               <div className="chart-wrapper px-0" style={{height:'70px'}}>
                 <Line data={cardChartData3} options={cardChartOpts3} height={70}/>
               </div>
@@ -511,14 +511,14 @@ class Dashboard extends Component {
 
           <Col xs="12" sm="6" lg="3">
             <Card className="text-white bg-danger">
-              <CardBlock className="card-body pb-0">
+              <CardBody className="pb-0">
                 <ButtonGroup className="float-right">
                   <ButtonDropdown id='card4' isOpen={this.state.card4}
                                   toggle={() => { this.setState({ card4: !this.state.card4 }); }}>
                     <DropdownToggle caret className="p-0" color="transparent">
                       <i className="icon-settings"></i>
                     </DropdownToggle>
-                    <DropdownMenu className={this.state.card4 ? "show" : ""} right>
+                    <DropdownMenu right>
                       <DropdownItem>Action</DropdownItem>
                       <DropdownItem>Another action</DropdownItem>
                       <DropdownItem>Something else here</DropdownItem>
@@ -527,7 +527,7 @@ class Dashboard extends Component {
                 </ButtonGroup>
                 <h4 className="mb-0">9.823</h4>
                 <p>Members online</p>
-              </CardBlock>
+              </CardBody>
               <div className="chart-wrapper px-3" style={{height:'70px'}}>
                 <Bar data={cardChartData4} options={cardChartOpts4} height={70}/>
               </div>
@@ -537,7 +537,7 @@ class Dashboard extends Component {
         <Row>
           <Col>
             <Card>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Row>
                   <Col sm="5">
                     <CardTitle className="mb-0">Traffic</CardTitle>
@@ -563,7 +563,7 @@ class Dashboard extends Component {
                 <div className="chart-wrapper" style={{height: 300 + 'px', marginTop: 40 + 'px'}}>
                   <Line data={mainChart} options={mainChartOpts} height={300}/>
                 </div>
-              </CardBlock>
+              </CardBody>
               <CardFooter>
                 <ul>
                   <li>
@@ -682,7 +682,7 @@ class Dashboard extends Component {
               <CardHeader>
                 Traffic {'&'} Sales
               </CardHeader>
-              <CardBlock className="card-body">
+              <CardBody>
                 <Row>
                   <Col xs="12" md="6" xl="4">
                     <Row>
@@ -1216,7 +1216,7 @@ class Dashboard extends Component {
                   </tr>
                   </tbody>
                 </Table>
-              </CardBlock>
+              </CardBody>
             </Card>
           </Col>
         </Row>
diff --git a/React_Full_Project/src/views/Dashboard/package.json b/React_Full_Project/src/views/Dashboard/package.json
index 9c9578a..aebf1fb 100644
--- a/React_Full_Project/src/views/Dashboard/package.json
+++ b/React_Full_Project/src/views/Dashboard/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Dashboard",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./Dashboard.js"
 }
diff --git a/React_Full_Project/src/views/Icons/FontAwesome/FontAwesome.js b/React_Full_Project/src/views/Icons/FontAwesome/FontAwesome.js
index 8409c1a..7d4ae40 100644
--- a/React_Full_Project/src/views/Icons/FontAwesome/FontAwesome.js
+++ b/React_Full_Project/src/views/Icons/FontAwesome/FontAwesome.js
@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Alert, Row, Col, Card, CardHeader, CardBlock} from 'reactstrap';
+import {Alert, Row, Col, Card, CardHeader, CardBody} from 'reactstrap';
 
 
 class FontAwesome extends Component {
@@ -8,7 +8,7 @@ class FontAwesome extends Component {
       <div className="animated fadeIn">
 		<Card id="new47">
           <CardHeader>55 New Icons in 4.7</CardHeader>
-          <CardBlock className="card-body">
+          <CardBody>
             <Row className="text-center">
               <Col className="fa-hover" xs="6" sm="4" md="3" lg="2">
                 <i className="fa fa-address-book fa-lg mt-4"></i><br/>address-book
@@ -176,11 +176,11 @@ class FontAwesome extends Component {
                 <i className="fa fa-wpexplorer fa-lg mt-4"></i><br/>wpexplorer
               </Col>
             </Row>
-          </CardBlock>
+          </CardBody>
         </Card>
 		<Card id="new">
           <CardHeader>20 New Icons in 4.5</CardHeader>
-          <CardBlock className="card-body">
+          <CardBody>
             <Row className="text-center">
 
               <Col xs="6" sm="4" md="3" lg="2">
@@ -265,12 +265,12 @@ class FontAwesome extends Component {
 
             </Row>
 
-          </CardBlock>
+          </CardBody>
         </Card>
 
         <Card id="web-application">
           <CardHeader>Web Application Icons</CardHeader>
-          <CardBlock className="card-body">
+          <CardBody>
             <Row className="text-center">
 
               <Col xs="6" sm="4" md="3" lg="2">
@@ -1862,13 +1862,13 @@ class FontAwesome extends Component {
               </Col>
 
             </Row>
-          </CardBlock>
+          </CardBody>
 
         </Card>
 
         <Card id="hand">
           <CardHeader>Hand Icons</CardHeader>
-          <CardBlock className="card-body">
+          <CardBody>
             <Row className="text-center">
 
               <Col xs="6" sm="4" md="3" lg="2">
@@ -1942,13 +1942,13 @@ class FontAwesome extends Component {
               </Col>
 
             </Row>
-          </CardBlock>
+          </CardBody>
 
         </Card>
 
         <Card id="transportation">
           <CardHeader>Transportation Icons</CardHeader>
-          <CardBlock className="card-body">
+          <CardBody>
             <Row className="text-center">
 
               <Col xs="6" sm="4" md="3" lg="2">
@@ -2021,12 +2021,12 @@ class FontAwesome extends Component {
               </Col>
 
             </Row>
-          </CardBlock>
+          </CardBody>
         </Card>
 
         <Card id="gender">
           <CardHeader>Gender Icons</CardHeader>
-          <CardBlock className="card-body">
+          <CardBody>
             <Row className="text-center">
 
               <Col xs="6" sm="4" md="3" lg="2">
@@ -2086,12 +2086,12 @@ class FontAwesome extends Component {
               </Col>
 
             </Row>
-          </CardBlock>
+          </CardBody>
         </Card>
 
         <Card id="file-type">
           <CardHeader>File Type Icons</CardHeader>
-          <CardBlock className="card-body">
+          <CardBody>
             <Row className="text-center">
 
               <Col xs="6" sm="4" md="3" lg="2">
@@ -2171,12 +2171,12 @@ class FontAwesome extends Component {
               </Col>
 
             </Row>
-          </CardBlock>
+          </CardBody>
         </Card>
 
         <Card id="spinner">
           <CardHeader>Spinner Icons</CardHeader>
-          <CardBlock className="card-body">
+          <CardBody>
             <Alert color="success">
               <ul className="fa-ul">
                 <li>
@@ -2208,12 +2208,12 @@ class FontAwesome extends Component {
               </Col>
 
             </Row>
-          </CardBlock>
+          </CardBody>
         </Card>
 
         <Card id="form-control">
           <CardHeader>Form Control Icons</CardHeader>
-          <CardBlock className="card-body">
+          <CardBody>
             <Row className="text-center">
 
               <Col xs="6" sm="4" md="3" lg="2">
@@ -2261,12 +2261,12 @@ class FontAwesome extends Component {
               </Col>
 
             </Row>
-          </CardBlock>
+          </CardBody>
         </Card>
 
         <Card id="payment">
           <CardHeader>Payment Icons</CardHeader>
-          <CardBlock className="card-body">
+          <CardBody>
             <Row className="text-center">
 
               <Col xs="6" sm="4" md="3" lg="2">
@@ -2318,12 +2318,12 @@ class FontAwesome extends Component {
               </Col>
 
             </Row>
-          </CardBlock>
+          </CardBody>
         </Card>
 
         <Card id="chart">
           <CardHeader>Chart Icons</CardHeader>
-          <CardBlock className="card-body">
+          <CardBody>
             <Row className="text-center">
 
               <Col xs="6" sm="4" md="3" lg="2">
@@ -2348,12 +2348,12 @@ class FontAwesome extends Component {
               </Col>
 
             </Row>
-          </CardBlock>
+          </CardBody>
         </Card>
 
         <Card id="currency">
           <CardHeader>Currency Icons</CardHeader>
-          <CardBlock className="card-body">
+          <CardBody>
             <Row className="text-center">
 
               <Col xs="6" sm="4" md="3" lg="2">
@@ -2462,12 +2462,12 @@ class FontAwesome extends Component {
               </Col>
 
             </Row>
-          </CardBlock>
+          </CardBody>
         </Card>
 
         <Card id="text-editor">
           <CardHeader>Text Editor Icons</CardHeader>
-          <CardBlock className="card-body">
+          <CardBody>
             <Row className="text-center">
 
               <Col xs="6" sm="4" md="3" lg="2">
@@ -2669,12 +2669,12 @@ class FontAwesome extends Component {
               </Col>
 
             </Row>
-          </CardBlock>
+          </CardBody>
         </Card>
 
         <Card id="directional">
           <CardHeader>Directional Icons</CardHeader>
-          <CardBlock className="card-body">
+          <CardBody>
             <Row className="text-center">
 
               <Col xs="6" sm="4" md="3" lg="2">
@@ -2893,12 +2893,12 @@ class FontAwesome extends Component {
               </Col>
 
             </Row>
-          </CardBlock>
+          </CardBody>
         </Card>
 
         <Card id="video-player">
           <CardHeader>Video Player Icons</CardHeader>
-          <CardBlock className="card-body">
+          <CardBody>
             <Row className="text-center">
 
               <Col xs="6" sm="4" md="3" lg="2">
@@ -2986,12 +2986,12 @@ class FontAwesome extends Component {
               </Col>
 
             </Row>
-          </CardBlock>
+          </CardBody>
         </Card>
 
         <Card id="brand">
           <CardHeader>Brand Icons</CardHeader>
-          <CardBlock className="card-body">
+          <CardBody>
             <Alert color="warning">
               <h4><i className="fa fa-warning"></i> Warning!</h4>
               Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social
@@ -3637,12 +3637,12 @@ class FontAwesome extends Component {
                 <li>Brand icons should only be used to represent the company or product to which they refer.</li>
               </ul>
             </Alert>
-          </CardBlock>
+          </CardBody>
         </Card>
 
         <Card id="medical">
           <CardHeader>Medical Icons</CardHeader>
-          <CardBlock className="card-body">
+          <CardBody>
             <Row className="text-center">
 
               <Col xs="6" sm="4" md="3" lg="2">
@@ -3690,7 +3690,7 @@ class FontAwesome extends Component {
               </Col>
 
             </Row>
-          </CardBlock>
+          </CardBody>
         </Card>
       </div>
 
diff --git a/React_Full_Project/src/views/Icons/FontAwesome/package.json b/React_Full_Project/src/views/Icons/FontAwesome/package.json
index 8cfb797..98d026f 100644
--- a/React_Full_Project/src/views/Icons/FontAwesome/package.json
+++ b/React_Full_Project/src/views/Icons/FontAwesome/package.json
@@ -1,6 +1,6 @@
 {
   "name": "FontAwesome",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./FontAwesome.js"
 }
diff --git a/React_Full_Project/src/views/Icons/SimpleLineIcons/SimpleLineIcons.js b/React_Full_Project/src/views/Icons/SimpleLineIcons/SimpleLineIcons.js
index c1a3dfc..0b1efbf 100644
--- a/React_Full_Project/src/views/Icons/SimpleLineIcons/SimpleLineIcons.js
+++ b/React_Full_Project/src/views/Icons/SimpleLineIcons/SimpleLineIcons.js
@@ -1,15 +1,15 @@
-import React, {Component} from "react";
-import {Row, Col, Card, CardHeader, CardBlock} from "reactstrap";
+import React, {Component} from 'react';
+import {Row, Col, Card, CardHeader, CardBody} from 'reactstrap';
 
 class SimpleLineIcons extends Component {
   render() {
     return (
       <div className="animated fadeIn">
-        <Card color="secondary" className="card-default">
+        <Card>
           <CardHeader>
             <i className="fa fa-picture-o"></i> Simple Line Icons
           </CardHeader>
-          <CardBlock className="card-body">
+          <CardBody>
             <Row className="text-center">
 
               <Col xs="6" sm="4" md="3">
@@ -745,7 +745,7 @@ class SimpleLineIcons extends Component {
               </Col>
 
             </Row>
-          </CardBlock>
+          </CardBody>
         </Card>
       </div>
     )
diff --git a/React_Full_Project/src/views/Icons/SimpleLineIcons/package.json b/React_Full_Project/src/views/Icons/SimpleLineIcons/package.json
index 82c9fc6..6d11a74 100644
--- a/React_Full_Project/src/views/Icons/SimpleLineIcons/package.json
+++ b/React_Full_Project/src/views/Icons/SimpleLineIcons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "SimpleLineIcons",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./SimpleLineIcons.js"
 }
diff --git a/React_Full_Project/src/views/Pages/Login/Login.js b/React_Full_Project/src/views/Pages/Login/Login.js
index bef4f79..c085530 100644
--- a/React_Full_Project/src/views/Pages/Login/Login.js
+++ b/React_Full_Project/src/views/Pages/Login/Login.js
@@ -1,5 +1,5 @@
-import React, {Component} from "react";
-import {Container, Row, Col, CardGroup, Card, CardBlock, Button, Input, InputGroup, InputGroupAddon} from "reactstrap";
+import React, {Component} from 'react';
+import {Container, Row, Col, CardGroup, Card, CardBody, Button, Input, InputGroup, InputGroupAddon} from 'reactstrap';
 
 
 class Login extends Component {
@@ -11,7 +11,7 @@ class Login extends Component {
             <Col md="8">
               <CardGroup className="mb-0">
                 <Card className="p-4">
-                  <CardBlock className="card-body">
+                  <CardBody>
                     <h1>Login</h1>
                     <p className="text-muted">Sign In to your account</p>
                     <InputGroup className="mb-3">
@@ -30,17 +30,17 @@ class Login extends Component {
                         <Button color="link" className="px-0">Forgot password?</Button>
                       </Col>
                     </Row>
-                  </CardBlock>
+                  </CardBody>
                 </Card>
                 <Card className="text-white bg-primary py-5 d-md-down-none" style={{ width: 44 + '%' }}>
-                  <CardBlock className="card-body text-center">
+                  <CardBody className="text-center">
                     <div>
                       <h2>Sign up</h2>
                       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                         labore et dolore magna aliqua.</p>
                       <Button color="primary" className="mt-3" active>Register Now!</Button>
                     </div>
-                  </CardBlock>
+                  </CardBody>
                 </Card>
               </CardGroup>
             </Col>
diff --git a/React_Full_Project/src/views/Pages/Login/package.json b/React_Full_Project/src/views/Pages/Login/package.json
index 58e069b..4ede144 100644
--- a/React_Full_Project/src/views/Pages/Login/package.json
+++ b/React_Full_Project/src/views/Pages/Login/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Login",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./Login.js"
 }
diff --git a/React_Full_Project/src/views/Pages/Page404/Page404.js b/React_Full_Project/src/views/Pages/Page404/Page404.js
index 21c9ab9..c74e7cf 100644
--- a/React_Full_Project/src/views/Pages/Page404/Page404.js
+++ b/React_Full_Project/src/views/Pages/Page404/Page404.js
@@ -1,5 +1,5 @@
-import React, {Component} from "react";
-import {Container, Row, Col, Button, Input, InputGroupAddon, InputGroup, InputGroupButton} from "reactstrap";
+import React, {Component} from 'react';
+import {Container, Row, Col, Button, Input, InputGroupAddon, InputGroup, InputGroupButton} from 'reactstrap';
 
 class Page404 extends Component {
   render() {
diff --git a/React_Full_Project/src/views/Pages/Page404/package.json b/React_Full_Project/src/views/Pages/Page404/package.json
index 7f1afcb..2bbb96b 100644
--- a/React_Full_Project/src/views/Pages/Page404/package.json
+++ b/React_Full_Project/src/views/Pages/Page404/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Page404",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./Page404.js"
 }
diff --git a/React_Full_Project/src/views/Pages/Page500/Page500.js b/React_Full_Project/src/views/Pages/Page500/Page500.js
index 19906f3..c444033 100644
--- a/React_Full_Project/src/views/Pages/Page500/Page500.js
+++ b/React_Full_Project/src/views/Pages/Page500/Page500.js
@@ -1,5 +1,5 @@
-import React, {Component} from "react";
-import {Container, Row, Col, Button, Input, InputGroup, InputGroupAddon, InputGroupButton} from "reactstrap";
+import React, {Component} from 'react';
+import {Container, Row, Col, Button, Input, InputGroup, InputGroupAddon, InputGroupButton} from 'reactstrap';
 
 class Page500 extends Component {
   render() {
diff --git a/React_Full_Project/src/views/Pages/Page500/package.json b/React_Full_Project/src/views/Pages/Page500/package.json
index 6859936..a1d4c1d 100644
--- a/React_Full_Project/src/views/Pages/Page500/package.json
+++ b/React_Full_Project/src/views/Pages/Page500/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Page500",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./Page500.js"
 }
diff --git a/React_Full_Project/src/views/Pages/Register/Register.js b/React_Full_Project/src/views/Pages/Register/Register.js
index 4b3a3dd..d9c7ac0 100644
--- a/React_Full_Project/src/views/Pages/Register/Register.js
+++ b/React_Full_Project/src/views/Pages/Register/Register.js
@@ -1,5 +1,5 @@
-import React, {Component} from "react";
-import {Container, Row, Col, Card, CardBlock, CardFooter, Button, Input, InputGroup, InputGroupAddon} from "reactstrap";
+import React, {Component} from 'react';
+import {Container, Row, Col, Card, CardBody, CardFooter, Button, Input, InputGroup, InputGroupAddon} from 'reactstrap';
 
 class Register extends Component {
   render() {
@@ -9,7 +9,7 @@ class Register extends Component {
           <Row className="justify-content-center">
             <Col md="6">
               <Card className="mx-4">
-                <CardBlock className="card-body p-4">
+                <CardBody className="p-4">
                   <h1>Register</h1>
                   <p className="text-muted">Create your account</p>
                   <InputGroup className="mb-3">
@@ -29,7 +29,7 @@ class Register extends Component {
                     <Input type="password" placeholder="Repeat password"/>
                   </InputGroup>
                   <Button color="success" block>Create Account</Button>
-                </CardBlock>
+                </CardBody>
                 <CardFooter className="p-4">
                   <Row>
                     <Col xs="12" sm="6">
diff --git a/React_Full_Project/src/views/Pages/Register/package.json b/React_Full_Project/src/views/Pages/Register/package.json
index d636347..f62b08c 100644
--- a/React_Full_Project/src/views/Pages/Register/package.json
+++ b/React_Full_Project/src/views/Pages/Register/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Register",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./Register.js"
 }
diff --git a/React_Full_Project/src/views/Widgets/Widget01.js b/React_Full_Project/src/views/Widgets/Widget01.js
index 9e01efe..f396c26 100644
--- a/React_Full_Project/src/views/Widgets/Widget01.js
+++ b/React_Full_Project/src/views/Widgets/Widget01.js
@@ -1,6 +1,6 @@
-import React, {Component} from "react";
+import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {Card, CardBlock, Progress} from "reactstrap";
+import {Card, CardBody, Progress} from 'reactstrap';
 import classNames from 'classnames';
 import {mapToCssModules} from 'reactstrap/lib/utils';
 
@@ -45,13 +45,13 @@ class Widget01 extends Component {
 
     return (
       <Card className={ classes } {...attributes}>
-        <CardBlock className="card-body">
+        <CardBody>
           <div className="h4 m-0">{ header }</div>
           <div>{ mainText }</div>
           <Progress className={ progress.style } color={ progress.color } value={ progress.value }/>
           <small className="text-muted">{ smallText }</small>
           <div>{children}</div>
-        </CardBlock>
+        </CardBody>
       </Card>
     )
   }
diff --git a/React_Full_Project/src/views/Widgets/Widget02.js b/React_Full_Project/src/views/Widgets/Widget02.js
index 4e3808f..544d550 100644
--- a/React_Full_Project/src/views/Widgets/Widget02.js
+++ b/React_Full_Project/src/views/Widgets/Widget02.js
@@ -1,6 +1,6 @@
-import React, {Component} from "react";
+import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {Card, CardBlock, CardFooter} from "reactstrap";
+import {Card, CardBody, CardFooter} from 'reactstrap';
 import classNames from 'classnames';
 import {mapToCssModules} from 'reactstrap/lib/utils';
 
@@ -34,7 +34,7 @@ class Widget02 extends Component {
     const padding = (variant === '0' ? {card: "p-3", icon: "p-3", lead: "mt-2"} : ( variant === "1" ? {
       card: "p-0", icon: "p-4", lead: "pt-3" } : {card: "p-0", icon: "p-4 px-5", lead: "pt-3"}));
 
-    const card = {style: "card-body clearfix", color: color, icon: icon, classes: ""};
+    const card = {style: "clearfix", color: color, icon: icon, classes: ""};
     card.classes = mapToCssModules(classNames(className, card.style, padding.card), cssModule);
 
     const lead = {style: "h5 mb-0", color: color, classes: ""};
@@ -58,11 +58,11 @@ class Widget02 extends Component {
 
     return (
       <Card>
-        <CardBlock className={ card.classes } {...attributes}>
+        <CardBody className={ card.classes } {...attributes}>
           { blockIcon(card.icon) }
           <div className={ lead.classes }>{ header }</div>
           <div className="text-muted text-uppercase font-weight-bold font-xs">{ mainText }</div>
-        </CardBlock>
+        </CardBody>
         { cardFooter() }
       </Card>
     )
diff --git a/React_Full_Project/src/views/Widgets/Widget03.js b/React_Full_Project/src/views/Widgets/Widget03.js
index 799601e..7ec49c0 100644
--- a/React_Full_Project/src/views/Widgets/Widget03.js
+++ b/React_Full_Project/src/views/Widgets/Widget03.js
@@ -1,4 +1,4 @@
-import React, {Component} from "react";
+import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import {mapToCssModules} from 'reactstrap/lib/utils';
diff --git a/React_Full_Project/src/views/Widgets/Widget04.js b/React_Full_Project/src/views/Widgets/Widget04.js
index aae2451..304c20b 100644
--- a/React_Full_Project/src/views/Widgets/Widget04.js
+++ b/React_Full_Project/src/views/Widgets/Widget04.js
@@ -1,6 +1,6 @@
-import React, {Component} from "react";
+import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {Card, CardBlock, Progress} from "reactstrap";
+import {Card, CardBody, Progress} from 'reactstrap';
 import classNames from 'classnames';
 import {mapToCssModules} from 'reactstrap/lib/utils';
 
@@ -44,14 +44,14 @@ class Widget04 extends Component {
 
     return (
       <Card className={ classes } {...attributes}>
-        <CardBlock className="card-body">
+        <CardBody>
           <div className="h1 text-muted text-right mb-2">
             <i className={ card.icon }></i>
           </div>
           <div className="h4 mb-0">{ header }</div>
           <small className="text-muted text-uppercase font-weight-bold">{ children }</small>
           <Progress className={ progress.style } color={ progress.color } value={ progress.value }/>
-        </CardBlock>
+        </CardBody>
       </Card>
     )
   }
diff --git a/React_Full_Project/src/views/Widgets/Widgets.js b/React_Full_Project/src/views/Widgets/Widgets.js
index 090db29..73a77f2 100644
--- a/React_Full_Project/src/views/Widgets/Widgets.js
+++ b/React_Full_Project/src/views/Widgets/Widgets.js
@@ -1,5 +1,5 @@
-import React, {Component} from "react";
-import {Row, Col, CardGroup} from "reactstrap";
+import React, {Component} from 'react';
+import {Row, Col, CardGroup} from 'reactstrap';
 import Widget01 from './Widget01';
 import Widget02 from './Widget02';
 import Widget03 from './Widget03';
@@ -68,28 +68,28 @@ class Widgets extends Component {
           </Col>
         </Row>
         <Row>
-          <Col xs="12" sm="6" >
+          <Col xs="12" sm="6" lg="3">
             <Widget02 header="$1.999,50" mainText="Income" icon="fa fa-cogs" color="primary" variant="1"/>
           </Col>
-          <Col xs="12" sm="6" >
+          <Col xs="12" sm="6" lg="3">
             <Widget02 header="$1.999,50" mainText="Income" icon="fa fa-laptop" color="info" variant="1"/>
           </Col>
-          <Col xs="12" sm="6" >
+          <Col xs="12" sm="6" lg="3">
             <Widget02 header="$1.999,50" mainText="Income" icon="fa fa-moon-o" color="warning" variant="1"/>
           </Col>
-          <Col xs="12" sm="6" >
+          <Col xs="12" sm="6" lg="3">
             <Widget02 header="$1.999,50" mainText="Income" icon="fa fa-bell" color="danger" variant="1"/>
           </Col>
-          <Col xs="12" sm="6" >
+          <Col xs="12" sm="6" lg="3">
             <Widget02 header="$1.999,50" mainText="Income" icon="fa fa-cogs" color="primary" variant="2"/>
           </Col>
-          <Col xs="12" sm="6" >
+          <Col xs="12" sm="6" lg="3">
             <Widget02 header="$1.999,50" mainText="Income" icon="fa fa-laptop" color="info" variant="2"/>
           </Col>
-          <Col xs="12" sm="6" >
+          <Col xs="12" sm="6" lg="3">
             <Widget02 header="$1.999,50" mainText="Income" icon="fa fa-moon-o" color="warning" variant="2"/>
           </Col>
-          <Col xs="12" sm="6" >
+          <Col xs="12" sm="6" lg="3">
             <Widget02 header="$1.999,50" mainText="Income" icon="fa fa-bell" color="danger" variant="2"/>
           </Col>
         </Row>
@@ -159,4 +159,4 @@ class Widgets extends Component {
   }
 }
 
-export default Widgets;
\ No newline at end of file
+export default Widgets;
diff --git a/React_Full_Project/src/views/Widgets/package.json b/React_Full_Project/src/views/Widgets/package.json
index 779a5e2..c9d2c73 100644
--- a/React_Full_Project/src/views/Widgets/package.json
+++ b/React_Full_Project/src/views/Widgets/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Widgets",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./Widgets.js"
 }
diff --git a/React_Starter/.gitignore b/React_Starter/.gitignore
index 1fa4fde..8a75778 100644
--- a/React_Starter/.gitignore
+++ b/React_Starter/.gitignore
@@ -2,6 +2,7 @@
 
 # dependencies
 node_modules
+package-lock.json
 
 # testing
 coverage
diff --git a/React_Starter/CHANGELOG.md b/React_Starter/CHANGELOG.md
deleted file mode 100644
index 3c69f44..0000000
--- a/React_Starter/CHANGELOG.md
+++ /dev/null
@@ -1,35 +0,0 @@
-### Changelog [react](./REACT.md) version
-
-#### 2017.08.26
-- Sidebar component:
-	- item with optional class (_nav.js)
-	- nav link with optional variant (_nav.js)
-	- external urls allowed (_nav.js)
-	- optional SidebarFooter, SidebarHeader, SidebarForm components
-- SidebarMinimizer component
-- .brand-minimized
-- .sidebar-minimized,
-- Header component - sidebarMinimize
-- react-transition-group downgrade to v1 : (modals and alerts reactstrap:v4.8 issue)
-
-#### 2017.08.24
-- webpack.config env.prod
-- Dashboard .dropdown-menu-right temp.scss hotfix (full)
-- callout.scss .chart-wrapper hotfix (full)
-
-#### 2017.08.11
-- Bootstrap 4 beta
-- Dashboard component (full):
-	- line chart for social box
-	- sparkline chart for callout
-
-#### 2017.08.01
-- Sidebar component: 
-	- title item with optional wrapper and class (_nav.js)
-	- nav link item with optional badge
-	- code refactoring
-
-#### 2017.07.31
-- moved to [reactstrap](https://reactstrap.github.io/)
-- moved to [webpack](https://webpack.js.org/) (dropping gulp)
-- data driven Sidebar component (_nav.js)
diff --git a/React_Starter/REACT.md b/React_Starter/REACT.md
deleted file mode 100644
index e992b2b..0000000
--- a/React_Starter/REACT.md
+++ /dev/null
@@ -1,36 +0,0 @@
-# React version
-
-## Intro 
-
-It uses Sass (with .scss). The style is loaded at the component level.
-
-Dependencies can be handled by **npm**.
-
-## Directories
-
-```
-src (js|jsx source)
-scss (scss source)
-public (html template)
-public/img (images)
-```
-
-## Usage
-
-**npm i** - to install dependencies
-
-## Sctipts
-
-**npm start** for developing (it runs webpack-dev-server)
-
-**npm run build** to run a dev build
-
-**npm run clean** to clean build dir
-
-**npm run dev** to run a dev build with watching filesystem for changes 
-
-
-## See also
-
-[Changelog](./CHANGELOG.md)
-[Readme](./README.md)
\ No newline at end of file
diff --git a/React_Starter/package.json b/React_Starter/package.json
index c885710..0eeb158 100644
--- a/React_Starter/package.json
+++ b/React_Starter/package.json
@@ -14,22 +14,22 @@
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
-    "copy-webpack-plugin": "^4.0.1",
-    "css-hot-loader": "^1.3.1",
+    "copy-webpack-plugin": "^4.1.1",
+    "css-hot-loader": "^1.3.2",
     "css-loader": "^0.28.7",
-    "extract-text-webpack-plugin": "^3.0.0",
-    "file-loader": "^0.11.2",
+    "extract-text-webpack-plugin": "^3.0.1",
+    "file-loader": "^1.1.5",
     "html-loader": "^0.5.1",
     "html-webpack-plugin": "^2.30.1",
     "node-sass": "^4.5.3",
     "rimraf": "^2.6.2",
     "sass-loader": "^6.0.6",
     "source-list-map": "^2.0.0",
-    "style-loader": "^0.18.2",
-    "uglify-js": "^3.1.1",
-    "url-loader": "^0.5.9",
+    "style-loader": "^0.19.0",
+    "uglify-js": "^3.1.3",
+    "url-loader": "^0.6.2",
     "webpack": "^3.6.0",
-    "webpack-dev-server": "^2.8.2"
+    "webpack-dev-server": "^2.9.1"
   },
   "dependencies": {
     "bootstrap": "^4.0.0-beta",
@@ -37,12 +37,12 @@
     "font-awesome": "^4.7.0",
     "history": "4.7.2",
     "is-url-external": "^1.0.3",
-    "react": "^15.6.1",
-    "react-chartjs-2": "2.6.2",
-    "react-dom": "^15.6.1",
-    "react-router-dom": "4.2.2",
-    "react-transition-group": "^1.2.0",
-    "reactstrap": "^4.8.0",
+    "react": "^16.0.0",
+    "react-chartjs-2": "2.6.4",
+    "react-dom": "^16.0.0",
+    "react-router-dom": "^4.2.2",
+    "react-transition-group": "^2.2.1",
+    "reactstrap": "^5.0.0-alpha.3",
     "simple-line-icons": "^2.4.1"
   },
   "scripts": {
diff --git a/React_Starter/scss/core/_dropdown-menu-right.scss b/React_Starter/scss/core/_dropdown-menu-right.scss
index eec74e8..427ab59 100644
--- a/React_Starter/scss/core/_dropdown-menu-right.scss
+++ b/React_Starter/scss/core/_dropdown-menu-right.scss
@@ -1,7 +1,8 @@
 // Temp fix for reactstrap
-.show {
-  > .dropdown-menu-right {
-    right: 0;
-    left: auto; // Reset the default from `.dropdown-menu`
+.app-header {
+  .navbar-nav {
+    .dropdown-menu-right {
+      right: auto;
+    }
   }
-}
+}
\ No newline at end of file
diff --git a/React_Starter/scss/core/_footer.scss b/React_Starter/scss/core/_footer.scss
index 2d678c8..1c1748b 100644
--- a/React_Starter/scss/core/_footer.scss
+++ b/React_Starter/scss/core/_footer.scss
@@ -1,8 +1,9 @@
 .app-footer {
-  min-height: $footer-height;
+  display: flex;
   padding: 0 $spacer;
-  line-height: $footer-height;
   color: $footer-color;
   background: $footer-bg;
+  flex-wrap: wrap;
+  align-items: center;
   @include borders($footer-borders);
 }
diff --git a/React_Starter/scss/core/_layout.scss b/React_Starter/scss/core/_layout.scss
index cbab8f0..6e4034d 100644
--- a/React_Starter/scss/core/_layout.scss
+++ b/React_Starter/scss/core/_layout.scss
@@ -11,8 +11,8 @@
 app-dashboard,
 app-root {
   display: flex;
-  flex-direction: column;
   min-height: 100vh;
+  flex-direction: column;
 }
 
 .app-header {
@@ -26,12 +26,12 @@ app-root {
 .app-body {
   display: flex;
   flex-direction: row;
-  flex-grow: 1;
   overflow-x: hidden;
+  flex-grow: 1;
 
   .main {
-    flex: 1;
     min-width: 0;
+    flex: 1;
   }
 
   .sidebar {
@@ -328,7 +328,8 @@ app-root {
     margin-top: $navbar-height;
   }
 
-  .sidebar {
+  .sidebar,
+  .sidebar-fixed .sidebar {
     position: fixed;
     z-index: $zindex-sticky - 1;
     width: $mobile-sidebar-width;
diff --git a/React_Starter/scss/core/_navbar.scss b/React_Starter/scss/core/_navbar.scss
index ba49147..780d66a 100644
--- a/React_Starter/scss/core/_navbar.scss
+++ b/React_Starter/scss/core/_navbar.scss
@@ -1,7 +1,7 @@
 .app-header.navbar {
   position: relative;
-  flex-direction: row;
   height: $navbar-height;
+  flex-direction: row;
   padding: 0;
   margin: 0;
   background-color: $navbar-bg;
@@ -102,13 +102,16 @@
   background-color: rgba(0,0,0,.075);
 }
 
-.brand-minimized {
-  .app-header.navbar {
-    .navbar-brand {
-      width: $navbar-brand-minimized-width;
-      background-color: $navbar-brand-minimized-bg;
-      background-image: $navbar-brand-minimized-logo;
-      background-size: $navbar-brand-minimized-logo-size;
+@include media-breakpoint-up(lg) {
+  .brand-minimized {
+    .app-header.navbar {
+      .navbar-brand {
+        width: $navbar-brand-minimized-width;
+        background-color: $navbar-brand-minimized-bg;
+        background-image: $navbar-brand-minimized-logo;
+        background-size: $navbar-brand-minimized-logo-size;
+        @include borders($navbar-brand-minimized-border);
+      }
     }
   }
 }
diff --git a/React_Starter/scss/core/_sidebar.scss b/React_Starter/scss/core/_sidebar.scss
index 407ed22..3f83a0d 100644
--- a/React_Starter/scss/core/_sidebar.scss
+++ b/React_Starter/scss/core/_sidebar.scss
@@ -78,8 +78,8 @@
 
   .nav {
     @include sidebar-width($sidebar-borders, $sidebar-width);
-    flex-direction: column;
     min-height: 100%;
+    flex-direction: column;
   }
 
   .nav-title {
@@ -254,6 +254,7 @@
     flex: 0 0 $sidebar-footer-height;
     padding: $sidebar-footer-padding-y $sidebar-footer-padding-x;
     background: $sidebar-footer-bg;
+    @include borders($sidebar-footer-borders);
   }
 
   .sidebar-minimizer {
@@ -261,6 +262,7 @@
     flex: 0 0 $sidebar-minimizer-height;
     background-color: $sidebar-minimizer-bg;
     border: 0;
+    @include borders($sidebar-minimizer-borders);
 
     &::before {
       position: absolute;
diff --git a/React_Starter/scss/core/_variables.scss b/React_Starter/scss/core/_variables.scss
index 790e519..a2bebe8 100644
--- a/React_Starter/scss/core/_variables.scss
+++ b/React_Starter/scss/core/_variables.scss
@@ -58,10 +58,11 @@ $navbar-brand-border: (
   )
 ) !default;
 
-$navbar-brand-minimized-width:        50px !default
-$navbar-brand-minimized-bg:           #fff !default;
+$navbar-brand-minimized-width:        50px !default;
+$navbar-brand-minimized-bg:           $navbar-brand-bg !default;
 $navbar-brand-minimized-logo:         url('../img/logo-symbol.png') !default;
 $navbar-brand-minimized-logo-size:    24px !default;
+$navbar-brand-minimized-border:       $navbar-brand-border !default;
 
 $navbar-color:                        $gray-600 !default;
 $navbar-hover-color:                  $gray-800 !default;
@@ -132,11 +133,13 @@ $sidebar-footer-height:               auto !default;
 $sidebar-footer-bg:                   rgba(0,0,0,.2) !default;
 $sidebar-footer-padding-y:            .75rem !default;
 $sidebar-footer-padding-x:            1rem !default;
+$sidebar-footer-borders:              0 !default;
 
 // Sidebar Minimizer
 
 $sidebar-minimizer-height:            50px !default;
 $sidebar-minimizer-bg:                rgba(0,0,0,.2) !default;
+$sidebar-minimizer-borders:           0 !default;
 $sidebar-minimizer-indicator-color:   $gray-600 !default;
 $sidebar-minimizer-indicator:         str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-minimizer-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
 $sidebar-minimizer-hover-bg:          rgba(0,0,0,.3) !default;
diff --git a/React_Starter/scss/style.scss b/React_Starter/scss/style.scss
index 4296d77..151efff 100644
--- a/React_Starter/scss/style.scss
+++ b/React_Starter/scss/style.scss
@@ -1,6 +1,6 @@
 /*!
  * CoreUI - Open Source Bootstrap Admin Template
- * @version v1.0.0
+ * @version v1.0.1
  * @link http://coreui.io
  * Copyright (c) 2017 creativeLabs Łukasz Holeczek
  * @license MIT
@@ -11,23 +11,17 @@
 // Import Bootstrap source files
 @import "bootstrap/bootstrap";
 
-// If you want you can import bootstrap scss files directly from node_modules or bower_components.
+// If you want you can import bootstrap scss files directly from node_modules.
 // To do this please remove @import "bootstrap/bootstrap"; and uncomment proper line.
 
 // Import Bootstrap source files from node_modules
 // @import "node_modules/bootstrap/scss/bootstrap";
 
-// Import Bootstrap source files from bower_components
-// @import "bower_components/bootstrap/scss/bootstrap";
-
 // Override core variables
 @import "core-variables";
 
 // Import core styles
 @import "core/core";
 
-// Import vendors styles
-@import "vendors/vendors";
-
 // Custom styles
 @import "custom";
diff --git a/React_Starter/scss/vendors/_variables.scss b/React_Starter/scss/vendors/_variables.scss
new file mode 100644
index 0000000..02636b9
--- /dev/null
+++ b/React_Starter/scss/vendors/_variables.scss
@@ -0,0 +1,9 @@
+// @import "node_modules/bootstrap/scss/bootstrap/functions";
+@import "../bootstrap/functions";
+@import "../bootstrap-variables";
+// @import "node_modules/bootstrap/scss/bootstrap/variables";
+@import "../bootstrap/variables";
+// @import "node_modules/bootstrap/scss/bootstrap/mixins";
+@import "../bootstrap/mixins";
+@import "../core-variables";
+@import "../core/variables";
diff --git a/React_Starter/scss/vendors/_vendors.scss b/React_Starter/scss/vendors/_vendors.scss
deleted file mode 100644
index 7aab687..0000000
--- a/React_Starter/scss/vendors/_vendors.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "chart.js/chart";
diff --git a/React_Starter/scss/vendors/chart.js/chart.scss b/React_Starter/scss/vendors/chart.js/chart.scss
index 41eda00..7e99cca 100644
--- a/React_Starter/scss/vendors/chart.js/chart.scss
+++ b/React_Starter/scss/vendors/chart.js/chart.scss
@@ -1,3 +1,6 @@
+// Import variables
+@import '../variables';
+
 .chart-legend,
 .bar-legend,
 .line-legend,
diff --git a/React_Starter/src/components/Aside/Aside.js b/React_Starter/src/components/Aside/Aside.js
index 1a8c884..58d345b 100644
--- a/React_Starter/src/components/Aside/Aside.js
+++ b/React_Starter/src/components/Aside/Aside.js
@@ -5,7 +5,7 @@ class Aside extends Component {
   render() {
     return (
       <aside className="aside-menu">
-        Aside Menu
+        {/*Aside Menu*/}
       </aside>
     )
   }
diff --git a/React_Starter/src/components/Aside/package.json b/React_Starter/src/components/Aside/package.json
index 905959b..01a49f1 100644
--- a/React_Starter/src/components/Aside/package.json
+++ b/React_Starter/src/components/Aside/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Aside",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./Aside.js"
 }
diff --git a/React_Starter/src/components/Breadcrumb/package.json b/React_Starter/src/components/Breadcrumb/package.json
index db34964..0d7d8f5 100644
--- a/React_Starter/src/components/Breadcrumb/package.json
+++ b/React_Starter/src/components/Breadcrumb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Breadcrumb",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./Breadcrumb.js"
 }
diff --git a/React_Starter/src/components/Footer/Footer.js b/React_Starter/src/components/Footer/Footer.js
index 5a76430..be08cb7 100644
--- a/React_Starter/src/components/Footer/Footer.js
+++ b/React_Starter/src/components/Footer/Footer.js
@@ -4,8 +4,8 @@ class Footer extends Component {
   render() {
     return (
       <footer className="app-footer">
-        <a href="http://coreui.io">CoreUI</a> &copy; 2017 creativeLabs.
-        <span className="float-right">Powered by <a href="http://coreui.io">CoreUI</a></span>
+        <span><a href="http://coreui.io">CoreUI</a> &copy; 2017 creativeLabs.</span>
+        <span className="ml-auto">Powered by <a href="http://coreui.io">CoreUI</a></span>
       </footer>
     )
   }
diff --git a/React_Starter/src/components/Footer/package.json b/React_Starter/src/components/Footer/package.json
index ad7b5cb..8dfb1cd 100644
--- a/React_Starter/src/components/Footer/package.json
+++ b/React_Starter/src/components/Footer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Footer",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./Footer.js"
 }
diff --git a/React_Starter/src/components/Header/Header.js b/React_Starter/src/components/Header/Header.js
index 179b98d..2483472 100644
--- a/React_Starter/src/components/Header/Header.js
+++ b/React_Starter/src/components/Header/Header.js
@@ -34,6 +34,7 @@ class Header extends Component {
         <NavbarToggler className="d-lg-none" onClick={this.mobileSidebarToggle}>&#9776;</NavbarToggler>
         <NavbarBrand href="#"></NavbarBrand>
         <NavbarToggler className="d-md-down-none mr-auto" onClick={this.sidebarToggle}>&#9776;</NavbarToggler>
+        <NavbarToggler className="d-md-down-none" onClick={this.asideToggle}>&#9776;</NavbarToggler>
       </header>
     )
   }
diff --git a/React_Starter/src/components/Header/package.json b/React_Starter/src/components/Header/package.json
index 0a2c907..5e2b227 100644
--- a/React_Starter/src/components/Header/package.json
+++ b/React_Starter/src/components/Header/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Header",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./Header.js"
 }
diff --git a/React_Starter/src/components/Sidebar/Sidebar.js b/React_Starter/src/components/Sidebar/Sidebar.js
index 1020944..30bfa6f 100644
--- a/React_Starter/src/components/Sidebar/Sidebar.js
+++ b/React_Starter/src/components/Sidebar/Sidebar.js
@@ -17,7 +17,6 @@ class Sidebar extends Component {
   }
 
   activeRoute(routeName, props) {
-    // return this.props.location.pathname.indexOf(routeName) > -1 ? 'nav-item nav-dropdown open' : 'nav-item nav-dropdown';
     return props.location.pathname.indexOf(routeName) > -1 ? 'nav-item nav-dropdown open' : 'nav-item nav-dropdown';
 
   }
diff --git a/React_Starter/src/components/Sidebar/package.json b/React_Starter/src/components/Sidebar/package.json
index c5b3732..edac54e 100644
--- a/React_Starter/src/components/Sidebar/package.json
+++ b/React_Starter/src/components/Sidebar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Sidebar",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./Sidebar.js"
 }
diff --git a/React_Starter/src/components/SidebarFooter/package.json b/React_Starter/src/components/SidebarFooter/package.json
index 74ff5c6..ccf79ae 100644
--- a/React_Starter/src/components/SidebarFooter/package.json
+++ b/React_Starter/src/components/SidebarFooter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "SidebarFooter",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./SidebarFooter.js"
 }
diff --git a/React_Starter/src/components/SidebarForm/package.json b/React_Starter/src/components/SidebarForm/package.json
index 2e413a3..c52cf88 100644
--- a/React_Starter/src/components/SidebarForm/package.json
+++ b/React_Starter/src/components/SidebarForm/package.json
@@ -1,6 +1,6 @@
 {
   "name": "SidebarForm",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./SidebarForm.js"
 }
diff --git a/React_Starter/src/components/SidebarHeader/package.json b/React_Starter/src/components/SidebarHeader/package.json
index 4dde07a..abd7dea 100644
--- a/React_Starter/src/components/SidebarHeader/package.json
+++ b/React_Starter/src/components/SidebarHeader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "SidebarHeader",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./SidebarHeader.js"
 }
diff --git a/React_Starter/src/components/SidebarMinimizer/package.json b/React_Starter/src/components/SidebarMinimizer/package.json
index e702f99..90f80aa 100644
--- a/React_Starter/src/components/SidebarMinimizer/package.json
+++ b/React_Starter/src/components/SidebarMinimizer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "SidebarMinimizer",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./SidebarMinimizer.js"
 }
diff --git a/React_Starter/src/containers/Full/package.json b/React_Starter/src/containers/Full/package.json
index 48b4cb5..0fa075b 100644
--- a/React_Starter/src/containers/Full/package.json
+++ b/React_Starter/src/containers/Full/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Full",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./Full.js"
 }
diff --git a/React_Starter/src/views/Dashboard/package.json b/React_Starter/src/views/Dashboard/package.json
index 9c9578a..aebf1fb 100644
--- a/React_Starter/src/views/Dashboard/package.json
+++ b/React_Starter/src/views/Dashboard/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Dashboard",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "main": "./Dashboard.js"
 }