Dialog component

src/components/infos/Infos.module.css

@@ -1,28 +0,0 @@
-.control {
-  opacity: 1;
-  position: fixed !important;
-  top: 0px;
-  margin-left: calc(100% - 70px) !important;
-  z-index: 1;
-}
-
-.dialog {
-  min-width: 500px;
-}
-
-.title {
-  background-color: rgba(14, 116, 144, 0.7);
-  color: white;
-  clear: both;
-}
-
-.close {
-  align-self: right;
-  margin-right: 2px;
-  padding-top: 16px;
-}
-
-.body {
-  padding: 20px;
-  background-color: rgba(255, 255, 255, 0.7);
-}

src/components/infos/Infos.tsx

@@ -1,26 +1,14 @@
-import {
+import { Grid, IconButton } from '@suid/material';
-  Box,
-  Dialog,
-  DialogContent,
-  DialogTitle,
-  Grid,
-  IconButton,
-  Typography,
-} from '@suid/material';
 import { Feature } from 'ol';
 import { Geometry } from 'ol/geom';
 import { Component, createSignal, For } from 'solid-js';
 import { unwrap } from 'solid-js/store';
-import {
+import { useI18n } from '@solid-primitives/i18n';
-  I18nContext,
-  createI18nContext,
-  useI18n,
-} from '@solid-primitives/i18n';
 import CloseIcon from '@suid/icons-material/Close';
 import { tree } from '../map';
-import style from './Infos.module.css';
 import { Paper, Stack } from '@suid/material';
 import styled from '@suid/material/styles/styled';
+import Dialog from '../dialog';
 
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
@@ -63,45 +51,29 @@ export const clickHandler = (event: any) => {
 
 const Infos: Component<{}> = (props) => {
   const [t, { add, locale, dict }] = useI18n();
-  const handleClickOpen = () => {
+  const handleClick = () => {
-    setOpen(true);
-  };
-  const handleClose = () => {
     setOpen(false);
   };
 
   return (
-    <Dialog
+    <Dialog closeHandler={handleClick} open={open()} title={t('nearby')}>
-      onClose={handleClose}
+      <Stack
-      open={open()}
+        spacing={1}
-      class={style.dialog}
+        direction='column'
-      PaperProps={{ sx: { minWidth: '300px' } }}
+        alignItems='center'
+        sx={{ width: 'calc(100% - 5px)' }}
       >
-      <DialogTitle class={style.title}>
-        <Grid container spacing={2} alignItems='center'>
-          <Grid item xs={11}>
-            <div>{t('nearby')}</div>
-          </Grid>
-          <Grid item xs={1} class={style.close}>
-            <IconButton onClick={handleClose}>
-              <CloseIcon />
-            </IconButton>
-          </Grid>
-        </Grid>
-      </DialogTitle>
-      <DialogContent>
-        <Stack spacing={1} direction='column' alignItems='left'>
         <For each={selectedFeatures}>
           {(feature) => (
-              <Item sx={{ width: '95%' }}>
+            <Item sx={{ width: 'calc(100% - 1px)' }}>
-                <Grid container spacing={2}  alignItems='left'>
+              <Grid container spacing={2} alignItems='center'>
                 <Grid item xs={11}>
                   {feature.get('name')
                     ? `${feature.get('name')} (${t(feature.get('type'))})`
                     : t(feature.get('type'))}
                 </Grid>
-                  <Grid item xs={1}>
+                <Grid item xs={1} sx={{ paddingLeft: '0px' }}>
-                    <IconButton onClick={handleClose}>
+                  <IconButton onClick={handleClick}>
                     <CloseIcon />
                   </IconButton>
                 </Grid>
@@ -110,7 +82,6 @@ const Infos: Component<{}> = (props) => {
           )}
         </For>
       </Stack>
-      </DialogContent>
     </Dialog>
   );
 };