Responsive transaction buttons

src/components/lib/index.tsx

@@ -6,6 +6,7 @@ import Button from "./button";
 import Checkbox from "./checkbox";
 import TextField from "./textfield";
 import Progress from "./progress";
+import Spinner from "./spinner";
 import ShowModal from "./modal";
 import { Row, Col } from "./grid";
 import FieldError from "./feedback/fieldError";
@@ -16,6 +17,7 @@ export {
   Badge,
   Checkbox,
   Progress,
+  Spinner,
   Row,
   Col,
   Button,

src/components/lib/spinner/index.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { StyledSpinner } from "./styled";
+
+const Spinner: React.FC<{ size?: string, color?: string }> = ({ size, color }) => (
+    <span style={{margin: "0px 4px"}}>
+      <StyledSpinner viewBox={`0 0 ${size} ${size}`} size={size} color={color}>
+        <circle
+          className="path"
+          cx={Math.floor(+size * .5)}
+          cy={Math.floor(+size * .5)}
+          r={Math.floor(+size * .4)}
+          fill="none"
+          strokeWidth="2"
+        />
+      </StyledSpinner>
+    </span>
+  );
+
+Spinner.defaultProps ={
+    size: "50",
+    color: "#ffffff"
+};
+
+export default Spinner;

src/components/lib/spinner/styled.tsx

@@ -0,0 +1,36 @@
+import styled from "styled-components";
+
+const StyledSpinner = styled.svg<{ size: string, color: string }>`
+  animation: rotate 1s linear infinite;
+  margin: 0px;
+  width: ${props => props.size}px;
+  height: ${props => props.size}px;
+
+  & .path {
+    stroke: ${props => props.color};
+    stroke-linecap: round;
+    animation: dash 1.7s ease-in-out infinite;
+  }
+
+  @keyframes rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes dash {
+    0% {
+      stroke-dasharray: 1, 150;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: -35;
+    }
+    100% {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: -124;
+    }
+  }
+`;
+
+export { StyledSpinner };

src/components/lib/youtube/index.tsx

@@ -6,26 +6,17 @@ import React from "react";
 
 export default ({ youtubeId }) => {
     return (
-        <div
-            className="video"
+        <iframe
+            title={youtubeId}
             style={{
-                position: "relative",
-                paddingBottom: "56.25%" /* 16:9 */,
-                paddingTop: 25,
-                height: 0
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%"
             }}
-        >
-            <iframe
-                style={{
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    width: "100%",
-                    height: "100%"
-                }}
-                src={`https://www.youtube.com/embed/${youtubeId}`}
-                frameBorder="0"
-            />
-        </div>
+            src={`https://www.youtube.com/embed/${youtubeId}`}
+            frameBorder="0"
+        />
     );
 };

src/components/pages/faucet/component.tsx

@@ -4,7 +4,7 @@ import walletIcon from '../../../images/icons/wallet.svg'
 import { RouteComponentProps, withRouter } from 'react-router-dom'
 import { Container } from '../../../styles/bases'
 import { Margin, Padding } from '../../../styles/utils'
-import { Row, Col, Button } from '../../lib'
+import { Row, Col, Button, Spinner } from '../../lib'
 import { FaucetActionMobile, FaucetBox, FaucetWrapper } from './styled'
 import contractAddresses from '../../../config/ines.fund.js'
 import { prepBigNumber } from '../../../utils/web3Utils'
@@ -164,6 +164,9 @@ class Faucet extends React.Component<FaucetProps, FaucetState> {
                                                         onClick={this.onRequest}
                                                     >
                                                         Request
+                                                        {transacting &&
+                                                            <Spinner size="16"/>
+                                                        }
                                                     </Button>
                                                 </Col>
                                             </Row>
@@ -175,6 +178,9 @@ class Faucet extends React.Component<FaucetProps, FaucetState> {
                                                 onClick={this.onRequest}
                                             >
                                                 Request
+                                                {transacting &&
+                                                    <Spinner size="16"/>
+                                                }
                                             </Button>
                                         </FaucetActionMobile>
                                     </Col>

src/components/pages/home/hero/index.tsx

@@ -3,7 +3,7 @@ import { ChasingDots } from 'styled-spinkit'
 import YoutubeEmbed from '../../../lib/youtube'
 import ModalListContributor from '../modalListContributor'
 import ModalVideo from './modalVideo'
-import { Container } from '../../../../styles/bases'
+import { MainContainer } from '../../../../styles/bases'
 import { Margin } from '../../../../styles/utils'
 import { Row, Col, Progress, Button, ShowModal } from '../../../lib'
 import { RouteComponentProps, withRouter } from 'react-router-dom'
@@ -37,6 +37,7 @@ import {
     HeroLink,
     HeroStats,
     HeroImage,
+    HeroVideo,
     HeroStatsRight,
 } from './styled'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -187,13 +188,15 @@ class HomeHero extends React.Component<HomeHeroProps, HomeHeroState> {
                     src={PatternImage}
                     alt="pattern"
                 />
-                <Container>
+                <MainContainer>
                     <HeroCell>
                         <Row>
                             <Col lg={7} md={12} sm={12} text="center">
                                 <HeroImage>
                                     <HeroLink>
-                                        <YoutubeEmbed youtubeId="s7oGAs4AkJg" />
+                                        <HeroVideo>
+                                            <YoutubeEmbed youtubeId="s7oGAs4AkJg" />
+                                        </HeroVideo>
                                     </HeroLink>
                                 </HeroImage>
                             </Col>
@@ -448,7 +451,7 @@ class HomeHero extends React.Component<HomeHeroProps, HomeHeroState> {
                             </Col>
                         </Row>
                     </HeroCell>
-                </Container>
+                </MainContainer>
             </HeroWrapper>
         )
     }

src/components/pages/home/hero/styled.tsx

@@ -11,6 +11,9 @@ const HeroWrapper = styled.div`
 const HeroCell = styled.div`
     background-color: white;
     padding: 30px;
+    ${MaxWidth.sm`
+        padding: 0 20px 20px;
+    `}
 `
 
 const HeroButtonLendMobile = styled.div`
@@ -55,12 +58,27 @@ const HeroImage = styled.div`
     position: relative;
 `
 
+const HeroVideo = styled.div`
+    className: video;
+    position: relative;
+    padding-bottom: 56.25%;
+    padding-top: 25
+    height: 0
+    ${MaxWidth.sm`
+        padding-top: 0;
+        margin-top: -8px;
+        margin-left: -20px;
+        margin-right: -20px;
+    `}
+`
+
 export {
     HeroWrapper,
     HeroCell,
     HeroButtonLendMobile,
     HeroLink,
     HeroStats,
     HeroImage,
+    HeroVideo,
     HeroStatsRight,
 }

src/components/pages/loanOffer/loanAmount/index.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { Form, Field } from 'react-final-form'
 import { Container } from '../../../../styles/bases'
 import { Margin, Padding } from '../../../../styles/utils'
+import { Spinner } from '../../../lib';
 import { RouteComponentProps, withRouter } from 'react-router-dom'
 import { AppPath } from '../../../../constant/appPath'
 import {
@@ -437,6 +438,9 @@ class LoanAmount extends React.Component<LoanAmountProps, LoanAmountState> {
                                                         disabled={transacting || !this.state.crowdloanInstance}
                                                     >
                                                         Submit
+                                                        {transacting &&
+                                                            <Spinner size="16"/>
+                                                        }
                                                     </Button>
                                                 </Margin>
                                             </Col>

src/components/pages/myLoan/borrowerActions/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Margin } from "../../../../styles/utils";
-import { Row, Col, Button } from "../../../lib";
+import { Row, Col, Button, Spinner } from "../../../lib";
 import { BorrowerActionBox } from "./styled";
 import{ LoanStatuses } from "../../../../config/constants";
 
@@ -28,6 +28,9 @@ const BorrowerAction: any = ({
             <Col lg={6} md={12}>
               <Button color="green" onClick={onstartcrowdfund} disabled={transacting}>
                 Start Crowdfund
+                {transacting &&
+                    <Spinner size="16"/>
+                }
               </Button>
             </Col>
           </Row>
@@ -36,6 +39,9 @@ const BorrowerAction: any = ({
           <Col lg={6} md={12}>
             <Button color="green" onClick={onborrowerwithdraw} disabled={transacting}>
               Withdraw Principal
+              {transacting &&
+                  <Spinner size="16"/>
+              }
             </Button>
           </Col>
         </Row>
@@ -44,6 +50,9 @@ const BorrowerAction: any = ({
             <Col lg={6} md={12}>
               <Button color="green" onClick={onrepay} disabled={transacting}>
                 Repay
+                {transacting &&
+                    <Spinner size="16"/>
+                }
               </Button>
             </Col>
           </Row>