From c365e85bcb5aa8992f2ca847056332e09ea6c385 Mon Sep 17 00:00:00 2001 From: kingsleyokonkwo Date: Fri, 31 Mar 2023 20:37:15 +0100 Subject: [PATCH] CSS module --- .../AdSuggestion/AddSuggestions.jsx | 36 +- ...gestions.css => AddSuggestions.module.css} | 48 +- .../Cryptocurrency/Bitcoin/Bitcoin.css | 494 ------------------ .../Cryptocurrency/Bitcoin/Bitcoin.jsx | 46 +- .../Cryptocurrency/Bitcoin/Bitcoin.module.css | 120 +++++ .../Cryptocurrency/Bitcoin/BtcMarket.jsx | 60 --- .../Bitcoin/BtcMarket/BtcMarket.jsx | 61 +++ .../Bitcoin/BtcMarket/BtcMarket.module.css | 66 +++ .../Cryptocurrency/Bitcoin/BtcPrice.jsx | 29 - .../Bitcoin/BtcPrice/BtcPrice.jsx | 30 ++ .../Bitcoin/BtcPrice/BtcPrice.module.css | 114 ++++ .../Cryptocurrency/Bitcoin/BtcProps.jsx | 37 -- .../Bitcoin/BtcProps/BtcProps.jsx | 38 ++ .../Bitcoin/BtcProps/BtcProps.module.css | 114 ++++ .../Cryptocurrency/Bitcoin/BtcRating.jsx | 35 -- .../Bitcoin/BtcRating/BtcRating.jsx | 36 ++ .../Bitcoin/BtcRating/BtcRating.module.css | 69 +++ .../Bitcoin/BtcStats/BtcStats.jsx | 74 +-- .../{BtcStats.css => BtcStats.module.css} | 8 +- .../Cryptocurrency/Bitcoin/Charts/Chart.css | 56 -- .../Cryptocurrency/Bitcoin/Charts/Chart.jsx | 62 ++- .../Bitcoin/Charts/Chart.module.css | 54 ++ .../Cryptocurrency/Bitcoin/Review/Review.jsx | 24 +- .../Review/{Review.css => Review.module.css} | 32 +- .../Bitcoin/Review/ReviewIpad.jsx | 67 +-- .../Bitcoin/Roadmap/Roadmap.jsx | 69 ++- .../{Roadmap.css => Roadmap.module.css} | 14 +- src/components/Cryptocurrency/Crypto.jsx | 29 +- .../{Crypto.css => Crypto.module.css} | 74 +-- src/components/Cryptocurrency/CryptoAll.jsx | 38 +- src/components/Cryptocurrency/WatchList.jsx | 42 +- .../Home/{Landing.css => Landing.module.css} | 34 +- src/components/Home/LandingHero.jsx | 48 +- src/components/Home/Referral.jsx | 14 +- src/components/Home/Referral.module.css | 103 ++++ src/components/Home/Reward/GemContainer.jsx | 31 +- src/components/Home/Reward/NftReward.jsx | 76 ++- src/components/Home/Reward/Reward.css | 312 ----------- src/components/Home/Reward/Reward.jsx | 10 +- src/components/Home/Reward/Reward.module.css | 209 ++++++++ src/components/Rewards/MainReward.css | 137 ----- src/components/Rewards/MainReward.jsx | 24 +- src/components/Rewards/MainReward.module.css | 160 ++++++ .../{DailyTask.css => DailyTask.module.css} | 34 +- src/components/Tasks/DailyTask1.jsx | 16 +- src/components/Tasks/MoreTask.jsx | 16 +- src/components/UI/Button/Button.css | 71 ++- src/components/Vote/VoteAddProject.css | 64 --- src/components/Vote/VoteAddProject.jsx | 80 --- .../Vote/VoteAddProject/VoteAddProject.jsx | 80 +++ .../VoteAddProject/VoteAddProject.module.css | 118 +++++ src/components/Vote/VotePage.jsx | 52 -- src/components/Vote/VotePage/VotePage.jsx | 52 ++ .../VotePage.module.css} | 18 +- .../Vote/VoteProject/VotedProject.jsx | 95 ++++ .../Vote/VoteProject/VotedProject.module.css | 220 ++++++++ src/components/Vote/VoteReview/VoteReview.jsx | 29 + .../Vote/VoteReview/VoteReview.module.css | 60 +++ src/components/Vote/VotedProject.css | 269 ---------- src/components/Vote/VotedProject.jsx | 121 ----- .../Wallet/NoTransaction/NoTransaction.css | 21 - .../Wallet/NoTransaction/NoTransaction.jsx | 6 +- .../NoTransaction/NoTransaction.module.css | 36 ++ .../Wallet/Transactions/Transaction.css | 40 -- .../Transactions/Transaction.module.css | 61 +++ .../Wallet/Transactions/Transactions.jsx | 20 +- .../Wallet/{Wallet.css => Wallet.module.css} | 98 ++-- .../Wallet/WalletAssets/WalletAssets.jsx | 30 +- ...lletAssets.css => WalletAssets.module.css} | 28 +- src/components/Wallet/Wallets.jsx | 44 +- src/pages/AddProject.jsx | 2 +- src/pages/Vote.jsx | 2 +- 72 files changed, 2600 insertions(+), 2417 deletions(-) rename src/components/AdSuggestion/{AddSuggestions.css => AddSuggestions.module.css} (70%) delete mode 100644 src/components/Cryptocurrency/Bitcoin/Bitcoin.css create mode 100644 src/components/Cryptocurrency/Bitcoin/Bitcoin.module.css delete mode 100644 src/components/Cryptocurrency/Bitcoin/BtcMarket.jsx create mode 100644 src/components/Cryptocurrency/Bitcoin/BtcMarket/BtcMarket.jsx create mode 100644 src/components/Cryptocurrency/Bitcoin/BtcMarket/BtcMarket.module.css delete mode 100644 src/components/Cryptocurrency/Bitcoin/BtcPrice.jsx create mode 100644 src/components/Cryptocurrency/Bitcoin/BtcPrice/BtcPrice.jsx create mode 100644 src/components/Cryptocurrency/Bitcoin/BtcPrice/BtcPrice.module.css delete mode 100644 src/components/Cryptocurrency/Bitcoin/BtcProps.jsx create mode 100644 src/components/Cryptocurrency/Bitcoin/BtcProps/BtcProps.jsx create mode 100644 src/components/Cryptocurrency/Bitcoin/BtcProps/BtcProps.module.css delete mode 100644 src/components/Cryptocurrency/Bitcoin/BtcRating.jsx create mode 100644 src/components/Cryptocurrency/Bitcoin/BtcRating/BtcRating.jsx create mode 100644 src/components/Cryptocurrency/Bitcoin/BtcRating/BtcRating.module.css rename src/components/Cryptocurrency/Bitcoin/BtcStats/{BtcStats.css => BtcStats.module.css} (92%) delete mode 100644 src/components/Cryptocurrency/Bitcoin/Charts/Chart.css create mode 100644 src/components/Cryptocurrency/Bitcoin/Charts/Chart.module.css rename src/components/Cryptocurrency/Bitcoin/Review/{Review.css => Review.module.css} (73%) rename src/components/Cryptocurrency/Bitcoin/Roadmap/{Roadmap.css => Roadmap.module.css} (87%) rename src/components/Cryptocurrency/{Crypto.css => Crypto.module.css} (75%) rename src/components/Home/{Landing.css => Landing.module.css} (66%) create mode 100644 src/components/Home/Referral.module.css delete mode 100644 src/components/Home/Reward/Reward.css create mode 100644 src/components/Home/Reward/Reward.module.css delete mode 100644 src/components/Rewards/MainReward.css create mode 100644 src/components/Rewards/MainReward.module.css rename src/components/Tasks/{DailyTask.css => DailyTask.module.css} (76%) delete mode 100644 src/components/Vote/VoteAddProject.css delete mode 100644 src/components/Vote/VoteAddProject.jsx create mode 100644 src/components/Vote/VoteAddProject/VoteAddProject.jsx create mode 100644 src/components/Vote/VoteAddProject/VoteAddProject.module.css delete mode 100644 src/components/Vote/VotePage.jsx create mode 100644 src/components/Vote/VotePage/VotePage.jsx rename src/components/Vote/{VotePage.css => VotePage/VotePage.module.css} (86%) create mode 100644 src/components/Vote/VoteProject/VotedProject.jsx create mode 100644 src/components/Vote/VoteProject/VotedProject.module.css create mode 100644 src/components/Vote/VoteReview/VoteReview.jsx create mode 100644 src/components/Vote/VoteReview/VoteReview.module.css delete mode 100644 src/components/Vote/VotedProject.css delete mode 100644 src/components/Vote/VotedProject.jsx delete mode 100644 src/components/Wallet/NoTransaction/NoTransaction.css create mode 100644 src/components/Wallet/NoTransaction/NoTransaction.module.css delete mode 100644 src/components/Wallet/Transactions/Transaction.css create mode 100644 src/components/Wallet/Transactions/Transaction.module.css rename src/components/Wallet/{Wallet.css => Wallet.module.css} (60%) rename src/components/Wallet/WalletAssets/{WalletAssets.css => WalletAssets.module.css} (80%) diff --git a/src/components/AdSuggestion/AddSuggestions.jsx b/src/components/AdSuggestion/AddSuggestions.jsx index cbdc204..f3d2893 100644 --- a/src/components/AdSuggestion/AddSuggestions.jsx +++ b/src/components/AdSuggestion/AddSuggestions.jsx @@ -1,10 +1,8 @@ import React from "react"; -import "./AddSuggestions.css"; +import classes from"./AddSuggestions.module.css"; import { Link, NavLink } from "react-router-dom"; import watch from "../../data/watch.png"; import plus from "../../data/plus.png"; -import bell from "../../data/bell.png"; -import desk from "../../data/desk.png"; import NftProjectAd from "./NftProjectAd/NftProjectAd"; import CryptoProjectAd from "./CryptoProjectAd/CryptoProjectAd"; import MetaverseProjects from "./MetaProjects/MetaverseProjects"; @@ -13,11 +11,11 @@ import Button from "../UI/Button/Button"; export default function AddSuggestions() { return ( -
-
-
-

Featured Ads

-
+
+
+
+

Featured Ads

+
-
+
-
+

The Right NFT At the festival

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sodales mollis quisque commodo facilisis adipiscing curabitur fringilla. Elit netus sed sit fermentum vel ornare sit feugiat felis.

- + Read More

The Right NFT At the festival

diff --git a/src/components/AdSuggestion/AddSuggestions.css b/src/components/AdSuggestion/AddSuggestions.module.css similarity index 70% rename from src/components/AdSuggestion/AddSuggestions.css rename to src/components/AdSuggestion/AddSuggestions.module.css index 2b3c033..a942dda 100644 --- a/src/components/AdSuggestion/AddSuggestions.css +++ b/src/components/AdSuggestion/AddSuggestions.module.css @@ -1,41 +1,41 @@ -/* .add-suggestion-container { - border: 1px solid red; -} */ - -.add-suggestion-inner { +.adsuggestion__inner { margin: 50px 45px; } -.featured-ads { +.featured__ads { display: flex; align-items: center; justify-content: space-between; margin-bottom: 29px; } -.featured-ads-h3 { +.featured__adsH3 { font-size: 32px; font-weight: 800; } -.featured-ads-btns { +.featured__adsBtns { display: flex; align-items: center; gap: 1rem; } -.ad-boxes { +.ad__boxes { display: flex; gap: 15px; } -.ad-box-big { +.ad__boxBig { flex: 2; border-radius: 24px; + background-image: url('../../data/bell.png'); + background-size: contain; + background-position: right; + background-repeat: no-repeat; background-color: #2793ff; } -.big-box-content { +.big__boxContent { box-sizing: border-box; display: flex; flex-direction: column; @@ -44,28 +44,28 @@ width: 50%; } -.big-box-content h3 { +.big__boxContent h3 { font-size: 1.8rem; font-weight: 800; margin-top: 40px; margin-bottom: 1rem; } -.big-box-content p { +.big__boxContent p { font-size: 16px; font-weight: normal; margin: 0; margin-bottom: 1rem; } -.ad-readmore-link { +.ad__readmoreLink { text-decoration: underline; font-size: 16px; font-weight: 800; color: #fff; } -.ad-box-small { +.ad__boxSmall { flex: 1; box-sizing: border-box; width: 355px; @@ -73,9 +73,13 @@ padding: 32.6px 30px 0 0px; border-radius: 24px; background-color: #610bef; + background-image: url('../../data/desk.png'); + background-size: contain; + background-position: bottom; + background-repeat: no-repeat; } -.ad-box-small h3 { +.ad__boxSmall h3 { font-size: 24px; font-weight: 800; margin-bottom: .9rem; @@ -83,7 +87,7 @@ } -.ad-box-small p { +.ad__boxSmall p { font-size: 14px; font-weight: normal; margin: 0; @@ -111,26 +115,26 @@ height: 275px; } - .big-box-content { + .big__boxContent { height: 0; width: 60%; margin-top: 110px; } - .big-box-content h3 { + .big__boxContent h3 { font-size: 24px; } - .ad-readmore-link, .big-box-content p, .ad-box-small p { + .ad-readmore-link, .big__boxContent p, .ad__boxSmall p { font-size: 14px; } - .ad-box-small { + .ad__boxSmall { height: 289px; } - .ad-box-small h3 { + .ad__boxSmall h3 { font-size: 21px; } } \ No newline at end of file diff --git a/src/components/Cryptocurrency/Bitcoin/Bitcoin.css b/src/components/Cryptocurrency/Bitcoin/Bitcoin.css deleted file mode 100644 index d708951..0000000 --- a/src/components/Cryptocurrency/Bitcoin/Bitcoin.css +++ /dev/null @@ -1,494 +0,0 @@ -.bitcoin-container { - margin: 35px 35px 35px 40px; - display: flex; -} - -.bitcoin-details { - flex: 2; - margin-right: 19px; - -} - -.btc-detail { - display: flex; - justify-content: space-between; - margin-bottom: 47px; - -} - -.btc-prop { - width: 45%; - display: flex; - flex-direction: column; -} - -.btc-name { - display: flex; - align-items: center; - margin-bottom: 30px; -} - -.btc-logo { - height: 64px; - width: 64px; - position: relative; - margin-right: 16px; -} - -.btc-logo img { - height: 100%; - width: 100%; -} - -.btc-online { - position: absolute; - height: 17px; - width: 17px; - border-radius: 50%; - background-color: #68F588; - border: 3px solid #1e2329; - right: 2%; - bottom: -7%; - transform: translateX(-2%); -} - -.btc-ranks { - display: flex; - align-items: flex-start; -} - -.bitcoin-h3 { - margin-right: 9px; - display: flex; - align-items: center; -} - -.bitcoin-h3 h3 { - font-size: 24px; - font-weight: 800; - margin-right: 9px; -} - -.rank1 { - box-sizing: border-box; - height: 20px; - width: 35%; - padding-left: 7px; - padding-top: 2px; - background-color: #35373e; - border-radius: 8px; - font-size: 10px; - font-weight: 500; - display: block; - align-items: center; - justify-content: center; -} - -.BTC { - font-weight: normal; - font-size: 13px; - margin-right: 17px; -} - -.share-logo { - height: 13px; - width: 12px; -} - -.btc-links { - margin-top: 5px; - display: flex; - flex-wrap: wrap; -} - -.btc-link { - display: flex; - align-items: center; - background-color: #35373e; - margin-right: 8px; - margin-bottom: 16px; - height: 28px; - box-sizing: border-box; - padding: 6px; - border-radius: 8px; -} - -.btclink-icon { - margin-right: 4px; - height: 16px; - width: 16px; -} - -.btclink-name { - margin-right: 10px; - font-size: 12px; - font-weight: 500; -} - -.btclink-arrow { - cursor: pointer; -} - -.btc-price { - width: 45%; -} - -.btcprice-p { - color: #b8c0cc; - font-size: 16; - font-weight: 500; -} - -.price-span { - display: flex; - align-items: center; -} - -.pricespan-h3 { - font-size: 24px; - font-weight: bold; - margin-right: 7px; -} - -.pricespan-img { - height: 24px; - width: 24px; - margin-right: 4px; -} - -.pricespan-p { - font-size: 14px; - font-weight: 500; - color: #10B981; - -} - -.btc-range { - display: flex; - justify-content: space-between; - margin-bottom: 9px; -} - -.btc-range span { - color: #b8c0cc; - font-size: 12px; - font-weight: 500; -} - -.time-span { - display: flex; - justify-content: space-between; - align-items: center; - font-size: 12px; - font-weight: 500; - width: 68px; - height: 33px; - box-sizing: border-box; - border-radius: 12px; - padding: 9px 8px; - background-color: #35373e; - margin-left: auto; - margin-top: 10px; -} - -.range { - width: 100%; - position: relative; -} - -#slider { - -webkit-appearance: none; - width: 100%; - height: 15px; - border-radius: 8px; - outline: none; -} - -#slider::-webkit-slider-thumb { - -webkit-appearance: none; - width: 48px; - height: 48px; - cursor: pointer; - z-index: 3; - position: relative; -} - -#selector { - height: 104px; - width: 40px; - position: absolute; - bottom: -20; - left: 50%; - transform: translateX(-50%); - z-index: 2; -} - -/* .selectBtn { - height: 20px; - width: 20px; - background-color: white; - border-radius: 50%; - border-style: solid; - border-color: transparent red transparent transparent; - border-width: 15px; - position: absolute; - bottom: 0; - right: 0; -} */ - -.selectBtn { - background-color: #fff; - position: relative; -} - -.btc-rating { - width: 40%; - margin-bottom: 60px; -} - -.p-rating { - color: #b8c0cc; - font-size: 16px; - font-weight: 500; - margin-bottom: 3.6px; -} - -.p-rating-span { - display: flex; -} - -.p-rating-h3 { - font-size: 20px; - font-weight: 600; - margin-right: 3px; -} - -.p-rating-link { - text-decoration: underline; - color: #2793ff; - margin-left: 5px; -} - -.reaction { - display: flex; - justify-content: flex-end; - margin-top: 25px; -} - -.like { - display: flex; - flex-direction: column; - margin-right: 20px; - align-items: center; -} - -.like img { - height: 27px; - width: 27px; - padding: 8.5px; - border-radius: 50%; -} - -.star { - background-color: #35373E; -} - -.thumb { - background-color: #2793ff; -} - -.like p { - font-weight: 600; - font-size: 12px; -} - -.bitcoin-market { - display: flex; - align-items: center; - justify-content: space-between; - background-color: #323a46; - box-sizing: border-box; - padding: 25px 37px; - height: 174px; - border-radius: 16px; - margin-bottom: 75px; -} - -.col-1 { - display: flex; - flex-direction: column; - gap: 16px; -} - -.market-cap span { - display: flex; - align-items: center; - font-size: 12px; - font-weight: 500; - margin: 0; -} - -.marketcap-price { - font-size: 14px; - font-weight: bold; - margin: 0; -} - -.marketcap-name { - color: #d0d5dd; - margin: 0; - font-size: 12px; - font-weight: normal; -} - -.vol { - display: flex; - align-items: center; - margin-top: 0; - height: 27px; -} - -.time-24 { - font-size: 10px; - font-weight: normal; - background-color: #2793ff; - padding: 2px; - border-radius: 4px; - margin-left: 4px; -} - -.col-2 { - display: flex; - flex-direction: column; - gap: 16px; -} - -.col-4 { - display: flex; - flex-direction: column; - gap: 16px; -} - -.info-title { - display: flex; - align-items: center; - justify-content: space-between; - width: 50%; - margin: auto; - position: relative; -} - -.review-button { - display: none; -} - -.info-header { - display: flex; -} - - -.overview { - display: flex; - align-items: center; - flex-direction: column; - cursor: pointer; - transition: all 0.5s ease; - position: relative; -} - -.overview img { - height: 24px; - width: 24px; - margin-right: 12px; -} - -.overview h3 { - font-weight: 600; - font-size: 18px; -} - -.horizontal-line { - margin: 0; - margin-top: 7px; - margin-bottom: 32px; - border: 1px solid #4b5768; -} - -.straight-line { - position: absolute; - bottom: -8px; - margin: 0; - margin-top: 14px; - border-radius: 10px 10px 0 0; - width: 130%; - height: 4px; - background-color: #2793ff; - border: none; -} - - -.review { - flex: 1; -} - -@media screen and (max-width: 1024px) { - .review { - display: none; - } - - .btc-detail { - margin-bottom: 0; - } - - .btc-prop { - margin-left: 77px; - width: 35%; - } - - .btc-rating { - margin-left: auto; - margin-right: 110px; - width: 250px; - margin-bottom: 51px; - } - - .review-button { - display: initial; - position: absolute; - right: -50%; - cursor: pointer; - } - - - .reviewbtn-inner { - position: relative; - background-color: #2793FF; - border-radius: 24px; - } - - .reviewbtn-review { - font-weight: 700; - font-size: 16px; - padding: 8px 18px; - } - - .reviewbtn-inner p { - margin: 0; - } - - .review-button-number { - position: absolute; - top: -2px; - right: -2px; - font-size: 10px; - font-weight: 500; - background-color: #E61B00; - border: 1px solid #fff; - height: 12px; - width: 12px; - display: flex; - align-items: center; - justify-content: center; - border-radius: 50%; - } -} \ No newline at end of file diff --git a/src/components/Cryptocurrency/Bitcoin/Bitcoin.jsx b/src/components/Cryptocurrency/Bitcoin/Bitcoin.jsx index 91b28d0..5beced1 100644 --- a/src/components/Cryptocurrency/Bitcoin/Bitcoin.jsx +++ b/src/components/Cryptocurrency/Bitcoin/Bitcoin.jsx @@ -4,30 +4,30 @@ import map from "../../../data/map.png"; import Chart from "./Charts/Chart"; import Roadmap from "./Roadmap/Roadmap"; import Review from "./Review/Review"; -import "./Bitcoin.css"; +import classes from "./Bitcoin.module.css"; import ReviewIpad from "./Review/ReviewIpad"; -import BtcProps from "./BtcProps"; -import BtcPrice from "./BtcPrice"; -import BtcRating from "./BtcRating"; -import BtcMarket from "./BtcMarket"; +import BtcProps from "./BtcProps/BtcProps"; +import BtcPrice from "./BtcPrice/BtcPrice"; +import BtcRating from "./BtcRating/BtcRating"; +import BtcMarket from "./BtcMarket/BtcMarket"; export default function Bitcoin() { const [info, setInfo] = useState("chart"); return ( -

-
-
+
+
+
-
-
-
+
+
+
{ setInfo("chart"); }} @@ -35,11 +35,11 @@ export default function Bitcoin() { star

Overview

- {info === "chart" &&
} + {info === "chart" &&
}
-
+
{ setInfo("roadmap"); }} @@ -47,30 +47,30 @@ export default function Bitcoin() { map

Roadmap

- {info === "roadmap" &&
} + {info === "roadmap" &&
}
-
+
{ setInfo("review"); }} > -

Review

-

4

+

Review

+

4

-
+
{info === "chart" && } {info === "roadmap" && } {info === "review" && }
-
+
); -} +} \ No newline at end of file diff --git a/src/components/Cryptocurrency/Bitcoin/Bitcoin.module.css b/src/components/Cryptocurrency/Bitcoin/Bitcoin.module.css new file mode 100644 index 0000000..ff41dc6 --- /dev/null +++ b/src/components/Cryptocurrency/Bitcoin/Bitcoin.module.css @@ -0,0 +1,120 @@ +.bitcoin__container { + margin: 35px 35px 35px 40px; + display: flex; +} + +.bitcoin__details { + flex: 2; + margin-right: 19px; +} + +.btc__detail { + display: flex; + justify-content: space-between; + margin-bottom: 47px; +} + +.bitcoin__infoTitle { + display: flex; + align-items: center; + justify-content: space-between; + width: 50%; + margin: auto; + position: relative; +} + +.review__button { + display: none; +} + +.overview__header { + display: flex; +} + +.overview { + display: flex; + align-items: center; + flex-direction: column; + cursor: pointer; + transition: all 0.5s ease; + position: relative; +} + +.overview img { + height: 24px; + width: 24px; + margin-right: 12px; +} + +.overview h3 { + font-weight: 600; + font-size: 18px; +} + +.horizontal-line { + margin: 0; + margin-top: 7px; + margin-bottom: 32px; + border: 1px solid #4b5768; +} + +.straight__line { + position: absolute; + bottom: -8px; + margin: 0; + margin-top: 14px; + border-radius: 10px 10px 0 0; + width: 130%; + height: 4px; + background-color: #2793ff; + border: none; +} + +.review { + flex: 1; +} + +@media screen and (max-width: 1024px) { + .btc__detail { + margin-bottom: 0; + } + + .review__button { + display: initial; + position: absolute; + right: -50%; + cursor: pointer; + } + + .review__btnInner { + position: relative; + background-color: #2793ff; + border-radius: 24px; + } + + .review__btnReview { + font-weight: 700; + font-size: 16px; + padding: 8px 18px; + } + + .review__btnInner p { + margin: 0; + } + + .review__btnNumber { + position: absolute; + top: -2px; + right: -2px; + font-size: 10px; + font-weight: 500; + background-color: #e61b00; + border: 1px solid #fff; + height: 12px; + width: 12px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + } +} diff --git a/src/components/Cryptocurrency/Bitcoin/BtcMarket.jsx b/src/components/Cryptocurrency/Bitcoin/BtcMarket.jsx deleted file mode 100644 index d1f5d14..0000000 --- a/src/components/Cryptocurrency/Bitcoin/BtcMarket.jsx +++ /dev/null @@ -1,60 +0,0 @@ -import React from "react"; -import greenangle from "../../../data/greenangle.png"; -import redangle from "../../../data/redangle.png"; - -export default function BtcMarket() { - return ( -
-
-
- - angle +62.50% - -

$831,056,257

-

Market Cap

-
-
- - angle -22.50% - -

$2,831,056,257

-

Fully Diluted Market Cap

-
-
-
-
- - angle - -22.50% - -

$8,572,500

-
-

Volume

-

24h

-
-
-
-

0.012

-
-

Volume/Market Cap

-

24h

-
-
-
-
-

188,572,500 BTC

-

Circulating Supply

-
-
-
-

188,572,500 BTC

-

Max Supply

-
-
-

188,572,500 BTC

-

Min Supply

-
-
-
- ); -} diff --git a/src/components/Cryptocurrency/Bitcoin/BtcMarket/BtcMarket.jsx b/src/components/Cryptocurrency/Bitcoin/BtcMarket/BtcMarket.jsx new file mode 100644 index 0000000..5abdb3d --- /dev/null +++ b/src/components/Cryptocurrency/Bitcoin/BtcMarket/BtcMarket.jsx @@ -0,0 +1,61 @@ +import React from "react"; +import greenangle from "../../../../data/greenangle.png"; +import redangle from "../../../../data/redangle.png"; +import classes from './BtcMarket.module.css' + +export default function BtcMarket() { + return ( +
+
+
+ + angle +62.50% + +

$831,056,257

+

Market Cap

+
+
+ + angle -22.50% + +

$2,831,056,257

+

Fully Diluted Market Cap

+
+
+
+
+ + angle + -22.50% + +

$8,572,500

+
+

Volume

+

24h

+
+
+
+

0.012

+
+

Volume/Market Cap

+

24h

+
+
+
+
+

188,572,500 BTC

+

Circulating Supply

+
+
+
+

188,572,500 BTC

+

Max Supply

+
+
+

188,572,500 BTC

+

Min Supply

+
+
+
+ ); +} diff --git a/src/components/Cryptocurrency/Bitcoin/BtcMarket/BtcMarket.module.css b/src/components/Cryptocurrency/Bitcoin/BtcMarket/BtcMarket.module.css new file mode 100644 index 0000000..a8ba47e --- /dev/null +++ b/src/components/Cryptocurrency/Bitcoin/BtcMarket/BtcMarket.module.css @@ -0,0 +1,66 @@ +.bitcoin__market { + display: flex; + align-items: center; + justify-content: space-between; + background-color: #323a46; + box-sizing: border-box; + padding: 25px 37px; + height: 174px; + border-radius: 16px; + margin-bottom: 75px; +} + +.col__1 { + display: flex; + flex-direction: column; + gap: 16px; +} + +.market__cap span { + display: flex; + align-items: center; + font-size: 12px; + font-weight: 500; + margin: 0; +} + +.market__capPrice { + font-size: 14px; + font-weight: bold; + margin: 0; +} + +.market__capName { + color: #d0d5dd; + margin: 0; + font-size: 12px; + font-weight: normal; +} + +.vol { + display: flex; + align-items: center; + margin-top: 0; + height: 27px; +} + +.vol__time { + font-size: 10px; + font-weight: normal; + background-color: #2793ff; + padding: 2px; + border-radius: 4px; + margin-left: 4px; +} + +.col__2 { + display: flex; + flex-direction: column; + gap: 16px; +} + +.col__4 { + display: flex; + flex-direction: column; + gap: 16px; +} \ No newline at end of file diff --git a/src/components/Cryptocurrency/Bitcoin/BtcPrice.jsx b/src/components/Cryptocurrency/Bitcoin/BtcPrice.jsx deleted file mode 100644 index de05389..0000000 --- a/src/components/Cryptocurrency/Bitcoin/BtcPrice.jsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from "react"; -import greenangle from "../../../data/greenangle.png"; -import arrowdown from "../../../data/arrow-down.png"; - -export default function BtcPrice() { - return ( -
-

Bitcoin Price

- -

49,000,830

- angle -

+62.50%

- -
- Low: $42,0000 - High: $42,0000 -
-
- -
-
-
-
- - 24 Hr arrow - -
- ); -} diff --git a/src/components/Cryptocurrency/Bitcoin/BtcPrice/BtcPrice.jsx b/src/components/Cryptocurrency/Bitcoin/BtcPrice/BtcPrice.jsx new file mode 100644 index 0000000..085e975 --- /dev/null +++ b/src/components/Cryptocurrency/Bitcoin/BtcPrice/BtcPrice.jsx @@ -0,0 +1,30 @@ +import React from "react"; +import greenangle from "../../../../data/greenangle.png"; +import arrowdown from "../../../../data/arrow-down.png"; +import classes from './BtcPrice.module.css' + +export default function BtcPrice() { + return ( +
+

Bitcoin Price

+ +

49,000,830

+ angle +

+62.50%

+ +
+ Low: $42,0000 + High: $42,0000 +
+
+ +
+
+
+
+ + 24 Hr arrow + +
+ ); +} diff --git a/src/components/Cryptocurrency/Bitcoin/BtcPrice/BtcPrice.module.css b/src/components/Cryptocurrency/Bitcoin/BtcPrice/BtcPrice.module.css new file mode 100644 index 0000000..ed4505c --- /dev/null +++ b/src/components/Cryptocurrency/Bitcoin/BtcPrice/BtcPrice.module.css @@ -0,0 +1,114 @@ +.btc__price { + width: 45%; +} + +.btc__priceP { + color: #b8c0cc; + font-size: 16; + font-weight: 500; +} + +.price__span { + display: flex; + align-items: center; +} + +.price__spanH3 { + font-size: 24px; + font-weight: bold; + margin-right: 7px; +} + +.price__spanImg { + height: 24px; + width: 24px; + margin-right: 4px; +} + +.price__spanP { + font-size: 14px; + font-weight: 500; + color: #10b981; +} + +.btc__range { + display: flex; + justify-content: space-between; + margin-bottom: 9px; +} + +.btc__range span { + color: #b8c0cc; + font-size: 12px; + font-weight: 500; +} + +.time__span { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 12px; + font-weight: 500; + width: 68px; + height: 33px; + box-sizing: border-box; + border-radius: 12px; + padding: 9px 8px; + background-color: #35373e; + margin-left: auto; + margin-top: 10px; +} + +.range { + width: 100%; + position: relative; +} + +#slider { + -webkit-appearance: none; + width: 100%; + height: 15px; + border-radius: 8px; + outline: none; +} + +#slider::-webkit-slider-thumb { + -webkit-appearance: none; + width: 48px; + height: 48px; + cursor: pointer; + z-index: 3; + position: relative; +} + +#selector { + height: 104px; + width: 40px; + position: absolute; + bottom: -20; + left: 50%; + transform: translateX(-50%); + z-index: 2; +} + +/* .selectBtn { + height: 20px; + width: 20px; + background-color: white; + border-radius: 50%; + border-style: solid; + border-color: transparent red transparent transparent; + border-width: 15px; + position: absolute; + bottom: 0; + right: 0; +} */ + +.selectBtn { + background-color: #fff; + position: relative; +} + +.btclink__arrow { + cursor: pointer; +} diff --git a/src/components/Cryptocurrency/Bitcoin/BtcProps.jsx b/src/components/Cryptocurrency/Bitcoin/BtcProps.jsx deleted file mode 100644 index 29a4f05..0000000 --- a/src/components/Cryptocurrency/Bitcoin/BtcProps.jsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react' -import btc from "../../../data/btcbig.png"; -import share from "../../../data/share.png"; -import { btcLinks } from "../../../data/data"; - -export default function BtcProps() { - const btcLink = (props) => { - return ( -
- - logo -

{props.name}

- - -
- ); - }; - return ( -
-
-
- btc logo -
-
-
-
-

Bitcoin

-

BTC

- share -
- Rank #1 -
-
-
{btcLinks.map(btcLink)}
-
- ) -} diff --git a/src/components/Cryptocurrency/Bitcoin/BtcProps/BtcProps.jsx b/src/components/Cryptocurrency/Bitcoin/BtcProps/BtcProps.jsx new file mode 100644 index 0000000..be3a5ee --- /dev/null +++ b/src/components/Cryptocurrency/Bitcoin/BtcProps/BtcProps.jsx @@ -0,0 +1,38 @@ +import React from 'react' +import btc from "../../../../data/btcbig.png"; +import share from "../../../../data/share.png"; +import { btcLinks } from "../../../../data/data"; +import classes from './BtcProps.module.css' + +export default function BtcProps() { + const btcLink = (props) => { + return ( +
+ + logo +

{props.name}

+ + +
+ ); + }; + return ( +
+
+
+ btc logo +
+
+
+
+

Bitcoin

+

BTC

+ share +
+ Rank #1 +
+
+
{btcLinks.map(btcLink)}
+
+ ) +} diff --git a/src/components/Cryptocurrency/Bitcoin/BtcProps/BtcProps.module.css b/src/components/Cryptocurrency/Bitcoin/BtcProps/BtcProps.module.css new file mode 100644 index 0000000..993265e --- /dev/null +++ b/src/components/Cryptocurrency/Bitcoin/BtcProps/BtcProps.module.css @@ -0,0 +1,114 @@ +.btc__prop { + width: 45%; + display: flex; + flex-direction: column; +} + +.btc__name { + display: flex; + align-items: center; + margin-bottom: 30px; +} + +.btc__logo { + height: 64px; + width: 64px; + position: relative; + margin-right: 16px; +} + +.btc__logo img { + height: 100%; + width: 100%; +} + +.btc__logoOnline { + position: absolute; + height: 17px; + width: 17px; + border-radius: 50%; + background-color: #68f588; + border: 3px solid #1e2329; + right: 2%; + bottom: -7%; + transform: translateX(-2%); +} + +.bitcoin__name { + margin-right: 9px; + display: flex; + align-items: center; +} + +.bitcoin__name h3 { + font-size: 24px; + font-weight: 800; + margin-right: 9px; +} + +.rank1 { + box-sizing: border-box; + height: 20px; + width: 35%; + padding-left: 7px; + padding-top: 2px; + background-color: #35373e; + border-radius: 8px; + font-size: 10px; + font-weight: 500; + display: block; + align-items: center; + justify-content: center; +} + +.bitcoin__nameBTC { + font-weight: normal; + font-size: 13px; + margin-right: 17px; +} + +.bitcoin__nameShareLogo { + height: 13px; + width: 12px; +} + +.btc__links { + margin-top: 5px; + display: flex; + flex-wrap: wrap; +} + +.btc__link { + display: flex; + align-items: center; + background-color: #35373e; + margin-right: 8px; + margin-bottom: 16px; + height: 28px; + box-sizing: border-box; + padding: 6px; + border-radius: 8px; +} + +.btc__linkIcon { + margin-right: 4px; + height: 16px; + width: 16px; +} + +.btc__linkName { + margin-right: 10px; + font-size: 12px; + font-weight: 500; +} + +.btc__linkArrow { + cursor: pointer; +} + +@media screen and (max-width: 1024px) { + .btc__prop { + margin-left: 77px; + width: 35%; + } +} diff --git a/src/components/Cryptocurrency/Bitcoin/BtcRating.jsx b/src/components/Cryptocurrency/Bitcoin/BtcRating.jsx deleted file mode 100644 index fd1430a..0000000 --- a/src/components/Cryptocurrency/Bitcoin/BtcRating.jsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import { Link } from "react-router-dom"; -import yellow from "../../../data/yellow.png"; -import thumb from "../../../data/thumb.png"; - -export default function BtcRating() { - return ( -
-

Project Rating

- -

5.0

-
- star - star - star - star - star -
- - add rating - - -
-
- thumb -

50

-
-
- star -

123

-
-
-
- ) -} diff --git a/src/components/Cryptocurrency/Bitcoin/BtcRating/BtcRating.jsx b/src/components/Cryptocurrency/Bitcoin/BtcRating/BtcRating.jsx new file mode 100644 index 0000000..435fea3 --- /dev/null +++ b/src/components/Cryptocurrency/Bitcoin/BtcRating/BtcRating.jsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { Link } from "react-router-dom"; +import yellow from "../../../../data/yellow.png"; +import thumb from "../../../../data/thumb.png"; +import classes from './BtcRating.module.css' + +export default function BtcRating() { + return ( +
+

Project Rating

+ +

5.0

+
+ star + star + star + star + star +
+ + add rating + + +
+
+ thumb +

50

+
+
+ star +

123

+
+
+
+ ) +} diff --git a/src/components/Cryptocurrency/Bitcoin/BtcRating/BtcRating.module.css b/src/components/Cryptocurrency/Bitcoin/BtcRating/BtcRating.module.css new file mode 100644 index 0000000..4de61d4 --- /dev/null +++ b/src/components/Cryptocurrency/Bitcoin/BtcRating/BtcRating.module.css @@ -0,0 +1,69 @@ +.btc__rating { + width: 40%; + margin-bottom: 60px; +} + +.btc__ratingP { + color: #b8c0cc; + font-size: 16px; + font-weight: 500; + margin-bottom: 3.6px; +} + +.rating__span { + display: flex; +} + +.rating__spanH3 { + font-size: 20px; + font-weight: 600; + margin-right: 3px; +} + +.rating__link { + text-decoration: underline; + color: #2793ff; + margin-left: 5px; +} + +.reaction { + display: flex; + justify-content: flex-end; + margin-top: 25px; +} + +.like { + display: flex; + flex-direction: column; + margin-right: 20px; + align-items: center; +} + +.like img { + height: 27px; + width: 27px; + padding: 8.5px; + border-radius: 50%; +} + +.star { + background-color: #35373e; +} + +.thumb { + background-color: #2793ff; +} + +.like p { + font-weight: 600; + font-size: 12px; +} + +@media screen and (max-width: 1024px) { + .btc__rating { + margin-left: auto; + margin-right: 110px; + width: 250px; + margin-bottom: 51px; + } +} diff --git a/src/components/Cryptocurrency/Bitcoin/BtcStats/BtcStats.jsx b/src/components/Cryptocurrency/Bitcoin/BtcStats/BtcStats.jsx index 9772a07..b04e527 100644 --- a/src/components/Cryptocurrency/Bitcoin/BtcStats/BtcStats.jsx +++ b/src/components/Cryptocurrency/Bitcoin/BtcStats/BtcStats.jsx @@ -1,29 +1,29 @@ import React from "react"; import redangle from "../../../../data/redangle.png"; import greenangle from "../../../../data/greenangle.png"; -import "./BtcStats.css"; +import classes from "./BtcStats.module.css"; import Button from "../../../UI/Button/Button"; export default function BtcStats() { return ( -
+

BTC Price Statistics

-
-
-

Price Change

-

24h

+
+
+

Price Change

+

24h

-
+

$49,0920,029

-
-
-

Price Change

-

24h

+
+
+

Price Change

+

24h

-
+

$49,0920,029

arrow @@ -32,12 +32,12 @@ export default function BtcStats() {
-
-
-

Price Change

-

24h

+
+
+

Price Change

+

24h

-
+

$49,0920,029

arrow @@ -46,12 +46,12 @@ export default function BtcStats() {
-
-
-

Price Change

-

24h

+
+
+

Price Change

+

24h

-
+

$49,0920,029

arrow @@ -60,12 +60,12 @@ export default function BtcStats() {
-
-
-

Price Change

-

24h

+
+
+

Price Change

+

24h

-
+

$49,0920,029

arrow @@ -74,12 +74,12 @@ export default function BtcStats() {
-
-
-

Price Change

-

24h

+
+
+

Price Change

+

24h

-
+

$49,0920,029

arrow @@ -88,12 +88,12 @@ export default function BtcStats() {
-
-
-

Price Change

-

24h

+
+
+

Price Change

+

24h

-
+

#1

diff --git a/src/components/Cryptocurrency/Bitcoin/BtcStats/BtcStats.css b/src/components/Cryptocurrency/Bitcoin/BtcStats/BtcStats.module.css similarity index 92% rename from src/components/Cryptocurrency/Bitcoin/BtcStats/BtcStats.css rename to src/components/Cryptocurrency/Bitcoin/BtcStats/BtcStats.module.css index 7e526b3..d7dd4e1 100644 --- a/src/components/Cryptocurrency/Bitcoin/BtcStats/BtcStats.css +++ b/src/components/Cryptocurrency/Bitcoin/BtcStats/BtcStats.module.css @@ -1,11 +1,11 @@ -.stat-container { +.stat__container { padding: 30px 13px; background-color: #2c3137; width: 35%; border-radius: 18px; } -.stat-container h3 { +.stat__container h3 { margin-bottom: 20px; font-size: 18px; font-weight: bold; @@ -25,13 +25,13 @@ align-items: center; } -.p-change { +.change__p { font-size: 12px; font-weight: normal; margin-right: 4px; } -.change-24 { +.change__24 { font-size: 7.4px; font-weight: normal; background-color: #2793ff; diff --git a/src/components/Cryptocurrency/Bitcoin/Charts/Chart.css b/src/components/Cryptocurrency/Bitcoin/Charts/Chart.css deleted file mode 100644 index 26e3c9d..0000000 --- a/src/components/Cryptocurrency/Bitcoin/Charts/Chart.css +++ /dev/null @@ -1,56 +0,0 @@ -.chart { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 30px; -} - -.chart 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: #32343b; -} - - - -.interval span { - height: fit-content; - font-size: 14px; - font-weight: bold; - padding: 6px 12px; - border-radius: 19.2px; -} - -#first { - background-color: #111218; -} - -.bitcoin-information { - margin-top: 50px; - display: flex; - justify-content: space-between; -} - -.history { - width: 58%; -} - -.history h3 { - margin: 20px 0 8px 0; - font-size: 24px; - font-weight: 800; -} - -.history p { - font-size: 16px; - font-weight: normal; -} \ No newline at end of file diff --git a/src/components/Cryptocurrency/Bitcoin/Charts/Chart.jsx b/src/components/Cryptocurrency/Bitcoin/Charts/Chart.jsx index 5fe204a..de32bb4 100644 --- a/src/components/Cryptocurrency/Bitcoin/Charts/Chart.jsx +++ b/src/components/Cryptocurrency/Bitcoin/Charts/Chart.jsx @@ -1,31 +1,43 @@ -import React from 'react' -import chart from "../../../../data/chart.png" -import BtcStats from '../BtcStats/BtcStats' -import "./Chart.css" +import React from "react"; +import chart from "../../../../data/chart.png"; +import BtcStats from "../BtcStats/BtcStats"; +import classes from "./Chart.module.css"; export default function Chart() { return ( -
-
-

Bitcoin to USD Chart

-
- 24H - 1D - 1M - 1Y - ALL -
+
+
+

Bitcoin to USD Chart

+
+ 24H + 1D + 1M + 1Y + ALL
- {/* chart placeholder */} - chart -
- -
-

History

-

Morbi amet, dolor mi et quis senectus feugiat id morbi. Malesuada in est suspendisse et ultrices integer malesuada. Venenatis lorem aliquet id adipiscing vulputate tincidunt diam lacus. Morbi risus integer pretium massa dictum sagittis orci velit cursus. Morbi est tellus, lacus, posuere viverra id euismod. Vel amet, in maecenas pretium tincidunt ipsum. Facilisi gravida eu, mauris faucibus tincidunt non aenean. Duis ut sed et at. Gravida sed at eu interdum at sit. Est vitae ultricies nunc ornare. - Arcu praesent ut eu quis netus facilisis nunc. Semper purus enim feugiat amet velit ultricies sed. Congue nunc tincidunt tincidunt urna consequat justo id malesuada. Phasellus rhoncus orci eu purus. Adipiscing id id blandit vulputate. Morbi hendrerit amet, sed euismod lectus sit nulla.

-
-
+
+ {/* chart placeholder */} + chart +
+ +
+

History

+

+ Morbi amet, dolor mi et quis senectus feugiat id morbi. Malesuada in + est suspendisse et ultrices integer malesuada. Venenatis lorem + aliquet id adipiscing vulputate tincidunt diam lacus. Morbi risus + integer pretium massa dictum sagittis orci velit cursus. Morbi est + tellus, lacus, posuere viverra id euismod. Vel amet, in maecenas + pretium tincidunt ipsum. Facilisi gravida eu, mauris faucibus + tincidunt non aenean. Duis ut sed et at. Gravida sed at eu interdum + at sit. Est vitae ultricies nunc ornare. Arcu praesent ut eu quis + netus facilisis nunc. Semper purus enim feugiat amet velit ultricies + sed. Congue nunc tincidunt tincidunt urna consequat justo id + malesuada. Phasellus rhoncus orci eu purus. Adipiscing id id blandit + vulputate. Morbi hendrerit amet, sed euismod lectus sit nulla. +

+
+
- ) + ); } diff --git a/src/components/Cryptocurrency/Bitcoin/Charts/Chart.module.css b/src/components/Cryptocurrency/Bitcoin/Charts/Chart.module.css new file mode 100644 index 0000000..4303733 --- /dev/null +++ b/src/components/Cryptocurrency/Bitcoin/Charts/Chart.module.css @@ -0,0 +1,54 @@ +.chart { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 30px; +} + +.chart 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: #32343b; +} + +.interval span { + height: fit-content; + font-size: 14px; + font-weight: bold; + padding: 6px 12px; + border-radius: 19.2px; +} + +#first { + background-color: #111218; +} + +.bitcoin__information { + margin-top: 50px; + display: flex; + justify-content: space-between; +} + +.history { + width: 58%; +} + +.history h3 { + margin: 20px 0 8px 0; + font-size: 24px; + font-weight: 800; +} + +.history p { + font-size: 16px; + font-weight: normal; +} diff --git a/src/components/Cryptocurrency/Bitcoin/Review/Review.jsx b/src/components/Cryptocurrency/Bitcoin/Review/Review.jsx index e495d9b..f6f59c0 100644 --- a/src/components/Cryptocurrency/Bitcoin/Review/Review.jsx +++ b/src/components/Cryptocurrency/Bitcoin/Review/Review.jsx @@ -1,33 +1,33 @@ import React from "react"; -import "./Review.css"; +import classes from "./Review.module.css"; import { reviews } from "../../../../data/data"; import Button from "../../../UI/Button/Button"; export default function Review() { const reviewData = (props) => { return ( -
-
-
+
+
+
display symbol -
-

{props.name}

-

{props.username}

+
+

{props.name}

+

{props.username}

-

{props.time}

+

{props.time}

-

{props.review}

+

{props.review}

); }; return ( -
+

Reviews