EditDialog: Improve logged out alert

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"

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 />

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>
+  );
+};

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>
+  );
+};

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>
   );
 };

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;
     }

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': 'ለምሳሌ፦ ከመንገዱ ተምሻግሮ',

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',

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',

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',

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',

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',

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ę',

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',