From c7157fc71f0dc3c8f2c9495d19dea24e63527f5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20V=C3=A1clav=C3=ADk?= <jvaclavik@gmail.com>
Date: Sat, 12 Oct 2024 11:09:30 +0200
Subject: [PATCH] EditDialog: Improve logged out alert (#665)

---
 src/components/FeaturePanel/EditButton.tsx    |  9 ++++-
 .../EditDialog/EditContent/EditContent.tsx    |  6 ++-
 .../EditDialog/EditContent/OsmLogin.tsx       | 38 -------------------
 .../EditDialog/EditContent/OsmUserLogged.tsx  | 23 +++++++++++
 .../EditContent/OsmUserLoggedOut.tsx          | 25 ++++++++++++
 .../EditDialog/EditDialogTitle.tsx            | 18 ++++-----
 src/helpers/GlobalStyle.tsx                   |  4 --
 src/locales/am.js                             |  4 +-
 src/locales/cs.js                             |  4 +-
 src/locales/de.js                             |  5 +--
 src/locales/es.js                             |  4 +-
 src/locales/fr.js                             |  4 +-
 src/locales/it.js                             |  5 +--
 src/locales/pl.js                             |  5 +--
 src/locales/vocabulary.js                     |  4 +-
 15 files changed, 79 insertions(+), 79 deletions(-)
 delete mode 100644 src/components/FeaturePanel/EditDialog/EditContent/OsmLogin.tsx
 create mode 100644 src/components/FeaturePanel/EditDialog/EditContent/OsmUserLogged.tsx
 create mode 100644 src/components/FeaturePanel/EditDialog/EditContent/OsmUserLoggedOut.tsx

diff --git a/src/components/FeaturePanel/EditButton.tsx b/src/components/FeaturePanel/EditButton.tsx
index 7850e085a..b22b73447 100644
--- a/src/components/FeaturePanel/EditButton.tsx
+++ b/src/components/FeaturePanel/EditButton.tsx
@@ -6,6 +6,7 @@ import { t } from '../../services/intl';
 import { useOsmAuthContext } from '../utils/OsmAuthContext';
 import { useEditDialogContext } from './helpers/EditDialogContext';
 import { useEditDialogFeature } from './EditDialog/utils';
+import CommentIcon from '@mui/icons-material/Comment';
 
 const getLabel = (
   loggedIn: boolean,
@@ -28,7 +29,13 @@ export const EditButton = () => {
       <Button
         size="large"
         startIcon={
-          isAddPlace || isUndelete ? <AddLocationIcon /> : <EditIcon />
+          isAddPlace || isUndelete ? (
+            <AddLocationIcon />
+          ) : loggedIn ? (
+            <EditIcon />
+          ) : (
+            <CommentIcon />
+          )
         }
         variant="outlined"
         color="primary"
diff --git a/src/components/FeaturePanel/EditDialog/EditContent/EditContent.tsx b/src/components/FeaturePanel/EditDialog/EditContent/EditContent.tsx
index 257b2100a..18a4d75ae 100644
--- a/src/components/FeaturePanel/EditDialog/EditContent/EditContent.tsx
+++ b/src/components/FeaturePanel/EditDialog/EditContent/EditContent.tsx
@@ -6,20 +6,22 @@ import { OtherTagsEditor } from './OtherTagsEditor';
 import { EditDialogActions } from './EditDialogActions';
 import { OptionsEditor } from './OptionsEditor';
 import { CommentField } from './CommentField';
-import { OsmLogin } from './OsmLogin';
+import { OsmUserLogged } from './OsmUserLogged';
 import { ContributionInfoBox } from './ContributionInfoBox';
+import { OsmUserLoggedOut } from './OsmUserLoggedOut';
 
 export const EditContent = () => (
   <>
     <DialogContent dividers>
       <form autoComplete="off" onSubmit={(e) => e.preventDefault()}>
+        <OsmUserLoggedOut />
         {false && <FeatureTypeSelect />}
         <MajorKeysEditor />
         <OptionsEditor />
         <ContributionInfoBox />
         <CommentField />
         <OtherTagsEditor />
-        <OsmLogin />
+        <OsmUserLogged />
       </form>
     </DialogContent>
     <EditDialogActions />
diff --git a/src/components/FeaturePanel/EditDialog/EditContent/OsmLogin.tsx b/src/components/FeaturePanel/EditDialog/EditContent/OsmLogin.tsx
deleted file mode 100644
index 991f4dcf6..000000000
--- a/src/components/FeaturePanel/EditDialog/EditContent/OsmLogin.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Typography } from '@mui/material';
-import React from 'react';
-import { useOsmAuthContext } from '../../../utils/OsmAuthContext';
-import { t, Translation } from '../../../../services/intl';
-
-export const OsmLogin = () => {
-  const { loggedIn, osmUser, handleLogin, handleLogout } = useOsmAuthContext();
-
-  return (
-    <Typography variant="body2" color="textSecondary" paragraph>
-      {loggedIn ? (
-        <>
-          <Translation id="editdialog.loggedInMessage" values={{ osmUser }} /> (
-          <button
-            type="button"
-            className="linkLikeButton"
-            onClick={handleLogout}
-          >
-            {t('editdialog.logout')}
-          </button>
-          )
-        </>
-      ) : (
-        <>
-          <Translation id="editdialog.anonymousMessage1" />{' '}
-          <button
-            type="button"
-            className="linkLikeButton"
-            onClick={handleLogin}
-          >
-            {t('editdialog.anonymousMessage2_login')}
-          </button>
-          <Translation id="editdialog.anonymousMessage3" />
-        </>
-      )}
-    </Typography>
-  );
-};
diff --git a/src/components/FeaturePanel/EditDialog/EditContent/OsmUserLogged.tsx b/src/components/FeaturePanel/EditDialog/EditContent/OsmUserLogged.tsx
new file mode 100644
index 000000000..c50bf8d0d
--- /dev/null
+++ b/src/components/FeaturePanel/EditDialog/EditContent/OsmUserLogged.tsx
@@ -0,0 +1,23 @@
+import { Alert, Button } from '@mui/material';
+import React from 'react';
+import { useOsmAuthContext } from '../../../utils/OsmAuthContext';
+import { t, Translation } from '../../../../services/intl';
+
+export const OsmUserLogged = () => {
+  const { loggedIn, osmUser, handleLogout } = useOsmAuthContext();
+
+  if (!loggedIn) return null;
+
+  return (
+    <Alert
+      severity="info"
+      action={
+        <Button onClick={handleLogout} color="inherit">
+          {t('editdialog.logout')}
+        </Button>
+      }
+    >
+      <Translation id="editdialog.loggedInMessage" values={{ osmUser }} />
+    </Alert>
+  );
+};
diff --git a/src/components/FeaturePanel/EditDialog/EditContent/OsmUserLoggedOut.tsx b/src/components/FeaturePanel/EditDialog/EditContent/OsmUserLoggedOut.tsx
new file mode 100644
index 000000000..66059ff60
--- /dev/null
+++ b/src/components/FeaturePanel/EditDialog/EditContent/OsmUserLoggedOut.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Alert, Box, Button } from '@mui/material';
+import { useOsmAuthContext } from '../../../utils/OsmAuthContext';
+import { t, Translation } from '../../../../services/intl';
+
+export const OsmUserLoggedOut = () => {
+  const { loggedIn, handleLogin } = useOsmAuthContext();
+
+  if (loggedIn) return null;
+
+  return (
+    <Box sx={{ marginBottom: 2 }}>
+      <Alert
+        severity="warning"
+        action={
+          <Button sx={{ whiteSpace: 'nowrap' }} onClick={handleLogin}>
+            {t('user.login_register')}
+          </Button>
+        }
+      >
+        <Translation id="editdialog.anonymousMessage" />
+      </Alert>
+    </Box>
+  );
+};
diff --git a/src/components/FeaturePanel/EditDialog/EditDialogTitle.tsx b/src/components/FeaturePanel/EditDialog/EditDialogTitle.tsx
index 5a3368283..064c38773 100644
--- a/src/components/FeaturePanel/EditDialog/EditDialogTitle.tsx
+++ b/src/components/FeaturePanel/EditDialog/EditDialogTitle.tsx
@@ -1,11 +1,11 @@
-import { DialogTitle } from '@mui/material';
+import { DialogTitle, Stack } from '@mui/material';
 import React from 'react';
 import { useEditDialogFeature } from './utils';
-import { useUserThemeContext } from '../../../helpers/theme';
-import Maki from '../../utils/Maki';
 import { useOsmAuthContext } from '../../utils/OsmAuthContext';
 import { t } from '../../../services/intl';
 import { getLabel } from '../../../helpers/featureLabel';
+import CommentIcon from '@mui/icons-material/Comment';
+import EditIcon from '@mui/icons-material/Edit';
 
 const useGetDialogTitle = (isAddPlace, isUndelete, feature) => {
   const { loggedIn } = useOsmAuthContext();
@@ -17,19 +17,17 @@ const useGetDialogTitle = (isAddPlace, isUndelete, feature) => {
 };
 
 export const EditDialogTitle = () => {
+  const { loggedIn } = useOsmAuthContext();
   const { feature, isAddPlace, isUndelete } = useEditDialogFeature();
-  const { currentTheme } = useUserThemeContext();
 
   const dialogTitle = useGetDialogTitle(isAddPlace, isUndelete, feature);
 
   return (
     <DialogTitle id="edit-dialog-title">
-      <Maki
-        ico={feature.properties.class}
-        size={16}
-        invert={currentTheme === 'dark'}
-      />{' '}
-      {dialogTitle}
+      <Stack direction="row" gap={1} alignItems="center">
+        {loggedIn ? <EditIcon /> : <CommentIcon />}
+        {dialogTitle}
+      </Stack>
     </DialogTitle>
   );
 };
diff --git a/src/helpers/GlobalStyle.tsx b/src/helpers/GlobalStyle.tsx
index bb36c4db1..c39c681b0 100644
--- a/src/helpers/GlobalStyle.tsx
+++ b/src/helpers/GlobalStyle.tsx
@@ -42,19 +42,15 @@ const globalStyle = (theme: Theme) => css`
     background: transparent;
     outline: 0;
     cursor: pointer;
-
     &.colorInherit {
       color: inherit;
     }
-
     &:hover {
       text-decoration: underline;
     }
-
     &:focus {
       text-decoration: underline;
     }
-
     .MuiTooltip-tooltip & {
       color: #82dcff;
     }
diff --git a/src/locales/am.js b/src/locales/am.js
index f543f22a6..24334bf60 100644
--- a/src/locales/am.js
+++ b/src/locales/am.js
@@ -88,9 +88,7 @@ export default {
   'editdialog.changes_needed': 'እባክዎ, የተወሰኑ ማሻሻያዎች ያድርጉ',
   'editdialog.loggedInMessage': '<b>__osmUser__</b> በተሰኘው መለያ ገብተዋል, ለውጦች በፍጥነት ይቀመጣሉ',
   'editdialog.logout': 'ውጣ',
-  'editdialog.anonymousMessage1': '<b>መለያ የሌለው</b> ማስታወሻ በካርታው ላይ ይቀመጣል.<br />',
-  'editdialog.anonymousMessage2_login': 'OpenStreetMap ላይ ማህደር አስቀም',
-  'editdialog.anonymousMessage3': ', ያከናወኑት ለውጦች በፍጥነት ይታያሉ',
+  'editdialog.anonymousMessage': '<b>መለያ የሌለው</b> ማስታወሻ በካርታው ላይ ይቀመጣል. OpenStreetMap ላይ ማህደር አስቀም, ያከናወኑት ለውጦች በፍጥነት ይታያሉ',
   'editdialog.add_major_tag': 'ጨምር',
   'editdialog.location_checkbox': 'መገኛ ይቀይሩ',
   'editdialog.location_placeholder': 'ለምሳሌ፦ ከመንገዱ ተምሻግሮ',
diff --git a/src/locales/cs.js b/src/locales/cs.js
index e58b07ca2..87512e70b 100644
--- a/src/locales/cs.js
+++ b/src/locales/cs.js
@@ -131,9 +131,7 @@ export default {
   'editdialog.osm_session_expired': 'Vaše přihlášení do OpenStreetMap vypršelo. Prosím, přihlašte se znovu.',
   'editdialog.loggedInMessage': 'Jste přihlášeni jako <b>__osmUser__</b>, změny se ihned projeví v mapě.',
   'editdialog.logout': 'odhlásit',
-  'editdialog.anonymousMessage1': 'Vkládáte <b>anonymní</b> poznámku do mapy.<br />Pokud se',
-  'editdialog.anonymousMessage2_login': 'přihlásíte do OpenStreetMap',
-  'editdialog.anonymousMessage3': ', změny se ihned projeví v mapě.',
+  'editdialog.anonymousMessage': 'Vkládáte <b>anonymní</b> poznámku do mapy. Pokud se přihlásíte do OpenStreetMap, změny se ihned projeví v mapě.',
   'editdialog.add_major_tag': 'Přidat',
   'editdialog.location_checkbox': 'Zadat novou polohu',
   'editdialog.location_placeholder': 'např. naproti přes ulici',
diff --git a/src/locales/de.js b/src/locales/de.js
index e0bb3ba1c..176b7c98f 100644
--- a/src/locales/de.js
+++ b/src/locales/de.js
@@ -151,9 +151,8 @@ export default {
   'editdialog.osm_session_expired': 'Deine OpenStreetMap-Sitzung ist abgelaufen. Bitte melde Dich erneut an.',
   'editdialog.loggedInMessage': 'Du bist als <b>__osmUser__</b> eingeloggt, Änderungen werden sofort gespeichert.',
   'editdialog.logout': 'logout',
-  'editdialog.anonymousMessage1': 'Ein <b>anonyme</b> Notiz wird der Karte hinzugefügt.<br />Wenn du dich',
-  'editdialog.anonymousMessage2_login': 'auf OpenStreetMap einloggst',
-  'editdialog.anonymousMessage3': ', werden deine Änderungen direkt gespeichert.',
+  'editdialog.anonymousMessage':
+    'Ein <b>anonyme</b> Notiz wird der Karte hinzugefügt. Wenn du dich auf OpenStreetMap einloggst, werden deine Änderungen direkt gespeichert.',
   'editdialog.add_major_tag': 'Hinzufügen',
   'editdialog.location_checkbox': 'Position ändern',
   'editdialog.location_placeholder': 'z.B. gegenüber auf der Straße',
diff --git a/src/locales/es.js b/src/locales/es.js
index 810ddde1b..b35fb4dd5 100644
--- a/src/locales/es.js
+++ b/src/locales/es.js
@@ -91,9 +91,7 @@ export default {
   'editdialog.changes_needed': 'Por favor, haz algún cambio.',
   'editdialog.loggedInMessage': 'Estás logueado como <b>__osmUser__</b>, los cambios se guardarán inmediatamente.',
   'editdialog.logout': 'desconectar',
-  'editdialog.anonymousMessage1': 'Se añadirá una nota <b>anónima</b> al mapa.<br /> Si te',
-  'editdialog.anonymousMessage2_login': 'logueas en OpenStreetMap',
-  'editdialog.anonymousMessage3': ', tus cambios serán inmediatos.',
+  'editdialog.anonymousMessage': 'Se añadirá una nota <b>anónima</b> al mapa.<br /> Si te logueas en OpenStreetMap, tus cambios serán inmediatos.',
   'editdialog.add_major_tag': 'Añadir',
   'editdialog.location_checkbox': 'Cambiar ubicación',
   'editdialog.location_placeholder': 'ej. cruzando la calle',
diff --git a/src/locales/fr.js b/src/locales/fr.js
index 89ece7a76..b98a1d7b2 100644
--- a/src/locales/fr.js
+++ b/src/locales/fr.js
@@ -98,9 +98,7 @@ export default {
   'editdialog.changes_needed': 'Veuillez faire les modifications.',
   'editdialog.loggedInMessage': 'Vos modifications seront immédiatement sauvegardées sous le nom de compte <b>__osmUser__</b>.',
   'editdialog.logout': 'Déconnexion',
-  'editdialog.anonymousMessage1': 'Une note <b>anonymous</b> sera créée.<br />En vous',
-  'editdialog.anonymousMessage2_login': 'connectant sur OpenStreetMap',
-  'editdialog.anonymousMessage3': ', vos modifications seront immédiates.',
+  'editdialog.anonymousMessage': 'Une note <b>anonymous</b> sera créée. En vous connectant sur OpenStreetMap, vos modifications seront immédiates.',
   'editdialog.add_major_tag': 'Ajouter',
   'editdialog.location_checkbox': 'Déplacer',
   'editdialog.location_placeholder': 'ex : de l’autre côté de la rue',
diff --git a/src/locales/it.js b/src/locales/it.js
index a7308743d..9304e5785 100644
--- a/src/locales/it.js
+++ b/src/locales/it.js
@@ -147,9 +147,8 @@ export default {
   'editdialog.osm_session_expired': 'La tua sessione di OpenStreetMap è scaduta. Accedi nuovamente',
   'editdialog.loggedInMessage': 'Hai effettuato l’accesso come <b>__osmUser__</b>, le modifiche verranno salvata immediatamente.',
   'editdialog.logout': 'esci',
-  'editdialog.anonymousMessage1': 'Verrà aggiunta alla mappa una nota <b>anonima</b>.<br /> Se accedi',
-  'editdialog.anonymousMessage2_login': 'accedi a OpenStreetMap',
-  'editdialog.anonymousMessage3': ', le tue modifiche saranno immediate.',
+  'editdialog.anonymousMessage':
+    'Verrà aggiunta alla mappa una nota <b>anonima</b>. Se accedi accedi a OpenStreetMap, le tue modifiche saranno immediate.',
   'editdialog.add_major_tag': 'Aggiungi',
   'editdialog.location_checkbox': 'Cambia posizione',
   'editdialog.location_placeholder': 'ad es. dall’altra parte della strada',
diff --git a/src/locales/pl.js b/src/locales/pl.js
index 36f73f95f..8bb8eedae 100644
--- a/src/locales/pl.js
+++ b/src/locales/pl.js
@@ -91,9 +91,8 @@ export default {
   'editdialog.changes_needed': 'Proszę, dokonajcie pewnych zmian.',
   'editdialog.loggedInMessage': 'Jesteś zalogowany jako <b>__osmUser__</b>, zmiany zostaną zapisane natychmiastowo.',
   'editdialog.logout': 'wyloguj',
-  'editdialog.anonymousMessage1': 'Do mapy zostanie dodana <b>anonimowa</b> uwaga.<br />Jeśli',
-  'editdialog.anonymousMessage2_login': 'zalogujesz się do OpenStreetMap,',
-  'editdialog.anonymousMessage3': 'Twoje zmiany będą widoczne natychmiastowo.',
+  'editdialog.anonymousMessage':
+    'Do mapy zostanie dodana <b>anonimowa</b> uwaga. Jeśli zalogujesz się do OpenStreetMap, twoje zmiany będą widoczne natychmiastowo.',
   'editdialog.add_major_tag': 'Dodaj',
   'editdialog.location_checkbox': 'Zmień położenie',
   'editdialog.location_placeholder': 'np. przez ulicę',
diff --git a/src/locales/vocabulary.js b/src/locales/vocabulary.js
index a8c0ef290..2def10462 100644
--- a/src/locales/vocabulary.js
+++ b/src/locales/vocabulary.js
@@ -170,9 +170,7 @@ export default {
   'editdialog.osm_session_expired': 'Your OpenStreetMap session has expired. Please, log in again.',
   'editdialog.loggedInMessage': 'You are logged in as <b>__osmUser__</b>, changes will be saved immediately.',
   'editdialog.logout': 'logout',
-  'editdialog.anonymousMessage1': 'An <b>anonymous</b> note will be added to the map.<br />If you',
-  'editdialog.anonymousMessage2_login': 'log in to OpenStreetMap',
-  'editdialog.anonymousMessage3': ', your changes will be immediate.',
+  'editdialog.anonymousMessage': 'An <b>anonymous</b> note will be added to the map. If you log in to OpenStreetMap, your changes will be immediate.',
   'editdialog.add_major_tag': 'Add',
   'editdialog.location_checkbox': 'New location',
   'editdialog.location_placeholder': 'eg. across the street',