priyatham
/
quadb-hodlinfo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Btn sizes fix

This commit is contained in:
Priyatham Sai Chand 2021-04-21 02:45:20 +05:30
parent 54cd97df5a
commit 3fa0c6d6e8
4 changed files with 20 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.css
View File

@ -1,6 +1,3 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;

22
src/components/Header.js
View File

@ -19,14 +19,11 @@ export const Header = (props) => {
<img src="hodlinfo_logo.png" class="fiat-logo" style={{padding: "10px"}} />
</div>
</a>
<p class="col-12 text-center-xs" style={{"font-family": "Oswald, sans-serif", "margin-top": "-18px", opacity: "0.8", "font-size": "18px", color: "gray"}}>
Powered By
<a class="footer-text-link" rel="nofollow" target="_blank" href="https://www.finstreet.in/" style={{color: "rgb(61, 198, 193)"}}>
Finstreet
</a>
<p class="col-12 text-center-xs" style={{"font-family": "Oswald, sans-serif", "margin-top": "-18px", opacity: "0.8", "font-size": "18px", color: "gray"}}>Powered By <a class="footer-text-link" rel="nofollow" target="_blank" href="https://www.finstreet.in/" style={{color: "rgb(61, 198, 193)"}}> Finstreet </a>
</p>
</div>
<div class="text-center padding-none col-12 col-sm-12 col-md-2 col-lg-4">
<div class="btn-group">
<ButtonDropdown isOpen={dropdownOpenCurrency} toggle={toggleCurrency} >
<DropdownToggle caret className={"header-button"}>
{currency}
@ -35,7 +32,9 @@ export const Header = (props) => {
<DropdownItem value="INR" onClick={(e) => setCurrency(e.target.value)}>INR</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</div>
<div class="btn-group">
<ButtonDropdown isOpen={dropdownOpenAsset} toggle={toggleAsset} >
<DropdownToggle caret className={"header-button"}>
{asset}
@ -56,28 +55,29 @@ export const Header = (props) => {
<DropdownItem value="WRX" onClick={(e) => setAsset(e.target.value)}>WRX</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</div>
<div class="btn-group">
<a target="_blank" href="" type="button" aria-haspopup="true" aria-expanded="false" class="header-button btn btn-secondary">BUY {asset}</a>
</div>
</div>
<div class="right-header col-12 col-sm-12 col-md-5 col-lg-4">
<div class="d-inline-flex flex-wrap align-items-center justify-content-center">
<div className="progress-bar-wrapper">
<CircularProgressbar value={parseFloat(props.countDownTimer * 100 / 60.0)} text={`${props.countDownTimer}`}/>
</div>
<a class="color-white" href="/connect/telegram">
<div class="header-telegram-button">
<div class="d-flex telegram-logo-text header-telegram-button btn align-items-center pointer color-white">
<div class="d-inline-block">
<img src="telegram.png" class="telegram-logo" /></div>
<div class="text-nowrap d-inline-block color-white">Connect Telegram</div>
</div>
</a>
<div className="d-inline-flex flex-wrap align-items-center justify-content-center">
<div className="progress-bar-wrapper">
<CircularProgressbar value={parseFloat(props.countDownTimer * 100 / 60.0)} text={`${props.countDownTimer}`}/>
</div>
<div className="margin-10 d-inline-block">
<label className="switch">
<input type="checkbox" checked={!props.isLightTheme} onChange={props.onThemeButtonClick} />
<span className="slider round"></span>
</label>
</div>
</div>
</div>
</div>
</div>

2
src/components/MainPage.js
View File

@ -15,7 +15,7 @@ const onThemeButtonClick = () => {
};
return (
<React.Fragment>
<div className={("theme-") + (isLightTheme ? "light" : "dark")+(" padding-bottom-50")}>
<div className={("theme-") + (isLightTheme ? "light" : "dark")}>
<Header isLightTheme={isLightTheme} onThemeButtonClick={onThemeButtonClick } countDownTimer={countDownTimer}/>
<div class="Container-fluid " style={{ padding: "0px 30px" }}>
<div class="d-flex justify-content-around align-items-center average-header" style={{ padding: "10px 0px" }}>

20
src/components/styles.css
View File

@ -171,8 +171,8 @@
}
.header-button {
margin: 10px;
padding: 6px 20px;
border-radius: 10px;
padding: 6px 20px !important;
border-radius: 10px !important;
}
.telegram-logo {
height: 15px;
@ -205,10 +205,10 @@
color: white;
}
.header-telegram-button {
margin: 10px;
padding: 6px 20px;
border-radius: 10px;
background-color: #3dc6c1;
margin: 10px !important;
padding: 6px 20px !important;
border-radius: 10px !important;
background-color: #3dc6c1 !important;
color: white !important;
}
.theme-light {
@ -224,11 +224,8 @@
.theme-light .header-button {
color: #0c0f48;
background-color: #f8f9fa;
border-radius: 10px;
margin: 10px;
padding: 6px 20px;
border-radius: 10px;
border: 0;
border: 0px;
box-shadow: 0 0 2px #dddddd;
}
.theme-light .toggle-button-circle {
height: 20px;
@ -315,7 +312,6 @@
border-radius: 10px;
margin: 10px;
padding: 6px 20px;
border-radius: 10px;
border: 0;
}
.theme-dark .toggle-button-circle {