@openmrs/esm-stock-management-app 1.0.1-pre.559 → 1.0.1-pre.581

package/src/stock-reports/report-list/stock-reports.scss

@@ -1,6 +1,7 @@
 @use '@carbon/styles/scss/colors';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .content {
   @include type.type-style('heading-compact-02');

package/src/stock-settings/stock-settings.component.tsx

@@ -10,7 +10,7 @@ function StockSettings() {
 
   return (
     <div className={styles.StockSettings}>
-      <div className={styles.title}>
+      <div className={styles.tableHeader}>
         {t(
           "comingSoonUnderDev",
           "Exciting updates are on the way! In the meantime, use the link below to access Admin UI settings."

package/src/stock-settings/stock-settings.scss

@@ -1,6 +1,8 @@
 @use '@carbon/colors';
 @use '@carbon/layout';
-@use "../root.scss" as *;
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
 
 .StockSettings {
     display: flex;
@@ -18,6 +20,7 @@
     }
 }
 
-.title {
-    @extend .productiveHeading01;
-}
+.tableHeader {
+    @include type.type-style('heading-compact-01');
+    color: $text-02;
+  }

package/src/stock-sources/add-stock-sources/add-stock-sources.scss

@@ -1,18 +1,18 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .section {
-  margin: spacing.$spacing-03;
+  margin: layout.$spacing-03;
 }
 
 .sectionTitle {
   @include type.type-style('heading-compact-02');
   color: $text-02;
-  margin-bottom: spacing.$spacing-04;
+  margin-bottom: layout.$spacing-04;
 }
 
 .modalBody {
-  padding-bottom: spacing.$spacing-05;
+  padding-bottom: layout.$spacing-05;
 }
 

package/src/stock-sources/delete-stock-modal.component.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Button, ModalHeader, ModalBody, ModalFooter } from "@carbon/react";
-import styles from "../root.scss";
+import styles from "./delete-stock-modal.scss";
 
 interface DeleteConfirmationProps {
   uuid?: string;
@@ -20,11 +20,11 @@ const DeleteConfirmation: React.FC<DeleteConfirmationProps> = ({
 
   return (
     <>
-      <ModalHeader closeModal={close} className={styles.productiveHeading03}>
+      <ModalHeader closeModal={close} className={styles.modalHeader}>
         {t("deleteStock", "Delete Stock source")}?
       </ModalHeader>
       <ModalBody>
-        <p className={styles.bodyLong01}>
+        <p className={styles.bodyText}>
           {t(
             "deleteConfirmationText",
             `Are you sure you want to delete this source? This action can't be undone.`,

package/src/stock-sources/delete-stock-modal.scss

@@ -0,0 +1,11 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
+
+.bodyText {
+    @include type.type-style('body-long-01');
+  }
+
+.modalHeader {
+    @include type.type-style('heading-compact-02');
+  }

package/src/stock-sources/stock-sources-filter/stock-sources-filter.scss

@@ -1,10 +1,12 @@
+@use '@carbon/layout';
+
 .filterContainer {
     :global(.cds--dropdown__wrapper--inline) {
       gap: 0;
     }
   
     :global(.cds--list-box__menu-icon) {
-      height: 1rem;
+      height: layout.$spacing-05;
     }
   
     :global(.cds--dropdown--inline) :global(.cds--list-box__field) {

package/src/stock-sources/stock-sources.scss

@@ -1,5 +1,5 @@
 @use '@carbon/styles/scss/colors';
-@use '@carbon/styles/scss/spacing';
+@use '@carbon/layout';
 @use '@carbon/styles/scss/type';
 @import '~@openmrs/esm-styleguide/src/vars';
 
@@ -64,7 +64,7 @@
 
 .tableContainer {
   background-color: $ui-01;
-  margin: 0 spacing.$spacing-05;
+  margin: 0 layout.$spacing-05;
   padding: 0;
 
   a {
@@ -80,8 +80,8 @@
   }
 
   .toolbarContent {
-    height: spacing.$spacing-07;
-    margin-bottom: spacing.$spacing-02;
+    height: layout.$spacing-07;
+    margin-bottom: layout.$spacing-02;
   }
 }
 
@@ -142,7 +142,7 @@
 .tileContainer {
   background-color: $ui-02;
   border-top: 1px solid $ui-03;
-  padding: 5rem 0;
+  padding: layout.$spacing-11 0;
 }
 
 .tile {
@@ -178,7 +178,7 @@
 .tabletHeading {
   text-align: left;
   text-transform: capitalize;
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-05;
 
   h4:after {
     content: '';
@@ -204,13 +204,13 @@
 
 .headerBtnContainer {
   background-color: $ui-background;
-  padding: spacing.$spacing-05;
+  padding: layout.$spacing-05;
   text-align: right;
 }
 
 .addPatientToListBtn {
-  margin-left: spacing.$spacing-05;
-  height: spacing.$spacing-09;
+  margin-left: layout.$spacing-05;
+  height: layout.$spacing-09;
 }
 
 .editIcon {

package/src/stock-user-role-scopes/delete-stock-user-scope-modal.component.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Button, ModalHeader, ModalBody, ModalFooter } from "@carbon/react";
-import styles from "../root.scss";
+import styles from "./delete-stock-user-scope-modal.scss";
 
 interface DeleteConfirmationProps {
   uuid?: string;

package/src/stock-user-role-scopes/delete-stock-user-scope-modal.scss

@@ -0,0 +1,11 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
+
+.bodyText {
+    @include type.type-style('body-long-01');
+  }
+
+.modalHeader {
+    @include type.type-style('heading-compact-02');
+  }

package/src/stock-user-role-scopes/stock-user-role-scopes.scss

@@ -1,6 +1,7 @@
-@use '@carbon/styles/scss/colors';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .content {
   @include type.type-style('heading-compact-02');
@@ -17,7 +18,7 @@
   @include type.type-style('body-compact-02');
   color: $text-02;
   width: 80%;
-  margin: 1.5rem auto;
+  margin: layout.$spacing-06 auto;
   overflow: hidden;
   text-align: center;
 
@@ -33,12 +34,12 @@
   }
 
   &::before {
-    right: 0.5rem;
+    right: layout.$spacing-03;
     margin-left: -50%;
   }
 
   &::after {
-    left: 0.5rem;
+    left: layout.$spacing-03;;
     margin-right: -50%;
   }
 }
@@ -46,7 +47,7 @@
 .tileContainer {
   background-color: $ui-02;
   border-top: 1px solid $ui-03;
-  padding: 5rem 0;
+  padding: layout.$spacing-11 0;
 }
 
 .tile {