FeaturePanel: Polish feature header

src/components/FeaturePanel/FeatureDescription.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
-import { Box, Grid, Stack, Typography } from '@mui/material';
-import styled from '@emotion/styled';
+import { Stack, Typography } from '@mui/material';
 import { capitalize } from '../helpers';
 import { t, Translation } from '../../services/intl';
 import { useFeatureContext } from '../utils/FeatureContext';
-import { TooltipButton } from '../utils/TooltipButton';
 import { Feature } from '../../services/types';
 import { OSM_WEBSITE } from '../../services/osm/consts';
 import { NwrIcon } from './NwrIcon';
@@ -74,15 +72,12 @@ export const FeatureDescription = () => {
   }
 
   return (
-    <>
-      <span
-        style={{ paddingRight: 5, verticalAlign: 'middle', lineHeight: '14px' }}
-      >
-        <NwrIcon osmType={osmMeta.type} />
-      </span>
+    <Stack direction="row" gap={1.2} alignItems="center">
+      <NwrIcon osmType={osmMeta.type} />
+
       {t('featurepanel.feature_description_osm', {
         type: capitalize(type),
       })}
-    </>
+    </Stack>
   );
 };

src/components/FeaturePanel/FeatureHeading.tsx

@@ -1,23 +1,16 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import EditIcon from '@mui/icons-material/Edit';
-import { Box, IconButton, Stack, Tooltip, useMediaQuery } from '@mui/material';
+import { IconButton, Tooltip, useMediaQuery } from '@mui/material';
 import { useEditDialogContext } from './helpers/EditDialogContext';
 import { PoiDescription } from './helpers/PoiDescription';
 import { getLabel, getSecondaryLabel } from '../../helpers/featureLabel';
 import { useFeatureContext } from '../utils/FeatureContext';
 import { t } from '../../services/intl';
 import { isMobileDevice } from '../helpers';
 import { QuickActions } from './QuickActions/QuickActions';
-import { NwrIcon } from './NwrIcon';
 import { PROJECT_ID } from '../../services/project';
-
-const isOpenClimbing = PROJECT_ID === 'openclimbing';
-
-const StyledEditButton = styled(IconButton)`
-  position: relative;
-  top: 3px;
-`;
+import { css } from '@emotion/react';
 
 const EditNameContainer = styled.div`
   position: absolute;
@@ -27,6 +20,7 @@ const EditNameContainer = styled.div`
   bottom: 0;
   align-items: center;
   display: flex;
+  margin-top: 3px;
   background: ${({ theme }) => theme.palette.background.paper};
 `;
 const EditNameButton = () => {
@@ -39,9 +33,9 @@ const EditNameButton = () => {
   return (
     <EditNameContainer>
       <Tooltip title={t('featurepanel.inline_edit_title')}>
-        <StyledEditButton onClick={() => openWithTag('name')} size="small">
+        <IconButton onClick={() => openWithTag('name')} size="small">
           <EditIcon fontSize="small" />
-        </StyledEditButton>
+        </IconButton>
       </Tooltip>
     </EditNameContainer>
   );
@@ -61,6 +55,7 @@ const HeadingsWrapper = styled.div`
 `;
 
 const Headings = () => {
+  const isOpenClimbing = PROJECT_ID === 'openclimbing';
   const [isHovered, setIsHovered] = React.useState(false);
 
   const onMouseEnter = () => {
@@ -75,9 +70,14 @@ const Headings = () => {
   const secondaryLabel = getSecondaryLabel(feature);
   return (
     <HeadingsWrapper onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
-      <Heading $deleted={feature?.deleted}>{label}</Heading>
+      <Heading $deleted={feature?.deleted} $isOpenClimbing={isOpenClimbing}>
+        {label}
+      </Heading>
       {secondaryLabel && (
-        <SecondaryHeading $deleted={feature?.deleted}>
+        <SecondaryHeading
+          $deleted={feature?.deleted}
+          $isOpenClimbing={isOpenClimbing}
+        >
           {secondaryLabel}
         </SecondaryHeading>
       )}
@@ -86,33 +86,38 @@ const Headings = () => {
   );
 };
 
-const Heading = styled.h1<{ $deleted: boolean }>`
+const Heading = styled.h1<{ $deleted: boolean; $isOpenClimbing: boolean }>`
   font-size: 36px;
   line-height: 1.2;
-  ${isOpenClimbing &&
-  `
-    font-family: 'Piazzolla', sans-serif;
-    font-weight: 900;
-  `}
+  ${({ $isOpenClimbing }) =>
+    $isOpenClimbing &&
+    css`
+      font-family: 'Piazzolla', sans-serif;
+      font-weight: 900;
+      font-size: 46px;
+    `}
   margin: 0;
   ${({ $deleted }) => $deleted && 'text-decoration: line-through;'}
 `;
-const SecondaryHeading = styled.h2<{ $deleted: boolean }>`
+const SecondaryHeading = styled.h2<{
+  $deleted: boolean;
+  $isOpenClimbing: boolean;
+}>`
   font-size: 24px;
   line-height: 0.98;
-  ${isOpenClimbing &&
-  `
-    font-family: 'Piazzolla', sans-serif;
-    font-weight: 900;
-  `}
+  ${({ $isOpenClimbing }) =>
+    $isOpenClimbing &&
+    css`
+      font-family: 'Piazzolla', sans-serif;
+      font-weight: 900;
+    `}
   margin: 0;
   ${({ $deleted }) => $deleted && 'text-decoration: line-through;'}
 `;
 
 export const FeatureHeading = React.forwardRef<HTMLDivElement>((_, ref) => {
   // thw pwa needs space at the bottom
   const isStandalone = useMediaQuery('(display-mode: standalone)');
-  const { feature } = useFeatureContext();
 
   return (
     <Container ref={ref} isStandalone={isStandalone}>