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

Refactor event properties components to use section elements for better semantics and styling consistency; update mechanics components to enhance layout and improve user experience; modify simulation component to manage open/close state for event lists; enhance file menu with project icon; improve input toggle styles; standardize color variables in SCSS; adjust sidebar styles for better visual hierarchy; implement backdrop filters for improved UI aesthetics; and refine overall component styling for consistency across the application.

Browse Source
This commit is contained in:
Vishnu
2025-04-29 18:19:03 +05:30
parent 45fea9465e
commit 0b0e1e3d8b
26 changed files with 680 additions and 570 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,72 +16,91 @@ $text-button-color: #f3f3fd;
$text-color-dark: #f3f3fd;
$text-disabled-dark: #6f6f7a;
$input-text-color-dark: #b5b5c8;
$highlight-text-color-dark: #B392F0;
$highlight-text-color-dark: #b392f0;
$text-button-color-dark: #f3f3fd;
// background colors
// ---------- light mode ----------
$background-color: linear-gradient(-45deg, #FCFDFDCC 0%, #FCFDFD99 100%);
$background-color: linear-gradient(-45deg, #fcfdfdcc 0%, #fcfdfd99 100%);
$background-color-solid: #fcfdfd;
$background-color-secondary: #FCFDFD4D;
$background-color-secondary: #fcfdfd4d;
$background-color-accent: #6f42c1;
$background-color-button: #6f42c1;
$background-color-drop-down: #6F42C14D;
$background-color-input: #FFFFFF4D;
$background-color-input-focus: #F2F2F7;
$background-color-drop-down-gradient: linear-gradient(-45deg, #75649366 0%, #40257266 100%);
$background-color-selected: #E0DFFF;
$background-radial-gray-gradient: radial-gradient(circle, #bfe0f8 0%, #e9ebff 46%, #e2acff 100%);
$background-color-drop-down: #6f42c14d;
$background-color-input: #ffffff4d;
$background-color-input-focus: #f2f2f7;
$background-color-drop-down-gradient: linear-gradient(
-45deg,
#75649366 0%,
#40257266 100%
);
$background-color-selected: #e0dfff;
$background-radial-gray-gradient: radial-gradient(
circle,
#bfe0f8 0%,
#e9ebff 46%,
#e2acff 100%
);
// ---------- dark mode ----------
$background-color-dark: linear-gradient(-45deg, #333333B3 0%, #2D2437B3 100%);
$background-color-dark: linear-gradient(-45deg, #333333b3 0%, #2d2437b3 100%);
$background-color-solid-dark: #19191d;
$background-color-secondary-dark: #19191D99;
$background-color-secondary-dark: #19191d99;
$background-color-accent-dark: #6f42c1;
$background-color-button-dark: #6f42c1;
$background-color-drop-down-dark: #50505080;
$background-color-input-dark: #FFFFFF33;
$background-color-input-dark: #ffffff33;
$background-color-input-focus-dark: #333333;
$background-color-drop-down-gradient-dark: linear-gradient(-45deg, #8973B166 0%, #53427366 100%);
$background-color-selected-dark: #403E66;
$background-radial-gray-gradient-dark: radial-gradient(circle, #31373b 0%, #48494b 46%, #52415c 100%);
$background-color-drop-down-gradient-dark: linear-gradient(
-45deg,
#8973b166 0%,
#53427366 100%
);
$background-color-selected-dark: #403e66;
$background-radial-gray-gradient-dark: radial-gradient(
circle,
#31373b 0%,
#48494b 46%,
#52415c 100%
);
// border colors
// ---------- light mode ----------
$border-color: #E0DFFF;
$border-color-accent: #6F42C1;
$border-color: #e0dfff;
$input-border-color: #d5dddd80;
$border-color-accent: #6f42c1;
// ---------- dark mode ----------
$border-color-dark: #564B69;
$border-color-accent-dark: #6F42C1;
$border-color-dark: #564b69;
$input-border-color-dark: #d5dddd80;
$border-color-accent-dark: #6f42c1;
// highlight colors
// ---------- light mode ----------
$highlight-accent-color: #E0DFFF;
$highlight-secondary-color: #6F42C1;
$highlight-accent-color: #e0dfff;
$highlight-secondary-color: #6f42c1;
// ---------- dark mode ----------
$highlight-accent-color-dark: #403E6A;
$highlight-secondary-color-dark: #C4ABF1;
$highlight-accent-color-dark: #403e6a;
$highlight-secondary-color-dark: #c4abf1;
// icon colors
// ---------- light mode ----------
$icon-default-color: #6F42C1;
$icon-default-color: #6f42c1;
$icon-default-color-hover: #7f4ddb;
$icon-default-color-active: #F2F2F7;
$icon-default-color-active: #f2f2f7;
// ---------- dark mode ----------
$icon-default-color-dark: #6F42C1;
$icon-default-color-dark: #6f42c1;
$icon-default-color-hover-dark: #7f4ddb;
$icon-default-color-active-dark: #F2F2F7;
$icon-default-color-active-dark: #f2f2f7;
// colors
$color1: #A392CD;
$color1: #a392cd;
$color2: #7b4cd3;
$color3: #B186FF;
$color4: #8752E8;
$color5: #C7A8FF;
$color3: #b186ff;
$color4: #8752e8;
$color5: #c7a8ff;
// old variables
$accent-color: #6f42c1;
@@ -106,7 +125,12 @@ $acent-gradient-dark: linear-gradient(90deg, #b392f0 0%, #a676ff 100%);
$acent-gradient: linear-gradient(90deg, #6f42c1 0%, #925df3 100%);
$faint-gradient: radial-gradient(circle, #bfe0f8 0%, #e9ebff 46%, #e2acff 100%);
$faint-gradient-dark: radial-gradient(circle, #31373b 0%, #48494b 46%, #52415c 100%);
$faint-gradient-dark: radial-gradient(
circle,
#31373b 0%,
#48494b 46%,
#52415c 100%
);
$font-inter: "Inter", sans-serif;
$font-josefin-sans: "Josefin Sans", sans-serif;

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

@@ -23,6 +23,7 @@
// border colors
--border-color: #{$border-color};
--input-border-color: #{$input-border-color};
--border-color-accent: #{$border-color-accent};
// highlight colors
@@ -73,6 +74,7 @@
// border colors
--border-color: #{$border-color};
--input-border-color: #{$input-border-color-dark};
--border-color-accent: #{$border-color-accent-dark};
// highlight colors
@@ -136,8 +138,8 @@ body {
}
::-webkit-scrollbar {
width: 4px;
height: 4px;
width: 0px;
height: 0px;
}
::-webkit-scrollbar-track {

4
app/src/styles/base/global.scss
View File

@@ -2,8 +2,10 @@
@use "../abstracts/mixins" as *;
section, .section{
padding: 12px;
padding: 4px;
outline: 1px solid var(--border-color);
outline-offset: -1px;
border-radius: #{$border-radius-large};
background: var(--background-color);
margin: 4px 0;
}

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

@@ -5,12 +5,12 @@
input {
width: 100%;
padding: 2px 4px;
border-radius: #{$border-radius-small};
outline: 1px solid var(--border-color);
padding: 4px 8px;
border-radius: #{$border-radius-large};
outline: 1px solid var(--input-border-color);
outline-offset: -1px;
border: none;
background: transparent;
background: var(--background-color-input);
color: var(--input-text-color);
&:focus,
@@ -44,6 +44,18 @@ input {
}
}
input[type="number"] {
// Chrome, Safari, Edge, Opera
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
// Firefox
-moz-appearance: textfield;
}
.input-value {
color: var(--input-text-color);
font-size: var(--font-size-regular);
@@ -61,9 +73,7 @@ input {
color: var(--input-text-color);
font-size: var(--font-size-regular);
font-weight: var(--font-weight-regular);
border: 1px solid var(--accent-color);
outline: none;
border-radius: #{$border-radius-small};
line-height: 26px;
padding: 0 8px;
}
@@ -102,10 +112,11 @@ input {
.search-container {
@include flex-center;
width: 100%;
border-radius: #{$border-radius-small};
padding: 6px 2px;
border-radius: #{$border-radius-extra-large};
padding: 3px 2px;
position: relative;
border: 1px solid var(--border-color);
background: var(--background-color-input-focus);
.icon-container {
@include flex-center;
@@ -220,7 +231,6 @@ input {
justify-content: space-between;
cursor: pointer;
border-radius: 6px;
background: var(--background-color);
}
.dropdown-options {
@@ -469,7 +479,7 @@ input {
.check-box {
height: 24px;
width: 38px;
background: var(--background-color-secondary);
background: var(--background-color);
border-radius: #{$border-radius-large};
position: relative;
cursor: pointer;
@@ -480,7 +490,7 @@ input {
width: 20px;
top: 2px;
left: 2px;
background: var(--accent-color);
background: var(--text-button-color);
border-radius: #{$border-radius-circle};
transition: left 0.3s ease;
}
@@ -726,17 +736,17 @@ input {
@include flex-center;
}
}
.upload-custom-asset-button{
.upload-custom-asset-button {
padding: 6px 12px;
@include flex-space-between;
.title{
.title {
white-space: nowrap;
width: 40%;
}
input{
input {
display: none;
}
.upload-button{
.upload-button {
width: 60%;
background: var(--highlight-accent-color);
color: var(--accent-color);

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

@@ -6,15 +6,31 @@
align-items: center;
gap: 2px;
position: relative;
height: 32px;
border-radius: #{$border-radius-extra-large};
background: var(--background-color-drop-down);
padding: 3px 8px;
width: fit-content;
max-width: 100%;
.project-name {
line-height: 32px;
@include flex-center;
height: 100%;
line-height: 26px;
.icon{
@include flex-center;
height: 20px;
width: 20px;
}
.input-value{
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.more-options-button {
@include flex-center;
border-radius: #{$border-radius-small};
height: 28px;
height: 22px;
position: relative;
&:hover {
background: var(--highlight-accent-color);
@@ -41,6 +57,7 @@
box-shadow: var(--box-shadow-light);
border-radius: 8px;
border: 1px solid var(--border-color);
backdrop-filter: blur(10px);
.menu-buttons {
display: flex;
flex-direction: column;

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

@@ -49,10 +49,10 @@
}
.active {
background: var(--accent-color);
background: var(--background-color-accent);
&:hover {
background: var(--accent-color);
background: var(--background-color-accent);
}
}
}

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

@@ -44,33 +44,40 @@
width: 32px;
min-height: 32px;
min-width: 32px;
border-radius: #{$border-radius-small};
border-radius: #{$border-radius-large};
&:hover {
background: var(--background-color-secondary);
outline: 1px solid var(--border-color);
outline-offset: -1px;
background: var(--background-color-drop-down);
}
}
.active {
background: var(--background-color-secondary);
outline: 1px solid var(--accent-color);
background: var(--background-color-accent);
outline: 1px solid var(--border-color);
outline-offset: -1px;
rect {
stroke: var(--icon-default-color-active);
}
circle {
fill: var(--icon-default-color-active);
}
&:hover {
background: var(--background-color-secondary);
}
}
}
.sidebar-left-container {
min-height: 50vh;
padding-bottom: 12px;
padding-bottom: 4px;
position: relative;
display: flex;
flex-direction: column;
.sidebar-left-content-container {
border-bottom: 1px solid var(--border-color);
// flex: 1;
// height: calc(100% - 36px);
position: relative;
// overflow: auto;
.template-list {
display: flex;
@@ -232,8 +239,12 @@
.outline-content-container {
position: relative;
height: 100%;
overflow: auto;
max-height: 60vh;
padding: 8px;
.overflow {
height: calc(100% - 16px);
max-height: 46vh;
overflow: auto;
}
}
}
}
@@ -323,8 +334,8 @@
display: flex;
.user-profile {
background: var(--accent-color);
color: var(--primary-color);
background: var(--background-color-accent);
color: var(--text-button-color);
}
.user-organization {
@@ -349,6 +360,8 @@
.sidebar-actions-container {
position: absolute;
left: -40px;
background: transparent;
overflow: visible;
.sidebar-action-list {
margin-bottom: 12px;
@@ -359,6 +372,8 @@
background: var(--background-color-secondary);
backdrop-filter: blur(8px);
box-shadow: #{$box-shadow-medium};
outline: 1px solid var(--border-color);
outline-offset: -1px;
}
.active {
@@ -715,10 +730,10 @@
.machine-mechanics-content-container,
.simulations-container,
.event-proprties-wrapper {
position: relative;
max-height: calc(60vh - (47px - 35px));
overflow: auto;
overflow-y: scroll;
width: calc(100% - 4px);
overflow-x: hidden;
.header {
@include flex-space-between;
padding: 6px 12px;
@@ -904,9 +919,8 @@
.collapse-header-container {
@include flex-space-between;
padding-right: 12px;
margin-top: 8px;
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
margin: 8px 0;
width: 100%;
.header {
color: var(--accent-color);
@@ -990,7 +1004,6 @@
@include flex-space-between;
padding: 10px 12px;
color: var(--text-color);
margin-bottom: 4px;
.input-value {
color: inherit;
}
@@ -998,7 +1011,6 @@
.input-container {
@include flex-center;
.remove-button {
@include flex-center;
height: 18px;
@@ -1032,6 +1044,13 @@
}
.custom-input-container {
@include flex-space-between;
.split {
height: 20px;
width: 2px;
border-radius: 2px;
background: var(--text-disabled);
}
.header {
@include flex-space-between;
border: none;
@@ -1043,11 +1062,9 @@
.inputs-container {
@include flex-space-between;
padding-bottom: 8px;
.input-container {
padding: 0 12px;
margin-top: 6px;
gap: 6px;
}
}
@@ -1065,7 +1082,6 @@
.dropdown-header-container,
.dropdown-content-container {
padding: 6px 12px;
border-top: 1px solid var(--highlight-accent-color);
}
.input-range-container {

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

@@ -770,6 +770,7 @@
.editWidgetOptions {
position: absolute;
background: var(--background-color);
backdrop-filter: blur(10px);
z-index: 3;
display: flex;
flex-direction: column;