Tailwind Feed and FeedButton (#5659)

* Tailwind src/Components/Facility/Consultations/Feed

* Tailwind src/Components/Facility/Consultations/FeedButton

* converted ToolTip component to css alternative in Feed

src/Common/constants.tsx

@@ -757,28 +757,28 @@ export const CAMERA_STATES = {
 
 export const getCameraPTZ: (precision: number) => CameraPTZ[] = (precision) => [
   {
-    icon: "chevron-up",
+    icon: "l-angle-up",
     label: "Move Up",
     action: "up",
     loadingLabel: CAMERA_STATES.MOVING.UP,
     shortcutKey: ["Control", "Shift", "ArrowUp"],
   },
   {
-    icon: "chevron-down",
+    icon: "l-angle-down",
     label: "Move Down",
     action: "down",
     loadingLabel: CAMERA_STATES.MOVING.DOWN,
     shortcutKey: ["Control", "Shift", "ArrowDown"],
   },
   {
-    icon: "chevron-left",
+    icon: "l-angle-left",
     label: "Move Left",
     action: "left",
     loadingLabel: CAMERA_STATES.MOVING.LEFT,
     shortcutKey: ["Control", "Shift", "ArrowLeft"],
   },
   {
-    icon: "chevron-right",
+    icon: "l-angle-right",
     label: "Move Right",
     action: "right",
     loadingLabel: CAMERA_STATES.MOVING.RIGHT,
@@ -792,34 +792,34 @@ export const getCameraPTZ: (precision: number) => CameraPTZ[] = (precision) => [
     shortcutKey: ["Shift", "P"],
   },
   {
-    icon: "search-plus",
+    icon: "l-search-plus",
     label: "Zoom In",
     action: "zoomIn",
     loadingLabel: CAMERA_STATES.ZOOMING.IN,
     shortcutKey: ["Shift", "I"],
   },
   {
-    icon: "search-minus",
+    icon: "l-search-minus",
     label: "Zoom Out",
     action: "zoomOut",
     loadingLabel: CAMERA_STATES.ZOOMING.OUT,
     shortcutKey: ["Shift", "O"],
   },
   {
-    icon: "save",
+    icon: "l-save",
     label: "Update Preset",
     action: "updatePreset",
     loadingLabel: CAMERA_STATES.UPDATING_PRESET,
     shortcutKey: ["Shift", "S"],
   },
   {
-    icon: "undo",
+    icon: "l-redo",
     label: "Reset",
     action: "reset",
     shortcutKey: ["Shift", "R"],
   },
   {
-    icon: "expand",
+    icon: "l-expand-arrows-alt",
     label: "Full Screen",
     action: "fullScreen",
     shortcutKey: ["F"],

src/Components/Facility/Consultations/Feed.tsx

@@ -1,33 +1,35 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { useDispatch } from "react-redux";
-import screenfull from "screenfull";
+import * as Notification from "../../../Utils/Notifications.js";
+
 import {
-  CameraPTZ,
   CAMERA_STATES,
+  CameraPTZ,
   getCameraPTZ,
 } from "../../../Common/constants";
-import { PTZState, useFeedPTZ } from "../../../Common/hooks/useFeedPTZ";
 import {
   ICameraAssetState,
   StreamStatus,
   useMSEMediaPlayer,
 } from "../../../Common/hooks/useMSEplayer";
-import { statusType, useAbortableEffect } from "../../../Common/utils";
+import { PTZState, useFeedPTZ } from "../../../Common/hooks/useFeedPTZ";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import {
   getConsultation,
+  getPermittedFacility,
   listAssetBeds,
   partialUpdateAssetBed,
-  getPermittedFacility,
 } from "../../../Redux/actions";
-import Loading from "../../Common/Loading";
+import { statusType, useAbortableEffect } from "../../../Common/utils";
+
+import CareIcon from "../../../CAREUI/icons/CareIcon.js";
 import { ConsultationModel } from "../models";
-import * as Notification from "../../../Utils/Notifications.js";
-import useKeyboardShortcut from "use-keyboard-shortcut";
-import { Tooltip } from "@material-ui/core";
 import FeedButton from "./FeedButton";
+import Loading from "../../Common/Loading";
 import ReactPlayer from "react-player";
-import { useHLSPLayer } from "../../../Common/hooks/useHLSPlayer";
 import { classNames } from "../../../Utils/utils";
+import screenfull from "screenfull";
+import { useDispatch } from "react-redux";
+import { useHLSPLayer } from "../../../Common/hooks/useHLSPlayer";
+import useKeyboardShortcut from "use-keyboard-shortcut";
 
 interface IFeedProps {
   facilityId: string;
@@ -498,10 +500,7 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId, facilityId }) => {
             }
           )}
           <div className="pl-3 hideonmobilescreen">
-            <FeedCameraPTZHelpButton
-              cameraPTZ={cameraPTZ}
-              tooltipPlacement="left-end"
-            />
+            <FeedCameraPTZHelpButton cameraPTZ={cameraPTZ} />
           </div>
         </div>
         <div className="absolute bottom-8 right-8 z-20">
@@ -572,72 +571,54 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId, facilityId }) => {
   );
 };
 
-export const FeedCameraPTZHelpButton = (props: {
-  cameraPTZ: CameraPTZ[];
-  tooltipPlacement?:
-    | "bottom-end"
-    | "bottom-start"
-    | "bottom"
-    | "left-end"
-    | "left-start"
-    | "left"
-    | "right-end"
-    | "right-start"
-    | "right"
-    | "top-end"
-    | "top-start"
-    | "top";
-}) => {
-  const { cameraPTZ, tooltipPlacement } = props;
+export const FeedCameraPTZHelpButton = (props: { cameraPTZ: CameraPTZ[] }) => {
+  const { cameraPTZ } = props;
   return (
-    <Tooltip
-      placement={tooltipPlacement ?? "left-start"}
-      arrow={true}
-      title={
-        <ul className="p-2 text-sm">
-          {cameraPTZ.map((option) => {
-            return (
-              <li key={option.action} className="py-2 flex gap-3 items-center">
-                <span className="font-semibold w-16">{option.label}</span>
-                <div className="flex gap-1">
-                  {option.shortcutKey.map((hotkey, index) => {
-                    const isArrowKey = hotkey.includes("Arrow");
-                    hotkey = hotkey.replace("Control", "Ctrl");
-
-                    const keyElement = (
-                      <div
-                        key={index}
-                        className="font-mono shadow-md border-gray-500 border rounded-md p-1.5"
-                      >
-                        {isArrowKey ? (
-                          <i className={`fa-sm fas fa-${option.icon}`} />
-                        ) : (
-                          hotkey
-                        )}
-                      </div>
-                    );
-
-                    // Skip wrapping with + for joining with next key
-                    if (index === option.shortcutKey.length - 1)
-                      return keyElement;
-
-                    return (
-                      <div key={index} className="flex gap-1 items-center">
-                        {keyElement}
-                        <span className="p-1">+</span>
-                      </div>
-                    );
-                  })}
-                </div>
-              </li>
-            );
-          })}
-        </ul>
-      }
+    <button
+      key="option.action"
+      className="tooltip rounded text-2xl text-white/40"
     >
-      <button key="option.action" className="rounded text-2xl text-white/40">
-        <i className={"fa fa-circle-question"} />
-      </button>
-    </Tooltip>
+      <CareIcon className="care-l-question-circle" />
+
+      <ul className="tooltip-text tooltip-left -top-60 right-10 p-2 text-sm">
+        {cameraPTZ.map((option) => {
+          return (
+            <li key={option.action} className="py-2 flex gap-3 items-center">
+              <span className="font-semibold w-16">{option.label}</span>
+              <div className="flex gap-1">
+                {option.shortcutKey.map((hotkey, index) => {
+                  const isArrowKey = hotkey.includes("Arrow");
+                  hotkey = hotkey.replace("Control", "Ctrl");
+
+                  const keyElement = (
+                    <div
+                      key={index}
+                      className="font-mono shadow-md border-gray-500 border rounded-md p-1.5"
+                    >
+                      {isArrowKey ? (
+                        <CareIcon className={`care-${option.icon}`} />
+                      ) : (
+                        hotkey
+                      )}
+                    </div>
+                  );
+
+                  // Skip wrapping with + for joining with next key
+                  if (index === option.shortcutKey.length - 1)
+                    return keyElement;
+
+                  return (
+                    <div key={index} className="flex gap-1 items-center">
+                      {keyElement}
+                      <span className="p-1">+</span>
+                    </div>
+                  );
+                })}
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+    </button>
   );
 };

src/Components/Facility/Consultations/FeedButton.tsx

@@ -1,5 +1,6 @@
-import { Tooltip } from "@material-ui/core";
 import { CameraPTZ } from "../../../Common/constants";
+import CareIcon from "../../../CAREUI/icons/CareIcon";
+import { classNames } from "../../../Utils/utils";
 
 export default function FeedButton(props: {
   camProp: any;
@@ -37,23 +38,26 @@ export default function FeedButton(props: {
   }
 
   return (
-    <Tooltip
-      key={props.camProp.action}
-      placement="left"
-      arrow={true}
-      title={
-        <span className="text-sm font-semibold">
-          {`${props.camProp.label}  (${shortcutKeyDescription(props.camProp)})`}
-        </span>
-      }
+    <button
+      className={classNames("tooltip", buttonClass)}
+      onClick={props.clickAction}
     >
-      <button className={buttonClass} onClick={props.clickAction}>
-        {props.camProp.icon ? (
-          <i className={"fas fa-" + props.camProp.icon} />
-        ) : (
-          <span className="font-bold">{props.camProp.value}x</span>
+      {props.camProp.icon ? (
+        <CareIcon className={`care-${props.camProp.icon}`} />
+      ) : (
+        <span className="font-bold">{props.camProp.value}x</span>
+      )}
+
+      <span
+        className={classNames(
+          "tooltip-text top-2.5 text-sm font-semibold",
+          props.camProp.label.includes("Move")
+            ? "tooltip-right"
+            : "tooltip-left"
         )}
-      </button>
-    </Tooltip>
+      >
+        {`${props.camProp.label}  (${shortcutKeyDescription(props.camProp)})`}
+      </span>
+    </button>
   );
 }

src/Components/Facility/Consultations/LiveFeed.tsx

@@ -424,10 +424,7 @@ const LiveFeed = (props: any) => {
                 );
               })}
               <div className="pl-3 hideonmobilescreen">
-                <FeedCameraPTZHelpButton
-                  cameraPTZ={cameraPTZ}
-                  tooltipPlacement="top"
-                />
+                <FeedCameraPTZHelpButton cameraPTZ={cameraPTZ} />
               </div>
             </div>
           </div>