Change order of tasks

- small ui fixes
dappforce · Jul 24, 2024 · 8c91a2e · 8c91a2e
1 parent bb0dbca
commit 8c91a2e
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 8 deletions.
diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
@@ -19,6 +19,7 @@ export type TabsProps = ComponentProps<'div'> & {
   tabClassName?: ((selected: boolean) => string) | string
   defaultTab?: number
   withHashIntegration?: boolean
+  containerClassName?: string
   hideBeforeHashLoaded?: boolean
   manualTabControl?: {
     selectedTab: number
@@ -33,6 +34,7 @@ export default function Tabs({
   panelClassName,
   tabsRightElement,
   tabClassName,
+  containerClassName,
   defaultTab = 0,
   hideBeforeHashLoaded,
   withHashIntegration = true,
@@ -140,7 +142,9 @@ export default function Tabs({
       </Tab.List>
       <Tab.Panels as={component} className={cx('mt-2', panelClassName)}>
         {tabs.map(({ id, content }) => (
-          <Tab.Panel key={id}>{content(changeTab)}</Tab.Panel>
+          <Tab.Panel className={containerClassName} key={id}>
+            {content(changeTab)}
+          </Tab.Panel>
         ))}
         {usedSelectedTab === -1 && <Tab.Panel key='empty' />}
       </Tab.Panels>

diff --git a/src/modules/telegram/FriendsPage/LeaderboardModal.tsx b/src/modules/telegram/FriendsPage/LeaderboardModal.tsx
@@ -87,7 +87,7 @@ const LeaderboardModalContent = () => {
       id: 'contest',
       text: 'Contest',
       content: () => (
-        <div className='flex flex-col gap-4'>
+        <div className='flex h-full flex-col gap-4'>
           <span className='text-sm text-slate-400'>
             Top 10 users who invite the most friends during the week will be
             rewarded.{' '}
@@ -103,7 +103,7 @@ const LeaderboardModalContent = () => {
       id: 'allTime',
       text: 'All-Time',
       content: () => (
-        <div className='flex flex-col gap-4'>
+        <div className='flex h-full flex-col gap-4'>
           <span className='text-sm text-slate-400'>
             All users who invite the most friends.
           </span>
@@ -117,7 +117,8 @@ const LeaderboardModalContent = () => {
     <div className='flex h-full w-full flex-col gap-4'>
       <Tabs
         className='rounded-full bg-slate-900 p-[2px]'
-        panelClassName='mt-0 w-full max-w-full px-0 z-0'
+        panelClassName='mt-0 w-full h-full max-w-full px-0 z-0'
+        containerClassName='h-full'
         tabClassName={(selected) =>
           cx(
             {
@@ -214,7 +215,7 @@ const LeaderboardTable = ({ isContest }: LeaderboardTableProps) => {
           <Loading title='Loading table data' className='p-7' />
         ) : (
           <div
-            className='flex flex-col items-center justify-center p-4 text-center'
+            className='flex h-full flex-col items-center justify-center p-4 text-center'
             style={{ gridColumn: '1/4' }}
           >
             <Image

diff --git a/src/modules/telegram/FriendsPage/index.tsx b/src/modules/telegram/FriendsPage/index.tsx
@@ -125,7 +125,7 @@ const FriendsPageContent = () => {
         <Button
           size='lg'
           variant={'bgLighter'}
-          className='h-full bg-slate-700 px-4 text-white'
+          className='flex h-[48px] min-w-[48px] items-center justify-center bg-slate-700 p-0 text-white'
           onClick={() => onCopyClick(referralLink)}
         >
           {isCopied ? <MdCheck /> : <MdOutlineContentCopy />}

diff --git a/src/modules/telegram/TasksPage/index.tsx b/src/modules/telegram/TasksPage/index.tsx
@@ -47,9 +47,9 @@ export default function TasksPage() {
         className='sticky top-0'
       />
       <div className='flex flex-1 flex-col gap-8 overflow-auto px-4 py-8'>
-        <BasicTasks />
-        <DailyTasks />
         <InviteFriendsTasks />
+        <DailyTasks />
+        <BasicTasks />
         <NewTasks />
       </div>
     </LayoutWithBottomNavigation>