Update ManageDevicesView buttons hover (#711)

This PR improves the appearance of the ManageDevicesView button group. On hover, buttons now have a circular background shape instead of the previous elliptical shape. Additionally, tooltip texts have been updated. Fixes #706 Before: ![Screenshot 2024-11-08 at 11 34 52](https://github.com/user-attachments/assets/d4803564-5aaa-4f57-a8e3-e64df40bb552) After: ![Screenshot 2024-11-08 at 11 41 18](https://github.com/user-attachments/assets/c28d3a17-5253-4e26-bc0f-89418dfd9809) ![Screenshot 2024-11-08 at 11 41 50](https://github.com/user-attachments/assets/ca27f5cc-80c5-4c0d-bd40-64ce3eaa7063)
software-mansion · Nov 8, 2024 · 5375b32 · 5375b32
1 parent aa27c62
commit 5375b32
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/packages/vscode-extension/src/webview/views/ManageDevicesView.css b/packages/vscode-extension/src/webview/views/ManageDevicesView.css
@@ -16,12 +16,13 @@
 
 .device-row {
   display: grid;
-  grid-template-columns: 32px 1fr 36px;
+  grid-template-columns: 32px 1fr 90px;
+  width: 430px;
   align-items: center;
   gap: 10px;
   line-height: 1;
   height: 48px;
-  padding: 2px 25px 2px 2px;
+  padding: 2px 6px 2px 2px;
   border-radius: 6px;
 }
 
@@ -41,6 +42,7 @@
   display: flex;
   flex-direction: column;
   min-width: 0;
+  margin-left: 6px;
   cursor: default;
 }
 .device-title {
@@ -66,6 +68,7 @@
   align-items: center;
   justify-content: center;
   border-radius: 16px;
+  margin-left: 6px;
   color: var(--swm-device-icon);
   background-color: var(--swm-device-icon-background);
 }
@@ -75,8 +78,12 @@
 }
 .device-button-group {
   display: flex;
-  gap: 5px;
   align-items: center;
+  justify-content: center;
+}
+.device-button-group .icon-button {
+  min-width: 30px;
+  max-height: 30px;
 }
 
 .warning {

diff --git a/packages/vscode-extension/src/webview/views/ManageDevicesView.tsx b/packages/vscode-extension/src/webview/views/ManageDevicesView.tsx
@@ -60,7 +60,7 @@ function DeviceRow({ deviceInfo, onDeviceRename, onDeviceDelete, isSelected }: D
         {!isSelected ? (
           <IconButton
             tooltip={{
-              label: "Select device.",
+              label: "Select device",
               side: "bottom",
               type: "secondary",
             }}
@@ -78,7 +78,7 @@ function DeviceRow({ deviceInfo, onDeviceRename, onDeviceDelete, isSelected }: D
         )}
         <IconButton
           tooltip={{
-            label: "Rename device's name.",
+            label: "Rename device",
             side: "bottom",
             type: "secondary",
           }}
@@ -91,7 +91,7 @@ function DeviceRow({ deviceInfo, onDeviceRename, onDeviceDelete, isSelected }: D
         <IconButton
           tooltip={{
             label: `Remove device with it's ${
-              deviceInfo.platform === DevicePlatform.IOS ? "runtime." : "system image."
+              deviceInfo.platform === DevicePlatform.IOS ? "runtime" : "system image"
             }`,
             side: "bottom",
             type: "secondary",