style: table design

stationmoney · May 25, 2023 · 54bc07c · 54bc07c
1 parent b2e2f5f
commit 54bc07c
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 24 deletions.
diff --git a/src/txs/stake/WithdrawRewardsForm.module.scss b/src/txs/stake/WithdrawRewardsForm.module.scss
@@ -32,3 +32,7 @@
   @include flex(space-between);
   flex: 1;
 }
+
+.title {
+  padding-bottom: 15px;
+}
diff --git a/src/txs/stake/WithdrawRewardsForm.tsx b/src/txs/stake/WithdrawRewardsForm.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react"
+import { useCallback, useEffect, useMemo, useState, useRef } from "react"
 import { useTranslation } from "react-i18next"
 import { useForm } from "react-hook-form"
 import BigNumber from "bignumber.js"
@@ -13,7 +13,7 @@ import { calcRewardsValues } from "data/queries/distribution"
 import { WithTokenItem } from "data/token"
 import { ValidatorLink } from "components/general"
 import { Form, FormArrow, FormItem, Checkbox } from "components/form"
-import { Card, Flex, Grid } from "components/layout"
+import { Card, Grid } from "components/layout"
 import { TokenCard, TokenCardGrid } from "components/token"
 import { Empty } from "components/feedback"
 import styles from "./WithdrawRewardsForm.module.scss"
@@ -59,6 +59,7 @@ const WithdrawRewardsForm = ({ rewards, validators, chain }: Props) => {
     setState(init(true))
   }, [init])
 
+  let selectAll = useRef(true)
   const selectable = byValidator.length >= 1
   const selected = useMemo(
     () => Object.keys(state).filter((address) => state[address]),
@@ -124,30 +125,37 @@ const WithdrawRewardsForm = ({ rewards, validators, chain }: Props) => {
       {({ fee, submit }) => (
         <Form onSubmit={handleSubmit(submit.fn)}>
           <Grid gap={12}>
-            <dl>
-              <dt>{t("Validators")}</dt>
-            </dl>
             <Card size="small" className={styles.card}>
-              <Flex className={styles.actions} start>
-                {Object.values(state).some((state) => !state) ? (
-                  <button
-                    type="button"
-                    className={styles.button}
-                    onClick={() => setState(init(true))}
-                  >
-                    {t("Select all")}
-                  </button>
-                ) : (
-                  <button
-                    type="button"
-                    className={styles.button}
-                    onClick={() => setState(init(false))}
-                  >
-                    {t("Deselect all")}
-                  </button>
-                )}
-              </Flex>
+              <dl className={styles.title}>
+                <dt>{t("Validators")}</dt>
+                <dd>{t("Rewards")}</dd>
+              </dl>
               <section className={styles.validators}>
+                <Checkbox
+                  className={styles.checkbox}
+                  checked={
+                    selectAll.current && Object.values(state).every(Boolean)
+                  }
+                  onChange={() => {
+                    switch (
+                      selectAll.current &&
+                      Object.values(state).every(Boolean)
+                    ) {
+                      case true:
+                        selectAll.current = false
+                        setState(init(false))
+                        break
+                      case false:
+                        selectAll.current = true
+                        setState(init(true))
+                        break
+                    }
+                  }}
+                >
+                  <dl className={styles.item}>
+                    <dt>{"Select All"}</dt>
+                  </dl>
+                </Checkbox>
                 {byValidator.map(({ address, list: [{ denom, amount }] }) => {
                   const checked = state[address]
                   return (