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

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;