chore: fix icon position and remove bad graphics files (#553)

* Fix media attachment icon position

* Replace base64 svgs with png

* delete bad graphic

* Create lovely-countries-approve.md

---------

Co-authored-by: Donny <donny@mac.mynetworksettings.com>

.changeset/lovely-countries-approve.md

@@ -0,0 +1,5 @@
+---
+"@learncard/react": patch
+---
+
+Fix icon position and remove bad graphics files

package.json

@@ -41,5 +41,6 @@
             "uint8arrays": "^3.0.0",
             "@ceramicnetwork/streamid": "2.7.0"
         }
-    }
+    },
+    "packageManager": "pnpm@9.12.3+sha512.cce0f9de9c5a7c95bef944169cc5dfe8741abfb145078c0d508b868056848a87c81e626246cb60967cbd7fd29a6c062ef73ff840d96b3c86c40ac92cf4a813ee"
 }

packages/react-learn-card/src/components/CertificateDisplayCard/MediaAttachmentsBox.tsx

@@ -220,7 +220,7 @@ const MediaAttachmentsBox: React.FC<MediaAttachmentsBoxProps> = ({
                                     className="flex bg-grayscale-100 items-center rounded-[15px] w-full"
                                 >
                                     <button
-                                        className="h-[80px] w-[80px] rounded-[15px] overflow-hidden flex-shrink-0"
+                                        className="relative h-[80px] w-[80px] rounded-[15px] overflow-hidden flex-shrink-0"
                                         onClick={e => {
                                             e.stopPropagation();
                                             handleMediaAttachmentClick(media.url, media.type);

packages/react-learn-card/src/components/MeritBadgeDisplayCard/MediaAttachmentsBox.tsx

@@ -217,10 +217,10 @@ const MediaAttachmentsBox: React.FC<MediaAttachmentsBoxProps> = ({
                             return (
                                 <div
                                     key={index}
-                                    className="flex bg-grayscale-100 items-center rounded-[15px] w-full"
+                                    className="flex media-attachment-box bg-grayscale-100 items-center rounded-[15px] w-full"
                                 >
                                     <button
-                                        className="h-[80px] w-[80px] rounded-[15px] overflow-hidden flex-shrink-0"
+                                        className="relative h-[80px] w-[80px] rounded-[15px] overflow-hidden flex-shrink-0"
                                         onClick={e => {
                                             e.stopPropagation();
                                             handleMediaAttachmentClick(media.url, media.type);

packages/react-learn-card/src/components/RoundedSquare/constants.ts

@@ -1,9 +1,9 @@
 import coinsGraphic from '../../assets/images/walletcurrency.webp';
 import idsGraphic from '../../assets/images/walletids.webp';
 import jobhistoryGraphic from '../../assets/images/walletjobhistory.webp';
-import learningHistoryGraphic from '../../assets/images/walletlearninghistory.webp';
+import learningHistoryGraphic from '../../assets/images/backpack.png';
 import skillsGraphic from '../../assets/images/walletskills.webp';
-import achievementsGraphic from '../../assets/images/walletTrophy.webp';
+import achievementsGraphic from '../../assets/images/walletTrophy.png';
 import badgeGraphic from '../../assets/images/social-badge-2.svg';
 import membershipGraphic from '../../assets/images/membership-graphic.png';
 

packages/react-learn-card/src/constants/index.ts

@@ -3,7 +3,7 @@ import idsGraphic from '../assets/images/walletids.webp';
 import idPurple from '../assets/images/id-purple.png';
 import learningHistoryGraphic from '../assets/images/backpack.png';
 import skillsGraphic from '../assets/images/walletskills.webp';
-import achievementsGraphic from '../assets/images/walletTrophy.svg';
+import achievementsGraphic from '../assets/images/walletTrophy.png';
 import socialBadge from '../assets/images/social-badge-2.svg';
 import experienceMountain from '../assets/images/experience-mountain.svg';
 import goalsTarget from '../assets/images/goals-target.svg';

packages/react-learn-card/src/constants/skills.ts

@@ -1,12 +1,12 @@
-import Athletics from '../assets/images/athletics.svg';
-import Business from '../assets/images/business.svg';
-import Creative from '../assets/images/creative.svg';
-import Digital from '../assets/images/digital.svg';
-import Durable from '../assets/images/durable.svg';
-import Medical from '../assets/images/medical.svg';
-import Social from '../assets/images/social.svg';
-import Stem from '../assets/images/stem.svg';
-import Trade from '../assets/images/trade.svg';
+import Athletics from '../assets/images/athletics.png';
+import Business from '../assets/images/business.png';
+import Creative from '../assets/images/creative.png';
+import Digital from '../assets/images/digital.png';
+import Durable from '../assets/images/durable.png';
+import Medical from '../assets/images/medical.png';
+import Social from '../assets/images/social.png';
+import Stem from '../assets/images/stem.png';
+import Trade from '../assets/images/trade.png';
 
 export enum BoostCMSSKillsCategoryEnum {
     Durable = 'durable',