FIX-2296 Add generic Button component (#2309)

equinor · Mar 18, 2024 · 8a8b280 · 8a8b280
1 parent 68bfb27
commit 8a8b280
Show file tree

Hide file tree

Showing 24 changed files with 211 additions and 312 deletions.
diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesView.tsx
@@ -1,4 +1,4 @@
-import { Button, Radio, Switch, Typography } from "@equinor/eds-core-react";
+import { Radio, Switch, Typography } from "@equinor/eds-core-react";
 import { CSSProperties } from "@material-ui/core/styles/withStyles";
 import {
   MILLIS_IN_SECOND,
@@ -24,6 +24,7 @@ import ConfirmModal from "components/Modals/ConfirmModal";
 import { ReportModal } from "components/Modals/ReportModal";
 import { ShowLogDataOnServerModal } from "components/Modals/ShowLogDataOnServerModal";
 import ProgressSpinner from "components/ProgressSpinner";
+import { Button } from "components/StyledComponents/Button";
 import { useConnectedServer } from "contexts/connectedServerContext";
 import OperationContext from "contexts/operationContext";
 import { DispatchOperation } from "contexts/operationStateReducer";
@@ -62,7 +63,6 @@ import { truncateAbortHandler } from "services/apiClient";
 import JobService, { JobType } from "services/jobService";
 import LogObjectService from "services/logObjectService";
 import styled from "styled-components";
-import { Colors } from "styles/Colors";
 import Icon from "styles/Icons";
 import { formatIndexValue } from "tools/IndexHelpers";
 import {
@@ -559,15 +559,14 @@ export const CurveValuesView = (): React.ReactElement => {
 
   const panelElements = useMemo(
     () => [
-      <StyledButton
+      <Button
         key="downloadall"
         variant="ghost_icon"
         disabled={isLoading}
         onClick={() => displayConfirmation(dispatchOperation)}
-        colors={colors}
       >
         <Icon name="download" />
-      </StyledButton>,
+      </Button>,
       <Button
         key="showLogDataOnServer"
         disabled={isLoading || isFetching}
@@ -747,10 +746,6 @@ const getColumnType = (curveSpecification: CurveSpecification) => {
   }
 };
 
-const StyledButton = styled(Button)<{ colors: Colors }>`
-  color: ${(props) => props.colors.infographic.primaryMossGreen};
-`;
-
 const alignLayout: CSSProperties = {
   display: "flex",
   alignItems: "center"

diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/EditNumber.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/EditNumber.tsx
@@ -1,10 +1,10 @@
 import { Icon, Label, TextField } from "@equinor/eds-core-react";
 import { Tooltip } from "@material-ui/core";
-import { StyledButton } from "components/ContentViews/EditSelectedLogCurveInfo";
-import { TooltipLayout } from "../StyledComponents/Tooltip";
+import { Button } from "components/StyledComponents/Button";
 import OperationContext from "contexts/operationContext";
 import { ChangeEvent, ReactElement, useContext, useState } from "react";
 import styled from "styled-components";
+import { TooltipLayout } from "../StyledComponents/Tooltip";
 
 interface EditNumberProps {
   label: string;
@@ -60,14 +60,9 @@ const EditNumber = (props: EditNumberProps): ReactElement => {
           ) : null
         }
       />
-      <StyledButton
-        variant={"ghost"}
-        color={"primary"}
-        onClick={submitEditNumber}
-        disabled={!isEdited}
-      >
-        <Icon size={16} name={"arrowForward"} />
-      </StyledButton>
+      <Button variant={"ghost"} onClick={submitEditNumber} disabled={!isEdited}>
+        <Icon name={"arrowForward"} />
+      </Button>
     </EditNumberLayout>
   );
 };

diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/EditSelectedLogCurveInfo.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/EditSelectedLogCurveInfo.tsx
@@ -1,12 +1,12 @@
 import {
   Autocomplete,
-  Button,
   EdsProvider,
   Icon,
   Label,
   TextField,
   Typography
 } from "@equinor/eds-core-react";
+import { Button } from "components/StyledComponents/Button";
 import { useConnectedServer } from "contexts/connectedServerContext";
 import OperationContext from "contexts/operationContext";
 import { isValid, parse } from "date-fns";
@@ -31,7 +31,7 @@ import {
 import { RouterLogType } from "routes/routerConstants";
 import { checkIsUrlTooLong } from "routes/utils/checkIsUrlTooLong";
 import styled from "styled-components";
-import { Colors, colors, dark } from "styles/Colors";
+import { Colors, dark } from "styles/Colors";
 import { createLogCurveValuesSearchParams } from "../../routes/utils/createLogCurveValuesSearchParams";
 
 interface EditSelectedLogCurveInfoProps {
@@ -213,9 +213,8 @@ const EditSelectedLogCurveInfo = (
               dropdownHeight={600}
             />
           </StartEndIndex>
-          <StyledButton
+          <Button
             variant={"ghost"}
-            color={"primary"}
             onClick={submitLogCurveInfo}
             disabled={
               disabled ||
@@ -225,8 +224,8 @@ const EditSelectedLogCurveInfo = (
               selectedMnemonics.length === 0
             }
           >
-            <Icon size={16} name={isEdited ? "arrowForward" : "sync"} />
-          </StyledButton>
+            <Icon name={isEdited ? "arrowForward" : "sync"} />
+          </Button>
         </Layout>
       </EdsProvider>
     )
@@ -272,32 +271,4 @@ const StyledTextField = styled(TextField)`
   min-width: 220px;
 `;
 
-export const StyledButton = styled(Button)`
-  ${(props) =>
-    props.disabled
-      ? `
-      &:hover{
-        border:2px solid ${colors.interactive.disabledBorder};
-        border-radius: 50%;
-      }
-      &&{
-        border:2px solid ${colors.interactive.disabledBorder};
-      }`
-      : `
-      &:hover{
-        border-radius: 50%;
-      }
-      &&{
-        border:2px solid ${colors.interactive.primaryResting};
-      }`}
-  display:flex;
-  height: 2rem;
-  width: 2rem;
-  min-height: 2rem;
-  min-width: 2rem;
-  padding: 0;
-  border-radius: 50%;
-  align-items: center;
-  justify-content: center;
-`;
 export default EditSelectedLogCurveInfo;
diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/JobsView.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/JobsView.tsx
@@ -1,4 +1,4 @@
-import { Button, Icon, Switch, Typography } from "@equinor/eds-core-react";
+import { Icon, Switch, Typography } from "@equinor/eds-core-react";
 import { useQueryClient } from "@tanstack/react-query";
 import {
   ContentTable,
@@ -11,6 +11,7 @@ import JobInfoContextMenu, {
 } from "components/ContextMenus/JobInfoContextMenu";
 import formatDateString from "components/DateFormatter";
 import { ReportModal } from "components/Modals/ReportModal";
+import { Button } from "components/StyledComponents/Button";
 import OperationContext from "contexts/operationContext";
 import OperationType from "contexts/operationType";
 import { refreshJobInfoQuery } from "hooks/query/queryRefreshHelpers";
@@ -146,15 +147,14 @@ export const JobsView = (): React.ReactElement => {
 
   const panelElements = [
     <Button
+      variant="ghost_icon"
       key="refreshJobs"
       aria-disabled={isFetching ? true : false}
       aria-label={isFetching ? "loading data" : null}
       onClick={isFetching ? undefined : () => refreshJobInfoQuery(queryClient)}
       disabled={isFetching}
-      colors={colors}
     >
       <Icon name="refresh" />
-      Refresh
     </Button>,
     msalEnabled &&
     (getUserAppRoles().includes(adminRole) ||

diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/QueryView.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/QueryView.tsx
@@ -1,4 +1,4 @@
-import { Button, Menu, Tabs, TextField } from "@equinor/eds-core-react";
+import { Menu, Tabs, TextField } from "@equinor/eds-core-react";
 import {
   ReturnElements,
   StoreFunction,
@@ -11,6 +11,7 @@ import ConfirmModal from "components/Modals/ConfirmModal";
 import { QueryEditor } from "components/QueryEditor";
 import { getTag } from "components/QueryEditorUtils";
 import { StyledNativeSelect } from "components/Select";
+import { Button } from "components/StyledComponents/Button";
 import OperationContext from "contexts/operationContext";
 import { DispatchOperation } from "contexts/operationStateReducer";
 import OperationType from "contexts/operationType";

diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/ServerManager.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/ServerManager.tsx
@@ -1,10 +1,5 @@
 import { useIsAuthenticated } from "@azure/msal-react";
-import {
-  Button,
-  ButtonProps,
-  Table,
-  Typography
-} from "@equinor/eds-core-react";
+import { ButtonProps, Table, Typography } from "@equinor/eds-core-react";
 import { useQueryClient } from "@tanstack/react-query";
 import ServerModal, {
   showDeleteServerModal
@@ -13,6 +8,7 @@ import UserCredentialsModal, {
   UserCredentialsModalProps
 } from "components/Modals/UserCredentialsModal";
 import ProgressSpinner from "components/ProgressSpinner";
+import { Button } from "components/StyledComponents/Button";
 import { useConnectedServer } from "contexts/connectedServerContext";
 import { useLoggedInUsernames } from "contexts/loggedInUsernamesContext";
 import { LoggedInUsernamesActionType } from "contexts/loggedInUsernamesReducer";
@@ -108,8 +104,7 @@ const ServerManager = (): React.ReactElement => {
         >
           Manage Connections
         </Typography>
-        <StyledButton
-          colors={colors}
+        <Button
           variant="outlined"
           value={NEW_SERVER_ID}
           key={NEW_SERVER_ID}
@@ -118,7 +113,7 @@ const ServerManager = (): React.ReactElement => {
         >
           <Icon name="cloudDownload" />
           New server
-        </StyledButton>
+        </Button>
       </Header>
       <Table style={{ width: "100%" }} className="serversList">
         <Table.Head>
@@ -175,7 +170,11 @@ const ServerManager = (): React.ReactElement => {
                 </Table.Cell>
                 <Table.Cell style={CellStyle}>
                   <Button variant="ghost" onClick={() => onEditItem(server)}>
-                    <Icon name="edit" size={24} />
+                    <Icon
+                      name="edit"
+                      size={24}
+                      color={colors.text.staticIconsTertiary}
+                    />
                   </Button>
                 </Table.Cell>
                 <Table.Cell style={CellStyle}>
@@ -192,7 +191,11 @@ const ServerManager = (): React.ReactElement => {
                       )
                     }
                   >
-                    <Icon name="deleteToTrash" size={24} />
+                    <Icon
+                      name="deleteToTrash"
+                      size={24}
+                      color={colors.text.staticIconsTertiary}
+                    />
                   </Button>
                 </Table.Cell>
               </Table.Row>
@@ -279,9 +282,4 @@ const StyledLink = styled.a`
   }
 `;
 
-const StyledButton = styled(Button)<{ colors?: Colors }>`
-  white-space: nowrap;
-  color: ${(props) => props.colors.infographic.primaryMossGreen};
-`;
-
 export default ServerManager;