chore: adjust style

1 files changed, 48 insertions, 5 deletions

diff --git a/src/components/ModalManageConnectionColumns.module.scss b/src/components/ModalManageConnectionColumns.module.scss
index 9247acd..e0fd36b 100644
--- a/src/components/ModalManageConnectionColumns.module.scss
+++ b/src/components/ModalManageConnectionColumns.module.scss
@@ -1,17 +1,60 @@
 .columnManagerRow {
-  width: 200px;
+  width: 280px;
   display: flex;
-  margin: 5px 0;
+  margin: 4px 0;
+  padding: 8px 12px;
   align-items: center;
+  background: var(--bg-near-transparent);
+  border-radius: 10px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: rgba(66, 133, 244, 0.1);
+  }
 
   .columnManageLabel {
     flex: 1;
-    margin-left: 10px;
+    margin-left: 12px;
+    font-size: 0.95em;
+    font-weight: 500;
+  }
+
+  .columnMoveButtons {
+    display: flex;
+    flex-direction: column;
+    margin-right: 8px;
+    gap: 2px;
+  }
+
+  .moveBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 16px;
+    padding: 0;
+    border: none;
+    border-radius: 4px;
+    background-color: transparent;
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    transition: all 0.15s ease;
+
+    &:hover:not(:disabled) {
+      background-color: var(--color-focus-blue);
+      color: white;
+      transform: scale(1.1);
+    }
+
+    &:disabled {
+      opacity: 0.25;
+      cursor: not-allowed;
+    }
   }
 
   .columnManageSwitch {
-    transform: scale(0.7);
-    height: 20px;
+    transform: scale(0.75);
+    height: 22px;
     display: flex;
     align-items: center;
   }