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

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

@@ -4,7 +4,7 @@
.loading-wrapper {
height: 100vh;
width: 100vw;
background: var(--background-color);
background: var(--background-color-solid);
.loading-container {
position: relative;
height: 100%;

12
app/src/styles/layout/popup.scss
View File

@@ -5,13 +5,13 @@
height: 100vh;
width: 100vw;
background: var(--background-color-secondary);
backdrop-filter: blur(2px);
@include flex-center;
.collaboration-popup-container {
max-width: 50vw;
width: 460px;
background-color: var(--background-color);
width: 520px;
background: var(--background-color);
border-radius: #{$border-radius-large};
backdrop-filter: blur(8px);
.split {
width: 100%;
height: 1px;
@@ -88,14 +88,14 @@
.your-name {
@include flex-center;
gap: 6px;
color: var(--accent-color);
color: var(--text-color);
.user-profile{
height: 24px;
width: 24px;
text-align: center;
line-height: 25px;
background-color: var(--accent-color);
color: var(--primary-color);
background: var(--background-color-accent);
color: var(--text-color);
border-radius: #{$border-radius-circle};
}
}

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

@@ -6,9 +6,10 @@
position: fixed;
top: 32px;
left: 8px;
background-color: var(--background-color);
background: var(--background-color);
backdrop-filter: blur(150px);
border-radius: #{$border-radius-extra-large};
border-radius: #{$border-radius-xxx};
outline: 1px solid var(--border-color);
box-shadow: #{$box-shadow-medium};
z-index: #{$z-index-tools};
@@ -46,12 +47,12 @@
border-radius: #{$border-radius-small};
&:hover {
background-color: var(--background-color-secondary);
background: var(--background-color-secondary);
}
}
.active {
background-color: var(--background-color-secondary);
background: var(--background-color-secondary);
outline: 1px solid var(--accent-color);
outline-offset: -1px;
}
@@ -174,7 +175,7 @@
.stock {
padding: 13px 5px;
background-color: var(--background-color-secondary);
background: var(--background-color-secondary);
border-radius: 6.33px;
display: flex;
justify-content: space-between;
@@ -243,15 +244,17 @@
position: fixed;
top: 32px;
right: 8px;
background-color: var(--background-color);
background: var(--background-color);
backdrop-filter: blur(150px);
border-radius: #{$border-radius-extra-large};
border-radius: #{$border-radius-xxx};
outline: 1px solid var(--border-color);
box-shadow: #{$box-shadow-medium};
z-index: #{$z-index-tools};
.header-container {
@include flex-space-between;
padding: 10px;
padding-left: 16px;
width: 100%;
gap: 12px;
height: 52px;
@@ -262,8 +265,8 @@
.share-button {
padding: 4px 12px;
color: var(--primary-color);
background-color: var(--accent-color);
color: var(--text-color);
background: var(--background-color-button);
font-weight: var(--font-weight-regular);
border-radius: #{$border-radius-large};
cursor: pointer;
@@ -277,7 +280,7 @@
.split {
height: 20px;
width: 2px;
background: var(--background-color-secondary);
background: var(--text-disabled);
}
.users-container {
@@ -353,26 +356,28 @@
height: 34px;
width: 34px;
border-radius: #{$border-radius-circle};
background: var(--primary-color);
background: var(--background-color-secondary);
backdrop-filter: blur(8px);
box-shadow: #{$box-shadow-medium};
}
.active {
background: var(--accent-color);
background: var(--background-color-accent);
}
}
.sidebar-right-container {
min-height: 50vh;
padding-bottom: 12px;
padding: 8px;
position: relative;
overflow: auto;
.sidebar-right-content-container {
border-bottom: 1px solid var(--border-color);
height: calc(100% - 36px);
position: relative;
width: 320px;
width: 304px;
padding-bottom: 10px;
.no-event-selected {
color: #666;
padding: 1.8rem 1rem;
@@ -532,7 +537,7 @@
}
button {
background-color: transparent;
background: transparent;
box-shadow: none;
color: #5273eb;
padding: 6px;
@@ -732,7 +737,7 @@
stroke: var(--primary-color);
}
&:disabled {
background-color: var(--text-disabled);
background: var(--text-disabled);
}
}
}
@@ -841,7 +846,7 @@
transform: translateX(4px);
&:hover {
background-color: var(--accent-color);
background: var(--accent-color);
path {
stroke: var(--primary-color);
@@ -983,11 +988,9 @@
.zone-properties-container {
.header {
@include flex-space-between;
padding: 8px 12px;
border-top: 1px solid var(--highlight-accent-color);
border-bottom: 1px solid var(--highlight-accent-color);
color: var(--accent-color);
padding: 10px 12px;
color: var(--text-color);
margin-bottom: 4px;
.input-value {
color: inherit;
}
@@ -1004,7 +1007,7 @@
border-radius: 8px 0 0 8px;
&:hover {
background-color: var(--accent-color);
background: var(--accent-color);
path {
stroke: var(--primary-color);
@@ -1017,8 +1020,8 @@
.generate-report-button,
.button-save {
@include flex-center;
background-color: var(--accent-color);
color: var(--primary-color);
background: var(--background-color-button);
color: var(--text-button-color);
border-radius: #{$border-radius-large};
padding: 2px;
gap: 4px;
@@ -1028,12 +1031,6 @@
margin-bottom: 8px;
}
.split {
height: 1px;
background: var(--highlight-accent-color);
margin: 8px;
}
.custom-input-container {
.header {
@include flex-space-between;
@@ -1162,14 +1159,14 @@
flex-direction: row;
flex-wrap: wrap;
height: 100%;
gap: 3px;
gap: 8px;
padding: 10px 0;
.category {
width: 117px;
width: 121px;
height: 95px;
border-radius: 3.59px;
background-color: var(--background-color-gray);
background: var(--background-color-gray);
padding: 8px;
padding-top: 12px;
font-weight: $bold-weight;
@@ -1189,7 +1186,7 @@
width: 60px;
height: 60px;
border-radius: 50%;
background-color: var(--circle-color, #000);
background: var(--circle-color, #000);
position: absolute;
top: 60%;
right: -10px;
@@ -1270,7 +1267,7 @@
width: 117px;
height: 95px;
border-radius: #{$border-radius-small};
background-color: var(--background-color-gray);
background: var(--background-color-gray);
font-weight: $medium-weight;
position: relative;
overflow: hidden;
@@ -1337,7 +1334,7 @@
width: 117px;
height: 95px;
border-radius: 3.59px;
background-color: var(--background-color-gray);
background: var(--background-color-gray);
padding: 8px;
padding-top: 12px;
font-weight: $medium-weight;

8
app/src/styles/layout/toast.scss
View File

@@ -51,19 +51,19 @@
}
.toast.success {
background-color: #4caf50;
background: #4caf50;
}
.toast.error {
background-color: #f44336;
background: #f44336;
}
.toast.info {
background-color: #2196f3;
background: #2196f3;
}
.toast.warning {
background-color: #ff9800;
background: #ff9800;
}
@keyframes fadeIn {