update 13 files

src/components/Sidebar/SidebarMenu/index.js

@@ -1,3 +1,5 @@
+// it has style inside index.scss ---> // Start Sidebar/SidebarMenu && end Sidebar/SidebarMenu
+
 import React from "react";
 
 import "./index.scss";

src/components/Sidebar/SidebarMenu/index.scss

@@ -1,9 +0,0 @@
-.no-scrollbar::-webkit-scrollbar {
-  display: none;
-}
-
-/* Hide scrollbar for IE, Edge and Firefox */
-.no-scrollbar {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-}

src/components/Switch/index.js

@@ -1,3 +1,5 @@
+// it has style inside index.scss ---> // Start Switch && end Switch
+
 import React from "react";
 import "./index.scss";
 

src/components/Switch/index.scss

@@ -1,9 +0,0 @@
-input:checked ~ .dot {
-  transform: translateX(100%);
-  background-color: #65a9ff;
-}
-
-input:checked ~ .dot {
-  transform: translateX(100%);
-  background-color: #65a9ff;
-}

src/components/TimeLineComponent/index.js

@@ -1,4 +1,7 @@
+// it has style inside index.scss ---> // Start TimeLineComponent && end TimeLineComponent
+
 import React from "react";
+
 import SearchBox from "../SearchBox";
 import TitleSubtitle from "../TitleSubtitle";
 

src/components/TimeLineComponent/index.scss

@@ -1,85 +0,0 @@
-#root {
-  width: 100%;
-}
-
-.timeline-container::after {
-  background-color: #06bace;
-  content: "";
-  position: absolute;
-  right: calc(50% - 2px);
-  width: 4px;
-  height: 100%;
-  border-radius: 10px;
-}
-
-.timeline-item:nth-child(odd) {
-  align-self: flex-start;
-  justify-content: flex-end;
-  padding-right: 0px;
-  padding-left: 30px;
-}
-
-.timeline-item-content::after {
-  content: "";
-  background-color: #fff;
-  box-shadow: 1px -1px 1px #d6d6d6;
-  width: 15px;
-  height: 15px;
-  position: absolute;
-  transform: rotate(45deg);
-  right: -7.5px;
-  top: calc(50% - 5px);
-}
-
-.timeline-item:nth-child(odd) .timeline-item-content {
-  align-items: flex-start;
-  text-align: left;
-}
-
-.timeline-item:nth-child(odd) .timeline-item-content::after {
-  box-shadow: -1px 1px 1px #d6d6d6;
-  right: auto;
-  left: -7.5px;
-}
-
-.timeline-item-content .circle {
-  background-color: #06bace;
-  border: solid 4px #fff;
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  position: absolute;
-  top: calc(50% - 10px);
-  right: -41px;
-  z-index: 100;
-}
-
-.timeline-item:nth-child(odd) .timeline-item-content .circle {
-  right: auto;
-  left: -41px;
-}
-
-@media only screen and (max-width: 767px) {
-  .timeline-item-content,
-  .timeline-item:nth-child(odd) .timeline-item-content {
-    padding: 15px 10px;
-    text-align: center !important;
-    align-items: center !important;
-  }
-
-  .timeline-item-content .tag {
-    width: calc(100% - 10px);
-  }
-
-  .timeline-item-content time {
-    margin-top: 20px;
-  }
-
-  .timeline-item-content a {
-    text-decoration: underline;
-  }
-
-  .timeline-item-content a::after {
-    display: none;
-  }
-}

src/components/Toast/index.js

@@ -1,3 +1,5 @@
+// it has style inside index.scss ---> // Start Toast && end Toast
+
 import React from "react";
 
 import "./index.scss";

src/components/Toast/index.scss

@@ -1,75 +0,0 @@
-$red: #e92424;
-$errorToastBgColor: #ffeaea;
-
-$lightGreen: #3ee924;
-$successToastBgColor: #f2ffea;
-
-$white: #fff;
-
-.swal2-popup.swal2-toast .swal2-title {
-  font-size: 14px !important;
-}
-
-.swal2-popup.swal2-toast .swal2-close {
-  margin-left: 0px !important;
-  margin-top: 0px !important;
-}
-
-.swal2-timer-progress-bar-container {
-  direction: ltr !important;
-}
-
-// .swal2-timer-progress-bar {
-//   background-color: yellow !important;
-// }
-
-.swal2-icon {
-  font-size: 13px !important;
-}
-
-// ! error Tost
-.error-toast-title {
-  color: $red !important;
-}
-
-.error-toast-modalBox,
-.error-toast-modalBox-timer {
-  background-color: $errorToastBgColor !important;
-}
-
-.error-toast-closeButton {
-  background-color: $red !important;
-  color: $white !important;
-  padding: 15px !important;
-}
-
-.success-toast-title {
-  color: $lightGreen !important;
-}
-
-.success-toast-modalBox,
-.success-toast-modalBox-timer {
-  background-color: $successToastBgColor !important;
-}
-
-.success-toast-closeButton {
-  background-color: $lightGreen !important;
-  color: $white !important;
-  padding: 15px !important;
-}
-
-.error-toast-modalBox-timer .swal2-timer-progress-bar-container {
-  background-color: #e9242455 !important;
-}
-
-.error-toast-modalBox-timer .swal2-timer-progress-bar {
-  background-color: $red !important;
-}
-
-.success-toast-modalBox-timer .swal2-timer-progress-bar-container {
-  background-color: #3ee92455 !important;
-}
-
-.success-toast-modalBox-timer .swal2-timer-progress-bar {
-  background-color: $lightGreen !important;
-}

src/components/starRating/StarRating.js

@@ -1,3 +1,5 @@
+// it has style inside index.scss ---> // Start StarRating && end StarRating
+
 import React, { useState } from "react";
 import "./StarRating.scss";
 

src/components/starRating/StarRating.scss

@@ -1,6 +0,0 @@
-.on {
-  color: #ffbd35;
-}
-.off {
-  color: #ccc;
-}

src/components/vodProductDesign/VodProductDesign.js

@@ -1,3 +1,5 @@
+// it has style inside index.scss ---> // Start vodProductDesign && end vodProductDesign
+
 import React, { useEffect, useState } from "react";
 
 import StarRating from "../starRating/StarRating";

src/components/vodProductDesign/VodProductDesign.scss

@@ -1,3 +0,0 @@
-.playBtnImg {
-  transition: all 0.4s;
-}

src/index.scss

@@ -801,6 +801,224 @@ l.leaflet-popup-content,
 
 // * end PopupCard Sidebar/SidebarDesign2
 
+// TODO  Start Sidebar/SidebarMenu Component
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.no-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+// * end PopupCard Sidebar/SidebarMenu
+
+// TODO  Start StarRating Component
+
+.on {
+  color: #ffbd35;
+}
+
+.off {
+  color: #ccc;
+}
+
+// * end PopupCard StarRating
+
+// TODO  Start Switch Component
+
+input:checked ~ .dot {
+  transform: translateX(100%);
+  background-color: #65a9ff;
+}
+
+input:checked ~ .dot {
+  transform: translateX(100%);
+  background-color: #65a9ff;
+}
+
+// * end PopupCard Switch
+
+// TODO  Start TimeLineComponent Component
+
+#root {
+  width: 100%;
+}
+
+.timeline-container::after {
+  background-color: #06bace;
+  content: "";
+  position: absolute;
+  right: calc(50% - 2px);
+  width: 4px;
+  height: 100%;
+  border-radius: 10px;
+}
+
+.timeline-item:nth-child(odd) {
+  align-self: flex-start;
+  justify-content: flex-end;
+  padding-right: 0px;
+  padding-left: 30px;
+}
+
+.timeline-item-content::after {
+  content: "";
+  background-color: #fff;
+  box-shadow: 1px -1px 1px #d6d6d6;
+  width: 15px;
+  height: 15px;
+  position: absolute;
+  transform: rotate(45deg);
+  right: -7.5px;
+  top: calc(50% - 5px);
+}
+
+.timeline-item:nth-child(odd) .timeline-item-content {
+  align-items: flex-start;
+  text-align: left;
+}
+
+.timeline-item:nth-child(odd) .timeline-item-content::after {
+  box-shadow: -1px 1px 1px #d6d6d6;
+  right: auto;
+  left: -7.5px;
+}
+
+.timeline-item-content .circle {
+  background-color: #06bace;
+  border: solid 4px #fff;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: calc(50% - 10px);
+  right: -41px;
+  z-index: 100;
+}
+
+.timeline-item:nth-child(odd) .timeline-item-content .circle {
+  right: auto;
+  left: -41px;
+}
+
+@media only screen and (max-width: 767px) {
+  .timeline-item-content,
+  .timeline-item:nth-child(odd) .timeline-item-content {
+    padding: 15px 10px;
+    text-align: center !important;
+    align-items: center !important;
+  }
+
+  .timeline-item-content .tag {
+    width: calc(100% - 10px);
+  }
+
+  .timeline-item-content time {
+    margin-top: 20px;
+  }
+
+  .timeline-item-content a {
+    text-decoration: underline;
+  }
+
+  .timeline-item-content a::after {
+    display: none;
+  }
+}
+
+// * end PopupCard TimeLineComponent
+
+// TODO  Start Toast Component
+
+$red: #e92424;
+$errorToastBgColor: #ffeaea;
+
+$lightGreen: #3ee924;
+$successToastBgColor: #f2ffea;
+
+$white: #fff;
+
+.swal2-popup.swal2-toast .swal2-title {
+  font-size: 14px !important;
+}
+
+.swal2-popup.swal2-toast .swal2-close {
+  margin-left: 0px !important;
+  margin-top: 0px !important;
+}
+
+.swal2-timer-progress-bar-container {
+  direction: ltr !important;
+}
+
+// .swal2-timer-progress-bar {
+//   background-color: yellow !important;
+// }
+
+.swal2-icon {
+  font-size: 13px !important;
+}
+
+// ! error Tost
+.error-toast-title {
+  color: $red !important;
+}
+
+.error-toast-modalBox,
+.error-toast-modalBox-timer {
+  background-color: $errorToastBgColor !important;
+}
+
+.error-toast-closeButton {
+  background-color: $red !important;
+  color: $white !important;
+  padding: 15px !important;
+}
+
+.success-toast-title {
+  color: $lightGreen !important;
+}
+
+.success-toast-modalBox,
+.success-toast-modalBox-timer {
+  background-color: $successToastBgColor !important;
+}
+
+.success-toast-closeButton {
+  background-color: $lightGreen !important;
+  color: $white !important;
+  padding: 15px !important;
+}
+
+.error-toast-modalBox-timer .swal2-timer-progress-bar-container {
+  background-color: #e9242455 !important;
+}
+
+.error-toast-modalBox-timer .swal2-timer-progress-bar {
+  background-color: $red !important;
+}
+
+.success-toast-modalBox-timer .swal2-timer-progress-bar-container {
+  background-color: #3ee92455 !important;
+}
+
+.success-toast-modalBox-timer .swal2-timer-progress-bar {
+  background-color: $lightGreen !important;
+}
+
+// * end Toast Component
+
+// TODO  Start vodProductDesign Component
+
+.playBtnImg {
+  transition: all 0.4s;
+}
+
+// * end vodProductDesign Component
+
 // ? class for selectbox inside -->> CustomSelectBox  <<--
 .customizeSelect {
   background-position: left 0.5rem center;