chore: adjust style

1 files changed, 133 insertions, 0 deletions

diff --git a/src/components/ConnectionCard.module.scss b/src/components/ConnectionCard.module.scss
new file mode 100644
index 0000000..6007c45
--- /dev/null
+++ b/src/components/ConnectionCard.module.scss
@@ -0,0 +1,133 @@
+.card {
+  background: var(--color-bg-card);
+  border-radius: 12px;
+  padding: 12px 16px;
+  margin-bottom: 10px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  cursor: pointer;
+  transition: transform 0.1s ease;
+
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+.row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-width: 0;
+}
+
+.host {
+  color: #40c4aa; // Similar to the image
+  font-weight: 600;
+  font-size: 1rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  margin-right: 8px;
+}
+
+.time {
+  color: var(--color-text-secondary);
+  font-size: 0.85rem;
+  flex-shrink: 0;
+}
+
+.typeProtocol {
+  color: var(--color-text);
+  font-size: 0.9rem;
+  opacity: 0.8;
+}
+
+.totals {
+  display: flex;
+  gap: 12px;
+  font-size: 0.85rem;
+  color: var(--color-text-secondary);
+
+  span {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  svg {
+    opacity: 0.5;
+  }
+}
+
+.ruleChain {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--color-text-secondary);
+  font-size: 0.85rem;
+  overflow: hidden;
+  flex: 1;
+  margin-right: 8px;
+
+  .rule {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .arrow {
+    opacity: 0.5;
+    font-size: 0.75rem;
+  }
+
+  .chains {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 500;
+    color: var(--color-text);
+    opacity: 0.9;
+  }
+}
+
+.speedAndAction {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.speed {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.9rem;
+  color: var(--color-text-secondary);
+  font-family: 'Roboto Mono', monospace;
+
+  .speedIcon {
+    color: #40c4aa;
+    opacity: 0.8;
+  }
+}
+
+.closeBtn {
+  background: var(--color-bg-secondary, rgba(0, 0, 0, 0.05));
+  border: none;
+  border-radius: 50%;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: rgba(231, 76, 60, 0.1);
+    color: #e74c3c;
+  }
+}