Removed Mixins as it is not so useful, just one line

src/components/Header/Header.module.scss

 @import '~styles/variables';
-@import '~styles/mixins';
 
 .appHeader {
     height: $large-footer-height;
@@ -7,9 +6,10 @@
     top: 0;
     left: 0;
     width: 100%;
-    box-shadow: 0 0 2px 0 rgba-background($primary-black, .24), 0 2px 2px 0 rgba-background($primary-black, .12);
+    box-shadow: 0 0 2px 0 rgba($primary-black, .24), 0 2px 2px 0 rgba($primary-black, .12);
     background: $primary-white;
-    @include flex-box();
+    display: flex;
+    justify-content: center;
 
     h1 {
         color: $primary;

src/components/LoadingAnimation/LoadingAnimation.module.scss

 @import '~styles/variables';
-@import '~styles/mixins';
 
 .loadingAnimation {
-    @include flex-box();
+    display: flex;
+    align-items: center;
+    justify-content: center;
     height: 100%;
 
     .loader {

src/components/ModalDialog/ModalDialog.module.scss

@@ -10,7 +10,7 @@
     left: 0;
     bottom: 0;
     padding: 1rem;
-    background-color: rgba(0, 0, 0, 0.7);
+    background-color: rgba($primary-black, .7);
     z-index: 100;
     opacity: 1;
     overflow: hidden;

src/pages/PDP/PDP.jsx

@@ -36,7 +36,7 @@ class PDPPage extends Component {
                     </div>
                     <div className={style.details}>
                         <h1>{name}</h1>
-                        <div>{`Price: ${sellingPrice}`}</div>
+                        <div className={style.sellingPrice}>{`Price: ${sellingPrice}`}</div>
                     </div>
                 </div>
                 <ImageCarousel

src/pages/PDP/PDP.module.scss

@@ -15,10 +15,10 @@
         padding: 15px;
         flex-wrap: wrap;
 
-        .images {}
-
-        .details {
-            // width: 50%;
+        .sellingPrice {
+            color: $primary;
+            font-weight: bold;
+            margin-top: 5px;
         }
 
     }

src/pages/PLP/PLP.module.scss

 @import '~styles/variables';
-@import '~styles/mixins';
 
 .PLPPage {
     margin-top: $large-footer-height;

src/styles/_mixins.scss

-@mixin flex-box($display: flex, $direction: row, $alignItems: center, $justifyContent: center) {
-    display: $display;
-    flex-direction: $direction;
-    align-items: $alignItems;
-    justify-content: $justifyContent;
-}
-
-@function rgba-background($hexcolor, $opacity:1) {
-    @return rgba($hexcolor, $opacity);
-}
\ No newline at end of file