diff --git a/src/assets/map-pin.svg b/src/assets/map-pin.svg
index 9f541c656..53e328ad0 100644
--- a/src/assets/map-pin.svg
+++ b/src/assets/map-pin.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/components/middle/message/Location.scss b/src/components/middle/message/Location.scss
index edc894ac2..5e96c31b8 100644
--- a/src/components/middle/message/Location.scss
+++ b/src/components/middle/message/Location.scss
@@ -110,8 +110,9 @@
z-index: 5;
}
+ .venue,
.geo {
- height: 2.5rem;
+ height: 3.25rem;
}
.geoLive,
@@ -148,9 +149,9 @@
.location-info {
display: grid;
grid-template-columns: 1fr auto;
- grid-template-rows: 1fr 1fr;
+ grid-template-rows: 1fr auto;
width: 100%;
- padding: 0.3125rem 0.5rem 0.375rem;
+ padding: 0.3125rem 0.5rem 0.25rem;
&-title {
font-weight: 500;
@@ -159,7 +160,7 @@
&-subtitle {
color: var(--color-text-secondary);
- line-height: 1;
+ line-height: 1.25;
font-size: 0.875rem;
grid-area: 2 / 1 / 2 / 2;
@@ -180,10 +181,13 @@
color: var(--accent-color);
position: absolute;
top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
+ left: 0;
+ transform: translateY(-50%);
font-size: 0.875rem;
font-weight: 500;
+ line-height: 1;
+ width: 100%;
+ text-align: center;
}
.geo-countdown-progress {
diff --git a/src/components/middle/message/Location.tsx b/src/components/middle/message/Location.tsx
index e69ddb286..718ad7818 100644
--- a/src/components/middle/message/Location.tsx
+++ b/src/components/middle/message/Location.tsx
@@ -8,15 +8,12 @@ import type { FC } from '../../../lib/teact/teact';
import type { ApiChat, ApiMessage, ApiUser } from '../../../api/types';
import type { ISettings } from '../../../types';
-import { CUSTOM_APPENDIX_ATTRIBUTE, MESSAGE_CONTENT_SELECTOR } from '../../../config';
import {
getMessageLocation,
buildStaticMapHash,
isGeoLiveExpired,
- isOwnMessage,
isUserId,
} from '../../../global/helpers';
-import getCustomAppendixBg from './helpers/getCustomAppendixBg';
import { formatCountdownShort, formatLastUpdated } from '../../../util/dateFormat';
import {
getMetersPerPixel, getVenueColor, getVenueIconUrl, prepareMapUrl,
@@ -31,7 +28,6 @@ import useTimeout from '../../../hooks/useTimeout';
import buildClassName from '../../../util/buildClassName';
import usePrevious from '../../../hooks/usePrevious';
import useInterval from '../../../hooks/useInterval';
-import useLayoutEffectWithPrevDeps from '../../../hooks/useLayoutEffectWithPrevDeps';
import Avatar from '../../common/Avatar';
import Skeleton from '../../ui/Skeleton';
@@ -49,7 +45,7 @@ const DEFAULT_MAP_CONFIG = {
};
// eslint-disable-next-line max-len
-const SVG_PIN = { __html: '' };
+const SVG_PIN = { __html: '' };
type OwnProps = {
message: ApiMessage;
@@ -62,9 +58,6 @@ type OwnProps = {
const Location: FC = ({
message,
peer,
- isInSelectMode,
- isSelected,
- theme,
}) => {
const { openUrl } = getActions();
// eslint-disable-next-line no-null/no-null
@@ -98,8 +91,6 @@ const Location: FC = ({
const avatarUser = (peer && isPeerUser) ? peer as ApiUser : undefined;
const avatarChat = (peer && !isPeerUser) ? peer as ApiChat : undefined;
- const isOwn = isOwnMessage(message);
-
const accuracyRadiusPx = useMemo(() => {
if (type !== 'geoLive' || !point.accuracyRadius) {
return 0;
@@ -146,26 +137,6 @@ const Location: FC = ({
}
}, [updateCountdown]);
- useLayoutEffectWithPrevDeps(([prevShouldRenderText]) => {
- if (shouldRenderText) {
- if (!prevShouldRenderText) {
- ref.current!.closest(MESSAGE_CONTENT_SELECTOR)!.removeAttribute(CUSTOM_APPENDIX_ATTRIBUTE);
- }
- return;
- }
-
- if (mapBlobUrl) {
- const contentEl = ref.current!.closest(MESSAGE_CONTENT_SELECTOR)!;
- getCustomAppendixBg(mapBlobUrl, isOwn, isInSelectMode, isSelected, theme).then((appendixBg) => {
- requestMutation(() => {
- contentEl.style.setProperty('--appendix-bg', appendixBg);
- contentEl.classList.add('has-appendix-thumb');
- contentEl.setAttribute(CUSTOM_APPENDIX_ATTRIBUTE, '');
- });
- });
- }
- }, [shouldRenderText, isOwn, isInSelectMode, isSelected, theme, mapBlobUrl]);
-
useEffect(() => {
// Prevent map refetching for slight location changes
if (Math.abs(geo.lat - point.lat) < MOVE_THRESHOLD && Math.abs(geo.long - point.long) < MOVE_THRESHOLD) {
@@ -253,11 +224,13 @@ const Location: FC = ({
if (type === 'venue') {
const color = getVenueColor(location.venueType);
const iconSrc = getVenueIconUrl(location.venueType);
- return (
-
-
-
+
+