chore: adjust style

1 files changed, 134 insertions, 39 deletions

diff --git a/src/components/Logs.module.scss b/src/components/Logs.module.scss
index 2eb0022..ce3bc1e 100644
--- a/src/components/Logs.module.scss
+++ b/src/components/Logs.module.scss
@@ -1,75 +1,170 @@
-.logMeta {
-  font-size: 0.8em;
-  margin-bottom: 5px;
-  display: block;
-  line-height: 1.55em;
+.headerControls {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+  justify-content: flex-end;
+  max-width: 400px;
+
+  & > div {
+    flex: 1;
+  }
 }
 
-.logType {
-  flex-shrink: 0;
-  text-align: center;
-  width: 66px;
-  border-radius: 100px;
-  padding: 3px 5px;
-  margin: 0 8px;
+.searchWrapper {
+  flex: 1;
 }
 
-.logTime {
-  flex-shrink: 0;
-  color: #fb923c;
+.clearBtn {
+  background: none;
+  border: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s, color 0.2s;
+
+  &:hover {
+    background-color: var(--bg-near-transparent);
+    color: var(--color-text);
+  }
 }
 
-.logText {
-  flex-shrink: 0;
-  color: #888;
+.logLine {
+  display: flex;
+  font-family: var(--font-normal);
+  font-size: 12px;
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--bg-near-transparent);
+  word-break: break-all;
+
+  &:hover {
+    background-color: var(--bg-near-transparent);
+  }
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+}
+
+.logMeta {
+  display: flex;
   align-items: center;
-  line-height: 1.35em;
-  /* force wrap */
-  width: 100%;
+  flex-shrink: 0;
+  margin-right: 12px;
+  min-width: 180px;
+
   @media (max-width: 768px) {
-    display: inline-block;
+    margin-bottom: 4px;
   }
 }
 
-/*******************/
+.logTime {
+  color: var(--color-text-secondary);
+  margin-right: 8px;
+  opacity: 0.8;
+}
+
+.logType {
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 3px;
+  min-width: 50px;
+  text-align: center;
+
+  &[data-type='debug'] {
+    color: #389d3d;
+    background-color: rgba(56, 157, 61, 0.1);
+  }
+  &[data-type='info'] {
+    color: #0ea5e9;
+    background-color: rgba(14, 165, 233, 0.1);
+  }
+  &[data-type='warning'] {
+    color: #f59e0b;
+    background-color: rgba(245, 158, 11, 0.1);
+  }
+  &[data-type='error'] {
+    color: #ef4444;
+    background-color: rgba(239, 68, 68, 0.1);
+  }
+}
+
+.logText {
+  color: var(--color-text);
+  line-height: 1.5;
+  flex: 1;
+}
 
 .logsWrapper {
-  margin: 45px;
+  position: relative;
+  margin: 20px 45px;
   padding: 10px;
   background-color: var(--bg-log-info-card);
-  border-radius: 4px;
+  border-radius: 8px;
   color: var(--color-text);
   overflow-y: auto;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
   @media (max-width: 768px) {
-    margin: 25px;
+    margin: 15px 25px;
   }
-  :global {
-    .log {
-      margin-bottom: 10px;
-      //background: var(--color-background);
-    }
-    .log.even {
-      //background: var(--color-background);
-    }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--bg-near-transparent);
+    border-radius: 3px;
   }
 }
 
-/*******************/
+.scrollToBottomBtn {
+  position: absolute;
+  bottom: 80px;
+  right: 20px;
+  background-color: var(--color-focus-blue);
+  color: white;
+  border: none;
+  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  z-index: 10;
+  transition: transform 0.2s;
+
+  &:hover {
+    transform: scale(1.1);
+  }
+
+  @media (max-width: 768px) {
+    right: 25px;
+  }
+}
 
 .logPlaceholder {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  color: #2d2d30;
+  color: var(--color-text-secondary);
 
   div:nth-child(2) {
-    color: var(--color-text-secondary);
-    font-size: 1.4em;
+    font-size: 1.2em;
+    margin-top: 20px;
     opacity: 0.6;
   }
 }
 
 .logPlaceholderIcon {
-  opacity: 0.3;
+  opacity: 0.2;
 }