fix(staking): fix some minor stylistic issues

- Fix some awkward spacing
- Fix scroll to top of tabs on initial page load
- Add some transitions
- Fix jumpy guides modal on tab change

Author: cprussin

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

@@ -63,15 +63,15 @@ 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 group-selected:opacity-100">
+              <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>
               <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="opacity-50 group-selected:opacity-100 xl:text-xl">
+                <div className="opacity-50 transition group-selected:opacity-100 xl:text-xl">
                   {title}
                 </div>
               </div>
@@ -90,7 +90,10 @@ export const Guide = ({ title, description, steps, ...props }: Props) => {
                   {description}
                 </div>
               </div>
-              <Tabs className="mb-20 px-6">
+              <Tabs
+                defaultSelectedKey={subTabs[0]?.index.toString() ?? ""}
+                className="mb-20 px-6"
+              >
                 <TabList items={subTabs} className="flex flex-col sm:flex-row">
                   {({ title, index: subtabIndex }) => (
                     <Tab

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

@@ -20,7 +20,7 @@ export const Header = ({
       <MaxWidth className="flex h-header items-center justify-between gap-2 lg:-mx-4">
         <Logo className="hidden max-h-full py-4 text-pythpurple-100 sm:block" />
         <Logomark className="max-h-full py-4 text-pythpurple-100 sm:hidden" />
-        <div className="flex flex-none flex-row items-stretch gap-2 xs:gap-4 sm:gap-8">
+        <div className="flex flex-none flex-row items-stretch gap-4 sm:gap-8">
           <CurrentStakeAccount />
           <WalletButton className="flex-none" />
           <HelpMenu />

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

@@ -28,13 +28,17 @@ export const NoWalletHome = () => {
   const showModal = useCallback(() => {
     modal.setVisible(true);
   }, [modal]);
+  const lastTab = useRef<
+    Exclude<ComponentProps<typeof Tabs>["selectedKey"], undefined>
+  >(TabId.IntegrityStaking);
   const [tab, setTab] = useState<
     Exclude<ComponentProps<typeof Tabs>["selectedKey"], undefined>
   >(TabId.IntegrityStaking);
   const scrollTarget = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
-    if (scrollTarget.current) {
+    if (scrollTarget.current && tab !== lastTab.current) {
+      lastTab.current = tab;
       scrollTarget.current.scrollIntoView({ behavior: "smooth" });
     }
   }, [tab]);

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

@@ -113,7 +113,7 @@ export const OracleIntegrityStaking = ({
       })}
     >
       {self && api.type == ApiStateType.Loaded && (
-        <div className="relative -mx-2 mt-6 overflow-hidden border-t border-neutral-600/50 pt-6 sm:mt-10 lg:-mx-4">
+        <div className="relative -mx-4 mt-6 overflow-hidden border-t border-neutral-600/50 pt-6 sm:-mx-8 sm:mt-10">
           <div className="relative w-full overflow-x-auto">
             <div className="sticky left-0 mb-4 flex flex-row items-center justify-between px-4 sm:px-10 sm:pb-4 sm:pt-6">
               <h3 className="text-2xl font-light">
@@ -159,7 +159,7 @@ export const OracleIntegrityStaking = ({
       )}
       <div
         className={clsx(
-          "relative -mx-2 overflow-hidden border-t border-neutral-600/50 pt-6 lg:-mx-4 lg:mt-10",
+          "relative -mx-4 overflow-hidden border-t border-neutral-600/50 pt-6 sm:-mx-8 lg:mt-10",
           { "mt-6": self === undefined },
         )}
       >

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

@@ -69,7 +69,7 @@ export const ProgramSection = ({
 }: Props) => (
   <section
     className={clsx(
-      "border border-t-0 border-neutral-600/50 bg-pythpurple-800 px-2 py-4 lg:px-4 lg:py-6",
+      "border border-t-0 border-neutral-600/50 bg-pythpurple-800 px-4 py-6 sm:px-8",
       className,
     )}
     {...props}
@@ -93,7 +93,7 @@ export const ProgramSection = ({
         {description}
       </div>
     </div>
-    <div className="flex flex-col items-stretch justify-center border-neutral-600/50 md:flex-row lg:border lg:bg-white/5 lg:px-2 lg:py-6">
+    <div className="flex flex-col items-stretch justify-center border-neutral-600/50 md:flex-row lg:mx-auto lg:border lg:bg-white/5 lg:p-6">
       <Position
         name="Available to Stake"
         nameClassName="bg-[rgba(43,_129,_167,_0.25)]"
@@ -210,7 +210,7 @@ const Position = ({
 }: PositionProps) => (
   <div
     className={clsx(
-      "flex w-full flex-col overflow-hidden border border-neutral-600/50 bg-white/5 p-2 sm:p-4 lg:bg-pythpurple-800 lg:p-6",
+      "flex w-full flex-col overflow-hidden border border-neutral-600/50 bg-white/5 p-4 lg:max-w-64 lg:bg-pythpurple-800 lg:p-6",
       className,
     )}
   >