fix: input and button design

MarvinBo44 · Aug 21, 2023 · 06c839d · 06c839d
1 parent 0393e3c
commit 06c839d
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 8 deletions.
diff --git a/frontend/src/SearchCity.tsx b/frontend/src/SearchCity.tsx
@@ -2,7 +2,7 @@
 
 
 // import {useState} from "react";
-import {Button, FormGroup, TextField} from "@mui/material";
+import {Box, Button, FormGroup, Grid, TextField} from "@mui/material";
 import {useState} from "react";
 
 export default function SearchCity(props) {
@@ -21,14 +21,21 @@ export default function SearchCity(props) {
     };
 
     return (
-        <FormGroup>
+        <Grid container={true}
+        flexDirection={'row'}>
             <TextField
                 id="outlined-basic"
                 label={"Name der Stadt"}
                 variant="outlined"
                 value={inputValue}
+                size={'small'}
+                InputProps={{style: {background: 'white'}}}
                 onChange={handleInputChange}
-            /><Button onClick={handleClick}>ok</Button>
-        </FormGroup>
+            /><Button
+            onClick={handleClick}
+            variant={"contained"}
+            color={'info'}
+        >ok</Button>
+        </Grid>
     );
 }
diff --git a/frontend/src/Settings.tsx b/frontend/src/Settings.tsx
@@ -1,15 +1,31 @@
 import AddActivity from "./Menubar/AddActivity.tsx";
-import {Box, Grid, TextField} from "@mui/material";
+import {Box, Button, Grid, TextField} from "@mui/material";
 import SearchCity from "./SearchCity.tsx";
+import {useState} from "react";
 
 export default function Settings(props) {
+
+    // Local state to hold the current value of the input
+    const [inputValue, setInputValue] = useState('');
+
+    // Handler function for the TextField's onChange event
+    const handleInputChange = (event) => {
+        setInputValue(event.target.value);
+    };
+
+    // Handler function for the button's onClick event
+    const handleClick = () => {
+        props.setCity(inputValue);
+    };
+
+
     return <>
         <Grid container={true}
               justifyContent={'center'}
               marginBottom={'2%'}
         >
             <Box position={'absolute'}
-                 width={'800px'}
+                 width={'500px'}
                  sx={{
                      borderTop: 65, borderTopColor: "#3866B2FF",
                      borderLeft: 100, borderLeftColor: 'transparent',
@@ -18,11 +34,23 @@ export default function Settings(props) {
             <Grid container={true}
                   p={'10px'}
                   width={'fit-content'}
-                  gap={'20px'}
+                  gap={'10px'}
                   wrap={'wrap'}
             >
                 <AddActivity setDayActivity={props.setDayActivity}/>
-                <SearchCity setCity={props.setCity}/>
+                {/*<SearchCity setCity={props.setCity}/>*/}
+                <TextField
+                    variant={'outlined'}
+                    value={inputValue}
+                    size={'small'}
+                    placeholder={'Name der Stadt'}
+                    InputProps={{style: {background: 'white'}}}
+                    onChange={handleInputChange}
+                /><Button
+                onClick={handleClick}
+                variant={"contained"}
+                color={'info'}
+            >ok</Button>
             </Grid>
         </Grid>
     </>