Update twitter icon and progress nudge

src/components/FrameRenderer/ProgressNudge.tsx

@@ -1,10 +1,6 @@
-import { Spinner } from '../ReactIcons/Spinner.tsx';
-import { useEffect, useState } from 'react';
 import { cn } from '../../lib/classname.ts';
-import { getUser } from '../../lib/jwt.ts';
 import { roadmapProgress, totalRoadmapNodes } from '../../stores/roadmap.ts';
 import { useStore } from '@nanostores/react';
-import {HelpCircle} from "lucide-react";
 
 type ProgressNudgeProps = {
   resourceType: 'roadmap' | 'best-practice';
@@ -12,36 +8,22 @@ type ProgressNudgeProps = {
 };
 
 export function ProgressNudge(props: ProgressNudgeProps) {
-  const { resourceId, resourceType } = props;
-
   const $totalRoadmapNodes = useStore(totalRoadmapNodes);
   const $roadmapProgress = useStore(roadmapProgress);
 
   const done = $roadmapProgress?.done?.length || 0;
 
-  const [isLoading, setIsLoading] = useState(true);
-  const { id: userId } = getUser() || {};
-
   const hasProgress = done > 0;
 
-  useEffect(() => {
-    setTimeout(() => {
-      setIsLoading(false);
-    }, 500);
-  }, []);
-
   if (!$totalRoadmapNodes) {
     return null;
   }
 
   return (
     <div
-      className={cn(
-        'fixed hidden sm:block -bottom-full left-1/2 z-30 -translate-x-1/2 transform overflow-hidden rounded-full bg-stone-900 px-4 py-2 text-center text-white shadow-2xl transition-all ',
-        {
-          'bottom-5 opacity-100': !isLoading,
-        },
-      )}
+      className={
+        'fixed bottom-5 left-1/2 z-30 hidden -translate-x-1/2 transform animate-fade-slide-up overflow-hidden rounded-full bg-stone-900 px-4 py-2 text-center text-white shadow-2xl transition-all duration-300 sm:block'
+      }
     >
       <span
         className={cn('block', {

src/components/ShareIcons/ShareIcons.astro

@@ -15,8 +15,8 @@ const redditUrl = `https://www.reddit.com/submit?title=${description}&url=${page
 ---
 
 <div class='absolute left-[-18px] top-[110px] h-full hidden' id='page-share-icons'>
-  <div class='flex sticky top-[100px] flex-col gap-1.5'>
-    <a href={twitterUrl} target='_blank' class='text-gray-500 hover:text-gray-700'>
+  <div class='flex sticky top-[100px] flex-col gap-1.5 items-center'>
+    <a href={twitterUrl} target='_blank' class='text-gray-500 hover:text-gray-700 mb-0.5'>
       <Icon icon='twitter' />
     </a>
     <a href={fbUrl} target='_blank' class='text-gray-500 hover:text-gray-700'>

src/icons/twitter.svg

@@ -1,3 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="1 0 50 50" fill="currentColor" class='h-[30px] w-[30px]' xmlns:v="https://vecta.io/nano">
-  <path d="M38,42H10c-2.209,0-4-1.791-4-4V10c0-2.209,1.791-4,4-4h28	c2.209,0,4,1.791,4,4v28C42,40.209,40.209,42,38,42z" clip-rule="evenodd"></path><path fill="#fff" d="M34.257,34h-6.437L13.829,14h6.437L34.257,34z M28.587,32.304h2.563L19.499,15.696h-2.563 L28.587,32.304z"></path> <polygon fill="#fff" points="15.866,34 23.069,25.656 22.127,24.407 13.823,34"></polygon><polygon fill="#fff" points="24.45,21.721 25.355,23.01 33.136,14 31.136,14"></polygon>
+<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="23" height="23" rx="3" fill="currentColor"/>
+  <path d="M12.9285 10.3522L18.5135 4H17.1905L12.339 9.5144L8.467 4H4L9.8565 12.3395L4 19H5.323L10.443 13.1754L14.533 19H19M5.8005 4.97619H7.833L17.1895 18.0718H15.1565" fill="#E5E5E5"/>
 </svg>

tailwind.config.cjs

@@ -21,11 +21,11 @@ module.exports = {
         'fade-slide-up': {
           '0%': {
             opacity: '0',
-            transform: 'translateY(20px)',
+            transform: 'translateX(var(--tw-translate-x, 0)) translateY(20px)',
           },
           '100%': {
             opacity: '1',
-            transform: 'translateY(0)',
+            transform: 'translateX(var(--tw-translate-x, 0)) translateY(0)',
           },
         },
         'fade-in': {