styling updates and feature adjustments

brave-intl · Oct 27, 2023 · 4ed3937 · 4ed3937
1 parent 3a7ecf8
commit 4ed3937
Show file tree

Hide file tree

Showing 11 changed files with 138 additions and 45 deletions.
diff --git a/app/assets/fonts/inter/Inter-Regular.woff2 b/app/assets/fonts/inter/Inter-Regular.woff2
diff --git a/app/assets/fonts/inter/Inter-SemiBold.woff2 b/app/assets/fonts/inter/Inter-SemiBold.woff2
diff --git a/app/assets/images/default_banner_bg.jpg b/app/assets/images/default_banner_bg.jpg
diff --git a/app/assets/stylesheets/_fonts.scss b/app/assets/stylesheets/_fonts.scss
@@ -22,6 +22,30 @@
     U+FEFF, U+FFFD;
 }
 
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: local("Inter Regular"), local("Inter-Regular"),
+    font-url("inter/Inter-Regular.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: "Inter";
+  font-display: swap;
+  font-style: normal;
+  font-weight: 500;
+  src: local("Inter SemiBold"), local("Inter-SemiBold"),
+    font-url("inter/Inter-SemiBold.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
 @font-face {
   font-family: "Muli";
   font-style: normal;

diff --git a/app/javascript/locale/en.ts b/app/javascript/locale/en.ts
@@ -322,7 +322,7 @@ export default {
       widgetTitle: "P2P WALLETS",
       ethereum: "Ethereum",
       ethereumBAT: "Basic Attention Token",
-      solanaBAT: "Basic Attention Token",
+      solanaBAT: "Basic Attention Token (Portal)",
       solana: "Solana",
       genericError: "An error occurred. Please try again later.",
       addressConnectFailure: "Connecting new address failed",
@@ -335,7 +335,7 @@ export default {
     privacyDisclaimer: "Please note that your contribution will be publicly visible as a transaction on the blockchain network you select, and cannot be deleted.",
     generateQR: "Generate QR Code",
     QRModalHeader: "Send from mobile wallets",
-    QRModalText: "You can send by scanning this QR code using a Web3 wallet from your mobile device.",
+    QRModalText: "Scanning this QR code will give you the creator’s {chain} address.",
     paymentHeading: "Show your love and send a token of your gratitude",
     paymentSubHeading: "Support your favorite creators",
     send: "Send",
@@ -346,7 +346,9 @@ export default {
     share: "Share your support",
     goBack: "Go back",
     thanks: "Thanks for supporting your favorite creators",
-    hooray: "Hooray! {amount} sent"
+    hooray: "Hooray! {amount} sent",
+    successTweet: "I just sent some {symbol} to {name} via their Brave contribution page {url}! Want to receive {symbol} too? Sign up at https://creators.brave.com!",
+    QRBatText: "Scanning this QR code will give you the creator’s BAT address on {chain}."
   }
 };
 

diff --git a/app/javascript/views/publicChannelPage/CryptoPaymentWidget.jsx b/app/javascript/views/publicChannelPage/CryptoPaymentWidget.jsx
@@ -59,6 +59,8 @@ class CryptoPaymentWidget extends React.Component {
 
     const addresses = { SOL: solAddress && solAddress[0], ETH: ethAddress && ethAddress[0] };
 
+    this.iconOptions = { SOL: solIcon, ETH: ethIcon, BAT: batIcon };
+
     const dropdownOptions = []
 
     if (ethAddress) {
@@ -104,6 +106,7 @@ class CryptoPaymentWidget extends React.Component {
       toggle: 'crypto',
       selectValue: dropdownOptions.flatMap(opt => opt.options).filter(opt => opt.value === currentChain)[0],
       isSuccessView: false,
+      title: this.props.title,
     }
   }
 
@@ -129,6 +132,14 @@ class CryptoPaymentWidget extends React.Component {
     return Math.round(this.calculateCryptoPrice() * 100000) / 100000;
   }
 
+  baseChain() {
+    if (this.state.currentChain.includes('BAT')) {
+      return this.state.currentChain === 'BAT' ? 'ETH' : 'SOL';
+    } else {
+      return this.state.currentChain;
+    }
+  }
+
   closeModal = () => {
     this.setState({ isModalOpen: false });
   }
@@ -368,7 +379,7 @@ class CryptoPaymentWidget extends React.Component {
   };
 
   handleInputChange = (event) => {
-    const customValue = parseFloat(event.target.value);
+    const customValue = parseFloat(event.target.value || 0);
     const newState = {...this.state};
     newState.customAmount = customValue;
     newState.currentAmount = customValue;
@@ -391,7 +402,7 @@ class CryptoPaymentWidget extends React.Component {
     if (this.state.isLoading) {
       return (<CryptoWidgetWrapper></ CryptoWidgetWrapper>)
     } else if (this.state.isSuccessView) {
-      return ( <SuccessWidget setStateToStart={this.setStateToStart.bind(this)} amount={this.roundCryptoPrice()} chain={this.state.currentChain} /> )
+      return ( <SuccessWidget setStateToStart={this.setStateToStart.bind(this)} amount={this.roundCryptoPrice()} chain={this.state.displayChain} name={this.state.title} /> )
     } else {
       return (
         <CryptoWidgetWrapper>
@@ -412,13 +423,25 @@ class CryptoPaymentWidget extends React.Component {
                 }}
                 value={this.state.selectValue}
                 styles={{
-                  IndicatorSeparator: (base) => ({ ...base, background: '#ffffff' }),
-                  Control: (base) => ({ ...base, border: 'none' }),
-                  ValueContainer: (base) => ({
+                  control: (base) => ({ ...base, border: 'none', boxShadow: 'none' }),
+                  groupHeading: (base) => ({...base, textAlign: 'left', marginLeft: '16px'}),
+                  indicatorSeparator: (base) => ({...base, display: 'none'}),
+                  input: (base) => ({...base, caretColor: 'transparent' }),
+                  valueContainer: (base) => ({
                     ...base,
                     textAlign: 'left',
-                    padding: '26px',
+                    padding: '16px',
                     fontWeight: '600',
+                    paddingLeft: '50px',
+                    backgroundImage: `url(${this.iconOptions[this.state.displayChain]})`,
+                    backgroundRepeat: 'no-repeat',
+                    backgroundPosition: 'left',
+                  }),
+                  menu: (base) => ({
+                    ...base,
+                    marginTop: '0px',
+                    paddingTop: '30px',
+                    borderRadius: '0px 0px 8px 8px',
                   }),
                 }}
               />
@@ -483,10 +506,9 @@ class CryptoPaymentWidget extends React.Component {
             handleClose={() => this.closeModal()}
           >
             <QRCodeModal
-              address={this.state.addresses[this.state.currentChain]}
-              chain={this.state.currentChain}
-              amount={this.state.currentAmount}
-              ratios={this.state.ratios}
+              address={this.state.addresses[this.baseChain()]}
+              chain={this.baseChain()}
+              displayChain={this.state.displayChain}
             />
           </Modal>
         </CryptoWidgetWrapper>

diff --git a/app/javascript/views/publicChannelPage/PublicChannelPage.jsx b/app/javascript/views/publicChannelPage/PublicChannelPage.jsx
@@ -14,6 +14,7 @@ import {
   PrivacyDisclaimer,
   CryptoPaymentContainer,
   SocialLink,
+  PublicChannelContainer,
 } from "./PublicChannelPageStyle.js";
 
 import twitch from "../../../assets/images/social-twitch.png";
@@ -44,7 +45,7 @@ class PublicChannelPage extends React.Component {
 
   render() {
     return (
-      <>
+      <PublicChannelContainer>
         <ImageContainer>
           <Cover url={this.coverUrl}/>
         </ImageContainer>
@@ -70,14 +71,14 @@ class PublicChannelPage extends React.Component {
               </div>
             </DescriptionContainer>
             <CryptoPaymentContainer className='col-xs-12 col-lg-6'>
-              <CryptoPaymentWidget cryptoAddresses={this.cryptoAddresses} cryptoConstants={this.cryptoConstants} />
+              <CryptoPaymentWidget title={this.title} cryptoAddresses={this.cryptoAddresses} cryptoConstants={this.cryptoConstants} />
               <PrivacyDisclaimer>
                 <FormattedMessage id="publicChannelPage.privacyDisclaimer" />
               </PrivacyDisclaimer>
             </CryptoPaymentContainer>
           </div>
         </div>
-      </>
+      </PublicChannelContainer>
     )
   }
 }

diff --git a/app/javascript/views/publicChannelPage/PublicChannelPageStyle.js b/app/javascript/views/publicChannelPage/PublicChannelPageStyle.js
@@ -1,11 +1,14 @@
 import styled from "styled-components";
 
-import BatsBackground from "../../../assets/images/bg_bats.svg";
-import HeartsBackground from "../../../assets/images/bg_hearts.svg";
+import DefaultBg from "../../../assets/images/default_banner_bg.jpg"
 import CryptoWidgetBackground from "../../../assets/images/crypto_widget_bg.png";
 import CryptoWidgetSuccess from "../../../assets/images/crypto_widget_success.png";
 import Exchange from "../../../assets/images/exchange.svg";
 
+export const PublicChannelContainer = styled.div`
+  font-family: 'poppins', sans-serif;
+`;
+
 export const Logo = styled.div`
   border-radius: 50%;
   width: 160px;
@@ -37,13 +40,16 @@ export const Cover = styled.div`
     url &&
     `
     background-size: cover;
+    background-repeat: no-repeat;
     background-image: url(${url})
   `}
 
   ${({ url }) =>
     url === null &&
     `
-    background: url(${BatsBackground}) left bottom no-repeat, url(${HeartsBackground}) right top no-repeat, rgb(158, 159, 171);
+    background-image: url(${DefaultBg});
+    background-repeat: no-repeat;
+    background-size: cover;
   `}
 `;
 
@@ -53,7 +59,7 @@ export const ImageContainer = styled.div`
 `;
 
 export const DescriptionContainer = styled.div`
-  font-family: 'Poppins-Regular', sans-serif;
+  font-family: 'Inter', sans-serif;
   z-index: 100;
   margin-bottom: 2rem;
 `;
@@ -95,7 +101,7 @@ export const CreatorTitle = styled.div`
 export const PrivacyDisclaimer = styled.div`
   text-align: center;
   font-size: .8rem;
-  font-family: 'Poppins-Regular', sans-serif;
+  font-family: 'Inter', sans-serif;
   color: #3F4855;
   margin: 1rem;
 `;
@@ -116,11 +122,20 @@ export const QRTitle = styled.div`
   padding-bottom: 50px;
 `;
 
+export const QRSubTitle = styled.div`
+  font-size: 0.9rem;
+  max-width: calc(100% - 50px);
+  font-family: 'Inter', sans-serif;
+  font-weight: 400;
+  margin-bottom: -20px;
+`;
+
 export const QRText = styled.div`
   font-size: 0.9rem;
   padding-top: 50px;
   white-space: nowrap;
   max-width: calc(100% - 50px);
+  font-family: 'Inter', sans-serif;
 `;
 
 export const QRTextItem = styled.div`
@@ -142,6 +157,7 @@ export const QRLink = styled.button`
   font-weight: 600;
   color: #3F39E8;
   font-size: 0.9em;
+  font-family: poppins, sans-serif;
   width: 100%;
   padding: 14px 20px 14px 20px;
   border: none;
@@ -153,6 +169,7 @@ export const WidgetHeading = styled.div`
   font-size: 1.6em;
   margin-top: 12px;
   color: #0D0F14;
+  font-family: poppins, sans-serif;
 `;
 
 export const WidgetSubHeading = styled.div`
@@ -174,6 +191,7 @@ export const SendButton = styled.button`
   border: none;
   color: #ffffff;
   font-weight: 600;
+  font-family: poppins, sans-serif;
   font-size 0.9em;
 `;
 
@@ -184,12 +202,13 @@ export const PaymentButtons = styled.div`
 export const PaymentOptions = styled.div`
   background-color: #ffffff;
   border-radius: 12px;
-  padding: 32px;
+  padding: 20px 32px 32px 32px;
 `;
 
 export const SmallCurrencyDisplay = styled.div`
   display: inline-block;
   color: #3F4855;
+  font-family: 'Inter', sans-serif;
 `;
 
 export const LargeCurrencyDisplay = styled.div`
@@ -198,6 +217,7 @@ export const LargeCurrencyDisplay = styled.div`
   line-height: 1.1em;
 
   .currency {
+    font-family: 'Inter', sans-serif;
     font-size: 0.5em;
   }
 `;
@@ -215,7 +235,7 @@ export const ExchangeIcon = styled.div`
 
 export const CryptoOption = styled.div`
   text-align: left;
-  padding: 26px;
+  padding: 20px 26px;
   font-weight: 600;
 
   img {
@@ -228,6 +248,7 @@ export const CryptoOption = styled.div`
 export const AmountButton = styled.button`
   background-color: #FFFFFF;
   border: 1px solid #A1ABBA;
+  font-size: 13px;
   padding: 5px 14px;
   &.selected {
     background-color: #EDEEF1;
@@ -252,6 +273,7 @@ export const AmountInput = styled.input`
   padding: 5px 14px;
   width: 86px;
   color: #3F4855;
+  font-size: 13px;
 
   &::-webkit-inner-spin-button,
   &::-webkit-outer-spin-button {
@@ -292,4 +314,23 @@ export const SuccessThank = styled.div`
 export const SuccessAmount = styled.div`
   color: #2ABA32;
   font-weight: 600;
+  font-family: 'Inter', sans-serif;
+`;
+
+export const ShareButton = styled.a`
+  width: 100%;
+  padding: 14px 20px 14px 20px;
+  border-radius: 26px;
+  background: rgba(63, 57, 232, 1);
+  color: #ffffff;
+  font-weight: 600;
+  font-family: poppins, sans-serif;
+  font-size 0.9em;
+  display: block;
+  cursor: pointer;
+
+  &:hover {
+    color: #ffffff;
+    text-decoration: none;
+  }
 `;