Merge pull request #1924 from cprussin/update-icons-and-images

fix(staking): update to latest icons & images

Author: cprussin

apps/staking/src/components/GovernanceGuide/add-pyth-tokens.png

@@ -63,10 +63,7 @@ export const Guide = ({ title, description, steps, ...props }: Props) => {
               id={index.toString()}
               className="group flex cursor-pointer flex-row items-center gap-4 border border-neutral-600/50 px-6 py-4 transition focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400 selected:cursor-default selected:border-pythpurple-600 selected:bg-pythpurple-600/20 md:flex-1 md:px-4 md:py-2 lg:border-b lg:border-x-transparent lg:border-t-transparent lg:bg-black/40 lg:px-4 lg:py-6 lg:selected:border-neutral-600/50 lg:selected:border-b-transparent lg:selected:bg-black/40 xl:px-10 2xl:px-20"
             >
-              <div className="relative isolate opacity-50 transition group-selected:opacity-100">
-                <Icon className="size-10 flex-none fill-black/80" />
-                <div className="absolute inset-0 rounded-full bg-pythpurple-600 mix-blend-overlay" />
-              </div>
+              <Icon className="size-10 flex-none opacity-50 transition group-selected:opacity-100" />
               <div className="flex flex-col justify-between">
                 <div className="text-sm tracking-[0.5rem] opacity-50 md:tracking-wide">
                   STEP {index + 1}

apps/staking/src/components/Guide/index.tsx

@@ -37,7 +37,7 @@ export const HelpMenu = () => {
   return (
     <>
       <MenuTrigger>
-        <Button className="group -mx-2 flex flex-row items-center gap-2 p-2 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400">
+        <Button className="group -mx-2 flex flex-row items-center gap-2 rounded-sm px-2 transition hover:bg-white/10 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400 pressed:bg-white/10 sm:-mx-4 sm:px-4">
           <QuestionMarkCircleIcon className="size-6 flex-none" />
           <span className="sr-only">Help</span>
           <ChevronDownIcon className="size-4 flex-none opacity-60 transition duration-300 group-data-[pressed]:-rotate-180" />

apps/staking/src/components/Header/help-menu.tsx

@@ -16,9 +16,9 @@ import { Tabs, TabList, Tab, TabPanel } from "react-aria-components";
 
 import governance from "./governance.png";
 import Info from "./info.svg";
+import ObtainRewards from "./obtain-rewards.svg";
 import ois from "./ois.png";
 import Safebox from "./safebox.svg";
-import SecurePyth from "./secure-pyth.svg";
 import SelectPublishers from "./select-publishers.svg";
 import TokenWarmup from "./token-warmup.svg";
 import { Button } from "../Button";
@@ -146,7 +146,7 @@ export const NoWalletHome = () => {
             {
               title: "Secure Pyth to Obtain Rewards",
               body: "The protocol programmatically distributes rewards to publishers who contributed high quality data, and then distributes remaining rewards to the stakers who supported these publishers. Rewards are generated every epoch—one week period.",
-              icon: SecurePyth,
+              icon: ObtainRewards,
             },
           ]}
         />