fix: fix staking app tab selected states

Author: cprussin

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

@@ -268,12 +268,12 @@ const Journey = ({
 }: JourneyProps) => (
   <Tab
     className={clsx(
-      "group/tab flex flex-1 cursor-pointer flex-col items-center bg-pythpurple-800 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400 selected:cursor-default group-data-[empty]:sm:bg-transparent",
+      "group/tab flex flex-1 cursor-pointer flex-col items-center bg-pythpurple-800 data-[selected]:cursor-default focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400 group-data-[empty]:sm:bg-transparent",
       className,
     )}
     {...props}
   >
-    <div className="group-selected/tab:border-pythpurple-400/60 group-selected/tab:bg-pythpurple-600/60 group-hover/tab:group-selected/tab:bg-pythpurple-600/60 grid size-full flex-none basis-0 place-content-center border border-neutral-600/50 bg-pythpurple-800 p-2 text-center font-semibold transition group-hover/tab:bg-pythpurple-600/30 group-data-[empty]:py-8 sm:py-4 sm:text-lg group-data-[empty]:sm:py-2">
+    <div className="grid size-full flex-none basis-0 place-content-center border border-neutral-600/50 bg-pythpurple-800 p-2 text-center font-semibold transition group-hover/tab:bg-pythpurple-600/30 group-data-[selected]/tab:border-pythpurple-400/60 group-data-[selected]/tab:bg-pythpurple-600/60 group-data-[empty]:py-8 group-hover/tab:group-data-[selected]/tab:bg-pythpurple-600/60 sm:py-4 sm:text-lg group-data-[empty]:sm:py-2">
       <span className="hidden group-data-[empty]:inline sm:inline">
         {longText}
       </span>

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

@@ -61,14 +61,14 @@ export const Guide = ({ title, description, steps, ...props }: Props) => {
           {({ title, icon: Icon, index }) => (
             <Tab
               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"
+              className="group flex cursor-pointer flex-row items-center gap-4 border border-neutral-600/50 px-6 py-4 transition data-[selected]:cursor-default data-[selected]:border-pythpurple-600 data-[selected]:bg-pythpurple-600/20 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400 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:data-[selected]:border-neutral-600/50 lg:data-[selected]:border-b-transparent lg:data-[selected]:bg-black/40 xl:px-10 2xl:px-20"
             >
-              <Icon className="group-selected:opacity-100 size-10 flex-none opacity-50 transition" />
+              <Icon className="size-10 flex-none opacity-50 transition group-data-[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}
                 </div>
-                <div className="group-selected:opacity-100 opacity-50 transition xl:text-xl">
+                <div className="opacity-50 transition group-data-[selected]:opacity-100 xl:text-xl">
                   {title}
                 </div>
               </div>
@@ -95,7 +95,7 @@ export const Guide = ({ title, description, steps, ...props }: Props) => {
                   {({ title, index: subtabIndex }) => (
                     <Tab
                       id={subtabIndex.toString()}
-                      className="grid cursor-pointer place-content-center border border-neutral-600/50 p-2 text-center opacity-60 transition focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400 selected:cursor-default selected:border-pythpurple-600/50 selected:bg-pythpurple-600/10 selected:opacity-100 sm:h-20 sm:flex-1 sm:px-2 sm:py-4 md:px-4"
+                      className="grid cursor-pointer place-content-center border border-neutral-600/50 p-2 text-center opacity-60 transition data-[selected]:cursor-default data-[selected]:border-pythpurple-600/50 data-[selected]:bg-pythpurple-600/10 data-[selected]:opacity-100 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400 sm:h-20 sm:flex-1 sm:px-2 sm:py-4 md:px-4"
                     >
                       {title}
                     </Tab>

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

@@ -204,19 +204,19 @@ const ProgramTab = ({
 }: ProgramTabProps) => (
   <Tab
     className={clsx(
-      "group flex flex-1 cursor-pointer flex-col items-center focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400 selected:cursor-default",
+      "group flex flex-1 cursor-pointer flex-col items-center data-[selected]:cursor-default focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400",
       className,
     )}
     {...props}
   >
-    <div className="group-selected:opacity-100 relative hidden w-4/5 opacity-30 transition group-hover:opacity-60 md:block">
+    <div className="relative hidden w-4/5 opacity-30 transition group-hover:opacity-60 group-data-[selected]:opacity-100 md:block">
       <div className="absolute inset-0 bg-[#E6DAFE] mix-blend-color" />
       <Image src={image} alt="" className="size-full" />
       <div className="absolute inset-0 top-16 text-center text-2xl text-pythpurple-800 lg:text-3xl">
         {description}
       </div>
     </div>
-    <div className="group-selected:border-pythpurple-400 group-selected:bg-pythpurple-600 md:group-selected:border-pythpurple-400 size-full border border-transparent text-center font-semibold leading-none transition md:border-neutral-600/50 md:bg-pythpurple-800 md:text-lg">
+    <div className="size-full border border-transparent text-center font-semibold leading-none transition group-data-[selected]:border-pythpurple-400 group-data-[selected]:bg-pythpurple-600 md:border-neutral-600/50 md:bg-pythpurple-800 md:text-lg md:group-data-[selected]:border-pythpurple-400">
       <div className="grid size-full place-content-center p-2 group-hover:bg-pythpurple-600/60 md:p-4">
         {children}
       </div>