Dwinzo-Beta/Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor styles to use 'background' shorthand property instead of 'background-color' for consistency across components. Updated various components including confirmation pop-up, input fields, lists, marketplace, menu, module toggle, simulation, and more. Enhanced visual effects with backdrop filters and adjusted padding/margins for improved layout. Removed unnecessary styles and optimized hover effects for better user experience.

Browse Source
This commit is contained in:
Vishnu
2025-04-29 16:27:03 +05:30
parent 77a6dda068
commit 45fea9465e
37 changed files with 491 additions and 525 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
app/src/styles/components/marketPlace/marketPlace.scss
View File

@@ -5,28 +5,28 @@
height: 100vh;
width: 100vw;
z-index: #{$z-index-marketplace};
background-color: var(--background-color-secondary);
background: var(--background-color-secondary);
position: absolute;
left: 0;
top: 0;
padding: 100px 50px;
padding-bottom: 32px;
backdrop-filter: blur(6px);
.marketplace-container {
position: relative;
padding: 20px 2px;
height: 100%;
background-color: var(--background-color);
background: var(--background-color);
box-shadow: #{$box-shadow-medium};
border-radius: #{$border-radius-extra-large};
border-radius: #{$border-radius-xxx};
outline: 1px solid var(--border-color);
backdrop-filter: blur(16px);
}
.marketPlace {
width: 100%;
height: 100%;
overflow: auto;
padding-bottom: 60px;
display: flex;
flex-direction: column;
gap: 24px;
@@ -83,12 +83,18 @@
}
}
}
.cards-container-wrapper{
position: relative;
height: calc(100% - 60px);
padding: 0px 10px;
}
.cards-container-container {
padding: 0px 20px;
display: flex;
padding: 0 10px;
flex-direction: column;
gap: 6px;
height: 100%;
overflow: auto;
.header {
color: var(--text-color);
@@ -107,7 +113,8 @@
border-radius: 18px;
padding: 12px;
box-shadow: 0px 2px 10.5px 0px #0000000d;
border: 1px solid var(--background-accent-transparent, #e0dfff80);
background: var(--background-color);
border: 1px solid var(--border-color);
position: relative;
display: flex;
flex-direction: column;
@@ -124,7 +131,7 @@
height: 30px;
border-radius: 10px;
padding: 5px;
background-color: var(--accent-color);
background: var(--accent-color);
}
.image-container {
@@ -193,11 +200,11 @@
.buy-now-button {
width: 100%;
background-color: var(--background-color-secondary);
background: var(--background-color-button);
border-radius: $border-radius-extra-large;
padding: 8px 0;
@include flex-center;
color: var(--accent-color);
color: var(--text-button-color);
&:hover {
cursor: pointer;
@@ -220,7 +227,7 @@
.assetPreview {
width: 100%;
height: 100%;
background-color: var(--background-color);
background: var(--background-color);
display: flex;
gap: 12px;
overflow: hidden;
@@ -262,7 +269,7 @@
border-radius: 50%;
font-weight: var(--font-weight-bold);
color: var(--background-color);
background-color: var(--accent-color);
background: var(--accent-color);
}
.organization-details {
@@ -327,7 +334,7 @@
display: block;
width: 2px;
height: 12px;
background-color: #ccc;
background: #ccc;
}
}
@@ -363,7 +370,7 @@
}
&:last-child {
background-color: var(--accent-color);
background: var(--accent-color);
color: var(--background-color);
}
}