[NEW UI] Logs display rework

_dev/src/scss/_variables.scss

@@ -16,6 +16,7 @@ $cdk-prefix: "cdk-";
   --#{$ua-prefix}primary-600: var(--#{$cdk-prefix}primary-600, #5e5e5e);
   --#{$ua-prefix}primary-500: var(--#{$cdk-prefix}primary-500, #bbbbbb);
   --#{$ua-prefix}primary-400: var(--#{$cdk-prefix}primary-400, #dddddd);
+  --#{$ua-prefix}primary-300: var(--#{$cdk-prefix}primary-300, #eeeeee);
   --#{$ua-prefix}primary-200: var(--#{$cdk-prefix}primary-200, #f7f7f7);
   --#{$ua-prefix}purple-500: var(--#{$cdk-prefix}purple-500, #decde7);
   --#{$ua-prefix}purple-50: var(--#{$cdk-prefix}purple-50, #f8f0f7);
@@ -57,6 +58,9 @@ $cdk-prefix: "cdk-";
   --#{$ua-prefix}header-offset: 10rem;
   --#{$ua-prefix}bo-background-color: var(--#{$ua-prefix}primary-200);
   --#{$ua-prefix}error-img-filter: none;
+  --#{$ua-prefix}scrollbar-thumb: var(--#{$ua-prefix}primary-500);
+  --#{$ua-prefix}scrollbar-thumb-hover: var(--#{$ua-prefix}primary-600);
+  --#{$ua-prefix}scrollbar-track: var(--#{$ua-prefix}primary-400);
 }
 
 // Update variable at body level

_dev/src/scss/components/_check-requirements.scss

@@ -27,23 +27,44 @@ $e: ".check-requirements";
     }
 
     &__requirement {
-      padding-inline-start: 2rem;
-      background-repeat: no-repeat;
-      background-position: left center;
-      background-size: 1.5rem 1.5rem;
+      position: relative;
+      padding-inline-start: 1.75rem;
       font-size: 0.875rem;
       line-height: 1.4;
 
-      &--error {
-        background-image: url("../../img/close.svg");
+      &::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 0;
+        display: block;
+        width: 1.375rem;
+        height: 1.25rem;
+        font-family: var(--#{$ua-prefix}font-family-material-icons);
+        font-size: 1.25rem;
+        line-height: 1;
+        transform: translateY(-50%);
+      }
+
+      &--success {
+        &::before {
+          content: "check";
+          color: var(--#{$ua-prefix}green-500);
+        }
       }
 
       &--warning {
-        background-image: url("../../img/warning.svg");
+        &::before {
+          content: "warning";
+          color: var(--#{$ua-prefix}yellow-500);
+        }
       }
 
-      &--success {
-        background-image: url("../../img/check.svg");
+      &--error {
+        &::before {
+          content: "close";
+          color: var(--#{$ua-prefix}red-500);
+        }
       }
     }
 

_dev/src/scss/components/_index.scss

@@ -14,4 +14,5 @@
 @use "privacy";
 @use "progress";
 @use "radio-card";
+@use "scrollbar";
 @use "stepper";

_dev/src/scss/components/_logs.scss

@@ -11,17 +11,6 @@ $e-logs: ".logs";
   }
 
   #{$e-logs} {
-    --#{$ua-prefix}logs-height: 14rem;
-    --#{$ua-prefix}logs-background-color: var(--#{$ua-prefix}muted-background-color);
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    min-height: var(--#{$ua-prefix}logs-height);
-    max-height: 100%;
-    padding: 1rem;
-    background-color: var(--#{$ua-prefix}logs-background-color);
-    border-radius: var(--#{$ua-prefix}border-radius);
-
     &__inner {
       display: flex;
       flex-direction: column;
@@ -36,78 +25,93 @@ $e-logs: ".logs";
     }
 
     &__scroll {
+      --#{$ua-prefix}logs-height: calc(10lh + (10 * 0.5rem));
+      --#{$ua-prefix}logs-background-color: var(--#{$ua-prefix}muted-background-color);
       position: relative;
       display: flex;
       flex-direction: column;
       flex-grow: 1;
       min-height: var(--#{$ua-prefix}logs-height);
+      overflow: hidden;
+      background-color: var(--#{$ua-prefix}logs-background-color);
+      border-radius: var(--#{$ua-prefix}border-radius);
 
-      &::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        display: block;
-        width: 100%;
-        height: 1rem;
-        background-image: linear-gradient(
-          to top,
-          transparent,
-          var(--#{$ua-prefix}muted-background-color)
-        );
+      #{$e-logs}__line {
+        padding-inline-start: 2.75rem;
+        font-size: 0.75rem;
+        line-height: 1.25rem;
+
+        &::before {
+          font-size: 1.2rem;
+        }
       }
     }
 
     &__scroll-inner {
       height: 100%;
-      padding-block-start: 1rem;
       overflow-y: auto;
     }
 
     &__list {
       display: flex;
       flex-direction: column;
-      gap: 0.5rem;
       max-height: 100%;
     }
 
     &__line {
-      padding-inline-start: 2rem;
-      background-color: rgb(255 255 255 / 0);
+      position: relative;
+      padding-block: 0.125rem;
+      padding-inline: 2.75rem 1rem;
       background-repeat: no-repeat;
       background-position: left center;
       background-size: 1.5rem 1.5rem;
       font-size: 0.875rem;
-      line-height: 1.4;
+      line-height: 1.4rem;
       word-break: break-word;
       transition: background-color 0.3s ease-in-out;
 
-      &--success {
-        background-image: url("../../img/check.svg");
+      &::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 1rem;
+        display: block;
+        width: 1.375rem;
+        height: 1.25rem;
+        font-family: var(--#{$ua-prefix}font-family-material-icons);
+        font-size: 1.25rem;
+        line-height: 1;
+        transform: translateY(-50%);
+      }
 
-        &#{$e-logs}__line--pointed {
+      &--success {
+        &::before {
+          content: "check";
           color: var(--#{$ua-prefix}green-500);
         }
       }
 
       &--warning {
-        background-image: url("../../img/warning.svg");
-
-        &#{$e-logs}__line--pointed {
+        &::before {
+          content: "warning";
           color: var(--#{$ua-prefix}yellow-500);
         }
       }
 
       &--error {
-        background-image: url("../../img/close.svg");
-
-        &#{$e-logs}__line--pointed {
+        &::before {
+          content: "close";
           color: var(--#{$ua-prefix}red-500);
         }
       }
+
+      &--pointed {
+        --#{$ua-prefix}log-active-background-color: var(--#{$ua-prefix}primary-300);
+        background-color: var(--#{$ua-prefix}log-active-background-color);
+      }
     }
 
     &__summary-anchor {
-      margin-inline-start: 0.25rem;
       font-weight: 700;
     }
 
@@ -124,7 +128,53 @@ $e-logs: ".logs";
     &__summary {
       display: flex;
       flex-direction: column;
+      gap: 1rem;
+      padding: 1.5rem;
+      border: 1px solid var(--#{$ua-prefix}border-color);
+      border-radius: var(--#{$ua-prefix}border-radius);
+
+      #{$e-logs}__line {
+        display: grid;
+        grid-template-columns: minmax(auto, min-content) auto;
+        gap: 0.25rem;
+        justify-content: start;
+        padding-block: 0;
+        padding-inline-start: 1.75rem;
+        line-height: 1.25rem;
+
+        &::before {
+          left: 0;
+        }
+      }
+
+      #{$e-logs}__line-content {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    &__summary-scroll {
+      --#{$ua-prefix}logs-height: calc(5lh + (6 * 0.5rem));
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
       gap: 0.5rem;
+      max-height: var(--#{$ua-prefix}logs-height);
+      overflow-y: auto;
+      border-radius: var(--#{$ua-prefix}border-radius);
+    }
+
+    &__summary-top {
+      display: flex;
+      gap: 1rem;
+      align-items: center;
+    }
+
+    &__summary-total {
+      flex-shrink: 0;
+      min-width: 1.25rem;
     }
   }
 }

_dev/src/scss/components/_progress.scss

@@ -13,6 +13,7 @@ $e: ".log-progress";
       display: flex;
       gap: 0.5rem;
       align-items: center;
+      font-size: 0.875rem;
       color: var(--#{$ua-prefix}primary-600);
     }
 

_dev/src/scss/components/_scrollbar.scss

@@ -0,0 +1,30 @@
+@use "../variables" as *;
+
+.sb-thin {
+  &::-webkit-scrollbar {
+    width: 0.375rem;
+    height: 0.375rem;
+  }
+}
+
+:not(.sb-thin) {
+  &::-webkit-scrollbar {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--#{$ua-prefix}scrollbar-thumb);
+  border-radius: 99px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--#{$ua-prefix}scrollbar-thumb-hover);
+  border-radius: 99px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--#{$ua-prefix}scrollbar-track);
+  border-radius: 99px;
+}

_dev/src/scss/layouts/_layout.scss

@@ -27,6 +27,10 @@ $e: "#ua";
     text-align: center;
   }
 
+  &_modal {
+    height: 0;
+  }
+
   @container ua-main (max-width: 700px) {
     &_container {
       padding: 2rem;

_dev/src/scss/layouts/_logs-pages.scss

@@ -38,6 +38,7 @@ html {
       @container html-height (min-width: 0) {
         #{$ua-id} {
           display: grid;
+          grid-template-rows: 1fr;
           grid-template-columns: minmax(0, 1fr);
           min-height: calc(100cqh - var(--#{$ua-prefix}header-offset));
 

_dev/src/ts/components/LogsViewer.ts

@@ -146,10 +146,11 @@ export default class LogsViewer extends ComponentAbstract implements Destroyable
   #createLogLine = (logEntry: LogEntry): HTMLDivElement => {
     const logLineFragment = this.#templateLogLine.content.cloneNode(true) as DocumentFragment;
     const logLine = logLineFragment.querySelector('.logs__line') as HTMLDivElement;
+    const logLineContent = logLineFragment.querySelector('.logs__line-content') as HTMLDivElement;
 
     logLine.classList.add(`logs__line--${logEntry.className}`);
     logLine.setAttribute('data-status', logEntry.className);
-    logLine.textContent = logEntry.message;
+    logLineContent.textContent = logEntry.message;
 
     return logLine;
   };
@@ -183,6 +184,7 @@ export default class LogsViewer extends ComponentAbstract implements Destroyable
   #createSummary(severity: SeverityClasses, logs: string[]): HTMLDivElement {
     const summaryFragment = this.#templateSummary.content.cloneNode(true) as DocumentFragment;
     const summary = summaryFragment.querySelector('.logs__summary') as HTMLDivElement;
+    const summaryScroll = summaryFragment.querySelector('.logs__summary-scroll') as HTMLDivElement;
 
     const title = this.#getSummaryTitle(severity);
     const titleContainer = summary.querySelector('[data-slot-template="title"]') as HTMLDivElement;
@@ -200,7 +202,7 @@ export default class LogsViewer extends ComponentAbstract implements Destroyable
 
       cloneLogElement.appendChild(linkClone);
 
-      summary.appendChild(cloneLogElement);
+      summaryScroll.appendChild(cloneLogElement);
     });
 
     return summary;