fix(status): position and size of status

components/ui/Circle/Circle.vue

@@ -10,7 +10,7 @@ export default Vue.extend({
      */
     size: {
       type: Number,
-      default: 45,
+      default: 36,
       required: false,
     },
     /**

components/ui/User/State/State.less

@@ -3,37 +3,41 @@
   display: flex;
   align-items: center;
 
+  --circle-radius: 6px;
+  --border-width: 2px;
+
+  &.is-large {
+    --circle-radius: 10px;
+  }
+
   .circle {
-    mask: radial-gradient(circle 8px at 85.35% 85.35%, #0000 98%, #000) 100%
-      100%/100% 100% no-repeat;
+    mask: radial-gradient(
+        circle calc(var(--circle-radius) + var(--border-width)) at 86% 86%,
+        #0000 98%,
+        #000
+      )
+      100% 100%/100% 100% no-repeat;
     overflow: hidden;
   }
 
   .status {
     position: absolute;
-    left: 85.35%;
-    top: 85.35%;
-    font-size: @text-size;
-    text-shadow: 0 0 3px #000;
-    transform: translate(-50%, -50%);
-    display: inline-flex;
-    align-content: center;
+    left: 86%;
+    top: 86%;
+    border-radius: 50%;
+    width: calc(var(--circle-radius) * 2);
+    height: calc(var(--circle-radius) * 2);
+    margin-top: calc(-1 * var(--circle-radius));
+    margin-left: calc(-1 * var(--circle-radius));
 
-    circle {
-      stroke: transparent;
-      paint-order: stroke;
-    }
     &.is-online {
-      &:extend(.color-success);
-      fill: @green;
+      background-color: @green;
     }
     &.is-offline {
-      &:extend(.font-gray);
-      fill: @gray;
+      background-color: @gray;
     }
     &.is-idle {
-      &:extend(.color-warning);
-      fill: @yellow;
+      background-color: @yellow;
     }
   }
 

components/ui/User/State/State.vue

@@ -3,6 +3,7 @@
     class="user-state"
     data-cy="user-state"
     :style="`width:${size}px; height:${size}px`"
+    :class="{ 'is-large': size > 36 }"
   >
     <UiCircle
       data-cy="satellite-circle-profile"
@@ -12,10 +13,10 @@
       :source="src"
       @click="clickHandler"
     />
-    <circle-icon
+    <div
       v-if="user.state !== 'mobile' && !isTyping"
-      :size="size > 35 ? '1.65x' : '1x'"
-      :class="`status is-${user.state}`"
+      class="status"
+      :class="{ [`is-${user.state}`]: user.state }"
     />
     <smartphone-icon
       v-else-if="user.state === 'mobile'"
@@ -28,13 +29,12 @@
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
-import { SmartphoneIcon, CircleIcon } from 'satellite-lucide-icons'
+import { SmartphoneIcon } from 'satellite-lucide-icons'
 import { User } from '~/types/ui/user'
 
 export default Vue.extend({
   components: {
     SmartphoneIcon,
-    CircleIcon,
   },
   props: {
     user: {
@@ -49,7 +49,7 @@ export default Vue.extend({
     src: { type: String, default: '', required: false },
     size: {
       type: Number,
-      default: 35,
+      default: 36,
       required: false,
     },
     clickHandler: {

components/views/chat/group/Group.html

@@ -1,11 +1,6 @@
 <div v-if="group.avatar" class="is-group">
   <span class="wrapper-circle" v-on:click="showQuickProfile">
-    <UiCircle
-      :type="src ? 'image' :'random'"
-      :seed="address"
-      :size="35"
-      :source="src"
-    />
+    <UiCircle :type="src ? 'image' :'random'" :seed="address" :source="src" />
   </span>
   <div class="group-body">
     <div class="group-heading">

components/views/chat/message/reply/Item/Item.html

@@ -1,12 +1,7 @@
 <div class="reply-container">
   <div class="is-reply">
     <span @click="(event) => $emit('click', event, reply.from)">
-      <UiCircle
-        :type="src ? 'image' :'random'"
-        :seed="address"
-        :size="35"
-        :source="src"
-      />
+      <UiCircle :type="src ? 'image' :'random'" :seed="address" :source="src" />
     </span>
     <div class="reply-body">
       <div class="reply-heading">

components/views/group/aside/Aside.html

@@ -6,7 +6,6 @@
   </div>
   <div id="actions">
     <UiCircle
-      :size="35"
       type="icon"
       icon="user"
       alt="$t('pages.chat.add_member')"
@@ -15,7 +14,6 @@
       v-on:click="groupInvite(selectedGroup)"
     />
     <UiCircle
-      :size="35"
       type="icon"
       icon="message-square"
       alt="$t('pages.chat.switch_chat')"
@@ -24,14 +22,13 @@
       v-on:click="navigateToGroup(selectedGroup.id)"
     />
     <UiCircle
-      :size="35"
       type="icon"
       icon="layout"
       alt="$t('pages.chat.start_watch_party')"
       :data-tooltip="$t('pages.chat.start_watch_party')"
       class="has-tooltip-primary"
     />
-    <UiCircle :size="35" type="icon" icon="more-vertical" />
+    <UiCircle type="icon" icon="more-vertical" />
   </div>
   <UiHorizontalRule />
   <div id="members">

components/views/group/icon/GroupIcon.html

@@ -18,7 +18,7 @@
   </div>
   <div v-else>
     <div v-for="member in group.members" class="group-single">
-      <UiCircle type="image" :source="getSource(member)" :size="35" />
+      <UiCircle type="image" :source="getSource(member)" />
     </div>
   </div>
   <span v-if="group.members.length > 3" class="label"

components/views/media/user/User.html

@@ -25,7 +25,7 @@
     <UiCircle
       type="random"
       :seed="user.address"
-      :size="$device.isMobile ? 35 : 65"
+      :size="$device.isMobile ? 36 : 65"
       :class="`${!audioStream ? 'calling' : ''}`"
       :source="user.profilePicture"
     />

components/views/navigation/toolbar/Toolbar.html

@@ -9,7 +9,6 @@
       :type="src ? 'image' : 'random'"
       data-cy="friend-chat-circle"
       :seed="`${server ? server.address : '0xdf9eb223bafbe5c5271415c75aecd68c21fe3d7f'}`"
-      :size="35"
       :source="src"
       @click="openProfile"
       v-if="!$device.isMobile && recipient.type !== 'group'"

components/views/wallet/recent/item/Item.html

@@ -4,7 +4,7 @@
       <UiCircle
         type="random"
         :seed="transaction.user.address"
-        :size="$device.isMobile ? 25 : 35"
+        :size="$device.isMobile ? 25 : 36"
       />
     </div>
     <div>