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

18
app/src/styles/components/analysis/analysis.scss
View File

@@ -63,14 +63,14 @@
height: 4px;
border-radius: 13px;
overflow: hidden;
background-color: #FBEBD7;
background: #FBEBD7;
.bar-fill {
position: absolute;
height: 100%;
top: 0;
left: 0;
background-color: #FC9D2F;
background: #FC9D2F;
border-radius: 13px;
}
@@ -144,7 +144,7 @@
}
canvas {
background-color: transparent;
background: transparent;
}
}
}
@@ -200,15 +200,15 @@
height: 5px;
&:nth-child(1) {
background-color: #F3C64D;
background: #F3C64D;
}
&:nth-child(2) {
background-color: #67B3F4;
background: #67B3F4;
}
&:nth-child(3) {
background-color: #7981F5;
background: #7981F5;
}
}
}
@@ -228,21 +228,21 @@
&:nth-child(1) {
.indicator {
background-color: #F3C64D;
background: #F3C64D;
}
}
&:nth-child(2) {
.indicator {
background-color: #67B3F4;
background: #67B3F4;
}
}
&:nth-child(3) {
.indicator {
background-color: #7981F5;
background: #7981F5;
}
}

4
app/src/styles/components/confirmationPopUp.scss
View File

@@ -11,7 +11,7 @@
left: 50%;
transform: translate(-50%, -50%);
z-index: 5;
background-color: var(--background-color);
background: var(--background-color);
padding: 14px 12px;
border-radius: 6px;
@@ -32,7 +32,7 @@
}
&:last-child {
background-color: #ffe3e0;
background: #ffe3e0;
color: #f65648;
}

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

@@ -15,7 +15,8 @@ input {
&:focus,
&:active {
outline: 1px solid var(--accent-color);
outline: 1px solid var(--border-color-accent);
background: var(--background-color-input-focus);
}
&:-webkit-autofill,
@@ -27,26 +28,19 @@ input {
caret-color: var(--input-text-color);
// Background styles
background-color: var(--background-color) !important;
-webkit-box-shadow: 0 0 0px 1000px var(--background-color) inset !important;
background: var(--background-color-solid) !important;
-webkit-box-shadow: 0 0 0px 1000px var(--background-color-solid) inset !important;
}
// File input specific style adjustments
&::file-selector-button {
font-size: 14px;
color: var(--accent-color);
background-color: var(--background-color-secondary);
background: var(--background-color-secondary);
border: none;
outline: none;
border-radius: #{$border-radius-small};
padding: 2px;
cursor: pointer;
// Hover effect for the file button
&:hover {
color: var(--primary-color);
background-color: var(--accent-color);
}
}
}
@@ -93,8 +87,8 @@ input {
}
.active {
background-color: var(--accent-color);
color: var(--primary-color);
background: var(--background-color-button);
color: var(--text-button-color);
}
}
@@ -102,14 +96,13 @@ input {
position: sticky;
top: 0;
padding: 8px 10px;
background: var(--background-color);
width: 100%;
z-index: 1;
.search-container {
@include flex-center;
width: 100%;
border-radius: #{$border-radius-small};
background-color: var(--background-color);
padding: 6px 2px;
position: relative;
border: 1px solid var(--border-color);
@@ -129,7 +122,7 @@ input {
font-weight: var(--font-weight-regular);
border: none;
outline: none;
background-color: transparent;
background: transparent;
padding-left: 36px;
}
@@ -141,16 +134,17 @@ input {
height: 24px;
border: none;
cursor: pointer;
background-color: transparent;
background: transparent;
&:hover {
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
}
}
}
.active {
border: 1px solid var(--accent-color);
background: var(--background-color-input-focus);
}
}
@@ -166,7 +160,7 @@ input {
position: absolute;
left: 10px;
top: 12px;
background-color: var(--background-color);
background: var(--background-color);
border-radius: #{$border-radius-small};
box-shadow: var(--box-shadow-medium);
z-index: 1;
@@ -182,7 +176,7 @@ input {
gap: 2px;
&:hover {
background-color: var(--background-color-secondary);
background: var(--background-color-secondary);
}
.icon-container {
@@ -197,11 +191,11 @@ input {
}
.selected {
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
color: var(--accent-color);
&:hover {
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
}
}
@@ -226,13 +220,13 @@ input {
justify-content: space-between;
cursor: pointer;
border-radius: 6px;
background-color: var(--background-color);
background: var(--background-color);
}
.dropdown-options {
position: absolute;
width: 100%;
background-color: var(--primary-color);
background: var(--background-color);
border: 1px solid var(--border-color);
border-radius: #{$border-radius-small};
z-index: 10;
@@ -241,6 +235,7 @@ input {
left: 0;
top: 110%;
padding: 4px;
backdrop-filter: blur(8px);
.dropdown-search {
margin-bottom: 4px;
@@ -253,8 +248,8 @@ input {
border-radius: #{$border-radius-small};
&:hover {
color: var(--accent-color);
background-color: var(--highlight-accent-color);
color: var(--highlight-text-color);
background: var(--highlight-accent-color);
}
}
}
@@ -318,7 +313,7 @@ input {
.dropdown-button {
width: 100%;
background-color: var(--background-color) !important;
background: var(--background-color) !important;
border: 1px solid var(--border-color) !important;
padding: 5px 10px;
@@ -335,11 +330,11 @@ input {
transition: background-color 0.3s ease;
&:hover {
background-color: #333333;
background: #333333;
}
&.open {
background-color: #333333;
background: #333333;
}
}
@@ -347,7 +342,7 @@ input {
position: absolute;
top: 110%;
right: -16px;
background-color: var(--background-color);
background: var(--background-color);
border: 1px solid var(--border-color);
border-radius: 5px;
box-shadow: #{$box-shadow-medium};
@@ -412,7 +407,7 @@ input {
transition: background-color 0.3s ease;
&:hover {
background-color: var(--background-color);
background: var(--background-color);
}
}
@@ -435,12 +430,12 @@ input {
}
&:hover {
background-color: var(--background-color);
background: var(--background-color);
}
&.open {
color: var(--accent-color);
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
}
.icon {
@@ -472,8 +467,8 @@ input {
}
.check-box {
height: 22px;
width: 44px;
height: 24px;
width: 38px;
background: var(--background-color-secondary);
border-radius: #{$border-radius-large};
position: relative;
@@ -481,8 +476,8 @@ input {
.check-box-style {
position: absolute;
height: 18px;
width: 18px;
height: 20px;
width: 20px;
top: 2px;
left: 2px;
background: var(--accent-color);
@@ -523,7 +518,7 @@ input {
-webkit-appearance: none;
width: 16px;
height: 16px;
background: var(--primary-color);
background: var(--background-color-accent);
border-radius: #{$border-radius-circle};
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
cursor: pointer;
@@ -597,19 +592,19 @@ input {
cursor: not-allowed;
&::-webkit-slider-thumb {
background: var(--primary-color);
background: var(--background-color-accent);
box-shadow: none;
outline: 4px solid var(--text-disabled);
outline: -4px;
}
&::-moz-range-thumb {
background: var(--primary-color);
background: var(--background-color-accent);
box-shadow: none;
}
&::-ms-thumb {
background: var(--primary-color);
background: var(--background-color-accent);
box-shadow: none;
}
@@ -644,14 +639,10 @@ input {
padding: 2px 32px;
border: none;
border-radius: #{$border-radius-large};
color: var(--text-disabled);
background: var(--accent-color);
color: var(--text-color);
background: var(--background-color-button);
transition: all 0.2s;
cursor: pointer;
&:hover {
color: var(--primary-color);
}
}
}
@@ -710,11 +701,6 @@ input {
line-height: 12px;
text-align: center;
border-radius: #{$border-radius-small};
&:hover {
background: var(--accent-color);
color: var(--primary-color);
}
}
}
}
@@ -722,8 +708,8 @@ input {
.invite-button {
padding: 4px 12px;
border-radius: #{$border-radius-large};
background: var(--accent-color);
color: var(--primary-color);
background: var(--background-color-accent);
color: var(--text-button-color);
}
.multi-email-invite-input.active {
@@ -770,7 +756,7 @@ input {
width: 100%;
height: 100%;
border-radius: #{$border-radius-small};
background-color: var(--background-color-gray);
background: var(--background-color-gray);
}
}
}

10
app/src/styles/components/lists.scss
View File

@@ -30,8 +30,6 @@
}
.list-wrapper {
.no-item {
padding: 12px;
}
@@ -41,7 +39,6 @@
// margin-left: 10px;
overflow: hidden;
.list-item {
@include flex-space-between;
width: 100%;
@@ -67,7 +64,7 @@
}
.active {
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
color: var(--primary-color);
}
}
@@ -75,7 +72,6 @@
.asset-list {
border-left: 2px solid var(--border-color);
margin-left: 20px
margin-left: 20px;
}
}
}

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);
}
}

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

@@ -36,7 +36,7 @@
top: 32px;
left: 0;
z-index: 5;
background-color: var(--background-color);
background: var(--background-color);
color: var(--text-color);
box-shadow: var(--box-shadow-light);
border-radius: 8px;
@@ -73,7 +73,7 @@
position: absolute;
top: 0;
left: 100%;
background-color: var(--background-color);
background: var(--background-color);
min-width: 220px;
border-radius: 4px;
box-shadow: var(--box-shadow-light);
@@ -95,7 +95,7 @@
rotate: -90deg;
}
&:hover {
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
span,
.menu-item-right span {
color: var(--accent-color);
@@ -123,7 +123,7 @@
position: absolute;
left: 100%;
top: 0;
background-color: var(--background-color);
background: var(--background-color);
min-width: 200px;
border-radius: 0 4px 4px 4px;
box-shadow: var(--box-shadow-light);
@@ -140,7 +140,7 @@
white-space: nowrap;
color: var(--text-color);
&:hover {
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
span {
color: var(--accent-color);
}
@@ -154,7 +154,7 @@
}
&:hover {
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
.menu-button {
color: var(--accent-color);
}
@@ -164,7 +164,7 @@
.split {
width: 100%;
height: 1px;
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
margin: 2px 0;
}
}

11
app/src/styles/components/moduleToggle.scss
View File

@@ -18,7 +18,8 @@
padding: 4px 12px;
border-radius: #{$border-radius-extra-large};
box-shadow: var(--box-shadow-medium);
background-color: var(--background-color);
background: var(--background-color);
backdrop-filter: blur(8px);
cursor: pointer;
overflow: hidden;
position: relative;
@@ -37,7 +38,7 @@
left: 0;
width: 0%;
height: 100%;
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
transition: width 0.2s;
border-radius: #{$border-radius-extra-large};
}
@@ -49,15 +50,15 @@
}
.active {
cursor: default;
background-color: var(--accent-color);
background: var(--background-color-button);
&::after{
display: none;
}
&:hover {
background-color: var(--accent-color);
background: var(--background-color-button);
}
.module {
color: var(--highlight-accent-color);
color: var(--icon-default-color-active);
}
}
}

6
app/src/styles/components/simulation/simulation.scss
View File

@@ -17,11 +17,11 @@
gap: 2px;
padding: 6px 8px;
min-width: 64px;
background-color: var(--background-color);
background: var(--background-color);
border-radius: #{$border-radius-small};
cursor: pointer;
&:hover {
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
color: var(--accent-color);
path {
stroke: var(--accent-color);
@@ -75,7 +75,7 @@
}
.marker{
position: absolute;
background-color: var(--text-disabled);
background: var(--text-disabled);
width: 2px;
height: 12px;
border-radius: 1px;

2
app/src/styles/components/templates.scss
View File

@@ -8,7 +8,7 @@
outline-offset: -3px;
border-radius: 16px;
.follower-name{
background-color: var(--user-color);
background: var(--user-color);
color: #FFFFFF;
padding: 4px 8px;
padding-top: 16px;

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

@@ -13,14 +13,15 @@
border-radius: #{$border-radius-large};
width: fit-content;
transition: width 0.2s;
background-color: var(--background-color);
background: var(--background-color);
backdrop-filter: blur(8px);
z-index: #{$z-index-default};
.split {
height: 20px;
width: 2px;
border-radius: 2px;
background: var(--highlight-accent-color);
background: var(--text-disabled);
}
.draw-tools,
@@ -48,10 +49,10 @@
}
.active {
background-color: var(--accent-color);
background: var(--accent-color);
&:hover {
background-color: var(--accent-color);
background: var(--accent-color);
}
}
}
@@ -91,7 +92,7 @@
padding: 4px;
&:hover {
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
color: var(--accent-color);
path {
@@ -117,7 +118,7 @@
@include flex-center;
padding: 3px;
border-radius: #{$border-radius-small};
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
gap: 2px;
position: relative;
@@ -131,7 +132,7 @@
&::after {
content: "";
position: absolute;
background-color: var(--accent-color);
background: var(--accent-color);
left: 3px;
top: 3px;
height: 18px;
@@ -161,7 +162,7 @@
width: 30px;
height: 30px;
border-radius: 50%;
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
cursor: pointer;
@include flex-center;
position: fixed;
@@ -174,7 +175,7 @@
font-weight: 700;
&:hover {
font-weight: 500;
background-color: var(--accent-color);
background: var(--accent-color);
color: var(--highlight-accent-color);
&::after{
animation: pulse 1s ease-out infinite;

20
app/src/styles/components/visualization/floating/common.scss
View File

@@ -3,7 +3,7 @@
.throughput-wrapper,
.card {
background-color: var(--background-color);
background: var(--background-color);
box-shadow: var(--box-shadow-heavy);
@include flex-center;
flex-direction: column;
@@ -105,7 +105,7 @@
}
.productionCapacity-wrapper {
background-color: var(--background-color);
background: var(--background-color);
display: flex;
flex-direction: column;
gap: 6px;
@@ -116,7 +116,7 @@
.headeproductionCapacityr-wrapper,
.bar-chart {
padding: 14px;
background-color: var(--background-color);
background: var(--background-color);
display: flex;
flex-direction: column;
gap: 6px;
@@ -276,7 +276,7 @@
.icon {
width: 45px;
height: 45px;
background-color: var(--accent-color);
background: var(--accent-color);
display: flex;
justify-content: center;
align-items: center;
@@ -289,7 +289,7 @@
display: flex;
flex-direction: column;
gap: 6px;
background-color: var(--background-color);
background: var(--background-color);
padding: 14px;
.header {
@@ -307,7 +307,7 @@
.productivity-dashboard {
width: 100%;
background-color: var(--background-color);
background: var(--background-color);
color: white;
padding: 20px;
border-radius: 8px;
@@ -324,7 +324,7 @@
}
.options {
background-color: #343b47;
background: #343b47;
width: 30px;
height: 30px;
display: flex;
@@ -334,7 +334,7 @@
cursor: pointer;
&:hover {
background-color: #49505a;
background: #49505a;
}
}
}
@@ -350,7 +350,7 @@
gap: 10px;
.metric {
background-color: #2c3e50;
background: #2c3e50;
padding: 15px;
border-radius: 4px;
@@ -445,7 +445,7 @@
}
.scaleLabels {
background-color: var(--background-color);
background: var(--background-color);
box-shadow: var(--box-shadow-heavy);
display: flex;
justify-content: space-between;

2
app/src/styles/components/visualization/ui/styledWidgets.scss
View File

@@ -43,7 +43,7 @@
.icon {
width: 16.95305824279785px;
height: 16.95305824279785px;
background-color: var(--accent-color);
background: var(--accent-color);
border-radius: 50%;
display: flex;
justify-content: center;