fix(chip): style margins

Satellite-im · Jun 13, 2022 · 45832e1 · 45832e1
1 parent 02e2dd4
commit 45832e1
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/components/interactables/Chip/Chip.vue b/components/interactables/Chip/Chip.vue
@@ -10,7 +10,7 @@
     <div class="text">
       {{ text }}
     </div>
-    <x-icon size="1x" @click="$emit('delete')" />
+    <x-icon class="delete-icon" size="1x" @click="$emit('delete')" />
   </div>
 </template>
 
@@ -60,8 +60,6 @@ export default Vue.extend({
   flex-shrink: 0;
   flex-direction: row;
   align-items: center;
-  margin-right: @light-spacing;
-  margin-bottom: @light-spacing;
   padding: @xlight-spacing;
   border-radius: @corner-rounding-xxlarge;
   color: white;
@@ -74,5 +72,9 @@ export default Vue.extend({
   &.size-small {
     font-size: @mini-text-size;
   }
+
+  .delete-icon {
+    cursor: pointer;
+  }
 }
 </style>
diff --git a/components/interactables/UserPicker/UserPicker.less b/components/interactables/UserPicker/UserPicker.less
@@ -7,6 +7,8 @@
   .chips {
     display: flex;
     flex-wrap: wrap;
+    align-items: center;
+    gap: @xlight-spacing;
   }
 
   .empty-results-text {

diff --git a/components/interactables/UserPicker/UserPicker.vue b/components/interactables/UserPicker/UserPicker.vue
@@ -47,4 +47,4 @@ export default Vue.extend({
 })
 </script>
 
-<style lang="less" src="./UserPicker.less"></style>
+<style scoped lang="less" src="./UserPicker.less"></style>