add help panel

src/pages/rewards/RewardsPage.tsx

@@ -25,6 +25,7 @@ import { MigratePanel } from './MigratePanel';
 import { LaunchIncentivesPanel } from './LaunchIncentivesPanel';
 import { RewardsHelpPanel } from './RewardsHelpPanel';
 import { TradingRewardsSummaryPanel } from './TradingRewardsSummaryPanel';
+import { RewardsHelpPanel } from './RewardsHelpPanel';
 
 const RewardsPage = () => {
   const dispatch = useDispatch();
@@ -56,7 +57,7 @@ const RewardsPage = () => {
 
         <Styled.TradingRewardsColumn>
           <TradingRewardsSummaryPanel />
-          {isTablet && <Styled.HelpPanel slotHeader={<Styled.Title>Help</Styled.Title>} />}
+          {isTablet && <RewardsHelpPanel />}
           <Styled.Panel slotHeader={<Styled.Title>Reward History</Styled.Title>} />
         </Styled.TradingRewardsColumn>
 
@@ -90,7 +91,7 @@ const RewardsPage = () => {
               </Styled.Description>
             </Styled.Panel>
 
-            <Styled.Panel slotHeader={<Styled.Title>Help</Styled.Title>} />
+            <RewardsHelpPanel />
           </Styled.OtherColumn>
         )}
       </Styled.GridLayout>
@@ -174,6 +175,7 @@ Styled.MigratePanel = styled(MigratePanel)`
 Styled.LaunchIncentivesPanel = styled(LaunchIncentivesPanel)`
   grid-area: incentives;
 `;
+
 Styled.DYDXBalancePanel = styled(DYDXBalancePanel)`
   grid-area: balance;
 `;
@@ -182,6 +184,7 @@ Styled.TradingRewardsColumn = styled.div`
   grid-area: rewards;
   ${layoutMixins.flexColumn}
 `;
+
 Styled.OtherColumn = styled.div`
   grid-area: other;
   ${layoutMixins.flexColumn}
@@ -211,5 +214,5 @@ Styled.IconButton = styled(IconButton)`
 `;
 
 Styled.Arrow = styled.div`
-  padding: 1rem;
+  padding-right: 1.5rem;
 `;