climbing: Add to favorites for crags (#253)

zbycz · Feb 24, 2024 · 5b3297d · 5b3297d
1 parent e5f2a58
commit 5b3297d
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/src/components/FeaturePanel/Climbing/ClimbingPanel.tsx b/src/components/FeaturePanel/Climbing/ClimbingPanel.tsx
@@ -11,6 +11,7 @@ import { useFeatureContext } from '../../utils/FeatureContext';
 import { getLabel } from '../../../helpers/featureLabel';
 import { getCommonsImageUrl } from '../../../services/images/getWikiImage';
 import { getOsmappLink } from '../../../services/helpers';
+import { StarButton } from '../ImageSection/StarButton';
 
 const ThumbnailContainer = styled.div<{ height: number }>`
   width: 100%;
@@ -24,6 +25,12 @@ const ThumbnailContainer = styled.div<{ height: number }>`
   }
 `;
 
+const HeadingContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
 const Heading = styled.div`
   margin: 12px 8px 4px;
   font-size: 36px;
@@ -102,8 +109,10 @@ export const ClimbingPanel = ({ footer }) => {
               <ShowFullscreen onClick={onFullScreenClick} />
             </ThumbnailContainer>
           )}
-          <Heading onClick={onFullScreenClick}>{label}</Heading>
-
+          <HeadingContainer>
+            <Heading onClick={onFullScreenClick}>{label}</Heading>
+            <StarButton />
+          </HeadingContainer>
           <RouteList />
 
           {/* @TODO unite with parent panel */}

diff --git a/src/components/FeaturePanel/ImageSection/StarButton.tsx b/src/components/FeaturePanel/ImageSection/StarButton.tsx
@@ -1,6 +1,7 @@
 import Star from '@material-ui/icons/Star';
 import StarBorder from '@material-ui/icons/StarBorder';
 import React, { useEffect, useState } from 'react';
+import { Tooltip } from '@material-ui/core';
 import { t } from '../../../services/intl';
 import { useStarsContext } from '../../utils/StarsContext';
 import { StyledActionButton } from './utils';
@@ -16,15 +17,13 @@ const useIsClient = () => {
 const StarButtonPure = ({ isStarred, toggleStar }) => (
   <StyledActionButton onClick={toggleStar}>
     {isStarred ? (
-      <Star
-        htmlColor="#fff"
-        titleAccess={t('featurepanel.favorites_save_button')}
-      />
+      <Tooltip arrow title={t('featurepanel.favorites_unsave_button')}>
+        <Star htmlColor="#fff" />
+      </Tooltip>
     ) : (
-      <StarBorder
-        htmlColor="#fff"
-        titleAccess={t('featurepanel.favorites_unsave_button')}
-      />
+      <Tooltip arrow title={t('featurepanel.favorites_save_button')}>
+        <StarBorder htmlColor="#fff" />
+      </Tooltip>
     )}
   </StyledActionButton>
 );