From 776bf6a4484dd432e17c9ad99b3f48bbe2710784 Mon Sep 17 00:00:00 2001
From: Johanna Szepanski <johanna.szepanski@softhouse.se>
Date: Fri, 22 Mar 2024 11:30:20 +0100
Subject: [PATCH 1/2] Changed preview button background color when selected

---
 .../common/FileViewer/FileList/FileList.js    | 19 ++++++++-----------
 .../FileListViewer/FileListViewer.js          |  8 +-------
 2 files changed, 9 insertions(+), 18 deletions(-)

diff --git a/src/components/common/FileViewer/FileList/FileList.js b/src/components/common/FileViewer/FileList/FileList.js
index d94efe87..0a696f70 100644
--- a/src/components/common/FileViewer/FileList/FileList.js
+++ b/src/components/common/FileViewer/FileList/FileList.js
@@ -17,7 +17,7 @@ import {
   Tooltip
 } from "@mui/material";
 import { Preview, ErrorOutline } from "@mui/icons-material";
-import { array, func, string } from "prop-types";
+import { array, func } from "prop-types";
 import { theme } from "../../../../style/Theme";
 
 const propTypes = {
@@ -27,10 +27,6 @@ const propTypes = {
   selectedFiles: array,
   /** Callback function getting state from parent */
   setSelectedFiles: func,
-  /** String containing name of file now being
-   * previewed function getting state from parent
-   */
-  previewedFile: string,
   /** Callback function getting state from parent */
   setPreviewedFile: func,
   /** Callback function getting file name for validation */
@@ -50,7 +46,6 @@ export function FileList({
   fileNames,
   selectedFiles,
   setSelectedFiles,
-  previewedFile,
   setPreviewedFile,
   isValid,
   getErrorMessage
@@ -142,11 +137,13 @@ export function FileList({
                     )}
                     <IconButton
                       color="inherit"
-                      sx={
-                        file === previewedFile
-                          ? { backgroundColor: "#0000000a" }
-                          : undefined
-                      }
+                      sx={[
+                        {
+                          "&:focus": {
+                            backgroundColor: "#cccccc"
+                          }
+                        }
+                      ]}
                       edge="end"
                       aria-label="preview"
                       onClick={() => setPreviewedFile(file)}
diff --git a/src/components/common/FileViewer/FileListViewer/FileListViewer.js b/src/components/common/FileViewer/FileListViewer/FileListViewer.js
index 9c124214..87febcf0 100644
--- a/src/components/common/FileViewer/FileListViewer/FileListViewer.js
+++ b/src/components/common/FileViewer/FileListViewer/FileListViewer.js
@@ -5,7 +5,7 @@
  */
 import React from "react";
 import { Grid } from "@mui/material";
-import { array, node, arrayOf, oneOfType, func, string } from "prop-types";
+import { array, node, arrayOf, oneOfType, func } from "prop-types";
 import { FileList } from "../FileList";
 
 const propTypes = {
@@ -22,10 +22,6 @@ const propTypes = {
   selectedFiles: array,
   /** Callback function getting state from parent */
   setSelectedFiles: func,
-  /** String containing name of file now being
-   * previewed function getting state from parent
-   */
-  previewedFile: string,
   /** Callback function getting state from parent */
   setPreviewedFile: func,
   /** Callback function getting file name for validation */
@@ -38,7 +34,6 @@ export function FileListViewer({
   fileNames,
   selectedFiles,
   setSelectedFiles,
-  previewedFile,
   setPreviewedFile,
   isValid,
   getErrorMessage,
@@ -57,7 +52,6 @@ export function FileListViewer({
           fileNames={fileNames}
           selectedFiles={selectedFiles}
           setSelectedFiles={setSelectedFiles}
-          previewedFile={previewedFile}
           setPreviewedFile={setPreviewedFile}
           isValid={isValid}
           getErrorMessage={getErrorMessage}
-- 
GitLab


From a83831f80807d4a1b398ff2fa18e7dfb06b18a64 Mon Sep 17 00:00:00 2001
From: Johanna Szepanski <johanna.szepanski@softhouse.se>
Date: Fri, 22 Mar 2024 11:58:33 +0100
Subject: [PATCH 2/2] resinstated the check against previewfile

---
 .../common/FileViewer/FileList/FileList.js    | 19 +++++++++++--------
 .../FileListViewer/FileListViewer.js          |  8 +++++++-
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/common/FileViewer/FileList/FileList.js b/src/components/common/FileViewer/FileList/FileList.js
index 0a696f70..f6ac55b5 100644
--- a/src/components/common/FileViewer/FileList/FileList.js
+++ b/src/components/common/FileViewer/FileList/FileList.js
@@ -17,7 +17,7 @@ import {
   Tooltip
 } from "@mui/material";
 import { Preview, ErrorOutline } from "@mui/icons-material";
-import { array, func } from "prop-types";
+import { array, func, string } from "prop-types";
 import { theme } from "../../../../style/Theme";
 
 const propTypes = {
@@ -27,6 +27,10 @@ const propTypes = {
   selectedFiles: array,
   /** Callback function getting state from parent */
   setSelectedFiles: func,
+  /** String containing name of file now being
+   * previewed function getting state from parent
+   */
+  previewedFile: string,
   /** Callback function getting state from parent */
   setPreviewedFile: func,
   /** Callback function getting file name for validation */
@@ -46,6 +50,7 @@ export function FileList({
   fileNames,
   selectedFiles,
   setSelectedFiles,
+  previewedFile,
   setPreviewedFile,
   isValid,
   getErrorMessage
@@ -137,13 +142,11 @@ export function FileList({
                     )}
                     <IconButton
                       color="inherit"
-                      sx={[
-                        {
-                          "&:focus": {
-                            backgroundColor: "#cccccc"
-                          }
-                        }
-                      ]}
+                      sx={
+                        file === previewedFile
+                          ? { backgroundColor: "#cccccc" }
+                          : undefined
+                      }
                       edge="end"
                       aria-label="preview"
                       onClick={() => setPreviewedFile(file)}
diff --git a/src/components/common/FileViewer/FileListViewer/FileListViewer.js b/src/components/common/FileViewer/FileListViewer/FileListViewer.js
index 87febcf0..9c124214 100644
--- a/src/components/common/FileViewer/FileListViewer/FileListViewer.js
+++ b/src/components/common/FileViewer/FileListViewer/FileListViewer.js
@@ -5,7 +5,7 @@
  */
 import React from "react";
 import { Grid } from "@mui/material";
-import { array, node, arrayOf, oneOfType, func } from "prop-types";
+import { array, node, arrayOf, oneOfType, func, string } from "prop-types";
 import { FileList } from "../FileList";
 
 const propTypes = {
@@ -22,6 +22,10 @@ const propTypes = {
   selectedFiles: array,
   /** Callback function getting state from parent */
   setSelectedFiles: func,
+  /** String containing name of file now being
+   * previewed function getting state from parent
+   */
+  previewedFile: string,
   /** Callback function getting state from parent */
   setPreviewedFile: func,
   /** Callback function getting file name for validation */
@@ -34,6 +38,7 @@ export function FileListViewer({
   fileNames,
   selectedFiles,
   setSelectedFiles,
+  previewedFile,
   setPreviewedFile,
   isValid,
   getErrorMessage,
@@ -52,6 +57,7 @@ export function FileListViewer({
           fileNames={fileNames}
           selectedFiles={selectedFiles}
           setSelectedFiles={setSelectedFiles}
+          previewedFile={previewedFile}
           setPreviewedFile={setPreviewedFile}
           isValid={isValid}
           getErrorMessage={getErrorMessage}
-- 
GitLab