ui: add animation in FilterMenu

openkfw · Aug 3, 2022 · 05222fe · 05222fe
1 parent 9390655
commit 05222fe
Showing 1 changed file with 16 additions and 10 deletions.
diff --git a/frontend/src/pages/Overview/FilterMenu.js b/frontend/src/pages/Overview/FilterMenu.js
@@ -2,12 +2,18 @@ import React from "react";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import MenuItem from "@mui/material/MenuItem";
+import { keyframes } from "@mui/system";
 
 import strings from "../../localizeStrings";
 import DropDown from "../Common/NewDropdown";
 import DatePicker from "../Common/DatePicker";
 
-const FilterMenu = props => {
+const flyInAnimation = keyframes`
+0%   { opacity: 0; }
+100% { opacity: 1; }
+`;
+
+const FilterMenu = (props) => {
   const {
     startDate,
     setStartDate,
@@ -22,32 +28,32 @@ const FilterMenu = props => {
   } = props;
 
   return (
-    <Box data-test="filter-menu">
-      <Box sx={{ display: "flex", margin: "0px" }}>
+    <Box data-test="filter-menu" style={{}}>
+      <Box sx={{ display: "flex", margin: "0px", animation: `${flyInAnimation} 1s ease` }}>
         <Box sx={{ marginLeft: "0px" }}>
           <DatePicker
             id="filter-start"
             label={strings.history.start_date}
             name="start"
             datetime={startDate}
-            onChange={selectedDate => setStartDate(selectedDate)}
+            onChange={(selectedDate) => setStartDate(selectedDate)}
             onDelete={() => setStartDate(null)}
           />
           <DatePicker
             id="filter-end"
             label={strings.history.end_date}
             name="end"
             datetime={endDate}
-            onChange={selectedDate => setEndDate(selectedDate)}
+            onChange={(selectedDate) => setEndDate(selectedDate)}
             onDelete={() => setEndDate(null)}
           />
         </Box>
         <Box>
           <DropDown
             style={{ minWidth: 200, marginLeft: "10px" }}
             value={status}
-            floatingLabel={"Status"}
-            onChange={x => setStatus(x)}
+            floatingLabel={strings.common.status}
+            onChange={(x) => setStatus(x)}
             id="status-select"
           >
             <MenuItem key={"status-all"} value={"all"}>
@@ -64,14 +70,14 @@ const FilterMenu = props => {
           <DropDown
             style={{ minWidth: 200, marginLeft: "10px" }}
             value={assigneeId}
-            floatingLabel={"Assignee"}
-            onChange={x => setAssigneeId(x)}
+            floatingLabel={strings.common.assignee}
+            onChange={(x) => setAssigneeId(x)}
             id="assignee-select"
           >
             <MenuItem key={"assignee-all"} value={"all"}>
               {strings.common.all}
             </MenuItem>
-            {users.map(u => {
+            {users.map((u) => {
               return (
                 <MenuItem key={"assignee-" + u.id} value={u.id}>
                   {u.id}