⚗ Update theme files extensions t modules

Attemp to fix gatsby sass issue

Author: KRRISH96

doc/package.json

@@ -23,6 +23,7 @@
   "scripts": {
     "build": "gatsby build",
     "develop": "gatsby develop",
+    "serve": "rm -rf ./cache && rm -rf ./public && gatsby build && gatsby serve",
     "format": "prettier --write '**/*.js'",
     "test": "echo \"Error: no test specified\" && exit 1"
   },

doc/src/components/WithComponentsBar/WithComponentBar.js

@@ -9,7 +9,8 @@ import { componentList } from '../common/componentList';
 import Button from '../../../../lib/button';
 import Drawer from '../../../../lib/drawer';
 
-import theme from './styles.scss';
+import theme from './theme.module.scss';
+import './styles.scss';
 
 class WithComponentBar extends React.Component {
   componentDidUpdate(prevProps) {

doc/src/components/WithComponentsBar/styles.scss

@@ -151,11 +151,3 @@
         }
     }
 }
-
-:local(.drawer) {
-    padding: 0;
-    height: calc(100% - 100px);
-    @media only screen and (min-width: 992px) {
-        left: 0 !important;
-    }
-}

doc/src/components/WithComponentsBar/theme.module.scss

@@ -0,0 +1,7 @@
+:local(.drawer) {
+  padding: 0;
+  height: calc(100% - 100px);
+  @media only screen and (min-width: 992px) {
+      left: 0 !important;
+  }
+}

doc/src/components/documentation/Documentation.js

@@ -5,7 +5,7 @@ import { LiveProvider, LivePreview, LiveError } from 'react-live';
 
 import * as components from '../../../../lib';
 import match from '../../images/match.svg';
-import tableTheme from './tableTheme.scss';
+import tableTheme from './tableTheme.module.scss';
 import componentTheme from '../common/componentData/theme.scss';
 import './styles.scss';
 

doc/src/components/documentation/tableTheme.scss renamed to doc/src/components/documentation/tableTheme.module.scss

@@ -0,0 +1,27 @@
+:local(.menu){
+  z-index: 50;
+}
+
+:local(.selectInput) {
+  input {
+    font-size: 1.06em;
+  }
+  border-bottom-color: #8a908c;
+}
+
+:local(.option) {
+  padding: 5%;
+}
+
+:local(.border-animation) {
+  &::after {
+    background: #6679cc !important;
+  }
+}
+
+:local(.button) {
+  background-color: transparent;
+  &:hover {
+    background-color: #cecaca8a;
+  }
+}

doc/src/pages/pgTheme.module.scss

@@ -10,8 +10,9 @@ import Select from '../../../lib/select';
 import Button from '../../../lib/button';
 import Preloader from '../../../lib/preloader';
 import Layout from '../components/layout';
-import theme from './playground.scss';
 import match from '../images/match.svg';
+import theme from './pgTheme.module.scss';
+import './playground.scss';
 
 export default class Playground extends Component {
     static propTypes = {

doc/src/pages/playground.js

@@ -108,34 +108,6 @@
   color: #3d8fd1 !important;
 }
 
-:local(.menu){
-    z-index: 50;
-}
-
-:local(.selectInput) {
-  input {
-    font-size: 1.06em;
-  }
-  border-bottom-color: #8a908c;
-}
-
-:local(.option) {
-  padding: 5%;
-}
-
-:local(.border-animation) {
-  &::after {
-    background: #6679cc !important;
-  }
-}
-
-:local(.button) {
-  background-color: transparent;
-  &:hover {
-    background-color: #cecaca8a;
-  }
-}
-
 .playground-editor  {
     margin: 0 10% !important;
     overflow: scroll;