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

changed marketplace assets

Browse Source
This commit is contained in:
Poovizhi99
2025-04-01 14:27:08 +05:30
parent 21d96a31bc 6f483baf8d
commit a9bfef7693
92 changed files with 4152 additions and 2071 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/src/styles/abstracts/variables.scss
View File

@@ -27,7 +27,7 @@ $input-text-color-dark: #b5b5c8; // Input field text color for dark mode
// Accent colors
$accent-color: #6f42c1; // Primary accent color
$accent-color-dark: #b392f0; // Primary accent color for dark mode
$accent-color-dark: #c4abf1; // Primary accent color for dark mode
$highlight-accent-color: #e0dfff; // Highlighted accent for light mode
$highlight-accent-color-dark: #403e6a; // Highlighted accent for dark mode
@@ -45,6 +45,7 @@ $border-color-dark: #403e6a; // Border color for dark mode
// Shadow color
$shadow-color: #3c3c431a; // Shadow base color for light and dark mode
$shadow-color-dark: #8f8f8f1a; // Shadow base color for light and dark mode
// Gradients
$acent-gradient-dark: linear-gradient(

2
app/src/styles/base/base.scss
View File

@@ -58,7 +58,7 @@
--border-color: #{$border-color-dark}; // Border color for dark theme
// Shadow variables
--shadow-main-dark: #{$shadow-color}; // Main shadow color
--shadow-main-dark: #{$shadow-color-dark}; // Main shadow color
--box-shadow-light: 0px 2px 4px var(--shadow-main-dark); // Light shadow
--box-shadow-medium: 0px 4px 8px var(--shadow-main-dark); // Medium shadow
--box-shadow-heavy: 0px 8px 16px var(--shadow-main-dark); // Heavy shadow

47
app/src/styles/components/input.scss
View File

@@ -1,6 +1,22 @@
@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;
// global input style
input {
width: 100%;
padding: 2px 4px;
border-radius: #{$border-radius-small};
border: 1px solid var(--border-color);
outline: none;
background: transparent;
&:focus,
&:active {
border: 1px solid var(--accent-color);
}
}
.input-value {
color: var(--input-text-color);
font-size: var(--font-size-regular);
@@ -155,16 +171,6 @@
}
}
.project-dropdowm-container {
position: relative;
height: 32px;
.project-name {
line-height: 32px;
height: 100%;
}
}
.regularDropdown-container {
width: 100%;
min-width: 80px;
@@ -179,7 +185,6 @@
display: flex;
justify-content: space-between;
cursor: pointer;
border: 1px solid var(--primary-color);
border-radius: 6px;
background-color: var(--background-color);
}
@@ -224,8 +229,8 @@
position: relative;
.dropdown {
top: 3px;
right: 3px;
top: 2px;
right: 2px;
position: absolute;
background: var(--highlight-accent-color);
border-radius: #{$border-radius-small};
@@ -238,19 +243,6 @@
}
}
input {
width: 100%;
padding: 2px 4px;
border-radius: #{$border-radius-small};
border: 1px solid var(--border-color);
outline: none;
&:focus,
&:active {
border: 1px solid var(--accent-color);
}
}
.eye-dropper-input-container {
display: flex;
align-items: center;
@@ -617,6 +609,7 @@ input {
input {
border: none;
background: transparent;
&::placeholder {
color: var(--text-disabled);
@@ -655,4 +648,4 @@ input {
.multi-email-invite-input.active {
border: 1px solid var(--accent-color);
}
}
}

87
app/src/styles/components/menu/menu.scss
View File

@@ -1,25 +1,58 @@
@use "../../abstracts/variables" as *;
@use "../../abstracts/mixins" as *;
.project-dropdowm-container {
display: flex;
align-items: center;
gap: 2px;
position: relative;
height: 32px;
.project-name {
line-height: 32px;
height: 100%;
}
.more-options-button {
@include flex-center;
border-radius: #{$border-radius-small};
height: 28px;
position: relative;
&:hover {
background: var(--highlight-accent-color);
path {
fill: var(--accent-color);
}
}
}
.more-options-button.active {
background: var(--highlight-accent-color);
path {
fill: var(--accent-color);
}
}
}
.menu-bar {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
top: 32px;
left: 0;
z-index: 5;
background-color: var(--background-color);
color: var(--text-color);
box-shadow: var(--box-shadow-light);
border-radius: 8px;
border: 1px solid var(--border-color);
.menu-buttons {
display: flex;
flex-direction: column;
height: 100%;
padding: 8px 4px;
padding: 4px;
min-width: 178px;
.menu-button-container {
position: relative;
height: 100%;
padding: 8px;
padding: 4px 8px 4px 12px;
border-radius: #{$border-radius-small};
.menu-button {
width: 100%;
cursor: pointer;
@@ -32,7 +65,7 @@
.dropdown-icon {
margin-left: 5px;
font-size: var(--font-size-small);
color: #666666;
rotate: -90deg;
}
}
@@ -46,23 +79,27 @@
box-shadow: var(--box-shadow-light);
border: 1px solid var(--background-color);
z-index: 100;
padding: 5px 0;
padding: 4px;
.menu-item-container {
position: relative;
.menu-item {
padding: 4px 8px 4px 12px;
border-radius: #{$border-radius-small};
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 20px;
cursor: pointer;
white-space: nowrap;
color: var(--text-color);
.dropdown-icon {
rotate: -90deg;
}
&:hover {
background-color: var(--highlight-accent-color);
color: var(--highlight-accent-color);
span,
.menu-item-right span {
color: var(--accent-color);
}
}
.menu-item-right {
@@ -92,19 +129,22 @@
box-shadow: var(--box-shadow-light);
border: 1px solid var(--background-color);
z-index: 101;
padding: 4px;
.submenu-item {
padding: 8px 20px;
cursor: pointer;
padding: 4px 8px 4px 12px;
border-radius: #{$border-radius-small};
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
white-space: nowrap;
color: var(--text-color);
&:hover {
background-color: var(--background-color-gray);
color: var(--highlight-accent-color);
background-color: var(--highlight-accent-color);
span {
color: var(--accent-color);
}
}
.shortcut {
color: var(--text-color);
}
@@ -115,13 +155,16 @@
&:hover {
background-color: var(--highlight-accent-color);
color: var(--highlight-accent-color);
.menu-button {
color: var(--accent-color);
}
}
}
}
.split {
width: 100%;
height: 1px;
background-color: #e0dfff;
background-color: var(--highlight-accent-color);
margin: 2px 0;
}
}

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

@@ -253,6 +253,10 @@
.user-profile-container {
display: flex;
.user-profile {
background: var(--accent-color);
color: var(--primary-color);
}
.user-organization {
height: 26px;
@@ -314,6 +318,23 @@
.sidebar-right-content-container {
.dataSideBar {
.inputs-wrapper {
.datas {
.input-value {
padding: 5px 10px;
}
.input-value,
.rename-input {
margin-right: 24px;
width: 170px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
width: 100%;
height: 100%;
display: flex;
@@ -665,6 +686,10 @@
font-weight: var(--font-weight-regular);
padding: 8px 0;
}
.input-toggle-container {
padding: 0;
margin-bottom: 6px;
}
.value-field-container {
margin-bottom: 6px;
@@ -1027,6 +1052,7 @@
position: relative;
z-index: 3;
font-size: var(--font-size-regular);
color: var(--background-color);
}
.asset-image {
@@ -1077,6 +1103,7 @@
position: relative;
z-index: 3;
font-size: var(--font-size-regular);
color: var(--background-color);
}
.asset-image {

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

@@ -32,7 +32,10 @@
@use 'layout/toast';
// pages
@use 'pages/dashboard.scss';
@use 'pages/dashboard';
@use 'pages/home';
@use 'pages/realTimeViz';
@use 'pages/userAuth';
@use 'pages/userAuth';
//
@use './scene/scene'

442
app/src/styles/pages/dashboard.scss
View File

@@ -1,221 +1,221 @@
@use "../abstracts/variables.scss" as *;
@use "../abstracts/mixins.scss" as *;
.dashboard-main {
height: 100vh;
width: 100vw;
display: flex;
.side-pannel-container {
padding: 32px;
min-width: 240px;
height: 100vh;
display: flex;
flex-direction: column;
gap: 16px;
border-right: 1px solid var(--border-color);
.side-pannel-header {
@include flex-space-between;
.user-container {
@include flex-center;
gap: 6px;
.user-profile {
height: 32px;
width: 32px;
line-height: 32px;
text-align: center;
font-weight: var(--font-weight-medium);
background: var(--accent-color);
color: var(--primary-color);
border-radius: #{$border-radius-circle};
}
.user-name {
color: var(--accent-color);
}
}
.notifications-container {
@include flex-center;
height: 24px;
width: 24px;
cursor: pointer;
}
}
.new-project-button {
padding: 12px 16px;
cursor: not-allowed;
color: var(--accent-color);
background-color: var(--background-color-secondary);
border-radius: #{$border-radius-large};
}
.side-bar-content-container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
.side-bar-options-container {
.option-list {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
margin: 4px 0;
border-radius: #{$border-radius-medium};
&:hover {
background: var(--background-color-secondary);
}
}
.active {
color: var(--accent-color);
font-weight: var(--font-weight-medium);
background-color: var(--highlight-accent-color);
&:hover {
background-color: var(--highlight-accent-color);
}
}
}
}
}
.dashboard-home-container {
width: 100%;
.dashboard-navbar-container {
margin-top: 28px;
padding: 8px 34px 8px 12px;
@include flex-center;
.title {
text-transform: capitalize;
font-size: var(--font-size-large);
width: 100%;
}
.market-place-button {
@include flex-center;
gap: 6px;
padding: 8px 14px;
background: var(--accent-gradient-color);
white-space: nowrap;
border-radius: #{$border-radius-large};
color: var(--primary-color);
}
.search-wrapper {
width: 400px;
}
}
.container {
margin: 22px 0;
width: 100%;
padding: 0 12px;
.header {
font-size: var(--font-size-large);
}
.cards-container {
display: flex;
flex-wrap: wrap;
position: relative;
width: 100%;
padding: 8px;
gap: 18px;
}
}
}
}
.dashboard-card-container {
height: 242px;
width: calc((100% / 5) - 23px);
min-width: 260px;
position: relative;
border: 1px solid var(--border-color);
border-radius: #{$border-radius-large};
overflow: hidden;
.preview-container {
height: 100%;
width: 100%;
img {
height: 100%;
width: 100%;
object-fit: cover;
vertical-align: top;
border: none;
outline: none;
}
}
.project-details-container {
@include flex-space-between;
position: absolute;
bottom: 0;
width: 100%;
padding: 8px 16px;
background: var(--primary-color);
border-radius: 10px;
.project-details {
.project-name {
margin-bottom: 2px;
}
.project-data {
color: var(--accent-color);
}
}
.users-list-container {
@include flex-center;
gap: 6px;
.user-profile {
height: 26px;
width: 26px;
line-height: 26px;
text-align: center;
background-color: var(--accent-color);
color: var(--primary-color);
border-radius: #{$border-radius-circle};
}
}
}
}
.market-place-banner-container {
width: 100%;
height: 230px;
overflow: hidden;
position: relative;
padding: 0 24px;
img {
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 30px;
}
.hero-text {
position: absolute;
left: 52px;
bottom: 25px;
font-size: 48px;
font-family: #{$font-roboto};
font-weight: 800;
color: #ffffff;
text-transform: uppercase;
}
.context {
position: absolute;
top: 20px;
right: 58px;
text-transform: uppercase;
font-size: 22px;
width: 300px;
color: #ffffff;
font-family: #{$font-roboto};
}
.arrow-context {
position: absolute;
bottom: 27px;
right: 300px;
}
.explore-button {
position: absolute;
top: 95px;
right: 52px;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
border: 1px solid #ffffff;
color: #ffffff;
font-family: #{$font-roboto};
cursor: pointer;
}
}
@use "../abstracts/variables.scss" as *;
@use "../abstracts/mixins.scss" as *;
.dashboard-main {
height: 100vh;
width: 100vw;
display: flex;
.side-pannel-container {
padding: 32px;
min-width: 240px;
height: 100vh;
display: flex;
flex-direction: column;
gap: 16px;
border-right: 1px solid var(--border-color);
.side-pannel-header {
@include flex-space-between;
.user-container {
@include flex-center;
gap: 6px;
.user-profile {
height: 32px;
width: 32px;
line-height: 32px;
text-align: center;
font-weight: var(--font-weight-medium);
background: var(--accent-color);
color: var(--primary-color);
border-radius: #{$border-radius-circle};
}
.user-name {
color: var(--accent-color);
}
}
.notifications-container {
@include flex-center;
height: 24px;
width: 24px;
cursor: pointer;
}
}
.new-project-button {
padding: 12px 16px;
cursor: not-allowed;
color: var(--accent-color);
background-color: var(--background-color-secondary);
border-radius: #{$border-radius-large};
}
.side-bar-content-container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
.side-bar-options-container {
.option-list {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
margin: 4px 0;
border-radius: #{$border-radius-medium};
&:hover {
background: var(--background-color-secondary);
}
}
.active {
color: var(--accent-color);
font-weight: var(--font-weight-medium);
background-color: var(--highlight-accent-color);
&:hover {
background-color: var(--highlight-accent-color);
}
}
}
}
}
.dashboard-home-container {
width: 100%;
.dashboard-navbar-container {
margin-top: 28px;
padding: 8px 34px 8px 12px;
@include flex-center;
.title {
text-transform: capitalize;
font-size: var(--font-size-large);
width: 100%;
}
.market-place-button {
@include flex-center;
gap: 6px;
padding: 8px 14px;
background: var(--accent-gradient-color);
white-space: nowrap;
border-radius: #{$border-radius-large};
color: var(--primary-color);
}
.search-wrapper {
width: 400px;
}
}
.container {
margin: 22px 0;
width: 100%;
padding: 0 12px;
.header {
font-size: var(--font-size-large);
}
.cards-container {
display: flex;
flex-wrap: wrap;
position: relative;
width: 100%;
padding: 8px;
gap: 18px;
}
}
}
}
.dashboard-card-container {
height: 242px;
width: calc((100% / 5) - 23px);
min-width: 260px;
position: relative;
border: 1px solid var(--border-color);
border-radius: #{$border-radius-large};
overflow: hidden;
.preview-container {
height: 100%;
width: 100%;
img {
height: 100%;
width: 100%;
object-fit: cover;
vertical-align: top;
border: none;
outline: none;
}
}
.project-details-container {
@include flex-space-between;
position: absolute;
bottom: 0;
width: 100%;
padding: 8px 16px;
background: var(--primary-color);
border-radius: 10px;
.project-details {
.project-name {
margin-bottom: 2px;
}
.project-data {
color: var(--accent-color);
}
}
.users-list-container {
@include flex-center;
gap: 6px;
.user-profile {
height: 26px;
width: 26px;
line-height: 26px;
text-align: center;
background-color: var(--accent-color);
color: var(--primary-color);
border-radius: #{$border-radius-circle};
}
}
}
}
.market-place-banner-container {
width: 100%;
height: 230px;
overflow: hidden;
position: relative;
padding: 0 24px;
img {
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 30px;
}
.hero-text {
position: absolute;
left: 52px;
bottom: 25px;
font-size: 48px;
font-family: #{$font-roboto};
font-weight: 800;
color: #ffffff;
text-transform: uppercase;
}
.context {
position: absolute;
top: 20px;
right: 58px;
text-transform: uppercase;
font-size: 22px;
width: 300px;
color: #ffffff;
font-family: #{$font-roboto};
}
.arrow-context {
position: absolute;
bottom: 27px;
right: 300px;
}
.explore-button {
position: absolute;
top: 95px;
right: 52px;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
border: 1px solid #ffffff;
color: #ffffff;
font-family: #{$font-roboto};
cursor: pointer;
}
}

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

@@ -22,7 +22,7 @@
min-height: 83px;
background: var(--background-color);
border: 1.23px solid var(--border-color);
box-shadow: 0px 4.91px 4.91px 0px #0000001c;
box-shadow: var(--box-shadow-heavy);
border-radius: $border-radius-medium;
padding: 18px;
position: absolute;
@@ -31,6 +31,7 @@
.scene-container {
overflow: hidden;
background: #232323;
}
.icon {
@@ -541,4 +542,145 @@
.zone.active {
background-color: #007bff;
color: white;
}
.floating-wrapper {
.icon {
width: 25px !important;
height: 25px !important;
background-color: transparent;
}
.kebab {
width: 30px;
height: 30px;
position: absolute !important;
top: 0px;
right: 0px;
z-index: 10;
cursor: pointer;
@include flex-center;
}
.kebab-options {
position: absolute;
top: 18px;
right: 5px;
transform: translate(0px, 0);
background-color: var(--background-color);
z-index: 10;
display: flex;
flex-direction: column;
gap: 6px;
border-radius: 4px;
box-shadow: var(--box-shadow-medium);
.btn {
display: flex;
gap: 6px;
align-items: center;
padding: 5px 10px;
color: var(--text-color);
cursor: pointer;
&:hover {
.label {
color: var(--accent-color);
}
}
&:hover {
background-color: var(--highlight-accent-color);
width: 100%;
svg {
&:first-child {
fill: var(--accent-color);
}
&:last-child {
fill: auto;
stroke: var(--accent-color);
}
}
}
}
.dublicate {
cursor: not-allowed;
}
}
}
.distance-line {
position: absolute;
border-style: dashed;
border-color: var(--accent-color); /* Green color for visibility */
border-width: 1px;
pointer-events: none; /* Ensure lins don't interfere with dragging */
z-index: 10000;
}
/* Label styles for displaying distance values */
.distance-label {
position: absolute;
background-color: var(--accent-color);
color: white;
font-size: 12px;
padding: 2px 6px;
border-radius: 3px;
white-space: nowrap;
transform: translate(-50%, -50%); /* Center the label */
}
/* Specific styles for each type of line */
/* Top distance line */
.distance-line.top {
border-bottom: none; /* Remove bottom border for a single line */
width: 2px; /* Thin vertical line */
}
.distance-line.top .distance-label {
top: -10px; /* Position label above the line */
left: 50%; /* Center horizontally */
}
/* Bottom distance line */
.distance-line.bottom {
border-top: none; /* Remove top border for a single line */
width: 2px; /* Thin vertical line */
}
.distance-line.bottom .distance-label {
bottom: -10px; /* Position label below the line */
left: 50%; /* Center horizontally */
}
/* Left distance line */
.distance-line.left {
border-right: none; /* Remove right border for a single line */
height: 2px; /* Thin horizontal line */
}
.distance-line.left .distance-label {
left: -10px; /* Position label to the left of the line */
top: 50%; /* Center vertically */
}
/* Right distance line */
.distance-line.right {
border-left: none; /* Remove left border for a single line */
height: 2px; /* Thin horizontal line */
}
.distance-line.right .distance-label {
right: -10px; /* Position label to the right of the line */
top: 50%; /* Center vertically */
}

23
app/src/styles/scene/scene.scss Normal file
View File

@@ -0,0 +1,23 @@
@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;
.distance-text-wrapper {
pointer-events: none !important;
}
.distance-text {
pointer-events: none !important;
.distance {
position: absolute;
transform: translate(-50%, -50%) scale(.8);
pointer-events: none !important;
white-space: nowrap;
// style
font-size: var(--font-size-large);
padding: 2px 8px;
background: var(--primary-color);
color: var(--accent-color);
outline: 1px solid var(--accent-color);
border-radius: #{$border-radius-medium};
box-shadow: var(--box-shadow-light);
}
}