Removed global classes where possible.

Author: MadOPcode

src/components/Popup/index.jsx

@@ -35,12 +35,16 @@ const Popup = ({
   return (
     <div
       ref={setPopperElement}
-      className={cn(compStyles.container, styles.container, className)}
+      className={cn(compStyles.container, className)}
       style={styles.popper}
       {...attributes.popper}
     >
       {children}
-      <div className="popup-arrow" ref={setArrowElement} style={styles.arrow} />
+      <div
+        className={compStyles.popupArrow}
+        ref={setArrowElement}
+        style={styles.arrow}
+      />
     </div>
   );
 };

src/components/Popup/styles.module.scss

@@ -7,7 +7,7 @@
   background: #fff;
   box-shadow: $popover-box-shadow;
 
-  :global(.popup-arrow) {
+  .popupArrow {
     display: none;
   }
 }

src/routes/WorkPeriods/components/PeriodItem/index.jsx

@@ -158,7 +158,7 @@ const PeriodItem = ({
       </tr>
       {details && (
         <PeriodDetails
-          className="period-details"
+          className={styles.periodDetails}
           details={details}
           isDisabled={isDisabled}
           isFailed={isFailed}

src/routes/WorkPeriods/components/PeriodItem/styles.module.scss

@@ -40,7 +40,7 @@
   }
 }
 
-:global(.period-details) {
+.periodDetails {
   + .container.hasDetails {
     > td {
       &.toggle {

src/routes/WorkPeriods/components/PeriodListHead/index.jsx

@@ -53,7 +53,7 @@ const PeriodListHead = () => {
       </th>
       {HEAD_CELLS.map(({ id, className, label, disableSort }) => (
         <th key={id}>
-          <div className={cn(styles.colHead, className)}>
+          <div className={cn(styles.colHead, styles[className])}>
             <span className={styles.colLabel}>{label}</span>
             {!disableSort && (
               <SortingControl

src/routes/WorkPeriods/components/PeriodListHead/styles.module.scss

@@ -43,14 +43,14 @@
       }
     }
 
-    :global(.startDate),
-    :global(.endDate) {
+    .startDate,
+    .endDate {
       padding-left: 10px;
       padding-right: 10px;
     }
 
-    :global(.weeklyRate),
-    :global(.totalPaid) {
+    .weeklyRate,
+    .totalPaid {
       justify-content: flex-end;
     }
   }