Merge pull request #1984 from janburak/FIX-1982

FIX-1982 Dark mode additions

Src/WitsmlExplorer.Frontend/components/Alerts.tsx

@@ -5,8 +5,9 @@ import { capitalize } from "lodash";
 import React, { useContext, useEffect, useState } from "react";
 import styled from "styled-components";
 import NavigationContext from "../contexts/navigationContext";
+import OperationContext from "../contexts/operationContext";
 import NotificationService from "../services/notificationService";
-import { colors } from "../styles/Colors";
+import { Colors } from "../styles/Colors";
 
 interface AlertState {
   severity?: AlertSeverity;
@@ -18,6 +19,9 @@ export type AlertSeverity = "error" | "info" | "success" | "warning";
 const Alerts = (): React.ReactElement => {
   const [alert, setAlert] = useState<AlertState>(null);
   const { navigationState } = useContext(NavigationContext);
+  const {
+    operationState: { colors }
+  } = useContext(OperationContext);
 
   useEffect(() => {
     const unsubscribeOnConnectionStateChanged = NotificationService.Instance.onConnectionStateChanged.subscribe((connected) => {
@@ -67,7 +71,7 @@ const Alerts = (): React.ReactElement => {
 
   return (
     <Collapse in={!!alert}>
-      <AlertContainer>
+      <AlertContainer colors={colors}>
         <Alert
           severity={alert?.severity ?? "error"}
           action={
@@ -91,9 +95,10 @@ const Alerts = (): React.ReactElement => {
   );
 };
 
-const AlertContainer = styled.div`
+const AlertContainer = styled.div<{ colors: Colors }>`
   & .MuiAlert-root {
-    background-color: ${colors.ui.backgroundDefault};
+    background-color: ${(props) => props.colors.ui.backgroundDefault};
+    color: ${(props) => props.colors.text.staticIconsDefault};
   }
   & .MuiAlert-action {
     align-items: start;

Src/WitsmlExplorer.Frontend/components/ContentViews/table/SortableEdsTable.tsx

@@ -1,6 +1,8 @@
 import { CellProps, Table } from "@equinor/eds-core-react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
 import styled from "styled-components";
+import OperationContext from "../../../contexts/operationContext";
+import { Colors } from "../../../styles/Colors";
 import Icon from "../../../styles/Icons";
 
 export type SortDirection = "ascending" | "descending" | "none";
@@ -33,6 +35,9 @@ which will be displayed in the table without affecting sorting.
 */
 const SortableEdsTable = (props: SortableEdsTableProps): React.ReactElement => {
   const { columns, data, caption } = props;
+  const {
+    operationState: { colors }
+  } = useContext(OperationContext);
 
   const initColumns = (): Column[] =>
     columns.map((col) => {
@@ -103,20 +108,28 @@ const SortableEdsTable = (props: SortableEdsTableProps): React.ReactElement => {
       <Table.Head sticky>
         <Table.Row>
           {state.columns.map((col) => (
-            <SortCell sort={col.sortDirection} key={`head-${col.accessor}`} onClick={col.sortDirection ? () => onSortClick(col) : undefined} isSorted={col.isSorted}>
+            <StyledTableHeadCell
+              colors={colors}
+              sort={col.sortDirection}
+              key={`head-${col.accessor}`}
+              onClick={col.sortDirection ? () => onSortClick(col) : undefined}
+              isSorted={col.isSorted}
+            >
               {col.name}
               <Icon name={col.sortDirection === "descending" ? "arrowDown" : "arrowUp"} />
-            </SortCell>
+            </StyledTableHeadCell>
           ))}
         </Table.Row>
       </Table.Head>
       <Table.Body>
         {state.cellValues?.map((row, index) => (
-          <Table.Row key={index}>
+          <StyledTableRow colors={colors} key={index}>
             {row.map((cellValue, i) => (
-              <Table.Cell key={i}>{cellValue}</Table.Cell>
+              <StyledTableCell colors={colors} key={i}>
+                {cellValue}
+              </StyledTableCell>
             ))}
-          </Table.Row>
+          </StyledTableRow>
         ))}
       </Table.Body>
     </Table>
@@ -134,7 +147,7 @@ const toCellValues = (data: Record<string, any>[], columns: Column[]): string[][
     )
   );
 
-const SortCell = styled(Table.Cell)<{ isSorted: boolean } & CellProps>`
+const StyledTableHeadCell = styled(Table.Cell)<{ isSorted: boolean; colors: Colors } & CellProps>`
   svg {
     visibility: ${({ isSorted }) => (isSorted ? "visible" : "hidden")};
   }
@@ -143,6 +156,28 @@ const SortCell = styled(Table.Cell)<{ isSorted: boolean } & CellProps>`
       visibility: visible;
     }
   }
+  && {
+    background-color: ${(props) => props.colors.interactive.tableHeaderFillResting};
+    color: ${(props) => props.colors.text.staticIconsDefault};
+  }
+`;
+
+export const StyledTableRow = styled(Table.Row)<{ colors: Colors }>`
+  &&& {
+    background-color: ${(props) => props.colors.ui.backgroundDefault};
+  }
+  &&&:nth-of-type(even) {
+    background-color: ${(props) => props.colors.interactive.tableHeaderFillResting};
+  }
+  &&&:hover {
+    background-color: ${(props) => props.colors.interactive.tableCellFillActivated};
+  }
+`;
+
+export const StyledTableCell = styled(Table.Cell)<{ colors: Colors }>`
+  p {
+    color: ${(props) => props.colors.text.staticIconsDefault};
+  }
 `;
 
 export default SortableEdsTable;

Src/WitsmlExplorer.Frontend/components/Modals/ComparisonModalStyles.tsx

@@ -0,0 +1,31 @@
+import { Typography } from "@equinor/eds-core-react";
+import styled from "styled-components";
+import { Colors } from "../../styles/Colors";
+
+export const LabelsLayout = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, auto);
+  gap: 0.8rem;
+`;
+
+export const ComparisonCell = styled.div<{ type?: string }>`
+  font-feature-settings: "tnum";
+  p {
+    text-align: ${({ type }) => (type == "depth" ? "right" : "left")};
+  }
+  mark {
+    background: #e6faec;
+    background-blend-mode: darken;
+    font-weight: 600;
+  }
+`;
+
+export const TableLayout = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const StyledTypography = styled(Typography)<{ colors: Colors }>`
+  padding: 1rem 0 1rem 0;
+  color: ${(props) => props.colors.infographic.primaryMossGreen};
+`;

Src/WitsmlExplorer.Frontend/components/Modals/LogComparisonModal.tsx

@@ -16,6 +16,7 @@ import SortableEdsTable, { Column } from "../ContentViews/table/SortableEdsTable
 import formatDateString from "../DateFormatter";
 import { displayMissingObjectModal } from "../Modals/MissingObjectModals";
 import ProgressSpinner from "../ProgressSpinner";
+import { ComparisonCell, LabelsLayout, StyledTypography, TableLayout } from "./ComparisonModalStyles";
 import { Indexes, calculateMismatchedIndexes, markDateTimeStringDifferences, markNumberDifferences } from "./LogComparisonUtils";
 import ModalDialog, { ModalContentLayout, ModalWidth } from "./ModalDialog";
 
@@ -110,16 +111,16 @@ const LogComparisonModal = (props: LogComparisonModalProps): React.ReactElement
           endIndexes: indexes.sourceEnd,
           mnemonicValue: <Typography>{indexes.mnemonic}</Typography>,
           startIndexesValue: (
-            <TableCell type={sourceType}>
+            <ComparisonCell type={sourceType}>
               <Typography>{markedSourceStart}</Typography>
               <Typography>{markedTargetStart}</Typography>
-            </TableCell>
+            </ComparisonCell>
           ),
           endIndexesValue: (
-            <TableCell type={sourceType}>
+            <ComparisonCell type={sourceType}>
               <Typography>{markedSourceEnd}</Typography>
               <Typography>{markedTargetEnd}</Typography>
-            </TableCell>
+            </ComparisonCell>
           )
         };
       }),
@@ -185,7 +186,7 @@ const LogComparisonModal = (props: LogComparisonModalProps): React.ReactElement
                     data={data}
                     caption={
                       <StyledTypography colors={colors} variant="h5">
-                        Listing of Log Curves where the source indexes and end indexes do not match
+                        Listing of Log Curves where indexes do not match
                       </StyledTypography>
                     }
                   />
@@ -210,34 +211,6 @@ const columns: Column[] = [
   { name: "Source/target end", accessor: "endIndexes" }
 ];
 
-const LabelsLayout = styled.div`
-  display: grid;
-  grid-template-columns: repeat(2, auto);
-  gap: 0.8rem;
-`;
-
-const TableCell = styled.div<{ type?: string }>`
-  font-feature-settings: "tnum";
-  p {
-    text-align: ${({ type }) => (type == "depth" ? "right" : "left")};
-  }
-  mark {
-    background: #e6faec;
-    background-blend-mode: darken;
-    font-weight: 600;
-  }
-`;
-
-const TableLayout = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
-const StyledTypography = styled(Typography)<{ colors: Colors }>`
-  padding: 1rem 0 1rem 0;
-  color: ${(props) => props.colors.infographic.primaryMossGreen};
-`;
-
 const StyledAccordionHeader = styled(Accordion.Header)<{ colors: Colors }>`
   background-color: ${(props) => props.colors.ui.backgroundDefault};
   &:hover {

Src/WitsmlExplorer.Frontend/components/Modals/MessageComparisonModal.tsx

@@ -1,6 +1,5 @@
 import { TextField, Typography } from "@equinor/eds-core-react";
 import { useContext, useEffect, useState } from "react";
-import styled from "styled-components";
 import OperationContext from "../../contexts/operationContext";
 import { DispatchOperation } from "../../contexts/operationStateReducer";
 import OperationType from "../../contexts/operationType";
@@ -13,6 +12,7 @@ import SortableEdsTable, { Column } from "../ContentViews/table/SortableEdsTable
 import formatDateString from "../DateFormatter";
 import { displayMissingObjectModal } from "../Modals/MissingObjectModals";
 import ProgressSpinner from "../ProgressSpinner";
+import { ComparisonCell, LabelsLayout, StyledTypography, TableLayout } from "./ComparisonModalStyles";
 import { markDateTimeStringDifferences } from "./LogComparisonUtils";
 import ModalDialog, { ModalContentLayout, ModalWidth } from "./ModalDialog";
 
@@ -27,7 +27,7 @@ export interface MessageComparisonModalProps {
 const MessageComparisonModal = (props: MessageComparisonModalProps): React.ReactElement => {
   const { sourceMessage, sourceServer, targetServer, targetObject, dispatchOperation } = props;
   const {
-    operationState: { timeZone }
+    operationState: { timeZone, colors }
   } = useContext(OperationContext);
   const [targetMessage, setTargetMessage] = useState<MessageObject>(null);
   const [differenceFound, setDifferenceFound] = useState(false);
@@ -61,19 +61,19 @@ const MessageComparisonModal = (props: MessageComparisonModalProps): React.React
       source: sourceDTimDiff,
       target: targetDTimDiff,
       elementValue: (
-        <TableCell>
+        <ComparisonCell>
           <Typography>{sourceDTim != targetDTim ? <mark>dTim</mark> : "dTim"}</Typography>
-        </TableCell>
+        </ComparisonCell>
       ),
       sourceValue: (
-        <TableCell>
+        <ComparisonCell>
           <Typography>{sourceDTimDiff}</Typography>
-        </TableCell>
+        </ComparisonCell>
       ),
       targetValue: (
-        <TableCell>
+        <ComparisonCell>
           <Typography>{targetDTimDiff}</Typography>
-        </TableCell>
+        </ComparisonCell>
       )
     });
     const pushRow = (element: string, source: string, target: string) => {
@@ -84,9 +84,9 @@ const MessageComparisonModal = (props: MessageComparisonModalProps): React.React
         source,
         target,
         elementValue: (
-          <TableCell>
+          <ComparisonCell>
             <Typography>{diff ? <mark>{element}</mark> : element}</Typography>
-          </TableCell>
+          </ComparisonCell>
         ),
         sourceValue: <Typography>{source}</Typography>,
         targetValue: <Typography>{target}</Typography>
@@ -128,7 +128,7 @@ const MessageComparisonModal = (props: MessageComparisonModalProps): React.React
                   columns={columns}
                   data={data}
                   caption={
-                    <StyledTypography variant="h5">
+                    <StyledTypography colors={colors} variant="h5">
                       {differenceFound ? "Listing of message properties with differing elements marked." : "All the shown fields are equal."}
                     </StyledTypography>
                   }
@@ -148,27 +148,4 @@ const columns: Column[] = [
   { name: "Target message", accessor: "target" }
 ];
 
-const LabelsLayout = styled.div`
-  display: grid;
-  grid-template-columns: repeat(2, auto);
-  gap: 0.8rem;
-`;
-
-const TableCell = styled.div`
-  font-feature-settings: "tnum";
-  mark {
-    background: #e6faec;
-    background-blend-mode: darken;
-    font-weight: 600;
-  }
-`;
-
-const TableLayout = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
-const StyledTypography = styled(Typography)`
-  padding: 1rem 0 1rem 0;
-`;
 export default MessageComparisonModal;

Src/WitsmlExplorer.Frontend/components/Modals/ObjectPickerModal.tsx

@@ -44,6 +44,10 @@ const ObjectPickerModal = (props: ObjectPickerProps): React.ReactElement => {
   };
 
   const onPaste = () => {
+    if (objectReference.serverUrl) {
+      const server = servers.find((server) => server.url.toLowerCase() == objectReference.serverUrl.toLowerCase());
+      setTargetServer(server);
+    }
     setWellUid(objectReference.wellUid);
     setWellboreUid(objectReference.wellboreUid);
     setObjectUid(objectReference.objectUids[0]);