FeaturePanel: Update typography and design

src/components/FeaturePanel/Climbing/ClimbingGuideInfo.tsx

@@ -7,12 +7,18 @@ import {
   Stack,
   Typography,
   useTheme,
+  Paper,
 } from '@mui/material';
 import { useFeatureContext } from '../../utils/FeatureContext';
 import { t } from '../../../services/intl';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
 import { LogoOpenClimbing } from '../../../assets/LogoOpenClimbing';
+import styled from '@emotion/styled';
+
+const Container = styled.div`
+  margin-bottom: 8px;
+`;
 
 export const ClimbingGuideInfo = () => {
   const { persistShowHomepage } = useFeatureContext();
@@ -23,44 +29,46 @@ export const ClimbingGuideInfo = () => {
   };
 
   return (
-    <Accordion
-      disableGutters
-      elevation={0}
-      square
-      sx={{
-        borderBottom: `solid 1px ${theme.palette.divider}`,
-        marginBottom: 2,
-      }}
-    >
-      <AccordionSummary expandIcon={<ExpandMoreIcon color="secondary" />}>
-        <Stack direction="row" alignItems="center" gap={1}>
-          <LogoOpenClimbing width={24} />
-          <Typography color="secondary" variant="caption">
-            <strong>openclimbing.org:</strong> {t('climbing.guideinfo.title')}
+    <Container>
+      <Accordion
+        disableGutters
+        elevation={0}
+        square
+        sx={{
+          borderBottom: `solid 1px ${theme.palette.divider}`,
+          background: 'rgba(0, 0, 0, 0.1)',
+        }}
+      >
+        <AccordionSummary expandIcon={<ExpandMoreIcon color="secondary" />}>
+          <Stack direction="row" alignItems="center" gap={1}>
+            <LogoOpenClimbing width={24} />
+            <Typography color="secondary" variant="caption">
+              <strong>openclimbing.org:</strong> {t('climbing.guideinfo.title')}
+            </Typography>
+          </Stack>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography variant="body2">
+            {t('climbing.guideinfo.description')}
           </Typography>
-        </Stack>
-      </AccordionSummary>
-      <AccordionDetails>
-        <Typography variant="body2">
-          {t('climbing.guideinfo.description')}
-        </Typography>
-        <Stack
-          direction="row"
-          justifyContent="flex-end"
-          alignItems="center"
-          mt={1}
-        >
-          <Button
-            variant="text"
-            color="primary"
-            endIcon={<ArrowForwardIosIcon />}
-            sx={{ alignSelf: 'flex-end' }}
-            onClick={handleClick}
+          <Stack
+            direction="row"
+            justifyContent="flex-end"
+            alignItems="center"
+            mt={1}
           >
-            {t('climbing.guideinfo.button')}
-          </Button>
-        </Stack>
-      </AccordionDetails>
-    </Accordion>
+            <Button
+              variant="text"
+              color="primary"
+              endIcon={<ArrowForwardIosIcon />}
+              sx={{ alignSelf: 'flex-end' }}
+              onClick={handleClick}
+            >
+              {t('climbing.guideinfo.button')}
+            </Button>
+          </Stack>
+        </AccordionDetails>
+      </Accordion>
+    </Container>
   );
 };

src/components/FeaturePanel/Climbing/FeaturePanelClimbingGuideInfo.tsx

@@ -1,13 +1,12 @@
 import { ClimbingGuideInfo } from './ClimbingGuideInfo';
-import { useFeatureContext } from '../../utils/FeatureContext';
-import { climbingTagValues } from './utils/climbingTagValues';
+import { PROJECT_ID } from '../../../services/project';
+import { useMobileMode } from '../../helpers';
 
 export const FeaturePanelClimbingGuideInfo = () => {
-  const { feature } = useFeatureContext();
+  const isOpenClimbing = PROJECT_ID === 'openclimbing';
+  const isMobileMode = useMobileMode();
 
-  const isClimbing = climbingTagValues.includes(feature.tags.climbing);
-
-  if (!isClimbing) {
+  if (!isOpenClimbing || isMobileMode) {
     return null;
   }
 

src/components/FeaturePanel/Climbing/PanelLabel.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { ContentContainer } from './ContentContainer';
+import { Box } from '@mui/material';
 
 type PanelLabelProps = {
   children: React.ReactNode;
   addition?: React.ReactNode;
   border?: boolean;
 };
 
-export const Container = styled.div<{ $border: boolean }>`
+export const Container = styled.div`
   padding: 20px 10px 4px;
 `;
 
@@ -17,25 +18,25 @@ export const InnerContainer = styled.div`
   justify-content: space-between;
   align-items: center;
 `;
-export const Title = styled.div`
+export const Title = styled.h3`
+  margin: 0;
+  align-self: center;
   font-weight: bold;
+  font-size: 12px;
+  text-transform: uppercase;
   color: ${({ theme }) => theme.palette.secondary.main};
 `;
 export const Addition = styled.div`
   color: ${({ theme }) => theme.palette.secondary.main};
 `;
 
-export const PanelLabel = ({
-  children,
-  addition,
-  border = true,
-}: PanelLabelProps) => (
-  <Container $border={border}>
+export const PanelLabel = ({ children, addition }: PanelLabelProps) => (
+  <Box ml={2} mr={2} mt={4}>
     <ContentContainer>
       <InnerContainer>
         <Title>{children}</Title>
         <Addition>{addition}</Addition>
       </InnerContainer>
     </ContentContainer>
-  </Container>
+  </Box>
 );

src/components/FeaturePanel/CragsInArea.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { Box } from '@mui/material';
+import { Box, Chip } from '@mui/material';
 import React from 'react';
 import Router from 'next/router';
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
@@ -16,29 +16,25 @@ import { intl, t } from '../../services/intl';
 import Link from 'next/link';
 import { naturalSort } from './Climbing/utils/array';
 import { PanelLabel } from './Climbing/PanelLabel';
+import { PROJECT_ID } from '../../services/project';
+
+const isOpenClimbing = PROJECT_ID === 'openclimbing';
 
 const ArrowIcon = styled(ArrowForwardIosIcon)`
   opacity: 0.2;
   margin-left: 12px;
 `;
 
-const HeadingRow = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0 12px;
-`;
-
 const Container = styled.div`
   overflow: auto;
   flex-direction: column;
   display: flex;
   gap: 8px;
   justify-content: space-between;
   cursor: pointer;
-  border-radius: 8px;
-  padding: 12px 0;
-  background-color: ${({ theme }) => theme.palette.background.elevation};
+  //border-radius: 8px;
+  padding: 0 0 20px 0;
+  //background-color: ${({ theme }) => theme.palette.background.elevation};
   &:hover {
     ${ArrowIcon} {
       opacity: 1;
@@ -49,58 +45,60 @@ const Container = styled.div`
 const CragList = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 20px;
   margin-top: 12px;
 `;
 
-const StyledLink = styled(Link)`
-  text-decoration: none !important;
-`;
-
-const Content = styled.div`
-  flex: 1;
+const Name = styled.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 
-const CragName = styled.div`
-  padding: 0;
+const CragName = styled.h2`
   font-weight: 900;
-  font-size: 20px;
+  margin: 0;
+  font-size: 28px;
+  line-height: 1.2;
+  ${isOpenClimbing && `font-family: 'Piazzolla', sans-serif;`}
   color: ${({ theme }) => theme.palette.primary.main};
-`;
-
-const Attributes = styled.div`
   display: flex;
+  flex-direction: row;
   gap: 8px;
+  align-items: center;
+  justify-content: space-between;
 `;
 
-const NumberOfRoutes = styled.div`
-  font-size: 13px;
-  color: ${({ theme }) => theme.palette.secondary.main};
+const StyledLink = styled(Link)`
+  text-decoration: none !important;
+  &:hover ${Name} {
+    text-decoration: underline;
+  }
 `;
 
 const Header = ({
-  imagesCount,
   label,
   routesCount,
 }: {
   label: string;
   routesCount: number;
-  imagesCount: number;
 }) => (
-  <HeadingRow>
-    <Content>
-      <CragName>{label}</CragName>{' '}
-      <Attributes>
-        {routesCount > 0 && (
-          <NumberOfRoutes>{routesCount} routes </NumberOfRoutes>
-        )}
-        {imagesCount > 0 && (
-          <NumberOfRoutes>{imagesCount} photos</NumberOfRoutes>
-        )}
-      </Attributes>
-    </Content>
-    <ArrowIcon color="primary" />
-  </HeadingRow>
+  <Box ml={2} mr={2}>
+    <CragName>
+      <Name>{label}</Name>
+      {routesCount && (
+        <Chip
+          size="small"
+          variant="outlined"
+          label={
+            <>
+              <strong>{routesCount}</strong> {t('featurepanel.routes')}
+            </>
+          }
+          sx={{ position: 'relative', top: 2, fontWeight: 'normal' }}
+        />
+      )}
+    </CragName>{' '}
+  </Box>
 );
 
 const Gallery = ({ images }) => {
@@ -143,7 +141,6 @@ const CragItem = ({ feature }: { feature: Feature }) => {
         <Header
           label={getLabel(feature)}
           routesCount={feature.members?.length}
-          imagesCount={images.length}
         />
         {images.length ? <Gallery images={images} /> : null}
       </Container>

src/components/FeaturePanel/EditDialog/EditContent/MembersEditor.tsx

@@ -50,7 +50,9 @@ export const MembersEditor = () => {
       >
         <Stack direction="row" spacing={2} alignItems="center">
           <Typography variant="button">{getSectionName()}</Typography>
-          {membersLength && <Chip size="small" label={membersLength} />}
+          {membersLength && (
+            <Chip size="small" label={membersLength} variant="outlined" />
+          )}
         </Stack>
       </AccordionSummary>
       <AccordionDetails>

src/components/FeaturePanel/EditDialog/EditContent/ParentsEditor.tsx

@@ -69,7 +69,7 @@ export const ParentsEditor = () => {
       >
         <Stack direction="row" spacing={2} alignItems="center">
           <Typography variant="button">{getSectionName()}</Typography>
-          <Chip size="small" label={parents.length} />
+          <Chip size="small" label={parents.length} variant="outlined" />
         </Stack>
       </AccordionSummary>
       <AccordionDetails>