feat: simplify pool item UI (#2238)

polkadot-cloud · Sep 28, 2024 · fdfcaf0 · fdfcaf0
1 parent 227cdbc
commit fdfcaf0
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 15 deletions.
diff --git a/src/library/CallToAction/index.tsx b/src/library/CallToAction/index.tsx
@@ -72,7 +72,6 @@ export const CallToActionWrapper = styled.div`
       }
 
       .buttons {
-        border: 0.75px solid var(--border-primary-color);
         border-radius: var(--button-border-radius);
         display: flex;
         flex-wrap: nowrap;
@@ -157,6 +156,15 @@ export const CallToActionWrapper = styled.div`
           &.standalone {
             border-radius: var(--button-border-radius);
             flex-grow: 1;
+            margin-left: 0.75rem;
+
+            &:nth-child(1) {
+              margin-left: 0;
+            }
+
+            @media (max-width: 650px) {
+              margin-left: 0;
+            }
           }
 
           @media (max-width: 650px) {

diff --git a/src/library/ListItem/Wrappers.ts b/src/library/ListItem/Wrappers.ts
@@ -12,8 +12,8 @@ export const Wrapper = styled.div`
   &.member {
     --height-bottom-row: 2.75rem;
   }
-  &.pool-more {
-    --height-bottom-row: 5.75rem;
+  &.pool {
+    --height-bottom-row: 3.25rem;
   }
 
   --height-total: calc(var(--height-top-row) + var(--height-bottom-row));

diff --git a/src/library/Pool/index.tsx b/src/library/Pool/index.tsx
@@ -24,39 +24,35 @@ export const Pool = ({ pool }: PoolProps) => {
   const currentCommission = getCurrentCommission(id);
 
   return (
-    <Wrapper className="pool-more">
+    <Wrapper className="pool">
       <div className="inner">
         <div className="row top">
           <PoolIdentity pool={pool} />
           <div>
             <Labels>
               <FavoritePool address={addresses.stash} />
+              <More
+                pool={pool}
+                setActiveTab={setActiveTab}
+                disabled={syncing}
+              />
             </Labels>
           </div>
         </div>
         <Separator />
         <div className="row bottom lg pools">
           <div>
-            <Labels className="yMargin">&nbsp;</Labels>
             <PoolNominateStatus pool={pool} />
           </div>
           <div>
-            <Labels className="yMargin">
+            <Labels>
               {currentCommission > 0 && (
                 <PoolCommission commission={`${currentCommission}%`} />
               )}
               <PoolId id={id} />
               <Members members={memberCounter} />
               <PoolBonded pool={pool} />
             </Labels>
-
-            <Labels>
-              <More
-                pool={pool}
-                setActiveTab={setActiveTab}
-                disabled={syncing}
-              />
-            </Labels>
           </div>
         </div>
       </div>

diff --git a/src/locale/cn/pages.json b/src/locale/cn/pages.json
@@ -150,6 +150,7 @@
       "bondedFunds": "己质押金额",
       "bouncer": "守护人",
       "browseMembers": "浏览成员",
+      "browsePools": "浏览提名池",
       "cancel": "取消",
       "closePool": "可提取己解锁金额并关闭池",
       "compound": "复利",

diff --git a/src/locale/en/pages.json b/src/locale/en/pages.json
@@ -152,6 +152,7 @@
       "bondedFunds": "Bonded Funds",
       "bouncer": "Bouncer",
       "browseMembers": "Browse Members",
+      "browsePools": "Browse Pools",
       "cancel": "Cancel",
       "closePool": "You can now withdraw and close the pool.",
       "compound": "Compound",

diff --git a/src/pages/Pools/Home/Status/NewMember.tsx b/src/pages/Pools/Home/Status/NewMember.tsx
@@ -13,10 +13,12 @@ import { usePoolPerformance } from 'contexts/Pools/PoolPerformance';
 import { PoolSync } from 'library/PoolSync';
 import { useJoinPools } from 'contexts/Pools/JoinPools';
 import { StyledLoader } from 'library/PoolSync/Loader';
+import { usePoolsTabs } from '../context';
 
 export const NewMember = ({ syncing }: NewMemberProps) => {
   const { t } = useTranslation();
   const { poolsForJoin } = useJoinPools();
+  const { setActiveTab } = usePoolsTabs();
   const { openCanvas } = useOverlay().canvas;
   const { startJoinPoolFetch } = useJoinPools();
   const { getPoolPerformanceTask } = usePoolPerformance();
@@ -86,7 +88,7 @@ export const NewMember = ({ syncing }: NewMemberProps) => {
             <section>
               <div className="buttons">
                 <div
-                  className={`button secondary standalone${createDisabled ? ` disabled` : ``}`}
+                  className={`button standalone secondary ${createDisabled ? ` disabled` : ``}`}
                 >
                   <button
                     onClick={() =>
@@ -101,6 +103,11 @@ export const NewMember = ({ syncing }: NewMemberProps) => {
                     {t('pools.createPool', { ns: 'pages' })}
                   </button>
                 </div>
+                <div className={`button standalone secondary`}>
+                  <button onClick={() => setActiveTab(1)}>
+                    {t('pools.browsePools', { ns: 'pages' })}
+                  </button>
+                </div>
               </div>
             </section>
           </>