refactor: move styling v1 and v2 into common parent src folder (#103)

* chore: move styling v1 and v2 into common parent src folder

* ci: build styles v2 into dist folder

* refactor: move new files into src/v2

package.json

@@ -11,15 +11,16 @@
   "scripts": {
     "build": "yarn build-v1 && yarn build-v2",
     "build-v1": "rm -rf dist && mkdir -p dist && yarn bundle-sass && yarn copy-assets && yarn copy-styles",
-    "build-v2": "rm -rf dist-v2 && mkdir -p dist-v2/scss && yarn transform && yarn compile-to-css",
-    "transform": "postcss --dir dist-v2/scss --base src-v2/styles src-v2/styles",
-    "compile-to-css": "sass dist-v2/scss/index.scss dist-v2/css/index.css --style compressed && sass dist-v2/scss/index.layout.scss dist-v2/css/index.layout.css --style compressed",
-    "bundle-sass": "echo '\u001b[34mℹ\u001b[0m Compiling scss files to css bundle' && sass src/styles/index.scss dist/css/index.css --style compressed && echo '\u001b[32m✓\u001b[0m Finished bundling css'",
+    "build-v2": "rm -rf dist/v2 && mkdir -p dist/v2/scss && yarn transform && yarn compile-to-css",
+    "transform": "postcss --dir dist/v2/scss --base src/v2/styles src/v2/styles",
+    "compile-to-css": "sass dist/v2/scss/index.scss dist/v2/css/index.css --style compressed && sass dist/v2/scss/index.layout.scss dist/v2/css/index.layout.css --style compressed",
+    "bundle-sass": "echo '\u001b[34mℹ\u001b[0m Compiling scss files to css bundle' && sass src/v1/styles/index.scss dist/css/index.css --style compressed && echo '\u001b[32m✓\u001b[0m Finished bundling css'",
     "copy-assets": "echo '\u001b[34mℹ\u001b[0m Copying assets to distributed directory' && cp -R src/assets dist/assets && echo '\u001b[32m✓\u001b[0m Finished copying assets'",
-    "copy-styles": "echo '\u001b[34mℹ\u001b[0m Copying scss files to distributed directory' && cp -R src/styles dist/scss && echo '\u001b[32m✓\u001b[0m Finished copying styles'",
+    "copy-styles": "echo '\u001b[34mℹ\u001b[0m Copying scss files to distributed directory' && cp -R src/v1/styles dist/scss && echo '\u001b[32m✓\u001b[0m Finished copying styles'",
     "lint": "stylelint '**/*.scss' --max-warnings 0",
     "build:ci": "yarn && yarn lint && yarn build",
-    "start": "yarn build && sass --watch src/styles/index.scss dist/css/index.css"
+    "start": "yarn build-v1 && sass --watch src/v1/styles/index.scss dist/css/index.css",
+    "start-v2": "yarn build-v2 && sass --watch src/v2/styles/index.scss dist/v2/css/index.css"
   },
   "release": {
     "branches": [

src/styles/Audio.scss → src/v1/styles/Audio.scss

@@ -88,7 +88,7 @@
       > div {
         height: 4px;
         border-radius: var(--border-radius-sm);
-        width: 0%;
+        width: 0;
         background: var(--primary-color);
         transition: width 0.5s linear;
       }

src/styles/LoadingChannels.scss → src/v1/styles/LoadingChannels.scss

@@ -50,7 +50,7 @@
     animation: pulsate 1s linear 0s infinite alternate;
 
     &:nth-of-type(2) {
-      animation: pulsate 1s linear 0.3334 infinite alternate;
+      animation: pulsate 1s linear 0.3334s infinite alternate;
     }
 
     &:last-of-type {

src/styles/index.scss → src/v1/styles/index.scss

@@ -3,10 +3,10 @@
 @import './base.scss';
 
 // External dependencies (copied from libraries to rectify built file path discrepancies)
-@import './vendor/emoji-mart.scss'; // copy from '../../node_modules/emoji-mart/css/emoji-mart.css'
-@import './vendor/mml-react.scss'; // copy from '../../node_modules/mml-react/dist/styles/index.css'
-@import './vendor/react-file-utils.scss'; // copy from '../../node_modules/react-file-utils/dist/index.css'
-@import './vendor/react-image-gallery.scss'; // copy from '../../node_modules/react-image-gallery/styles/css/image-gallery.css'
+@import '../../vendor/emoji-mart.scss'; // copy from '../../node_modules/emoji-mart/css/emoji-mart.css'
+@import '../../vendor/mml-react.scss'; // copy from '../../node_modules/mml-react/dist/styles/index.css'
+@import '../../vendor/react-file-utils.scss'; // copy from '../../node_modules/react-file-utils/dist/index.css'
+@import '../../vendor/react-image-gallery.scss'; // copy from '../../node_modules/react-image-gallery/styles/css/image-gallery.css'
 
 // Components
 @import './ActionsBox.scss';

src/v2/styles/LoadingIndicator/LoadingIndicator-layout.scss

@@ -0,0 +1,39 @@
+// todo: this is a copy of src/styles/LoadingIndicator.scss - find a shared folder for it
+.str-chat__loading-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: rotate 1s linear infinite;
+
+  @-webkit-keyframes rotate {
+    from {
+      -webkit-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+
+    to {
+      -webkit-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes rotate {
+    from {
+      -ms-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -webkit-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+
+    to {
+      -ms-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -webkit-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+}

src-v2/styles/index.layout.scss → src/v2/styles/index.layout.scss

@@ -1,12 +1,13 @@
+@use 'base';
 @use 'theme-variables';
-@use 'common';
 
-@use 'common/CTAButton/CTAButton-layout';
-@use 'common/CircleFAButton/CircleFAButton-layout';
-@use 'ChannelList/ChannelList-layout';
-@use 'ChannelPreview/ChannelPreview-layout';
 @use 'Avatar/Avatar-layout';
 @use 'Channel/Channel-layout';
-@use 'MessageList/MessageList-layout';
 @use 'ChannelHeader/ChannelHeader-layout';
+@use 'ChannelList/ChannelList-layout';
+@use 'ChannelPreview/ChannelPreview-layout';
+@use 'common/CTAButton/CTAButton-layout';
+@use 'common/CircleFAButton/CircleFAButton-layout';
+@use 'LoadingIndicator/LoadingIndicator-layout';
+@use 'MessageList/MessageList-layout';
 @use 'Thread/Thread-layout';