+
+ {tabs.map((tab, index) => (
+
+ ))}
+
+
+ {tabs[activeTab].content}
+
-
+
+
$1224.15
{
-4.6%
+
{walletAddress}
- {modalVisible &&
- (
-
- Copied to clipboard!
-
- )
- }
-
+ {modalVisible && (
+
+ Copied to clipboard!
+
+ )}
);
};
-export default Wallet;
\ No newline at end of file
+export default Wallet;
+
+// Components
+const StatusModal = ({walletConnected, getWalletStatusColor}) => (
+
+
+ {walletConnected ? "Connected" : "Disconnected"}
+
+
+
+ website.com
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit
+
+
+
+)
diff --git a/src/components/Wallet/Wallet.module.scss b/src/components/Wallet/Wallet.module.scss
index a5cd60c..88de67c 100644
--- a/src/components/Wallet/Wallet.module.scss
+++ b/src/components/Wallet/Wallet.module.scss
@@ -1,6 +1,12 @@
@use "sass:math";
@import "src/styles/variables";
+.wallet {
+ &:not(:last-child) {
+ margin-bottom: 20px;
+ }
+}
+
// =========================================================
.clipboardModal {
position: absolute;
@@ -38,7 +44,7 @@
.infoWallet {
background: radial-gradient(100% 188.88% at 0% 0%, #16D1D6 0%, #274CFF 100%);
border-radius: 16px;
- padding: 16px;
+ padding: 16px 16px 10px 16px;
&:not(:last-child) {
margin-bottom: 16px;
}
@@ -51,12 +57,20 @@
column-gap: 20px;
margin-bottom: 8px;
line-height: math.div(21.5, 18);
- .infoWalletStatus {
- display: block;
- border-radius: 50%;
- background-color: #fff;
- width: 10px;
- height: 10px;
+}
+
+.infoWalletStatus {
+ position: relative;
+ display: block;
+ border-radius: 50%;
+ background-color: #fff;
+ width: 10px;
+ height: 10px;
+ &:hover {
+ .status {
+ opacity: 1;
+ visibility: visible;
+ }
}
}
@@ -64,7 +78,7 @@
font-weight: 600;
font-size: 32px;
line-height: math.div(38, 32);
- margin-bottom: 8px;
+ margin-bottom: 0px;
.percentСhange {
color: #ffcbcb;
font-size: 18px;
@@ -88,7 +102,42 @@
opacity: 0.5;
}
.copyButton {
+ transform: translate(25%, 0);
+ }
+}
+// Status modal
+.status {
+ position: absolute;
+ z-index: 2;
+ min-width: 180px;
+ top: calc(100% + 4px);
+ right: 0;
+ background: #11316B;
+ border-radius: 8px;
+ font-size: 14px;
+ line-height: math.div(17, 14);
+ box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
+
+ transition: all 0.2s ease 0s;
+ transition-property: opacity, visibility;
+ opacity: 0;
+ visibility: hidden;
+ .statusTitle {
+ display: block;
+ padding: 10px 12px 8px 12px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+ }
+ .statusContent {
+ padding: 8px 12px 12px 12px;
+ }
+ .statusAddress {
+ font-weight: 500;
+ margin-bottom: 5px;
+ }
+ .statusText {
+ font-weight: 300;
+ color: rgba(255, 255, 255, 0.8);
}
}
diff --git a/src/styles/App.scss b/src/styles/App.scss
index 03b9a9c..590cb2b 100644
--- a/src/styles/App.scss
+++ b/src/styles/App.scss
@@ -13,6 +13,7 @@
}
.container{
- margin: 0 15px;
+ margin: 0 16px;
max-width: 100%;
+ height: 100%;
}
\ No newline at end of file
diff --git a/src/styles/_global.scss b/src/styles/_global.scss
index 8bf1910..6933f24 100644
--- a/src/styles/_global.scss
+++ b/src/styles/_global.scss
@@ -1,14 +1,13 @@
.round-button {
- flex: 0 0 30px;
+ flex: 0 0 35px;
border-radius: 50%;
- width: 30px;
- height: 30px;
+ width: 35px;
+ height: 35px;
display: flex;
justify-content: center;
align-items: center;
- transition: all 0.2s ease 0s;
- will-change: transform;
+ transition: background-color 0.2s ease 0s;
&:hover {
- background-color: rgba(255, 255, 255, 0.1);
+ background-color: rgba(255, 255, 255, 0.07);
}
}
\ No newline at end of file
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
index f8d3908..253bde3 100644
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@@ -1,5 +1,10 @@
@import "_variables";
+::-webkit-scrollbar {
+ display: none;
+ scrollbar-width: none;
+}
+
* {
padding: 0px;
margin: 0px;