From 16c2d1baaf027c83b980c2411b567ee39c11fb24 Mon Sep 17 00:00:00 2001
From: Paulo Gustavo Veiga <pveiga@wisemapping.com>
Date: Sat, 6 Feb 2021 09:06:14 -0800
Subject: [PATCH] Improve UI

---
 .../action-dispatcher/publish-dialog/index.tsx   | 16 +++++-----------
 .../action-dispatcher/publish-dialog/style.ts    | 11 +++++++++++
 .../src/components/maps-page/maps-list/index.tsx |  4 ++--
 3 files changed, 18 insertions(+), 13 deletions(-)
 create mode 100644 packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/style.ts

diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/index.tsx
index 1149879d..11f95062 100644
--- a/packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { useMutation, useQueryClient } from 'react-query';
 import { useSelector } from 'react-redux';
-import { AppBar, Checkbox, FormControl, FormControlLabel, Tab, Typography } from '@material-ui/core';
+import { AppBar, Checkbox, FormControl, FormControlLabel, Tab, TextareaAutosize, Typography } from '@material-ui/core';
 
 
 import Client, { ErrorInfo } from '../../../../client';
@@ -10,6 +10,7 @@ import { activeInstance } from '../../../../redux/clientSlice';
 import BaseDialog from '../base-dialog';
 import { TabContext, TabList, TabPanel } from '@material-ui/lab';
 import { fetchMapById, handleOnMutationSuccess } from '..';
+import { useStyles } from './style';
 
 export type PublishProps = {
     mapId: number,
@@ -27,6 +28,7 @@ const PublishDialog = (props: PublishProps) => {
     const queryClient = useQueryClient();
     const intl = useIntl();
 
+    const classes = useStyles();
     const mutation = useMutation<void, ErrorInfo, boolean>((model: boolean) => {
         return client.updateMapToPublic(mapId, model);
     },
@@ -93,21 +95,13 @@ const PublishDialog = (props: PublishProps) => {
                             <Typography variant="subtitle2">
                                 <FormattedMessage id="publish.embedded-msg" defaultMessage="Copy this snippet of code to embed in your blog or page:" />
                             </Typography>
-                            <p>
-                                <textarea style={{ width: "100%" }}>
-                                    {`<iframe style="width:600px;height:400px;border:1px solid black" src="https://app.wisemapping.com/c/maps/${mapId}/embed?zoom=1.0"></iframe>`}
-                                </textarea>
-                            </p>
+                            <TextareaAutosize className={classes.textarea} readOnly={true} spellCheck={false} rowsMax={6} defaultValue={`<iframe style="width:600px;height:400px;border:1px solid black" src="https://app.wisemapping.com/c/maps/${mapId}/embed?zoom=1.0"></iframe>`} />
                         </TabPanel>
                         <TabPanel value="2">
                             <Typography variant="subtitle2">
                                 <FormattedMessage id="publish.public-url-msg" defaultMessage="Copy and paste the link below to share your map with colleagues:" />
                             </Typography>
-                            <p>
-                                <textarea style={{ width: "100%" }}>
-                                    {`https://app.wisemapping.com/c/maps/${mapId}/public`}
-                                </textarea>
-                            </p>
+                            <TextareaAutosize className={classes.textarea} readOnly={true} spellCheck={false} rowsMax={1} defaultValue={`https://app.wisemapping.com/c/maps/${mapId}/public`} />
                         </TabPanel>
                     </TabContext>
                 </div>
diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/style.ts b/packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/style.ts
new file mode 100644
index 00000000..067722d5
--- /dev/null
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/style.ts
@@ -0,0 +1,11 @@
+import { createStyles, makeStyles, Theme } from "@material-ui/core";
+
+export const useStyles = makeStyles((theme: Theme) =>
+    createStyles({
+        textarea: {
+            width: '100%',
+            padding: '15px 15px',
+            marging: '0px 10px'
+        }
+    }),
+);
\ No newline at end of file
diff --git a/packages/webapp/src/components/maps-page/maps-list/index.tsx b/packages/webapp/src/components/maps-page/maps-list/index.tsx
index bf302f8e..4cbf5cf3 100644
--- a/packages/webapp/src/components/maps-page/maps-list/index.tsx
+++ b/packages/webapp/src/components/maps-page/maps-list/index.tsx
@@ -311,7 +311,7 @@ export const MapsList = (props: MapsListProps) => {
     }
     setActiveRowAction(undefined);
   };
-
+  
   const handleOnSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchCondition(e.target.value);
   }
@@ -319,7 +319,7 @@ export const MapsList = (props: MapsListProps) => {
   const isSelected = (id: number) => selected.indexOf(id) !== -1;
   return (
     <div className={classes.root}>
-      <ActionChooser anchor={activeRowAction?.el} onClose={handleActionMenuClose} mapId={activeRowAction?.mapId} />
+            <ActionChooser anchor={activeRowAction?.el} onClose={handleActionMenuClose} mapId={activeRowAction?.mapId} />
 
       <Paper className={classes.paper} elevation={0}>
         <Toolbar className={classes.toolbar} variant="dense">