From 236d8c826b630181d55ae2450f7387492284249e Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Mon, 24 Feb 2025 03:27:29 +0100 Subject: [PATCH] migrate more svgs from code to file, use hero icons where it seems applicable --- .../Subcomponents/Controls/LocateControl.tsx | 16 +++--- .../Subcomponents/Controls/QuestControl.tsx | 11 +--- .../ItemPopupComponents/HeaderView.tsx | 12 +--- .../Profile/Subcomponents/AvatarWidget.tsx | 17 +----- .../Profile/Subcomponents/MarkdownHint.tsx | 15 +---- .../Profile/Subcomponents/SocialShareBar.tsx | 24 ++------ .../Subcomponents/SocialShareButton.tsx | 56 +++++-------------- src/assets/chevron.svg | 8 +++ src/assets/facebook.svg | 3 + src/assets/linkedin.svg | 4 ++ src/assets/markdown.svg | 12 ++++ src/assets/target.svg | 8 +++ src/assets/targetDot.svg | 10 ++++ src/assets/telegram.svg | 9 +++ src/assets/twitter.svg | 3 + src/assets/whatsapp.svg | 9 +++ src/assets/xing.svg | 3 + 17 files changed, 106 insertions(+), 114 deletions(-) create mode 100644 src/assets/chevron.svg create mode 100644 src/assets/facebook.svg create mode 100644 src/assets/linkedin.svg create mode 100644 src/assets/markdown.svg create mode 100644 src/assets/target.svg create mode 100644 src/assets/targetDot.svg create mode 100644 src/assets/telegram.svg create mode 100644 src/assets/twitter.svg create mode 100644 src/assets/whatsapp.svg create mode 100644 src/assets/xing.svg diff --git a/src/Components/Map/Subcomponents/Controls/LocateControl.tsx b/src/Components/Map/Subcomponents/Controls/LocateControl.tsx index 6bd649ec..3380f6bc 100644 --- a/src/Components/Map/Subcomponents/Controls/LocateControl.tsx +++ b/src/Components/Map/Subcomponents/Controls/LocateControl.tsx @@ -7,6 +7,9 @@ import { control } from 'leaflet' import { useEffect, useRef, useState } from 'react' import { useMap, useMapEvents } from 'react-leaflet' + +import TargetSVG from '#assets/target.svg' + // eslint-disable-next-line import/no-unassigned-import import 'leaflet.locatecontrol' import 'leaflet.locatecontrol/dist/L.Control.Locate.css' @@ -56,15 +59,12 @@ export const LocateControl = () => { {loading ? ( ) : ( - - - + style={{ fill: `${active ? '#fc8702' : 'currentColor'}` }} + /> )} diff --git a/src/Components/Map/Subcomponents/Controls/QuestControl.tsx b/src/Components/Map/Subcomponents/Controls/QuestControl.tsx index 1ebd60c2..eaa84229 100644 --- a/src/Components/Map/Subcomponents/Controls/QuestControl.tsx +++ b/src/Components/Map/Subcomponents/Controls/QuestControl.tsx @@ -1,3 +1,5 @@ +import HandRaisedIcon from '@heroicons/react/24/outline/HandRaisedIcon' + import { useQuestsOpen, useSetQuestOpen } from '#components/Gaming/hooks/useQuests' export function QuestControl() { @@ -17,14 +19,7 @@ export function QuestControl() { className='tw-card-body hover:tw-bg-slate-300 tw-rounded-2xl tw-p-2 tw-h-10 tw-w-10 tw-transition-all tw-duration-300 hover:tw-cursor-pointer' onClick={() => setQuestsOpen(true)} > - - - + )} diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx index dd85fa1f..330b8612 100644 --- a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx +++ b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx @@ -15,6 +15,7 @@ import TrashIcon from '@heroicons/react/24/outline/TrashIcon' import { useState, useEffect } from 'react' import { useNavigate } from 'react-router-dom' +import TargetDotSVG from '#assets/targetDot.svg' import { useAppState } from '#components/AppShell/hooks/useAppState' import { useHasUserPermission } from '#components/Map/hooks/usePermissions' import DialogModal from '#components/Templates/DialogModal' @@ -162,16 +163,7 @@ export function HeaderView({ className='!tw-text-base-content tw-cursor-pointer' onClick={setPositionCallback} > - - - + Position )} diff --git a/src/Components/Profile/Subcomponents/AvatarWidget.tsx b/src/Components/Profile/Subcomponents/AvatarWidget.tsx index dca7374e..857f69c0 100644 --- a/src/Components/Profile/Subcomponents/AvatarWidget.tsx +++ b/src/Components/Profile/Subcomponents/AvatarWidget.tsx @@ -3,6 +3,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/prefer-optional-chain */ import ArrowUpTrayIcon from '@heroicons/react/24/outline/ArrowUpTrayIcon' +import UserIcon from '@heroicons/react/24/outline/UserIcon' import { useState, useCallback, useRef } from 'react' import { ReactCrop, centerCrop, makeAspectCrop } from 'react-image-crop' @@ -181,22 +182,10 @@ export const AvatarWidget: React.FC = ({ avatar, setAvatar }) ) : (
- - - - + />
)} diff --git a/src/Components/Profile/Subcomponents/MarkdownHint.tsx b/src/Components/Profile/Subcomponents/MarkdownHint.tsx index 1b79bbc3..50336e48 100644 --- a/src/Components/Profile/Subcomponents/MarkdownHint.tsx +++ b/src/Components/Profile/Subcomponents/MarkdownHint.tsx @@ -1,5 +1,7 @@ import { useState } from 'react' +import MarkdownSVG from '#assets/markdown.svg' + export const MarkdownHint = () => { const [expended, setExpended] = useState(false) return ( @@ -8,18 +10,7 @@ export const MarkdownHint = () => { title='Markdown is supported' className='flex tw-flex-row tw-text-gray-400 tw-cursor-pointer tw-items-center' > - + Markdown {expended && ( copyLink()} title='share link via email' > - - - + \/ )} {platforms.includes('clipboard') && ( @@ -62,17 +58,7 @@ const SocialShareBar = ({ onClick={() => copyLink()} title='copy Link' > - - - + )} diff --git a/src/Components/Profile/Subcomponents/SocialShareButton.tsx b/src/Components/Profile/Subcomponents/SocialShareButton.tsx index 64f0858a..5fe22390 100644 --- a/src/Components/Profile/Subcomponents/SocialShareButton.tsx +++ b/src/Components/Profile/Subcomponents/SocialShareButton.tsx @@ -5,72 +5,42 @@ import { cloneElement } from 'react' +import FacebookSVG from '#assets/facebook.svg' +import LinkedinSVG from '#assets/linkedin.svg' +import TelegramSVG from '#assets/telegram.svg' +import TwitterSVG from '#assets/twitter.svg' +import WhatsappSVG from '#assets/whatsapp.svg' +import XingSVG from '#assets/xing.svg' + const platformConfigs = { facebook: { shareUrl: 'https://www.facebook.com/sharer/sharer.php?u={url}', - icon: ( - - - - ), + icon: Facebook, bgColor: '#3b5998', }, twitter: { shareUrl: 'https://twitter.com/intent/tweet?text={title}:%20{url}', - icon: ( - - - - ), + icon: Twitter, bgColor: '#55acee', }, linkedin: { shareUrl: 'http://www.linkedin.com/shareArticle?mini=true&url={url}&title={title}', - icon: ( - - - - - ), + icon: Linkedin, bgColor: '#4875b4', }, xing: { shareUrl: 'https://www.xing-share.com/app/user?op=share;sc_p=xing-share;url={url}', - icon: ( - - - - ), + icon: Xing, bgColor: '#026466', }, whatsapp: { shareUrl: 'https://api.whatsapp.com/send?text={title}%20{url}', - icon: ( - - - - ), + icon: Whatsapp, bgColor: '#25D366', }, telegram: { shareUrl: 'https://t.me/share/url?url={url}&text={title}', - icon: ( - - - - ), + icon: Telegram, bgColor: '#0088cc', }, } diff --git a/src/assets/chevron.svg b/src/assets/chevron.svg new file mode 100644 index 00000000..fb6f4454 --- /dev/null +++ b/src/assets/chevron.svg @@ -0,0 +1,8 @@ + + + \ No newline at end of file diff --git a/src/assets/facebook.svg b/src/assets/facebook.svg new file mode 100644 index 00000000..f0e46bb1 --- /dev/null +++ b/src/assets/facebook.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/linkedin.svg b/src/assets/linkedin.svg new file mode 100644 index 00000000..35382bde --- /dev/null +++ b/src/assets/linkedin.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/markdown.svg b/src/assets/markdown.svg new file mode 100644 index 00000000..b71a0ad9 --- /dev/null +++ b/src/assets/markdown.svg @@ -0,0 +1,12 @@ + \ No newline at end of file diff --git a/src/assets/target.svg b/src/assets/target.svg new file mode 100644 index 00000000..711e071b --- /dev/null +++ b/src/assets/target.svg @@ -0,0 +1,8 @@ + + + \ No newline at end of file diff --git a/src/assets/targetDot.svg b/src/assets/targetDot.svg new file mode 100644 index 00000000..9ded1a69 --- /dev/null +++ b/src/assets/targetDot.svg @@ -0,0 +1,10 @@ + + + \ No newline at end of file diff --git a/src/assets/telegram.svg b/src/assets/telegram.svg new file mode 100644 index 00000000..5926a3fd --- /dev/null +++ b/src/assets/telegram.svg @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/src/assets/twitter.svg b/src/assets/twitter.svg new file mode 100644 index 00000000..16c2fe70 --- /dev/null +++ b/src/assets/twitter.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/whatsapp.svg b/src/assets/whatsapp.svg new file mode 100644 index 00000000..d14752bf --- /dev/null +++ b/src/assets/whatsapp.svg @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/src/assets/xing.svg b/src/assets/xing.svg new file mode 100644 index 00000000..2fcc6565 --- /dev/null +++ b/src/assets/xing.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file