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

Update styles, add marketplace components, and enhance drag-and-drop functionality

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-03-27 15:14:29 +05:30
parent a7ec4720a4
commit 3de7eedb80
51 changed files with 24774 additions and 809 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
app/src/styles/components/marketPlace/marketPlace.scss Normal file
View File

@@ -0,0 +1,187 @@
@use "../../abstracts/variables" as *;
@use "../../abstracts/mixins.scss" as *;
.marketplace-wrapper {
height: 100vh;
width: 100vw;
z-index: #{$z-index-marketplace};
background-color: var(--background-color-secondary);
position: absolute;
left: 0;
padding: 100px 50px;
.marketplace-container {
padding: 20px 2px;
height: calc(100vh - 120px);
background-color: var(--background-color);
box-shadow: #{$box-shadow-medium};
border-radius: #{$border-radius-extra-large};
}
.marketPlace {
width: 100%;
height: 100%;
overflow: auto;
left: calc(120px / 2);
top: 100px;
padding: 14px;
padding-bottom: 60px;
display: flex;
flex-direction: column;
gap: 24px;
.filter-search-container {
width: 100%;
display: flex;
align-items: center;
gap: 12px;
.search-wrapper {
min-width: 60%;
max-width: 684px;
padding: 0;
border-radius: $border-radius-large ;
.search-container {
border: none !important;
box-shadow: $box-shadow-medium;
border-radius: $border-radius-large ;
input {
border: none !important;
outline: none;
}
}
}
.regularDropdown-container {
max-width: 159px;
}
.button {
padding: 5px 20px;
border: 1px solid var(--accent-color);
border-radius: 14px;
}
.rating-container {
display: flex;
align-items: center;
gap: 6px;
.stars {
display: flex;
align-items: center;
}
}
}
.cards-container-container {
padding: 0px 20px;
display: flex;
flex-direction: column;
gap: 6px;
.header {
color: var(--text-color);
font-weight: $medium-weight;
font-size: $xlarge;
}
.cards-wrapper-container {
display: flex;
flex-wrap: wrap;
gap: 28px;
.card-container {
width: calc(25% - 23px);
border-radius: 18px;
padding: 12px;
box-shadow: 0px 2px 10.5px 0px #0000000D;
border: 1px solid var(--background-accent-transparent, #E0DFFF80);
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
.icon {
position: absolute;
top: 12px;
left: 12px;
width: 30px;
height: 30px;
border-radius: 10px;
padding: 5px;
background-color: var(--accent-color);
}
.image-container {
width: 100%;
display: flex;
justify-content: center;
}
.assets-container {
display: flex;
justify-content: space-between;
.name-container {
display: flex;
flex-direction: column;
gap: 3px;
.asstes-container {
font-weight: #{$bold-weight};
font-size: $regular ;
}
.assets-date {
color: var(--accent-color);
font-size: $small;
}
}
.details {
display: flex;
align-items: center;
gap: 10px;
.content {
display: flex;
align-items: center;
gap: 6px;
}
}
}
.vendor-icon {
font-weight: #{$bold-weight};
font-size: $regular ;
}
.stars-container {
display: flex;
justify-content: space-between;
}
.buy-now-button {
width: 100%;
background-color: var(--background-color-secondary);
border-radius: $border-radius-extra-large ;
padding: 8px 0;
@include flex-center;
color: var(--accent-color);
&:hover {
cursor: pointer;
}
}
}
}
}
}
}

94
app/src/styles/components/tools.scss
View File

@@ -4,7 +4,7 @@
.tools-container {
@include flex-center;
position: fixed;
bottom: 32px;
bottom: 50px;
left: 50%;
transform: translate(-50%, 0);
padding: 8px;
@@ -15,12 +15,14 @@
transition: width 0.2s;
background-color: var(--background-color);
z-index: #{$z-index-default};
.split {
height: 20px;
width: 2px;
border-radius: 2px;
background: var(--highlight-accent-color);
}
.draw-tools,
.general-options,
.activeDropicon {
@@ -30,42 +32,46 @@
width: 0;
opacity: 0;
animation: expandWidth 0.2s ease-in-out forwards;
.tool-button {
@include flex-center;
height: 28px;
width: 28px;
cursor: pointer;
border-radius: #{$border-radius-small};
&:hover {
background: color-mix(
in srgb,
var(--highlight-accent-color) 60%,
transparent
);
background: color-mix(in srgb,
var(--highlight-accent-color) 60%,
transparent);
}
}
.active {
background-color: var(--accent-color);
&:hover {
background-color: var(--accent-color);
}
}
}
.activeDropicon {
gap: 2px;
.drop-down-option-button {
@include flex-center;
height: 28px;
cursor: pointer;
border-radius: #{$border-radius-small};
position: relative;
&:hover {
background: color-mix(
in srgb,
var(--highlight-accent-color) 60%,
transparent
);
background: color-mix(in srgb,
var(--highlight-accent-color) 60%,
transparent);
}
.drop-down-container {
position: absolute;
bottom: 40px;
@@ -74,6 +80,7 @@
padding: 8px;
border-radius: #{$border-radius-large};
background: var(--background-color);
.option-list {
margin: 4px 0;
display: flex;
@@ -82,18 +89,22 @@
border-radius: #{$border-radius-medium};
gap: 6px;
padding: 4px;
&:hover {
background-color: var(--highlight-accent-color);
color: var(--accent-color);
path {
stroke: var(--accent-color);
}
}
.active-option {
height: 12px;
width: 12px;
@include flex-center;
}
.option {
color: inherit;
}
@@ -101,6 +112,7 @@
}
}
}
.toggle-threed-button {
@include flex-center;
padding: 3px;
@@ -108,12 +120,14 @@
background-color: var(--highlight-accent-color);
gap: 2px;
position: relative;
.toggle-option {
font-size: var(--font-size-small);
padding: 2px;
z-index: 1;
transition: all 0.2s;
}
&::after {
content: "";
position: absolute;
@@ -125,15 +139,70 @@
border-radius: #{$border-radius-small};
transition: all 0.2s;
}
.active {
color: var(--highlight-accent-color);
}
}
.toggled {
&::after {
left: 24px;
}
}
}
.exitPlay {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: var(--highlight-accent-color);
cursor: pointer;
@include flex-center;
position: fixed;
bottom: 60px;
left: 50%;
transform: translate(-50%, 0);
color: var(--accent-color);
z-index: 100;
isolation: isolate;
font-weight: 700;
&:hover {
font-weight: 500;
background-color: var(--accent-color);
color: var(--highlight-accent-color);
&::after{
animation: pulse 1s ease-out infinite;
}
}
&::after{
content: "";
position: absolute;
height: 100%;
width: 100%;
background: var(--background-color-secondary);
border-radius: #{$border-radius-circle};
z-index: -1;
}
}
@keyframes pulse {
0%{
opacity: 0;
scale: .5;
}
50%{
opacity: 1;
}
100%{
opacity: 0;
scale: 2;
}
}
@keyframes expandWidth {
@@ -141,8 +210,9 @@
width: 0;
opacity: 0;
}
to {
width: fit-content;
opacity: 1;
}
}
}

2
app/src/styles/layout/sidebar.scss
View File

@@ -530,7 +530,7 @@
border-radius: #{$border-radius-medium};
path {
stroke: var(--accent-color);
stroke-width: 1.5px;
strokeWidth: 1.5px;
}
&:hover {
background: var(--accent-color);

1
app/src/styles/main.scss
View File

@@ -21,6 +21,7 @@
@use 'components/visualization/floating/energyConsumed';
@use 'components/visualization/ui/styledWidgets';
@use './components/visualization/floating/common';
@use './components/marketPlace/marketPlace.scss';
// layout
@use 'layout/loading';

19
app/src/styles/pages/realTimeViz.scss
View File

@@ -167,7 +167,9 @@
.chart-container {
width: 100%;
height: 200px;
height: 24% !important;
min-height: 150px;
max-height: 100%;
border: 1px dotted #a9a9a9;
border-radius: 8px;
@@ -192,17 +194,17 @@
left: 0;
right: 0;
.fullScreen {
background-color: red;
}
.panel-content {
display: flex;
flex-direction: row;
height: 100%;
.chart-container {
height: 100%;
width: 200px;
height: 100% !important;
width: 20%;
min-width: 150px;
}
}
}
@@ -234,6 +236,11 @@
}
}
.playingFlase{
.zoon-wrapper{
bottom: 300px !important;
}
}
// Side Buttons
.side-button-container {
position: absolute;