add different colors for non-clickable files list

client/src/Annotator/reducers/general-reducer.js

@@ -175,7 +175,9 @@ export default (state, action) => {
     case "SELECT_FILE": {
       const { selected } = action
       if (!activeImage) return state
-      return setIn(state, [...pathToActiveImage, "selected"], selected)
+      const updatedState = setIn(state, [...pathToActiveImage, "selected"], selected);
+      const isAnyImageSelected = updatedState.images.some(image => image.selected);
+      return setIn(updatedState, ["enabledDownload"], isAnyImageSelected);
     }
 
     case "SELECT_REGION": {

client/src/FilesListMenu/index.jsx

@@ -106,6 +106,13 @@ export const FilesListMenu = ({
                     selectedImage !== null && selectedImage !== index
                       ? "not-allowed"
                       : "pointer",
+                   "&.Mui-disabled": {
+                        background: !hasRegions(index) ? muiColors.grey[400] : "auto",
+                        cursor: "not-allowed",
+                        borderRadius: 0,
+                        width: 14,
+                        height: 14,
+                      },
                 }}
                 checked={image.selected}
                 onClick={() => handleCheckBoxClick(image, index)}

client/src/ThemeContext/index.jsx

@@ -12,7 +12,6 @@ export const ThemeProvider = ({ children }) => {
   }
 
   const preferredColorScheme = getPreferredColorScheme();
-  console.log(`Preferred color scheme: ${preferredColorScheme}`);
 
   const [theme, setTheme] = useState(preferredColorScheme); // Default to browser theme