diff --git a/pages/index.tsx b/pages/index.tsx
index 82596894581565906cee621e818e4d016e02dd39..1a1cfc972e3b31e19298bff0300678bc0bf5e78f 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -4,8 +4,6 @@ import AppBar from '@mui/material/AppBar'
import Box from '@mui/material/Box'
import Toolbar from '@mui/material/Toolbar'
import Typography from '@mui/material/Typography'
-import InputBase from '@mui/material/InputBase'
-import SearchIcon from '@mui/icons-material/Search'
import Paper from '@mui/material/Paper'
import Grid from '@mui/material/Grid'
import Avatar from '@mui/material/Avatar'
@@ -20,8 +18,9 @@ import MenuItem from '@mui/material/MenuItem'
import Select from '@mui/material/Select'
import Stack from '@mui/material/Stack'
import Link from 'next/link'
+import QueryPanel from 'src/components/header/QueryPanel'
-const info = ('This is the FDO Manager. The hardware and infrastructure for this test instance are provided by GWDG. IndiScale is responsible for the architecture and implementation.')
+const info = ('Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.')
const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
@@ -31,48 +30,6 @@ const Item = styled(Paper)(({ theme }) => ({
color: theme.palette.text.secondary
}))
-const Search = styled('div')(({ theme }) => ({
- position: 'relative',
- borderRadius: theme.shape.borderRadius,
- backgroundColor: alpha(theme.palette.common.white, 0.15),
- '&:hover': {
- backgroundColor: alpha(theme.palette.common.white, 0.25)
- },
- marginLeft: 0,
- width: '100%',
- [theme.breakpoints.up('sm')]: {
- marginLeft: theme.spacing(1),
- width: '250px'
- }
-}))
-
-const SearchIconWrapper = styled('div')(({ theme }) => ({
- padding: theme.spacing(0, 2),
- height: '100%',
- position: 'absolute',
- pointerEvents: 'none',
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center'
-}))
-
-const StyledInputBase = styled(InputBase)(({ theme }) => ({
- color: 'inherit',
- width: '100%',
- '& .MuiInputBase-input': {
- padding: theme.spacing(1, 1, 1, 0),
- // vertical padding + font size from searchIcon
- paddingLeft: `calc(1em + ${theme.spacing(4)})`,
- transition: theme.transitions.create('width'),
- [theme.breakpoints.up('sm')]: {
- width: '12ch',
- '&:focus': {
- width: '20ch'
- }
- }
- }
-}))
-
export default function Index () {
const { mode, setMode } = useContext(ColorModeContext)
const { locale: currentLocale, locales, pathname, query } = useRouter()
@@ -92,16 +49,15 @@ export default function Index () {
FDO MANAGER
</Typography>
- <Search>
- <SearchIconWrapper>
- <SearchIcon />
- </SearchIconWrapper>
- <StyledInputBase
- placeholder="Search…"
- inputProps={{ 'aria-label': 'search' }}
- />
- </Search>
- <Stack marginLeft={3}>
+ <Stack
+ direction="row"
+ width="80%"
+ justifyContent="flex-end"
+ alignItems="center"
+ gap="14px"
+ >
+ <QueryPanel/>
+
<FormControl sx={{ minWidth: 64 }}>
<Select
disableUnderline
@@ -132,23 +88,9 @@ export default function Index () {
defaultValue={lang}
value={lang}
>
- <Stack
- direction="row"
- alignItems="center"
- justifyContent="center"
- >
- <Avatar
- sx={{
- width: '24px',
- height: '24px',
- marginRight: '5px'
- }}
- src={`/images/flags/${lang}.svg`}
- />
<Typography>
{lang === 'en' ? 'English' : 'German'}
</Typography>
- </Stack>
</MenuItem>
))}
</Select>
@@ -169,8 +111,10 @@ export default function Index () {
</AppBar>
<Grid container spacing={2} columns={10} justifyContent="center" alignItems="center" marginTop={2}>
- <Grid item xs={6}>
- <Item><h1>Projektinfo mit Atomgrafik</h1>{info}<br/>{info}<br/>{info}<br/>{info}<br/></Item>
+ <Grid item xs={6}>
+ <Item><h1>Projektinfo mit Atomgrafik</h1></Item>
+ <Item>{info}<br/></Item>
+ <Item>Hallo</Item>
</Grid>
</Grid>
diff --git a/public/images/FDO-Atom.png b/public/images/FDO-Atom.png
new file mode 100644
index 0000000000000000000000000000000000000000..e1661fc9b0ee8ebd9bc2b4798971e15fe57181c8
Binary files /dev/null and b/public/images/FDO-Atom.png differ
diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
index 5aa8beed8f6fef5a1219d64e285727092b09c798..e1f300b4fb1e1486a2f1032019a1190b24b915b0 100644
--- a/src/components/header/index.tsx
+++ b/src/components/header/index.tsx
@@ -2,7 +2,6 @@ import { ColorModeContext } from '@contexts'
import DarkModeOutlined from '@mui/icons-material/DarkModeOutlined'
import LightModeOutlined from '@mui/icons-material/LightModeOutlined'
import AppBar from '@mui/material/AppBar'
-import Avatar from '@mui/material/Avatar'
import FormControl from '@mui/material/FormControl'
import IconButton from '@mui/material/IconButton'
import MenuItem from '@mui/material/MenuItem'
@@ -75,14 +74,6 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
alignItems="center"
justifyContent="center"
>
- <Avatar
- sx={{
- width: '24px',
- height: '24px',
- marginRight: '5px'
- }}
- src={`/images/flags/${lang}.svg`}
- />
<Typography>
{lang === 'en' ? 'English' : 'German'}
</Typography>