Update Library page to use new shared Button component

replayio · Feb 22, 2024 · 60e0a06 · 60e0a06
1 parent 7633ed1
commit 60e0a06
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 51 deletions.
diff --git a/src/ui/components/Library/Library.module.css b/src/ui/components/Library/Library.module.css
@@ -37,18 +37,6 @@
   border-bottom: 1px solid var(--chrome);
 }
 
-:root:global(.theme-dark) .editButton {
-  background-color: var(--theme-base-80);
-  color: #fff;
-  border: none;
-}
-
-:root:global(.theme-dark) .editButton:hover {
-  background-color: var(--primary-accent-hover);
-  color: #fff;
-  border: none;
-}
-
 :root:global(.theme-dark) .recordingsBackground {
   background-color: transparent;
   color: var(--body-color);
@@ -102,15 +90,6 @@
   border-bottom: 1px solid var(--theme-base-90);
 }
 
-:root:global(.theme-light) .editButton {
-  background-color: #fff;
-}
-
-:root:global(.theme-light) .editButton:hover {
-  background-color: var(--primary-accent-hover);
-  color: #fff;
-}
-
 :root:global(.theme-light) .recordingsBackground {
   background-color: transparent;
   color: var(--body-color);

diff --git a/src/ui/components/Library/Team/View/Recordings/Header/BatchActionDropdown.tsx b/src/ui/components/Library/Team/View/Recordings/Header/BatchActionDropdown.tsx
@@ -1,16 +1,15 @@
 import { RecordingId } from "@replayio/protocol";
-import classNames from "classnames";
-import React, { useState } from "react";
+import { useState } from "react";
 
 import { assert } from "protocol/utils";
+import { Button } from "replay-next/components/Button";
 import { Recording } from "shared/graphql/types";
 import { useGetTeamIdFromRoute } from "ui/components/Library/Team/utils";
 import { isTestSuiteReplay } from "ui/components/TestSuite/utils/isTestSuiteReplay";
 import hooks from "ui/hooks";
 import { WorkspaceId } from "ui/state/app";
 import { useIsPublicEnabled } from "ui/utils/org";
 
-import { DisabledButton, getButtonClasses } from "../../../../../shared/Button";
 import { useConfirm } from "../../../../../shared/Confirm";
 import MaterialIcon from "../../../../../shared/MaterialIcon";
 import PortalDropdown from "../../../../../shared/PortalDropdown";
@@ -98,23 +97,22 @@ export default function BatchActionDropdown({
 
   if (!selectedIds.length) {
     return (
-      <DisabledButton className="space-x-1 leading-4">
+      <Button disabled>
         <MaterialIcon outlined className="font-bold" iconSize="sm">
           expand_more
         </MaterialIcon>
         <span>{`${selectedIds.length} item${selectedIds.length > 1 ? "s" : ""} selected`}</span>
-      </DisabledButton>
+      </Button>
     );
   }
 
-  const buttonClasses = classNames("bg-white", getButtonClasses("blue", "secondary", "md"));
   const button = (
-    <span className={"flex flex-row items-center space-x-1 leading-4 text-primaryAccent"}>
+    <Button variant="outline">
       <MaterialIcon outlined className="font-bold" iconSize="sm">
         expand_more
       </MaterialIcon>
       <span>{`${selectedIds.length} item${selectedIds.length > 1 ? "s" : ""} selected`}</span>
-    </span>
+    </Button>
   );
 
   let allRecordingsOwnedByCurrentUser = true;
@@ -147,7 +145,6 @@ export default function BatchActionDropdown({
   return (
     <PortalDropdown
       buttonContent={button}
-      buttonStyle={buttonClasses}
       setExpanded={setExpanded}
       expanded={expanded}
       distance={0}

diff --git a/src/ui/components/Library/Team/View/Recordings/Header/RecordingsPageViewerHeader.tsx b/src/ui/components/Library/Team/View/Recordings/Header/RecordingsPageViewerHeader.tsx
@@ -1,15 +1,13 @@
 import { useRouter } from "next/router";
 import React from "react";
 
+import { Button } from "replay-next/components/Button";
 import { Recording } from "shared/graphql/types";
-import { Workspace } from "shared/graphql/types";
 import { setModal } from "ui/actions/app";
 import { MY_LIBRARY_TEAM } from "ui/components/Library/Team/TeamContextRoot";
 import { useGetTeamIdFromRoute } from "ui/components/Library/Team/utils";
-import hooks from "ui/hooks";
 import { useAppDispatch } from "ui/setup/hooks";
 
-import { PrimaryButton, SecondaryButton } from "../../../../../shared/Button";
 import BatchActionDropdown from "./BatchActionDropdown";
 import TeamTrialEnd from "./TeamTrialEnd";
 import styles from "../../../../Library.module.css";
@@ -40,9 +38,7 @@ function ViewerHeaderActions({
           selectedIds={selectedIds}
           recordings={recordings}
         />
-        <PrimaryButton color="blue" onClick={handleDoneEditing}>
-          Done
-        </PrimaryButton>
+        <Button onClick={handleDoneEditing}>Done</Button>
       </>
     );
   }
@@ -56,26 +52,14 @@ function ViewerHeaderActions({
   return (
     <>
       {!isLibrary ? (
-        <SecondaryButton
-          className={styles.editButton}
-          color="blue"
-          onClick={() => launchWorkspaceSettings()}
-        >
-          Add team member
-        </SecondaryButton>
+        <Button onClick={() => launchWorkspaceSettings()}>Add team member</Button>
       ) : (
         <></>
       )}
 
       {recordings.length != 0 ? (
         <>
-          <SecondaryButton
-            className={styles.editButton}
-            color="blue"
-            onClick={() => setIsEditing(true)}
-          >
-            Edit
-          </SecondaryButton>
+          <Button onClick={() => setIsEditing(true)}>Edit</Button>
         </>
       ) : (
         <></>
@@ -113,7 +97,7 @@ export default function ViewerHeader({
   );
 
   return (
-    <div className={`m-2 flex flex-row items-center justify-between ${styles.libraryHeaderButton}`}>
+    <div className={`m-2 flex flex-row items-center justify-between`}>
       {HeaderLeft}
       <div className="flex flex-row items-center space-x-3">
         {currentWorkspaceId ? <TeamTrialEnd currentWorkspaceId={currentWorkspaceId} /> : null}