Skip to content

Commit

Permalink
SCSS installed
Browse files Browse the repository at this point in the history
  • Loading branch information
@kingsleyokonkwo
kingsleyokonkwo committed Apr 2, 2023
1 parent 676b780 commit f4354c1
Show file tree
Hide file tree
Showing 6 changed files with 246 additions and 219 deletions.
56 changes: 28 additions & 28 deletions src/components/Cryptocurrency/Bitcoin/BtcStats/BtcStats.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,21 +9,21 @@ export default function BtcStats() {
<div className={classes.stat__container}>
<h3>BTC Price Statistics</h3>
<div className={classes.stat}>
<div className={classes.change}>
<p className={classes.change__p}>Price Change</p>
<p className={classes.change__24}>24h</p>
<div className={classes.stat__change}>
<p className={classes.stat__changeP}>Price Change</p>
<p className={classes.stat__change24}>24h</p>
</div>
<div className={classes.value}>
<div className={classes.stat__value}>
<p>$49,0920,029</p>
</div>
</div>

<div className={classes.stat}>
<div className={classes.change}>
<p className={classes.change__p}>Price Change</p>
<p className={classes.change__24}>24h</p>
<div className={classes.stat__change}>
<p className={classes.stat__changeP}>Price Change</p>
<p className={classes.stat__change24}>24h</p>
</div>
<div className={classes.value}>
<div className={classes.stat__value}>
<p>$49,0920,029</p>
<span>
<img src={greenangle} alt="arrow" />
Expand All @@ -33,11 +33,11 @@ export default function BtcStats() {
</div>

<div className={classes.stat}>
<div className={classes.change}>
<p className={classes.change__p}>Price Change</p>
<p className={classes.change__24}>24h</p>
<div className={classes.stat__change}>
<p className={classes.stat__changeP}>Price Change</p>
<p className={classes.stat__change24}>24h</p>
</div>
<div className={classes.value}>
<div className={classes.stat__value}>
<p>$49,0920,029</p>
<span>
<img src={redangle} alt="arrow" />
Expand All @@ -47,11 +47,11 @@ export default function BtcStats() {
</div>

<div className={classes.stat}>
<div className={classes.change}>
<p className={classes.change__p}>Price Change</p>
<p className={classes.change__24}>24h</p>
<div className={classes.stat__change}>
<p className={classes.stat__changeP}>Price Change</p>
<p className={classes.stat__change24}>24h</p>
</div>
<div className={classes.value}>
<div className={classes.stat__value}>
<p>$49,0920,029</p>
<span>
<img src={redangle} alt="arrow" />
Expand All @@ -61,11 +61,11 @@ export default function BtcStats() {
</div>

<div className={classes.stat}>
<div className={classes.change}>
<p className={classes.change__p}>Price Change</p>
<p className={classes.change__24}>24h</p>
<div className={classes.stat__change}>
<p className={classes.stat__changeP}>Price Change</p>
<p className={classes.stat__change24}>24h</p>
</div>
<div className={classes.value}>
<div className={classes.stat__value}>
<p>$49,0920,029</p>
<span>
<img src={redangle} alt="arrow" />
Expand All @@ -75,11 +75,11 @@ export default function BtcStats() {
</div>

<div className={classes.stat}>
<div className={classes.change}>
<p className={classes.change__p}>Price Change</p>
<p className={classes.change__24}>24h</p>
<div className={classes.stat__change}>
<p className={classes.stat__changeP}>Price Change</p>
<p className={classes.stat__change24}>24h</p>
</div>
<div className={classes.value}>
<div className={classes.stat__value}>
<p>$49,0920,029</p>
<span>
<img src={redangle} alt="arrow" />
Expand All @@ -89,11 +89,11 @@ export default function BtcStats() {
</div>

<div className={classes.stat}>
<div className={classes.change}>
<p className={classes.change__p}>Price Change</p>
<p className={classes.change__24}>24h</p>
<div className={classes.stat__change}>
<p className={classes.stat__changeP}>Price Change</p>
<p className={classes.stat__change24}>24h</p>
</div>
<div className={classes.value}>
<div className={classes.stat__value}>
<p>#1</p>
</div>
</div>
Expand Down
107 changes: 56 additions & 51 deletions src/components/Cryptocurrency/Bitcoin/BtcStats/BtcStats.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,55 +2,60 @@ $background-color_1: #2c3137;
$background-color_2: #2793ff;

.stat__container {
padding: 30px 13px;
background-color: $background-color_1;
width: 35%;
border-radius: 18px;
h3 {
margin-bottom: 20px;
font-size: 18px;
font-weight: bold;
}
}
.stat {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
padding-bottom: 5px;
border-bottom: 1px solid #4b5768;
}
.change {
display: flex;
align-items: center;
}
.change__p {
font-size: 12px;
font-weight: normal;
margin-right: 4px;
}
.change__24 {
font-size: 7.4px;
font-weight: normal;
background-color: $background-color_2;
padding: 2px 3px;
border-radius: 3px;
}
.value {
display: flex;
flex-direction: column;
gap: 0;
span {
display: flex;
align-items: center;
font-size: 10px;
font-weight: 500;
margin: 0;
height: 14px;
}
p {
margin: 0;
font-weight: bold;
font-size: 12px;
}
padding: 30px 13px;
background-color: $background-color_1;
width: 35%;
border-radius: 18px;
h3 {
margin-bottom: 20px;
font-size: 18px;
font-weight: bold;
}

.stat {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
padding-bottom: 5px;
border-bottom: 1px solid #4b5768;

&__change {
display: flex;
align-items: center;

&P {
font-size: 12px;
font-weight: normal;
margin-right: 4px;
}

&24 {
font-size: 7.4px;
font-weight: normal;
background-color: $background-color_2;
padding: 2px 3px;
border-radius: 3px;
}
}
}

.stat__value {
display: flex;
flex-direction: column;
gap: 0;
span {
display: flex;
align-items: center;
font-size: 10px;
font-weight: 500;
margin: 0;
height: 14px;
}
p {
margin: 0;
font-weight: bold;
font-size: 12px;
}
}
}
2 changes: 1 addition & 1 deletion src/components/Cryptocurrency/Bitcoin/Charts/Chart.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default function Chart() {
</div>
</div>
{/* chart placeholder */}
<img src={chart} alt="chart" style={{ width: "100%" }} />
<img src={chart} alt="chart" />
<div className={classes.bitcoin__information}>
<BtcStats />
<div className={classes.history}>
Expand Down
95 changes: 50 additions & 45 deletions src/components/Cryptocurrency/Bitcoin/Charts/Chart.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,54 @@
$background-color_1: #32343b;
$background-color_2: #111218;

.chart {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30px;
h3 {
font-size: 24px;
font-weight: 800;
}
}
.interval {
height: 48px;
width: 285px;
display: flex;
justify-content: space-around;
align-items: center;
border-radius: 25.6px;
background-color: $background-color_1;
span {
height: fit-content;
font-size: 14px;
font-weight: bold;
padding: 6px 12px;
border-radius: 19.2px;
}
}
#first {
background-color: $background-color_2;
}
.bitcoin__information {
margin-top: 50px;
display: flex;
justify-content: space-between;
}
.history {
width: 58%;
h3 {
margin: 20px 0 8px 0;
font-size: 24px;
font-weight: 800;
}
p {
font-size: 16px;
font-weight: normal;
}
.chart__container {
.chart {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30px;
h3 {
font-size: 24px;
font-weight: 800;
}

.interval {
height: 48px;
width: 285px;
display: flex;
justify-content: space-around;
align-items: center;
border-radius: 25.6px;
background-color: $background-color_1;
span {
height: fit-content;
font-size: 14px;
font-weight: bold;
padding: 6px 12px;
border-radius: 19.2px;
}
#first {
background-color: $background-color_2;
}
}
}

.bitcoin__information {
margin-top: 50px;
display: flex;
justify-content: space-between;

.history {
width: 58%;
h3 {
margin: 20px 0 8px 0;
font-size: 24px;
font-weight: 800;
}
p {
font-size: 16px;
font-weight: normal;
}
}
}
}
4 changes: 2 additions & 2 deletions src/components/Cryptocurrency/Bitcoin/Review/Review.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ export default function Review() {
<div className={classes.review__profile}>
<img src={props.img} alt="display symbol" />
<div className={classes.review__profileDetail}>
<p className={classes.review__name}>{props.name}</p>
<p className={classes.review__username}>{props.username}</p>
<p className={classes.review__profileDetailName}>{props.name}</p>
<p className={classes.review__profileDetailUsername}>{props.username}</p>
</div>
</div>
<p className={classes.review__time}>{props.time}</p>
Expand Down
Loading

0 comments on commit f4354c1

Please sign in to comment.