Dashboard css3

src/components/farmCard.jsx

@@ -146,7 +146,7 @@ const FarmCard = (props) => {
         <>
             {(rows[0].length > 0) ? (
                 rows.map((poolRow, i) => (
-                    <div key={i} md="10" lg="6" xl="4" style ={{display:'inline-flex'}}>
+                    <div key={i} md="10" lg="6" xl="4" className="stake-card-container">
                         {poolRow.map((pool, j) => (
 
 
@@ -369,16 +369,16 @@ const CoinCard = (props) => {
                             </div>
                         </Col>
                         <Col lg={12}>
-                            <div className="d-flex justify-content-between p-0">
+                            <div className="d-flex justify-content-between p-0 align-items-end">
                                 <div>
                                     <small className="card_stake_text"><strong style={{ paddingLeft: 12 }}>xKAWA EARNED</strong></small>
                                     <Form.Control size="lg" style={{ border: "none" }} type="text" value={earned} disabled />
                                 </div>
-                                <div className="py-2">
+                                <div className="pt-2">
                                     <InputGroup.Prepend >
                                         <InputGroup.Text style={{ background: "#fff", border: 'none' }}>
                                             <small><strong className="card_stake_text pt-2">
-                                                <Button className="cardButton" disabled style={{ border: "none", background: "rgba(239, 239, 239, 0.6)", color: "#ABABAB" }}>Harvest</Button>
+                                                <Button className="cardButton" disabled style={{ border: "none", background: "rgba(239, 239, 239, 1)",opacity:"1", color: "#ABABAB" }}>Harvest</Button>
                                             </strong></small>
                                         </InputGroup.Text>
                                     </InputGroup.Prepend>
@@ -417,7 +417,7 @@ const CoinCard = (props) => {
                             )}       
                     </Col>
                 </Row>
-                <div className="p-4">
+                <div className="px-4 pt-4">
                     <Row>
                         <Col lg={6} className="text-left">
                             <small className="card_stake_text color-gray">

src/components/footer.jsx

@@ -1,31 +1,26 @@
 import React from "react";
 import { Row, Col, Image, Form, Button } from "react-bootstrap";
-import Twitter from "../assets/twitter.svg";
-import Medium from "../assets/medium.svg";
-import Discord from "../assets/discord.svg";
-import Telegram from "../assets/telegram.svg";
-import Youtube from "../assets/youtube.svg";
-import Logo from "../assets/footer_logo.png";
-
+import { Redirect } from "react-router-dom"
+import { useHistory } from 'react-router-dom'
 const Footer = (props) => {
   return (
     <>
-     <Row fluid className="d-flex justify-content-around pt-3 pb-3 mt-4" style={{ color: "#AB6D77", margin: '0px',     borderTop: '1px solid rgba(189, 28, 59, 0.1)' }}>
+     <Row fluid className="kawa-footer d-flex justify-content-around pt-3 pb-3 mt-4" style={{ color: "#AB6D77", margin: '0px',     borderTop: '1px solid rgba(189, 28, 59, 0.1)' }}>
 
                         <Col  className="formlabel footerClass">
-                            <span className="px-1" style={{fontSize: "14px"}}>Contact Us</span>
+                            <a href="business@kawatoken.io" target="_blank"><span className="px-1" style={{fontSize: "14px"}} >Contact Us</span> </a>
                             <span className="px-2" style={{fontSize: "14px"}}>FAQ</span>
-                            <span className="px-2" style={{fontSize: "14px"}}>Business Enquiries</span>
+                            <a href="business@kawatoken.io" target="_blank" rel="noreferrer"><span className="px-2" style={{fontSize: "14px"}}>Business Enquiries</span> </a>
                         </Col>
                         <Col  className="formlabel footerClass text-center" style={{fontSize: "14px"}}>2021 Kawakami Inu™</Col>
                         <Col  className="formlabel footerClass text-right">
-                            <span className="px-1" style={{fontSize: "14px"}}>$KAWA</span>
-                            <span className="px-1" style={{fontSize: "14px"}}>Join Community</span>
+                            <a href="https://www.dextools.io/app/uniswap/pair-explorer/0x6be8b276d12d5600c2d74dc1993f9a8600c849cd" target="_blank" rel="noreferrer"><span className="px-1" style={{fontSize: "14px"}}>$KAWA</span></a>
+                            <a href="https://t.me/kawatoken" target="_blank" rel="noreferrer"><span className="px-1" style={{fontSize: "14px"}}>Join Community</span></a>
                         </Col>
 
                 </Row>
     </>
   );
 };
 
-export default Footer;
+export default Footer;

src/pages/SignIn.jsx

@@ -61,10 +61,10 @@ const SignIn = props => {
     return (
         <Container fluid className="main_layout loginGradiant">
             <Row style={{ zIndex: '10000', opacity:1 }} >
-                <Col lg={{ span: 4, offset: 4 }}  className="d-flex flex-column justify-content-center" style={{maxWidth:'480px', marginLeft: 'auto', marginRight:'auto', width:'100%', padding:'75px 0' }}>
-                    <Row style={{marginRight:0}}>
-                        <Col sm={{span:0}} >
-                            <Image src={dogAvtar} roundedCircle style={{ maxWidth: '112px', maxHeight: '112px', marginLeft:'auto', marginRight:'auto', display:'block' }} />
+                <Col lg={{ span: 4, offset: 4 }}  className="d-flex flex-column justify-content-center" style={{maxWidth:'480px', marginLeft: 'auto', marginRight:'auto', width:'100%', padding:'60px 0' }}>
+                    <Row>
+                        <Col sm={{span:0}} className="logo-image-container">
+                            <Image src={dogAvtar} roundedCircle style={{ marginLeft:'auto', marginRight:'auto', display:'block' }} />
                         </Col>
                     </Row>
                     <Row>
@@ -73,16 +73,16 @@ const SignIn = props => {
                         </Col>
                     </Row>
                     <Row>
-                        <Col lg={12} className="text-center">
-                            <span className="text-center">Farm <span style={{ color: "#FF2E59" }}>$xKAWA</span> by staking the most popular community tokens such as SHIB, KISHU, AKITA and more!</span>
+                        <Col lg={12} className="text-center intro-text">
+                            <span className="text-center">Farm <strong style={{ color: "#FF2E59", fontFamily:"Visby 800" }}>$xKAWA</strong> by staking the most popular community tokens such as SHIB, KISHU, AKITA and more!</span>
                         </Col>
                     </Row>
                     <Row>
                         <Col lg={{ span: 12 }} style={{ padding: 4 }}>
 
                             <div className="p-4 m-4 loginBox" style={{ background: 'white', borderRadius: '12px' }}>
                                 <Row className="p-4 text-center">
-                                    <Col lg={12}><h3 style={{fontSize:'32px', letterSpacing:'-0.04em'}}>Connect your wallet to start farming</h3></Col>
+                                    <Col lg={12}><h3 style={{letterSpacing:'-0.04em'}}>Connect your wallet to start farming</h3></Col>
                                     <Col lg={12} className="pt-4"><p style={{ color: "#DE4949", fontSize:'14px', lineHeight:'21px' }}>You are about to input highly sensitive information, please DO NOT expose to strangers.</p></Col>
                                 </Row>
                                 <Button
@@ -113,7 +113,9 @@ const SignIn = props => {
 
                             </div>
                             <div className="wallet-set-up-link-box mx-4">
-                                    <p className="walletsetup text-center">Don't have a wallet set up?</p>
+
+                                    <p className="walletsetup text-center"><a href="https://metamask.io/faqs" target="_blank" rel="noreferrer">Don't have a wallet set up?</a></p>
+
                                 </div>
 
                         </Col>

src/pages/dashBoard.jsx

@@ -212,7 +212,7 @@ const DashBoard = () => {
                     account={account}
               />}
 
-                    <div md="10" lg="6" xl="4" className= "mt-2 ml-0 stake-card-container">
+                    <div md="10" lg="6" xl="4" className= "mt-2 ml-0">
                         <Card style={{ width: '22rem' }} className="stake_card">
                             <Card.Body style={{
                                 display: 'flex',

src/scss/App.scss

@@ -12,6 +12,21 @@
   line-height: 125%;
   color: #310707;
 }
+
+.intro-text {
+  span {
+    font-size: 16px;
+    line-height: 24px;
+    font-family: "Visby 400";
+    color: #4e2b33;
+    font-weight: 400;
+    strong {
+      font-family: "Visby 800";
+      font-weight: 400;
+    }
+  }
+}
+
 .wallet-connect-button {
   background: #fef9fa;
   border: 1px solid #d5d5d5;
@@ -24,6 +39,10 @@
     width: 32px;
     height: 32px;
   }
+  @media screen and (max-width: 992px) {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
 }
 .wallet-set-up-link-box {
   background: #fcf2ef;
@@ -35,18 +54,48 @@
   border-bottom-left-radius: 16px;
   border-bottom-right-radius: 16px;
   margin-top: 0px !important;
+
+  a, a:link, a:visited {
+
+    text-decoration: none;
+    color: rgb(171, 109, 119);
+  }
 }
 .farm-top-title {
   font-family: "Visby 800" !important;
   font-weight: 400 !important;
-  font-size: 40px;
-  line-height: 159%;
+  line-height: 1.2;
   letter-spacing: -0.03em;
+  font-size: 32px;
+  @media screen and (min-width: 992px) {
+    line-height: 159%;
+    font-size: 40px;
+  }
+}
+
+.kawa-footer {
+  a,
+  a:link,
+  a:visited {
+    text-decoration: none;
+    color: rgb(171, 109, 119);
+  }
+  @media screen and (max-width: 992px) {
+    margin-bottom: 1em;
+    min-height: 200px;
+  }
 }
 
 .stake-card-container {
-  width: 100%;
-  justify-content: space-between;
+  display: flex;
+  flex-direction: column;
+  .stake-card {
+    width: 100% !important;
+  }
+  @media screen and (min-width: 992px) {
+    flex-direction: row;
+    display: inline-flex;
+  }
 }
 
 .stake_card {
@@ -67,6 +116,9 @@
   .card-header {
     border-bottom: 1px solid rgba(224, 199, 200, 0.5);
   }
+  .card-body {
+    padding-bottom: 0 !important;
+  }
   .token-info {
     padding-top: 12px !important;
     h6 {
@@ -86,3 +138,10 @@
     }
   }
 }
+.kawa-footer {
+  a, a:link, a:visited {
+
+    text-decoration: none;
+    color: rgb(171, 109, 119);
+  }
+}

src/scss/style.css

@@ -594,13 +594,15 @@ h1 {
   width: 22rem !important;
   max-width: 22rem !important;
   border-radius: 25px;
-  height: 600px;
-  min-height: 550px !important;
+  /* height: 600px; */
+  height: auto;
+  /* min-height: 550px !important; */
 }
 
 @media only screen and (max-width: 600px) {
   .stake_card {
-    height: 550px;
+    /* height: 550px; */
+    height: auto;
     width: 19rem !important;
   }
 }
@@ -698,7 +700,7 @@ h1 {
 
 @media only screen and (max-width: 600px) {
   .footerClass {
-    text-align: center;
+    text-align: center; 
   }
 }
 
@@ -869,4 +871,9 @@ h6 {
 }
 /*# sourceMappingURL=style.css.map */
 .kawa-footer {
+  a, a:link, a:visited {
+    color: #FFFAFA;
+    text-decoration: none;
+    background-color: #778899;
+  }
 }

src/scss/style.scss

@@ -1,5 +1,8 @@
 @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap");
-
+body {
+  overflow-x: hidden;
+  width: 100%;
+}
 .ibm-plex {
   font-family: "IBM Plex Mono", monospace !important;
   letter-spacing: 0 !important;
@@ -9,6 +12,10 @@
   color: #8a8a8a !important;
 }
 
+.form-control:disabled {
+  background: transparent;
+}
+
 h1 {
   font-size: 2.3rem;
   @media (max-width: 1200px) {
@@ -529,10 +536,11 @@ hr {
   width: 22rem !important;
   max-width: 22rem !important;
   border-radius: 25px;
-  height: 600px;
+  // height: 600px;
+  height: auto;
   min-height: 550px !important;
   @media only screen and (max-width: 600px) {
-    height: 550px;
+    // height: 550px;
     width: 19rem !important;
   }
 }
@@ -636,6 +644,11 @@ hr {
     #ffdef2 0%,
     rgba(255, 197, 111, 0.46) 100%
   );
+  @media screen and (max-width: 992px) {
+    .col-lg-12 {
+      padding: 0 30px;
+    }
+  }
 }
 
 .loginBox {
@@ -648,6 +661,12 @@ hr {
   .p-4.text-center.row {
     padding-bottom: 0 !important;
   }
+  h3 {
+    font-size: 24px;
+    @media screen and (min-width: 992px) {
+      font-size: 32px;
+    }
+  }
 }
 
 .navbar-brand {
@@ -768,9 +787,25 @@ h6 {
   border-radius: 8px;
 }
 
+.logo-image-container {
+  padding-right: 0;
+  padding-left: 0;
+  img {
+    width: 64px;
+    height: auto;
+    @media screen and (min-width: 992px) {
+      width: 110px;
+    }
+  }
+}
+
 .svg-kawa {
   width: 100%;
-  max-width: 390px;
-  margin: 30px auto;
+  max-width: 170px;
+  margin: 12px auto 24px;
   display: block;
+  @media screen and (min-width: 992px) {
+    max-width: 390px;
+    margin: 30px auto;
+  }
 }