@openmrs/esm-offline-tools-app 6.2.1-pre.2830 → 6.2.1-pre.2836

package/src/components/shared-page-layout.styles.scss

@@ -1,11 +1,16 @@
-@use '@carbon/styles/scss/spacing';
-@import '../root.scss';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.productiveHeading03 {
+  @include type.type-style('heading-03');
+}
 
 .pageHeaderContainer {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: spacing.$spacing-05;
+  padding: layout.$spacing-05;
   background-color: #ededed;
 
   .pageHeader {

package/src/home/cards-container.styles.scss

@@ -1,12 +1,11 @@
-@use '@carbon/styles/scss/spacing';
-@import '../root.scss';
+@use '@carbon/layout';
 
 .overviewCardContainer {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: spacing.$spacing-05;
-  padding: spacing.$spacing-05;
-  padding-top: 0rem;
+  gap: layout.$spacing-05;
+  padding: layout.$spacing-05;
+  padding-top: 0;
   background-color: #ededed;
 }
 

package/src/home/home.styles.scss

@@ -1,8 +1,7 @@
-@use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
-@import '../root.scss';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .offlinePatientsTableContainer {
   border-top: 1px solid $ui-03;
-  padding: spacing.$spacing-05;
+  padding: layout.$spacing-05;
 }

package/src/nav/desktop-side-nav.component.tsx

@@ -1,6 +1,6 @@
-import { attach, detach, ExtensionSlot, isDesktop, useLayoutType } from '@openmrs/esm-framework';
-import { SideNav } from '@carbon/react';
 import React, { useEffect } from 'react';
+import { SideNav } from '@carbon/react';
+import { attach, detach, ExtensionSlot, isDesktop, useLayoutType } from '@openmrs/esm-framework';
 import styles from './desktop-side-nav.styles.scss';
 
 const DesktopSideNav: React.FC = () => {

package/src/nav/desktop-side-nav.styles.scss

@@ -1,33 +1,38 @@
-@import '~@openmrs/esm-styleguide/src/vars';
-@import '../root.scss';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.productiveHeading01 {
+  @include type.type-style('heading-compact-01');
+}
 
 .link > div a:nth-child(1) {
-  height: 3rem;
-  padding: 1.5rem 0 1.5rem 1.2rem;
+  height: layout.$spacing-09;
+  padding: layout.$spacing-06 0 layout.$spacing-06 1.2rem;
   color: $ui-04;
   @extend .productiveHeading01;
-  border-left: 0.25rem solid transparent;
-}
+  border-left: layout.$spacing-02 solid transparent;
 
-.link > div a:nth-child(1):hover {
-  background-color: $ui-03;
-  color: $ui-05;
-  @include brand-01(border-left-color);
-}
+  &:hover {
+    background-color: $ui-03;
+    color: $ui-05;
+    @include brand-01(border-left-color);
+  }
 
-.link > div a:nth-child(1):focus {
-  background-color: $ui-03;
-  outline: none;
-  color: $ui-05;
-  @include brand-01(border-left-color);
+  &:focus {
+    background-color: $ui-03;
+    outline: none;
+    color: $ui-05;
+    @include brand-01(border-left-color);
+  }
 }
 
 :global(.omrs-breakpoint-gt-tablet) .link > div {
-  padding-top: 1rem;
+  padding-top: layout.$spacing-05;
 }
 
 :global(.omrs-breakpoint-gt-tablet) .link > div a:nth-child(1) {
-  height: 2rem;
+  height: layout.$spacing-07;
   color: $ui-04;
-  padding: 0 0 0 1rem;
+  padding: 0 0 0 layout.$spacing-05;
 }

package/src/offline-actions/no-actions-empty-state.styles.scss

@@ -1,9 +1,13 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '../root.scss';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.productiveHeading01 {
+  @include type.type-style('heading-compact-01');
+}
 
 .layer {
-  margin: spacing.$spacing-06;
+  margin: layout.$spacing-06;
 }
 
 .emptyStateContainer {

package/src/offline-actions/offline-actions-mode-button.scss

@@ -1,5 +1,5 @@
-@import '~@openmrs/esm-styleguide/src/vars';
-@import '../root.scss';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .panelItemContainer a {
   display: flex;
@@ -13,7 +13,7 @@
   :global(.cds--toggle) {
     /* setting the width prevents the toggle from changing size when the text changes */
     width: 76px;
-    margin: 0 1rem;
+    margin: 0 layout.$spacing-05;
   }
 
   :global(.cds--toggle__text) {

package/src/offline-actions/offline-actions-page.component.tsx

@@ -11,8 +11,8 @@ import { Button } from '@carbon/react';
 import { Renew } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
 import { usePendingSyncItems } from '../hooks/offline-actions';
-import SharedPageLayout from '../components/shared-page-layout.component';
 import OfflineActions from './offline-actions.component';
+import SharedPageLayout from '../components/shared-page-layout.component';
 import styles from './offline-actions-page.styles.scss';
 
 const OfflineActionsPage: React.FC = () => {

package/src/offline-actions/offline-actions-page.styles.scss

@@ -1,14 +1,14 @@
-@use '@carbon/styles/scss/spacing';
-@import '../root.scss';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .buttonInlineIcon {
-  margin-right: spacing.$spacing-05;
+  margin-right: layout.$spacing-05;
 }
 
 :global(.omrs-breakpoint-lt-small-desktop) .primaryActionButton {
   position: fixed;
-  bottom: spacing.$spacing-05;
-  right: spacing.$spacing-05;
+  bottom: layout.$spacing-05;
+  right: layout.$spacing-05;
   border-radius: 100vh;
-  padding-right: spacing.$spacing-05;
+  padding-right: layout.$spacing-05;
 }

package/src/offline-actions/offline-actions-patient-chart-widget.styles.scss

@@ -1,7 +1,6 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
-@import '../root.scss';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .widgetCard {
   background-color: $ui-background;
@@ -14,7 +13,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: spacing.$spacing-04 0 spacing.$spacing-04 spacing.$spacing-05;
+  padding: layout.$spacing-04 0 layout.$spacing-04 layout.$spacing-05;
   background-color: $ui-background;
 
   h4 {
@@ -23,7 +22,7 @@
     &:after {
       content: '';
       display: block;
-      width: 2rem;
+      width: layout.$spacing-07;
       padding-top: 0.188rem;
       border-bottom: 0.375rem solid var(--brand-03);
     }
@@ -31,7 +30,7 @@
 }
 
 .desktopHeader {
-  height: 3rem;
+  height: layout.$spacing-09;
 
   h4 {
     @include type.type-style('heading-compact-02');

package/src/offline-actions/offline-actions-table.component.tsx

@@ -19,7 +19,6 @@ import {
   TableSelectAll,
   TableSelectRow,
 } from '@carbon/react';
-import type { SyncItem } from '@openmrs/esm-framework';
 import {
   beginEditSynchronizationItem,
   canBeginEditSynchronizationItemsOfType,
@@ -28,6 +27,7 @@ import {
   navigate,
   useLayoutType,
   usePagination,
+  type SyncItem,
 } from '@openmrs/esm-framework';
 import styles from './offline-actions-table.styles.scss';
 

package/src/offline-actions/offline-actions-table.styles.scss

@@ -1,5 +1,5 @@
-@use '@carbon/styles/scss/spacing';
-@import '../root.scss';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .tableContainer {
   background-color: transparent;
@@ -9,7 +9,7 @@
   display: grid;
   grid-template-rows: auto auto;
   grid-template-columns: 1fr 1fr auto;
-  padding-top: spacing.$spacing-05;
+  padding-top: layout.$spacing-05;
 
   .tableSearch {
     grid-row: 2;

package/src/offline-actions/synchronizing-notification.styles.scss

@@ -1,9 +1,9 @@
-@use '@carbon/styles/scss/spacing';
-@import '../root.scss';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .notificationLoadingContainer {
   display: flex;
-  gap: spacing.$spacing-03;
+  gap: layout.$spacing-03;
   justify-content: space-between;
   align-items: center;
 }

package/src/offline-actions/synchronizing-notification.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
+import { Loading, NotificationActionButton } from '@carbon/react';
+import { getI18n, useTranslation } from 'react-i18next';
 import type { OfflineSynchronizationStore } from '@openmrs/esm-framework/src/internal';
 import { getOfflineSynchronizationStore, showNotification, useStore } from '@openmrs/esm-framework/src/internal';
-import { getI18n, useTranslation } from 'react-i18next';
-import { Loading, NotificationActionButton } from '@carbon/react';
 import styles from './synchronizing-notification.styles.scss';
 
 let showNewModalOnNextSynchronization = true;

package/src/offline-patients/empty-state.scss

@@ -1,16 +1,16 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '../root.scss';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .action {
-  margin-bottom: spacing.$spacing-03;
+  margin-bottom: layout.$spacing-03;
 }
 
 .content {
   @include type.type-style('heading-compact-01');
   color: $text-02;
-  margin-top: spacing.$spacing-05;
-  margin-bottom: spacing.$spacing-03;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
 }
 
 .desktopHeading {
@@ -31,12 +31,12 @@
 .tabletHeading {
   text-align: left;
   text-transform: capitalize;
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-05;
 
   h4:after {
     content: '';
     display: block;
-    width: 2rem;
+    width: layout.$spacing-07;
     padding-top: 0.188rem;
     border-bottom: 0.375rem solid var(--brand-03);
   }
@@ -45,7 +45,7 @@
 .heading:after {
   content: '';
   display: block;
-  width: 2rem;
+  width: layout.$spacing-07;
   padding-top: 0.188rem;
   border-bottom: 0.375rem solid var(--brand-03);
 }

package/src/offline-patients/last-updated-table-cell.scss

@@ -1,6 +1,5 @@
-@use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
-@import '../root.scss';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .errorIcon {
   color: $danger;
@@ -13,5 +12,5 @@
 .cellContainer {
   display: flex;
   align-items: center;
-  gap: spacing.$spacing-02;
+  gap: layout.$spacing-02;
 }

package/src/offline-patients/offline-patient-sync-details.styles.scss

@@ -1,17 +1,30 @@
-@use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
-@import '../root.scss';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.productiveHeading02 {
+  @include type.type-style('heading-compact-02');
+}
+
+.bodyShort01 {
+  @include type.type-style('body-compact-01');
+}
+
+.label01 {
+  @include type.type-style('label-01');
+  color: $text-02;
+}
 
 .contentContainer {
-  padding: 0 spacing.$spacing-05;
+  padding: 0 layout.$spacing-05;
   max-width: 800px;
 }
 
 .headeredTileSection {
-  margin-bottom: spacing.$spacing-09;
+  margin-bottom: layout.$spacing-09;
 
   .productiveHeading02 {
-    margin-bottom: spacing.$spacing-03;
+    margin-bottom: layout.$spacing-03;
   }
 }
 
@@ -19,16 +32,16 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: spacing.$spacing-03;
+  margin-bottom: layout.$spacing-03;
 }
 
 .failedTile {
-  margin-bottom: spacing.$spacing-03;
+  margin-bottom: layout.$spacing-03;
   display: grid;
   grid-template-rows: 1fr 1fr;
   grid-template-columns: 1fr auto;
   align-items: center;
-  row-gap: spacing.$spacing-05;
+  row-gap: layout.$spacing-05;
 }
 
 .failedTileErrorMessage {

package/src/offline-patients/offline-patient-table.scss

@@ -1,7 +1,6 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
-@import '../root.scss';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .tableContainer {
   background-color: transparent;
@@ -15,7 +14,7 @@
   .tableHeader {
     @include type.type-style('heading-compact-02');
     color: $text-02;
-    padding: spacing.$spacing-04 0 spacing.$spacing-04 spacing.$spacing-04;
+    padding: layout.$spacing-04 0 layout.$spacing-04 layout.$spacing-04;
     grid-row: 1;
     grid-column: 1 / span 4;
   }
@@ -44,7 +43,7 @@
 
   .tableHeader {
     grid-column: 1;
-    padding: spacing.$spacing-04 0 spacing.$spacing-02 spacing.$spacing-04;
+    padding: layout.$spacing-04 0 layout.$spacing-02 layout.$spacing-04;
   }
 
   .tableSearch {

package/src/offline-patients/offline-patients.styles.scss

@@ -1,6 +1,6 @@
-@use '@carbon/styles/scss/spacing';
-@import '../root.scss';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .contentContainer {
-  padding: 0 spacing.$spacing-05;
+  padding: 0 layout.$spacing-05;
 }

package/src/offline-patients/patient-name-table-cell.scss

@@ -1,8 +1,8 @@
-@use '@carbon/styles/scss/spacing';
-@import '../root.scss';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .cellContainer {
   display: flex;
   align-items: center;
-  column-gap: spacing.$spacing-03;
+  column-gap: layout.$spacing-03;
 }

package/src/root.component.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import classNames from 'classnames';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import Home from './home/home.component';
+import classNames from 'classnames';
 import DesktopSideNav from './nav/desktop-side-nav.component';
+import Home from './home/home.component';
 import OfflineToolsPage from './offline-tools-page/offline-tools-page.component';
 import styles from './root.styles.scss';
 

package/src/root.styles.scss

@@ -1,4 +1,4 @@
-@import './root.scss';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 :global(.omrs-breakpoint-gt-tablet) .mainContentContainer {
   margin-left: var(--omrs-sidenav-width);