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

Refactor Assets component layout and styling; enhance Trigger dropdowns with labels; update MenuBar theme retrieval; fix icon import in AssetPreview; adjust Card component star rating display; modify AddButtons styles and functionality; improve variable definitions in SCSS files; streamline input component styles; refine marketplace card layout; enhance menu dropdown styles; update module toggle styles; adjust tools component styles; improve visualization floating styles; clean up sidebar styles; optimize realTimeViz styles for better responsiveness.

Browse Source
This commit is contained in:
Vishnu
2025-04-30 16:23:24 +05:30
parent 4152e611a9
commit 5119b014b7
23 changed files with 470 additions and 499 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,7 +7,7 @@
top: 32px;
left: 8px;
background: var(--background-color);
backdrop-filter: blur(150px);
backdrop-filter: blur(15px);
border-radius: #{$border-radius-extra-large};
outline: 1px solid var(--border-color);
box-shadow: #{$box-shadow-medium};
@@ -30,10 +30,6 @@
padding: 0 8px;
width: 100%;
max-width: calc(100% - 32px);
.input-value {
color: var(--accent-color);
}
}
}
@@ -235,7 +231,6 @@
.outline-container {
height: 100%;
.outline-content-container {
position: relative;
height: 100%;
@@ -256,7 +251,7 @@
top: 32px;
right: 8px;
background: var(--background-color);
backdrop-filter: blur(150px);
backdrop-filter: blur(15px);
border-radius: #{$border-radius-extra-large};
outline: 1px solid var(--border-color);
box-shadow: #{$box-shadow-medium};
@@ -276,7 +271,7 @@
.share-button {
padding: 4px 12px;
color: var(--text-color);
color: var(--text-button-color);
background: var(--background-color-button);
font-weight: var(--font-weight-regular);
border-radius: #{$border-radius-large};
@@ -750,7 +745,7 @@
.value-field-container {
margin: 0;
input {
padding: 5px 4px;
padding: 5px 10px;
}
.dropdown {
top: 4px;
@@ -772,8 +767,8 @@
padding: 6px 12px;
.regularDropdown-container {
padding: 5px 8px;
outline: 2px solid var(--border-color);
outline-offset: -2px;
outline: 1px solid var(--border-color);
outline-offset: -1px;
border: none;
}
}
@@ -806,7 +801,6 @@
@include flex-space-between;
padding: 4px 12px;
width: 100%;
margin: 2px 0;
border-radius: #{$border-radius-medium};
.value {
display: flex;
@@ -939,6 +933,18 @@
}
}
.trigger-wrapper {
.trigger-item {
.trigger-name {
padding: 8px;
margin-top: 4px;
}
.value-field-container {
margin: 0;
}
}
}
.footer {
@include flex-center;
justify-content: flex-start;
@@ -948,10 +954,9 @@
}
.compare-simulations-container {
margin: 6px;
background: var(--background-color-gray);
padding: 12px;
border-radius: #{$border-radius-medium};
border-radius: #{$border-radius-large};
.compare-simulations-header {
font-weight: var(--font-weight-medium);
@@ -973,10 +978,12 @@
input {
width: fit-content;
background: var(--accent-color);
color: var(--highlight-accent-color);
padding: 2px 8px;
background: var(--background-color-button);
color: var(--text-button-color);
padding: 3px 10px;
cursor: pointer;
border: none;
outline: none;
}
}
}
@@ -1084,24 +1091,24 @@
input {
border: none;
outline: none;
cursor: pointer;
transition: all 0.2s;
&:hover {
transform: translateY(-2px);
box-shadow: #{$box-shadow-medium};
outline: 1px solid var(--accent-color);
outline: 1px solid var(--input-border-color);
}
}
.cancel {
background: transparent;
color: var(--accent-color);
background: var(--background-color-secondary);
color: var(--text-color);
}
.submit {
background: var(--accent-color);
color: var(--highlight-accent-color);
background: var(--background-color-button);
color: var(--text-button-color);
}
}
@@ -1109,7 +1116,7 @@
margin: 6px;
background: var(--background-color-gray);
padding: 12px;
border-radius: #{$border-radius-medium};
border-radius: #{$border-radius-large};
.custom-analysis-header {
font-weight: var(--font-weight-medium);
@@ -1131,34 +1138,53 @@
input {
width: fit-content;
background: var(--accent-color);
color: var(--highlight-accent-color);
padding: 2px 8px;
background: var(--background-color-button);
color: var(--text-button-color);
padding: 3px 10px;
cursor: pointer;
border: none;
outline: none;
}
}
}
}
}
.assets-container {
.assets-container-main {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 100%;
max-height: 50vh;
gap: 3px;
padding: 10px 0;
overflow: auto;
.assets-result {
width: 100%;
.assets-wrapper {
margin: 0;
}
}
.assets-list-section {
width: 100%;
padding: 4px;
}
.assets-wrapper {
width: 100%;
position: relative;
margin: 8px 10px;
h2 {
h2,
.searched-content {
color: var(--text-color);
font-family: $large;
font-weight: $bold-weight;
padding: 8px;
@include flex-space-between;
.back-button {
cursor: pointer;
}
}
.categories-container {
@@ -1167,8 +1193,8 @@
flex-direction: row;
flex-wrap: wrap;
height: 100%;
gap: 0px 4px;
padding: 10px 0;
gap: 4px;
padding: 2px;
.category {
width: 123px;
@@ -1267,11 +1293,11 @@
flex-direction: row;
flex-wrap: wrap;
height: 100%;
gap: 0px 4px;
padding: 10px 0;
gap: 6px;
padding: 2px;
.assets {
width: 123px;
width: 122px;
height: 95px;
border-radius: #{$border-radius-large};
background: var(--background-color);
@@ -1295,7 +1321,11 @@
width: 100%;
height: 100%;
font-size: var(--font-size-regular);
background: linear-gradient(0deg,rgba(37, 24, 51, 0) 0%, rgba(78, 22, 128, 0.4) 100%);
background: linear-gradient(
0deg,
rgba(37, 24, 51, 0) 0%,
rgba(78, 22, 128, 0.4) 100%
);
pointer-events: none;
backdrop-filter: blur(8px);
opacity: 0;
@@ -1316,23 +1346,5 @@
}
}
}
.back-button {
position: absolute;
top: 0;
right: 0;
@include flex-center;
cursor: pointer;
}
}
}
.assets-result {
width: 100%;
height: 100%;
margin: 8px 10px;
.assets-wrapper {
margin: 0;
}
}