(chore) Replaced toggle with switcher item for menu consistency

openmrs · Jan 17, 2024 · f1db155 · f1db155
1 parent a65ec2b
commit f1db155
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 61 deletions.
diff --git a/packages/apps/esm-offline-tools-app/src/index.ts b/packages/apps/esm-offline-tools-app/src/index.ts
@@ -1,4 +1,9 @@
-import { defineConfigSchema, getSyncLifecycle, registerBreadcrumbs, registerOfflineHandler } from '@openmrs/esm-framework';
+import {
+  defineConfigSchema,
+  getSyncLifecycle,
+  registerBreadcrumbs,
+  registerOfflineHandler,
+} from '@openmrs/esm-framework';
 import { routes } from './constants';
 import { createDashboardLink } from './createDashboardLink';
 import { dashboardMeta } from './dashboard.meta';

diff --git a/.../apps/esm-offline-tools-app/src/offline-actions/offline-actions-mode-button.extension.tsx b/.../apps/esm-offline-tools-app/src/offline-actions/offline-actions-mode-button.extension.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Toggle, Button, DefinitionTooltip } from '@carbon/react';
+import { Button } from '@carbon/react';
 import { Network_3 } from '@carbon/react/icons';
 import {
   getCurrentOfflineMode,
@@ -18,7 +18,6 @@ function doNotCloseMenu(ev: React.SyntheticEvent) {
 const OfflineActionsModeButton: React.FC = () => {
   const { t } = useTranslation();
   const isOnline = useConnectivity();
-  const [lastRun, setLastRun] = useState<string>(() => getCurrentOfflineMode().lastRun);
   const [active, setActive] = useState(() => getCurrentOfflineMode().active);
 
   const toggle = useCallback(() => {
@@ -37,26 +36,21 @@ const OfflineActionsModeButton: React.FC = () => {
 
   return (
     isOnline && (
-      <div className={styles.offlineModeButtonContainer}>
+      <SwitcherItem aria-label="Offline Ready" className={styles.panelItemContainer}>
         <div>
           <Network_3 size={20} />
-          <span onClick={doNotCloseMenu} role="none">
-            {t('offlineReady', 'Offline Ready')}
-          </span>
+          <p>{t('offlineReady', 'Offline Ready')}</p>
         </div>
-        <DefinitionTooltip
-          openOnHover
-          align="top"
-          definition={`${t('lastRun', 'Last Run')}: ${active ? lastRun : t('never', 'Never')}`}
-        >
-          {active && (
-            <Button kind="ghost" onClick={handleRefresh}>
-              {t('refresh', 'Refresh')}
-            </Button>
-          )}
-        </DefinitionTooltip>
-        {!active && <Toggle className={styles.toggle} id="offlineModeSwitch" toggled={active} onToggle={toggle} />}
-      </div>
+        {active ? (
+          <Button kind="ghost" onClick={handleRefresh}>
+            {t('refresh', 'Refresh')}
+          </Button>
+        ) : (
+          <Button kind="ghost" id="offlineModeSwitch" onClick={toggle}>
+            {t('turnOn', 'Turn On')}
+          </Button>
+        )}
+      </SwitcherItem>
     )
   );
 };

diff --git a/packages/apps/esm-offline-tools-app/src/offline-actions/offline-actions-mode-button.scss b/packages/apps/esm-offline-tools-app/src/offline-actions/offline-actions-mode-button.scss
@@ -3,48 +3,8 @@
 
 .panelItemContainer a {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-
-  :global(.cds--toggle-input__label .cds--toggle__switch) {
-    margin-top: 0 !important;
-  }
-
-  :global(.cds--toggle) {
-    /* setting the width prevents the toggle from changing size when the text changes */
-    width: 76px;
-    margin: 0 1rem;
-  }
-
-  :global(.cds--toggle__text) {
-    color: $ui-02;
-  }
-
-  :global(.cds--definition-term) {
-    color: $ui-02;
-  }
-
-  svg {
-    margin: 0rem 0.75rem;
-    fill: $field-01;
-  }
-
-  & > div {
-    display: flex;
-    flex-direction: row;
-    width: fit-content;
-    align-items: center;
-  }
-
-  button,
-  button:hover {
-    color: $inverse-link;
-  }
-
-  button :hover {
-    @include brand-03(background-color);
-    color: $inverse-link;
-  }
+  justify-content: space-between;
 }
 
 .panelItemContainer div {