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

Refactor logging components and styles; remove unused CSS; enhance log icon functionality

Browse Source 
- Removed the random color generation function from ProductionCapacity component.
- Updated ThroughputSummary component to remove unused imports.
- Simplified LogList component by removing unnecessary icons and integrating GetLogIcon for log types.
- Enhanced LoggerContext to support a new "success" log type and optimized logger methods with useMemo.
- Adjusted SimulationPlayer to conditionally render analysis components.
- Deleted index.css and removed its import from index.tsx.
- Cleaned up builder module by removing unused imports and optimizing state management.
- Removed savedTheme from Ground component.
- Changed log message from info to warning in Project component.
- Updated log color variables in SCSS files for better visibility and consistency.
- Added new log icons for success, error, info, and warning in LogIcons component.
- Created GetLogIcon utility to streamline log icon rendering based on log type.
This commit is contained in:
Vishnu
2025-05-03 15:20:52 +05:30
parent 2c37472928
commit 135633ef7a
20 changed files with 306 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -115,17 +115,23 @@ $color5: #c7a8ff;
// log indication colors
// ------------ text -------------
$log-default-text-color: #6f42c1;
$log-info-text-color: #488ef6;
$log-info-text-color: #1773fd;
$log-warn-text-color: #f3a50c;
$log-error-text-color: #f65648;
$log-success-text-color: #43c06d;
$log-error-text-color: #fc230f;
$log-success-text-color: #23a84f;
// ----------- dark ---------------
$log-default-text-color-dark: #b18ef1;
$log-info-text-color-dark: #7eb0fa;
$log-warn-text-color-dark: #ffaa00;
$log-error-text-color-dark: #ff887d;
$log-success-text-color-dark: #43ff81;
// ------------ background -------------
$log-default-backgroung-color: #6e42c133;
$log-info-background-color: #488ef633;
$log-info-background-color: #1773fd5d;
$log-warn-background-color: #f3a50c33;
$log-error-background-color: #f6564833;
$log-success-background-color: #43c06d33;
$log-error-background-color: #fc230f33;
$log-success-background-color: #0ef75b33;
// old variables
$accent-color: #6f42c1;

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

@@ -35,6 +35,18 @@
--icon-default-color: #{$icon-default-color};
--icon-default-color-active: #{$icon-default-color-active};
// log colors
--default-text-color: #{$log-default-text-color};
--log-info-text-color: #{$log-info-text-color};
--log-warn-text-color: #{$log-warn-text-color};
--log-error-text-color: #{$log-error-text-color};
--log-success-text-color: #{$log-success-text-color};
--log-default-background-color: #{$log-default-backgroung-color};
--log-info-background-color: #{$log-info-background-color};
--log-warn-background-color: #{$log-warn-background-color};
--log-error-background-color: #{$log-error-background-color};
--log-success-background-color: #{$log-success-background-color};
// old colors
--accent-color: #{$accent-color};
--accent-gradient-color: #{$acent-gradient};
@@ -85,6 +97,18 @@
--icon-default-color: #{$icon-default-color-dark};
--icon-default-color-active: #{$icon-default-color-active-dark};
// log colors
--default-text-color: #{$log-default-text-color-dark};
--log-info-text-color: #{$log-info-text-color-dark};
--log-warn-text-color: #{$log-warn-text-color-dark};
--log-error-text-color: #{$log-error-text-color-dark};
--log-success-text-color: #{$log-success-text-color-dark};
--log-default-background-color: #{$log-default-backgroung-color};
--log-info-background-color: #{$log-info-background-color};
--log-warn-background-color: #{$log-warn-background-color};
--log-error-background-color: #{$log-error-background-color};
--log-success-background-color: #{$log-success-background-color};
// old colors
--accent-color: #{$accent-color-dark};
--accent-gradient-color: #{$acent-gradient-dark};
@@ -115,7 +139,6 @@
}
body {
background: var(--background-color);
--font-size-tiny: #{$tiny};
--font-size-small: #{$small};
--font-size-regular: #{$regular};
@@ -133,23 +156,6 @@ body {
--color3: #{$color3};
--color4: #{$color4};
--color5: #{$color5};
--default-text-color: #{$log-default-text-color};
--log-info-text-color: #{$log-info-text-color};
--log-warn-text-color: #{$log-warn-text-color};
--log-error-text-color: #{$log-error-text-color};
--log-success-text-color: #{$log-success-text-color};
// ------------ background -------------
--log-default-background-color: #{$log-default-backgroung-color};
--log-info-background-color: #{$log-info-background-color};
--log-warn-background-color: #{$log-warn-background-color};
--log-error-background-color: #{$log-error-background-color};
--log-success-background-color: #{$log-success-background-color};
}
::-webkit-scrollbar {
@@ -173,4 +179,4 @@ body {
::-webkit-scrollbar-corner {
background: transparent;
}
}

130
app/src/styles/components/footer/footer.scss
View File

@@ -23,6 +23,7 @@
padding: 3px 6px;
border-radius: 12px;
color: var(--text-color);
backdrop-filter: blur(14px);
.selector {
color: var(--text-color);
@@ -33,70 +34,51 @@
.logs-wrapper {
display: flex;
gap: 6px;
position: relative;
// dummy
.bg-dummy{
background: var(--background-color-solid);
position: absolute;
z-index: -1;
}
.bg-dummy.left-top{
top: 1px;
left: 4px;
width: 60%;
height: 16px;
border-radius: 20px;
}
.bg-dummy.right-bottom{
right: 68px;
bottom: 0;
width: 20%;
height: 100%;
border-radius: 50%;
}
.log-container {
background: var(--background-color);
backdrop-filter: blur(20px);
border-radius: 12px;
@include flex-center;
overflow: hidden;
}
.logs-detail,
.version {
@include flex-center;
border-radius: 12px;
background: var(--background-color);
padding: 3px 6px;
height: 100%;
color: var(--text-color);
display: flex;
align-items: center;
gap: 6px;
}
.log {
background-color: var(--log-default-background-color);
.log-message {
color: var(--default-text-color);
}
}
.info {
background-color: var(--log-info-background-color);
.log-message {
color: var(--log-info-text-color);
}
}
.error {
background-color: var(--log-error-background-color);
.log-message {
color: var(--log-error-text-color);
}
}
.warning {
background-color: var(--log-warn-background-color);
.log-message {
color: var(--log-warn-text-color);
}
}
.success {
background-color: var(--log-success-background-color);
.log-message {
color: var(--log-success-text-color);
}
}
.logs-detail {
padding: 2px 12px;
cursor: pointer;
outline: 0 solid var(--border-color);
outline-offset: -1px;
.log-icon {
@include flex-center;
}
@@ -110,13 +92,51 @@
}
.version {
background: var(--background-color);
font-size: var(--font-size-tiny);
display: flex;
gap: 6px;
.icon {
@include flex-center;
}
}
.log {
background: var(--log-default-background-color);
outline-color: var(--default-text-color);
.log-message {
color: var(--default-text-color);
}
}
.info {
background: var(--log-info-background-color);
outline-color: var(--log-info-text-color);
.log-message {
color: var(--log-info-text-color);
}
}
.error {
background: var(--log-error-background-color);
outline-color: var(--log-error-text-color);
.log-message {
color: var(--log-error-text-color);
}
}
.warning {
background: var(--log-warn-background-color);
outline-color: var(--log-warn-text-color);
.log-message {
color: var(--log-warn-text-color);
}
}
.success {
background: var(--log-success-background-color);
.log-message {
color: var(--log-success-text-color);
}
}
}
}
}

27
app/src/styles/components/logs/logs.scss
View File

@@ -5,14 +5,11 @@
width: 100vw;
height: 100vh;
background: var(--background-color-secondary);
@include flex-center;
.log-list-wrapper {
height: 50%;
min-width: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 60%;
min-width: 55%;
z-index: 5;
background: var(--background-color);
padding: 14px 12px;
@@ -31,6 +28,10 @@
display: flex;
align-items: center;
gap: 6px;
.icon{
@include flex-center;
scale: .8;
}
}
.close {
@@ -38,9 +39,13 @@
height: 28px;
width: 28px;
cursor: pointer;
border-radius: #{$border-radius-medium};
svg {
scale: 1.6;
}
&:hover{
background: var(--background-color);
}
}
}
@@ -60,25 +65,26 @@
}
.log-entry-wrapper {
height: 100%;
height: calc(100% - 80px);
display: flex;
flex-direction: column;
gap: 4px;
background: var(--background-color);
padding: 18px 10px;
padding: 10px;
border-radius: 16px;
outline: 1px solid var(--border-color);
outline-offset: -1px;
overflow: auto;
.log-entry {
padding: 4px;
border-radius: 4px;
font-size: var(--font-size-small);
display: flex;
align-items: center;
gap: 6px;
.log-icon {
height: 24px;
width: 24px;
@include flex-center;
}
.log-entry-message-container {
@@ -90,6 +96,7 @@
font-weight: 300;
opacity: 0.8;
text-wrap: nowrap;
height: 100%;
}
.log-entry-message{
width: 100%;

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

@@ -36,6 +36,7 @@
width: 0;
opacity: 0;
animation: expandWidth 0.2s ease-in-out forwards;
will-change: width;
.tool-button {
@include flex-center;

4
app/src/styles/pages/userAuth.scss
View File

@@ -89,7 +89,7 @@
border-radius: #{$border-radius-extra-large};
background: var(--background-color);
font-size: 14px;
color: var(--input-text-color);
color: var(--text-button-color);
&:focus {
border-color: var(--accent-color);
@@ -121,7 +121,7 @@
width: 100%;
padding: 10px;
background: var(--background-color-button);
color: var(--background-color);
color: var(--text-button-color);
font-size: 14px;
border: none;
outline: none;