From 8c80b39c68025a7320166f2d32abbc9ef9d52616 Mon Sep 17 00:00:00 2001
From: Tim Fischer <tim.fischer@uni-hamburg.de>
Date: Wed, 12 Jun 2024 16:30:31 +0000
Subject: [PATCH] grey background for code frequency view

---
 .../src/components/User/UserSelectorMulti.tsx | 22 ++++++++++++++++---
 .../CodeFrequency/CodeFrequencyAnalysis.tsx   |  4 +++-
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/User/UserSelectorMulti.tsx b/frontend/src/components/User/UserSelectorMulti.tsx
index fdacc3fc7..ae4bb66a9 100644
--- a/frontend/src/components/User/UserSelectorMulti.tsx
+++ b/frontend/src/components/User/UserSelectorMulti.tsx
@@ -1,4 +1,13 @@
-import { Checkbox, FormControl, InputLabel, ListItemText, MenuItem, Select, SelectChangeEvent } from "@mui/material";
+import {
+  Checkbox,
+  FormControl,
+  FormControlProps,
+  InputLabel,
+  ListItemText,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+} from "@mui/material";
 import React from "react";
 import ProjectHooks from "../../api/ProjectHooks.ts";
 import UserName from "./UserName.tsx";
@@ -10,7 +19,13 @@ interface UserSelectorProps {
   title: string;
 }
 
-function UserSelectorMulti({ projectId, userIds, onUserIdChange, title }: UserSelectorProps) {
+function UserSelectorMulti({
+  projectId,
+  userIds,
+  onUserIdChange,
+  title,
+  ...props
+}: UserSelectorProps & FormControlProps) {
   // global server state (react query)
   const projectUsers = ProjectHooks.useGetAllUsers(projectId);
 
@@ -21,7 +36,7 @@ function UserSelectorMulti({ projectId, userIds, onUserIdChange, title }: UserSe
 
   // render
   return (
-    <FormControl>
+    <FormControl {...props}>
       <InputLabel id="multi-user-select-label">{title}</InputLabel>
       <Select
         labelId="multi-user-select-label"
@@ -30,6 +45,7 @@ function UserSelectorMulti({ projectId, userIds, onUserIdChange, title }: UserSe
         multiple
         onChange={handleChange}
         disabled={!projectUsers.isSuccess}
+        fullWidth
         renderValue={(userIds) =>
           userIds.map((userId, index) => (
             <React.Fragment key={userId}>
diff --git a/frontend/src/views/analysis/CodeFrequency/CodeFrequencyAnalysis.tsx b/frontend/src/views/analysis/CodeFrequency/CodeFrequencyAnalysis.tsx
index 7407a13ec..d38808b01 100644
--- a/frontend/src/views/analysis/CodeFrequency/CodeFrequencyAnalysis.tsx
+++ b/frontend/src/views/analysis/CodeFrequency/CodeFrequencyAnalysis.tsx
@@ -29,7 +29,7 @@ function CodeFrequencyAnalysis() {
   }, [selectedUserIds]);
 
   return (
-    <Grid container columnSpacing={1} className="h100" px={2} pt={2}>
+    <Grid container columnSpacing={1} className="h100" px={2} pt={2} bgcolor="grey.200">
       {codeTree ? (
         <>
           <Portal container={appBarContainerRef?.current}>
@@ -44,6 +44,8 @@ function CodeFrequencyAnalysis() {
                 userIds={selectedUserIds}
                 onUserIdChange={setSelectedUserIds}
                 title="User(s)"
+                fullWidth
+                sx={{ bgcolor: "background.paper" }}
               />
               {selectedUserIds.length === 0 ? (
                 <Card variant="outlined">