[pi-ui] TextHighlighted component

app/components/shared/BalanceDisplay/BalanceDisplay.jsx

@@ -0,0 +1,16 @@
+import { Balance } from "shared";
+import { TextHighlighted } from "pi-ui";
+import styles from "./BalanceDisplay.module.css";
+
+export const BalanceDisplay = ({ amount }) => (
+  <TextHighlighted className={styles.textHighlighted} truncate={false}>
+    <Balance
+      flat
+      amount={amount}
+      classNameWrapper={styles.balance}
+      classNameUnit={styles.balanceUnit}
+    />
+  </TextHighlighted>
+);
+
+export default BalanceDisplay;

app/components/shared/BalanceDisplay/BalanceDisplay.module.css

@@ -0,0 +1,13 @@
+.textHighlighted {
+  display: inline-block;
+  padding: 0.4rem 1rem;
+  margin: 0 0.5rem;
+}
+
+.balance {
+  color: var(--main-dark-blue);
+}
+
+.balanceUnit {
+  color: var(--main-dark-blue);
+}

app/components/shared/BalanceDisplay/index.js

@@ -0,0 +1 @@
+export { default } from "./BalanceDisplay";

app/components/shared/index.js

@@ -33,3 +33,4 @@ export { default as LNChannelStatus } from "./LNChannelStatus";
 export { default as DetailsTable } from "./DetailsTable";
 export { default as TruncatedText } from "./TruncatedText";
 export { default as CopyableText } from "./CopyableText";
+export { default as BalanceDisplay } from "./BalanceDisplay";

app/components/views/GovernancePage/TabHeader/TabHeader.jsx

@@ -1,4 +1,4 @@
-import { Balance } from "shared";
+import { BalanceDisplay } from "shared";
 import { DescriptionHeader } from "layout";
 import { useTreasuryInfo } from "../hooks";
 import { FormattedMessage as T } from "react-intl";
@@ -26,13 +26,7 @@ const TabHeader = ({ descriptionHeaderClassName }) => {
               id="governance.treasury_balance"
               m="Available Treasury Balance: {treasuryBalance}"
               values={{
-                treasuryBalance: (
-                  <Balance
-                    flat
-                    amount={treasuryBalance}
-                    classNameWrapper={styles.balanceAmount}
-                  />
-                )
+                treasuryBalance: <BalanceDisplay amount={treasuryBalance} />
               }}
             />
           }

app/components/views/GovernancePage/TabHeader/TabHeader.module.css

@@ -3,19 +3,6 @@
   margin-top: 5px;
 }
 
-.balanceAmount {
-  display: inline;
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 28px;
-  padding: 4px 10px;
-  color: var(--input-color-default);
-  background-color: var(--governance-header-balance-bg);
-  margin-left: 5px;
-  margin-right: 5px;
-  border-radius: 3px;
-}
-
 @media screen and (max-width: 768px) {
   .descriptionHeader {
     display: none;

app/components/views/TicketsPage/TicketsPage.jsx

@@ -1,11 +1,10 @@
 import { TabbedPage, TitleHeader, DescriptionHeader } from "layout";
 import { FormattedMessage as T } from "react-intl";
-import { Balance } from "shared";
+import { BalanceDisplay } from "shared";
 import { default as PurchaseTab } from "./PurchaseTab/PurchaseTab";
 import { default as StatisticsTab } from "./StatisticsTab/StatisticsTab";
 import { default as MyTicketsTab } from "./MyTicketsTab/MyTicketsTab";
 import { default as VSPTicketsStatusTab } from "./VSPTicketsStatusTab/MyVSPTickets";
-import styles from "./TicketsPage.module.css";
 import { TICKET_ICON } from "constants";
 import { useTicketsPage } from "./hooks";
 
@@ -25,13 +24,7 @@ const TabHeader = () => {
           id="tickets.description"
           m="Current Price: {ticketPrice}"
           values={{
-            ticketPrice: (
-              <Balance
-                flat
-                amount={ticketPrice}
-                classNameWrapper={styles.smallBalance}
-              />
-            )
+            ticketPrice: <BalanceDisplay amount={ticketPrice} />
           }}
         />
       }

app/components/views/TransactionsPage/HistoryTab/HistoryTab.jsx

@@ -3,12 +3,11 @@ import ErrorScreen from "ErrorScreen";
 import HistoryPage from "./HistoryPage/HistoryPage";
 import { FormattedMessage as T } from "react-intl";
 import { DescriptionHeader } from "layout";
-import { Balance } from "shared";
+import { BalanceDisplay } from "shared";
 import { DCR } from "constants";
 import { useService } from "hooks";
 import { useHistoryTab } from "./hooks";
 import { selectedTxTypesFromFilter, getSortTypes, getTxTypes } from "./helpers";
-import styles from "./HistoryTab.module.css";
 
 export const HistoryTabHeader = () => {
   const { totalBalance } = useHistoryTab();
@@ -19,13 +18,7 @@ export const HistoryTabHeader = () => {
           id="transactions.description.history"
           m="Total Balance: {totalBalance}"
           values={{
-            totalBalance: (
-              <Balance
-                flat
-                amount={totalBalance}
-                classNameWrapper={styles.smallBalance}
-              />
-            )
+            totalBalance: <BalanceDisplay amount={totalBalance} />
           }}
         />
       }

app/components/views/TransactionsPage/ReceiveTab/ReceivePage/QRCodeModal/QRCodeModal.jsx

@@ -1,6 +1,7 @@
 import { FormattedMessage as T } from "react-intl";
 import { wallet } from "wallet-preload-shim";
 import style from "./QRCodeModal.module.css";
+import { TextHighlighted } from "pi-ui";
 
 const QRCode = ({ addr, amount }) => {
   let uri = "decred:" + addr;
@@ -23,7 +24,9 @@ const QRCodeModal = ({ nextAddress, amount, setModal }) => (
         <div className={style.modalLabel}>
           <T id="receive.modalLabel" m="This is My Decred (DCR) Address" />
         </div>
-        <div className={style.modalAddress}>{nextAddress}</div>
+        <TextHighlighted className={style.modalAddress}>
+          {nextAddress}
+        </TextHighlighted>
         <div className={style.modalQR}>
           <QRCode addr={nextAddress} amount={amount} />
         </div>

app/components/views/TransactionsPage/ReceiveTab/ReceivePage/QRCodeModal/QRCodeModal.module.css

@@ -39,26 +39,17 @@
   background-color: var(--background-back-color);
   display: flex;
   flex-direction: column;
-  padding-top: 20px;
-  padding-left: 20px;
+  padding: 20px;
   box-shadow: 0px 5px 21px var(--icons-shadow);
   margin-bottom: 20px;
 }
 
 .modalAddress {
-  margin-right: 15px;
-  background-color: var(--background-address-copy-color);
-  border-radius: 5px;
-  vertical-align: middle;
-  height: 40px;
-  width: 316px;
-  color: var(--input-color-default);
-  font-size: 13px;
-  font-weight: 600;
-  text-align: center;
-  line-height: 40px;
+  font-size: 1.3rem !important;
+  text-align: center !important;
   position: relative;
-  margin-bottom: 20px;
+  margin-bottom: 2rem;
+  padding: 1rem !important;
 }
 
 .modalLabel {
@@ -72,7 +63,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-right: 20px;
 }
 
 .modalSecond {

app/components/views/TransactionsPage/ReceiveTab/ReceivePage/ReceivePage.jsx

@@ -5,7 +5,7 @@ import { ReceiveAccountsSelect, DcrInput } from "inputs";
 import { Subtitle } from "shared";
 import { KeyBlueButton, SmallButton } from "buttons";
 import QRCodeModal from "./QRCodeModal";
-import { classNames, Tooltip } from "pi-ui";
+import { classNames, Tooltip, TextHighlighted } from "pi-ui";
 import style from "./ReceivePage.module.css";
 
 const messages = defineMessages({
@@ -91,11 +91,9 @@ const ReceivePage = ({
         </div>
 
         <div className={style.line}>
-          <div
-            className={classNames(
-              style.receiveContentNestQR,
-              tooltip && style.border
-            )}>
+          <TextHighlighted
+            truncate={false}
+            className={classNames(style.receiveContentNestQR)}>
             {nextAddress}
             <div
               className={classNames(
@@ -117,7 +115,7 @@ const ReceivePage = ({
                 )}
               </div>
             </div>
-          </div>
+          </TextHighlighted>
           <div>
             <Tooltip content={<T id="receiveTab.copy" m="Copy" />}>
               <SmallButton

app/components/views/TransactionsPage/ReceiveTab/ReceivePage/ReceivePage.module.css

@@ -46,27 +46,11 @@
 }
 .receiveContentNestQR {
   margin-right: 10px;
-  background-color: var(--background-address-copy-color);
-  border-radius: 5px;
-  vertical-align: middle;
-  height: 40px;
-  width: 616px;
+  width: 100%;
   color: var(--main-dark-blue);
-  font-size: 16px;
-  font-weight: 400;
-  text-align: center;
-  line-height: 40px;
+  text-align: center !important;
   position: relative;
-  border: 1px transparent solid;
-  transition: border-color 1s;
-}
-
-.receiveContentNestQR:hover {
-  border-color: var(--input-copy-hover-color);
-}
-
-.border {
-  border-color: var(--input-copy-hover-color);
+  padding: 1rem !important;
 }
 
 .receiveContentNestCopyQR {

test/unit/components/views/GetStaredPage/AdvancedStartup.spec.js

@@ -70,13 +70,9 @@ test("test remote daemon form", async () => {
   );
 
   //test toggle control
-  user.click(
-    screen.getByText(/different local daemon location/i).previousSibling
-  );
+  user.click(screen.getByTestId("switch"));
   expect(screen.getByText("Daemon Data Directory:")).toBeInTheDocument();
-  user.click(
-    screen.getByText(/different local daemon location/i).previousSibling
-  );
+  user.click(screen.getByTestId("switch"));
 
   const rpcUsernameInput = screen.getByPlaceholderText(/rpc username/i);
   const rpcPasswordInput = screen.getByPlaceholderText(/rpc password/i);
@@ -132,7 +128,7 @@ test("test local daemon form", async () => {
   user.click(
     screen.getByText(/different local daemon location/i).previousSibling
   );
-  expect(screen.getByText("Daemon Data Directory:")).toBeInTheDocument();
+  user.click(screen.getByTestId("switch"));
   const daemonDataDirectoryInput = screen.getByPlaceholderText(
     "Daemon Data Directory"
   );