SendTab update

decred · Mar 24, 2021 · 555850b · 555850b
1 parent a20cf8f
commit 555850b
Show file tree

Hide file tree

Showing 34 changed files with 803 additions and 268 deletions.
diff --git a/app/components/buttons/SmallButton/SmallButton.jsx b/app/components/buttons/SmallButton/SmallButton.jsx
@@ -0,0 +1,8 @@
+import styles from "./SmallButton.module.css";
+import { Button, classNames } from "pi-ui";
+
+const SmallButton = ({ className, ...props }) => (
+  <Button className={classNames(styles.button, className)} {...props} />
+);
+
+export default SmallButton;
diff --git a/app/components/buttons/SmallButton/SmallButton.module.css b/app/components/buttons/SmallButton/SmallButton.module.css
@@ -0,0 +1,15 @@
+.button {
+  padding: 0 !important;
+  width: 24px;
+  height: 24px;
+  background-size: 17px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-color: var(--small-button-bg) !important;
+  border: none !important;
+  box-shadow: 0px 2px 8px var(--small-button-shadow);
+  transition: none !important;
+}
+.button:hover {
+  opacity: 0.85;
+}
diff --git a/app/components/buttons/SmallButton/index.js b/app/components/buttons/SmallButton/index.js
@@ -0,0 +1 @@
+export { default } from "./SmallButton";
diff --git a/app/components/buttons/index.js b/app/components/buttons/index.js
@@ -23,6 +23,7 @@ import CloseButton from "./CloseButton";
 import HelpLink from "./HelpLink/HelpLink";
 import InvisibleButton from "./InvisibleButton";
 import Button from "./Button/Button";
+import SmallButton from "./SmallButton";
 export {
   ModalButton,
   ToggleSwitch,
@@ -31,7 +32,8 @@ export {
   DangerButton,
   CloseButton,
   InvisibleButton,
-  Button
+  Button,
+  SmallButton
 };
 
 /***************************************************

diff --git a/app/components/inputs/DetailedAccountsSelect/DetailedAccountsSelect.jsx b/app/components/inputs/DetailedAccountsSelect/DetailedAccountsSelect.jsx
@@ -42,10 +42,7 @@ const DetailedAccountsSelect = ({ selectClassName, ...props }) => {
     <div className={classNames(styles.value, styles.option)}>
       <div className={styles.name}>{option.name}</div>
       <div className={styles.spendable}>
-        <Balance
-          flat
-          amount={option.spendable}
-        />
+        <Balance flat amount={option.spendable} />
       </div>
     </div>
   );

diff --git a/app/components/inputs/DetailedAccountsSelect/DetailedAccountsSelect.module.css b/app/components/inputs/DetailedAccountsSelect/DetailedAccountsSelect.module.css
@@ -10,7 +10,7 @@
   justify-content: space-between;
   flex-direction: column;
   width: max-content;
-  max-width: 300px;
+  max-width: 250px;
 }
 .value.option {
   width: 100%;
@@ -65,3 +65,8 @@
   color: var(--main-dark-blue);
   font-size: 13px;
 }
+@media screen and (max-width: 768px) {
+  .value {
+    max-width: 235px;
+  }
+}
diff --git a/app/components/inputs/Input/Input.module.css b/app/components/inputs/Input/Input.module.css
@@ -6,6 +6,7 @@
   font-family: var(--font-family-regular);
   font-size: 16px;
   color: var(--input-color-default);
+  padding-bottom: 2px;
 }
 .inputAndUnit.error {
   border-bottom: 1px var(--error-text-color) solid;
@@ -29,7 +30,7 @@
 }
 .inputAndUnit:hover:not(.disabled):not(.active):not(.error) {
   color: var(--input-color-hovered);
-  border-bottom: 1px var(--input-bottom-border-hovered) solid;
+  border-bottom: 1px var(--accent-blue) solid;
   opacity: 1;
 }
 .inputAndUnit.active:not(.disabled) {

diff --git a/app/components/inputs/PathBrowseInput/PathBrowseInput.module.css b/app/components/inputs/PathBrowseInput/PathBrowseInput.module.css
@@ -4,7 +4,7 @@
   border-bottom: 1px var(--stroke-color-default) solid;
 }
 .pathInputAndButton:hover {
-  border-bottom: 1px solid var(--input-bottom-border-hovered);
+  border-bottom: 1px solid var(--accent-blue);
 }
 .pathInputArea {
   width: 100%;

diff --git a/app/components/inputs/PathInput/PathInput.module.css b/app/components/inputs/PathInput/PathInput.module.css
@@ -15,5 +15,5 @@
   width: 100%;
 }
 .pathInput:hover {
-  border-bottom: 1px solid var(--input-bottom-border-hovered);
+  border-bottom: 1px solid var(--accent-blue);
 }
diff --git a/app/components/layout/DescriptionHeader/DescriptionHeader.module.css b/app/components/layout/DescriptionHeader/DescriptionHeader.module.css
@@ -15,3 +15,8 @@
 .actionButton > .button {
   min-width: 76px;
 }
+@media screen and (max-width: 768px) {
+  .header {
+    display: none;
+  }
+}
diff --git a/app/components/modals/ListUTXOsModal/ListUTXOsModal.module.css b/app/components/modals/ListUTXOsModal/ListUTXOsModal.module.css
@@ -56,7 +56,7 @@
 }
 .accountSelect {
   font-size: 16px;
-  width: 220px;
+  width: 250px;
 }
 .tableHeader tr th:first-child,
 .tableBody tr td:first-child {

diff --git a/app/components/shared/RoutedTabsHeader/RoutedTabsHeader.module.css b/app/components/shared/RoutedTabsHeader/RoutedTabsHeader.module.css
@@ -52,6 +52,9 @@
     left: 25px;
     right: 20px;
   }
+  .tab a {
+    font-size: 13px;
+  }
 
   .tab {
     margin-right: 45px;

diff --git a/app/components/shared/SendTransaction/Form.jsx b/app/components/shared/SendTransaction/Form.jsx
@@ -33,104 +33,111 @@ const Form = ({
       <TransitionMotionWrapper
         {...{ styles: getOutputRows(), willLeave, willEnter, wrapperComponent }}
       />
-      {!hideDetails && (
-        <div className={styles.detailsArea}>
-          <div className={styles.detailsTitle}>Details</div>
+      <div className={styles.detailsArea}>
+        {!hideDetails && (
           <div className={styles.isRow}>
             <div className={styles.detailsLabelColumn}>
-              <div className={styles.totalAmountText}>
+              <div>
                 <T id="send.totalAmountEstimation" m="Total amount sending" />:
               </div>
-              <div className={styles.estimatedFeeText}>
+              <div>
                 <T id="send.feeEstimation" m="Estimated Fee" />:
               </div>
-              <div className={styles.estimatedSizeText}>
+              <div>
                 <T id="send.sizeEstimation" m="Estimated Size" />:
               </div>
             </div>
             <div className={styles.detailsValueColumn}>
-              <Balance flat amount={totalSpent} />
-              <Balance flat amount={estimatedFee} />
-              <div>
-                {estimatedSignedSize}
-                <span className={styles.totalAmountBytes}> Bytes</span>
-              </div>
+              <Balance
+                flat
+                amount={totalSpent}
+                classNameUnit={styles.detailsUnit}
+              />
+              <Balance
+                flat
+                amount={estimatedFee}
+                classNameUnit={styles.detailsUnit}
+              />
+              <div>{`${estimatedSignedSize} Bytes`}</div>
             </div>
           </div>
-        </div>
-      )}
-    </div>
-    <div className={styles.sendButtonArea}>
-      {insuficientFunds && (
-        <div className={styles.error}>
-          <T id="send.insuficient.funds" m="Insufficient funds" />
-        </div>
-      )}
-      {((isTrezor && isWatchingOnly) || !isWatchingOnly) &&
-        (getRunningIndicator ? (
-          <Tooltip
-            content={
-              <T
-                id="send.indicator.running"
-                m="Privacy Mixer, Autobuyer or Purchase Ticket Attempt running, please shut them off before sending a transaction."
-              />
-            }>
-            <SendTransactionButton
-              disabled={true}
-              buttonLabel={sendButtonLabel}
-            />
-          </Tooltip>
-        ) : (
-          <SendTransactionButton
-            disabled={!isValid()}
-            showModal={showPassphraseModal}
-            onShow={resetShowPassphraseModal}
-            buttonLabel={sendButtonLabel}>
-            <div className={styles.passphraseModal}>
-              {!isSendSelf ? (
-                <>
-                  <div className={styles.passphraseModalLabel}>
-                    {outputs.length > 1 ? (
-                      <T
-                        id="send.confirmAmountAddresses"
-                        m="Destination addresses"
-                      />
-                    ) : (
-                      <T
-                        id="send.confirmAmountAddress"
-                        m="Destination address"
-                      />
-                    )}
-                    :
-                  </div>
-                  {outputs.map((output, index) => (
-                    <div
-                      className={styles.passphraseModalAddress}
-                      key={"confirm-" + index}>
-                      {output.data.destination}
-                    </div>
-                  ))}
-                </>
-              ) : (
-                <>
+        )}
+        <div className={styles.sendButtonArea}>
+          {insuficientFunds && (
+            <div className={styles.error}>
+              <T id="send.insuficient.funds" m="Insufficient funds" />
+            </div>
+          )}
+          {((isTrezor && isWatchingOnly) || !isWatchingOnly) &&
+            (getRunningIndicator ? (
+              <Tooltip
+                content={
+                  <T
+                    id="send.indicator.running"
+                    m="Privacy Mixer, Autobuyer or Purchase Ticket Attempt running, please shut them off before sending a transaction."
+                  />
+                }>
+                <SendTransactionButton
+                  disabled={true}
+                  buttonLabel={sendButtonLabel}
+                />
+              </Tooltip>
+            ) : (
+              <SendTransactionButton
+                disabled={!isValid()}
+                showModal={showPassphraseModal}
+                onShow={resetShowPassphraseModal}
+                buttonLabel={sendButtonLabel}>
+                <div className={styles.passphraseModal}>
+                  {!isSendSelf ? (
+                    <>
+                      <div className={styles.passphraseModalLabel}>
+                        {outputs.length > 1 ? (
+                          <T
+                            id="send.confirmAmountAddresses"
+                            m="Destination addresses"
+                          />
+                        ) : (
+                          <T
+                            id="send.confirmAmountAddress"
+                            m="Destination address"
+                          />
+                        )}
+                        :
+                      </div>
+                      {outputs.map((output, index) => (
+                        <div
+                          className={styles.passphraseModalAddress}
+                          key={"confirm-" + index}>
+                          {output.data.destination}
+                        </div>
+                      ))}
+                    </>
+                  ) : (
+                    <>
+                      <div className={styles.passphraseModalLabel}>
+                        <T
+                          id="send.confirmAmountAccount"
+                          m="Destination account"
+                        />
+                        :
+                      </div>
+                      <div className={styles.passphraseModalAddress}>
+                        {nextAddressAccount.name}
+                      </div>
+                    </>
+                  )}
                   <div className={styles.passphraseModalLabel}>
-                    <T id="send.confirmAmountAccount" m="Destination account" />
-                    :
+                    <T id="send.confirmAmountLabelFor" m="Total Spent" />:
                   </div>
-                  <div className={styles.passphraseModalAddress}>
-                    {nextAddressAccount.name}
+                  <div className={styles.passphraseModalBalance}>
+                    <Balance amount={totalSpent} />
                   </div>
-                </>
-              )}
-              <div className={styles.passphraseModalLabel}>
-                <T id="send.confirmAmountLabelFor" m="Total Spent" />:
-              </div>
-              <div className={styles.passphraseModalBalance}>
-                <Balance amount={totalSpent} />
-              </div>
-            </div>
-          </SendTransactionButton>
-        ))}
+                </div>
+              </SendTransactionButton>
+            ))}
+        </div>
+      </div>
     </div>
     {unsignedRawTx && isWatchingOnly && !isTrezor && (
       <UnsignedTx

diff --git a/app/components/shared/SendTransaction/SendTransaction.jsx b/app/components/shared/SendTransaction/SendTransaction.jsx
@@ -2,7 +2,6 @@ import { FormattedMessage as T } from "react-intl";
 import { useSendTransaction, useOutputs } from "./hooks";
 import { useState, useEffect, useCallback } from "react";
 import { useMountEffect } from "hooks";
-import SendOutputRow from "./SendOutputRow/SendOutputRow";
 import { spring, presets } from "react-motion";
 import { baseOutput } from "./helpers";
 import { usePrevious } from "hooks";
@@ -16,7 +15,8 @@ const SendTransaction = ({
   sendButtonLabel,
   receiveAccount,
   spendingAccount,
-  filterFromAccounts
+  filterFromAccounts,
+  SendOutputRow
 }) => {
   const {
     defaultSpendingAccount,
@@ -237,7 +237,6 @@ const SendTransaction = ({
             accountsType,
             onlySendSelfAllowed,
             receiveAccountsSelectDisabled,
-            extStyle: styles,
             receiveAccount
           }}
         />

diff --git a/app/components/shared/Subtitle/Subtitle.module.css b/app/components/shared/Subtitle/Subtitle.module.css
@@ -23,5 +23,7 @@
   .tabbedPageSubtitle {
     width: 355px;
     margin-left: 0;
+    font-size: 20px;
+    line-height: 25px;
   }
 }
diff --git a/app/components/views/PrivacyPage/Privacy/PrivacyContent.jsx b/app/components/views/PrivacyPage/Privacy/PrivacyContent.jsx
@@ -13,6 +13,7 @@ import { SendFromUnmixedAccountModal } from "modals";
 import style from "./Privacy.module.css";
 import styles from "./SendForm.module.css";
 import { useService } from "hooks";
+import SendOutputRow from "./SendOutputRow";
 
 const PrivacyContent = ({
   accountMixerError,
@@ -156,6 +157,7 @@ const PrivacyContent = ({
             receiveAccount={changeAccount}
             spendingAccount={defaultSpendingAccountDisregardMixedAccount}
             filterFromAccounts={[changeAccount]}
+            SendOutputRow={SendOutputRow}
           />
         </div>
       )}