[@dhealthdapps/frontend] fix(screens): update styles for stats compon…

…ent, update icons for dropdown, change fit to activ names

runtime/dapp-frontend-vue/resources/i18n/en/Common.json

@@ -21,6 +21,7 @@
     "disconnect_wallet": "Disconnect wallet",
     "activities": "Activities",
     "amount_earned": "$ACTIV earned",
+    "currency_name": "$ACTIV",
     "no_activities": "You don't have any activities currently."
   }
 }

runtime/dapp-frontend-vue/src/components/AppHeader/AppHeader.ts

@@ -119,14 +119,14 @@ export default class AppHeader extends MetaView {
    */
   get dropDownItems() {
     return [
-      {
-        text: this.$t("common.dropdown_refer_earn"),
-        action: () => this.$router.push({ name: "app.dashboard" }),
-        icon: "icons/refer-earn.svg",
-      },
       {
         text: this.$t("common.activities"),
         action: () => this.$router.push({ name: "app.activities" }),
+        icon: "icons/Activity-icon-header.svg",
+      },
+      {
+        text: this.$t("common.dropdown_refer_earn"),
+        action: () => this.$router.push({ name: "app.dashboard" }),
         icon: "icons/refer-earn.svg",
       },
       {

runtime/dapp-frontend-vue/src/components/Dropdown/Dropdown.scss

@@ -33,7 +33,7 @@
 
   &__actions {
     position: absolute;
-    right: 50%;
+    right: 0;
     transform: translateX(64%);
     top: 50px;
     background-color: $white;

runtime/dapp-frontend-vue/src/components/InfoTip/InfoTip.scss

@@ -29,6 +29,7 @@
     border-radius: 8px;
     top: 35px;
     display: none;
+    z-index: 3;
 
     &.left {
       left: -19px;

runtime/dapp-frontend-vue/src/components/LeaderboardRow/LeaderboardRow.vue

@@ -43,7 +43,7 @@
         <TopActivities :items="data.activities" />
       </div>
       <div class="dapp-leaderboard-item__amount text-right">
-        <span v-html="`$${formatAmount(data.amount, 2)} FIT`" />
+        <span v-html="`$${formatAmount(data.amount, 2)} $ACTIV`" />
       </div>
     </div>
     <div v-else class="dapp-leaderboard-item__custom">

runtime/dapp-frontend-vue/src/components/Stats/Stats.scss

@@ -31,6 +31,7 @@
       font-family: "Dotrice";
       font-size: 72px;
       line-height: 100%;
+      text-align: left;
 
       @include devices(laptop) {
         font-size: 54px;
@@ -50,7 +51,6 @@
       align-items: center;
       justify-content: space-between;
       width: 100%;
-      max-width: 263px;
       margin: 8px auto 0 auto;
 
       span {

runtime/dapp-frontend-vue/src/components/Stats/Stats.vue

@@ -34,7 +34,7 @@
         />
       </div>
       <div class="activities-list text-right">
-        <TopActivities :items="topActivities" />
+        <TopActivities :items="topActivities" :sticked="true" />
         <span
           class="dapp-stats__other__label"
           v-html="$t('dashboard.stats_top_activities')"

runtime/dapp-frontend-vue/src/components/TopActivities/TopActivities.scss

@@ -16,6 +16,11 @@
     display: inline-block;
     margin-inline-end: 12px;
 
+    &.sticked {
+      position: relative;
+      margin-inline-end: 0;
+    }
+
     @include devices(tablet) {
       margin-inline-end: 4px;
     }

runtime/dapp-frontend-vue/src/components/TopActivities/TopActivities.ts

@@ -48,6 +48,16 @@ export default class TopActivities extends MetaView {
   @Prop({ default: () => [] })
   public items!: string[];
 
+  /**
+   * Defines positioning of icons
+   *
+   * @access public
+   * @readonly
+   * @var {boolean}
+   */
+  @Prop({ default: false })
+  public readonly sticked?: boolean;
+
   /**
    * This property contains the user statistics and maps to a store
    * getter named `statistics/getUserStatistics`.

runtime/dapp-frontend-vue/src/components/TopActivities/TopActivities.vue

@@ -12,7 +12,15 @@
 
 <template>
   <ul v-if="items && items.length" class="dapp-activities">
-    <li v-for="(activity, index) in fetchedItems" :key="activity + index">
+    <li
+      :class="{ sticked: sticked }"
+      :style="{
+        'z-index': sticked && index > 0 ? index : 0,
+        right: `${6 * index}px`,
+      }"
+      v-for="(activity, index) in fetchedItems"
+      :key="activity + index"
+    >
       <inline-svg
         :src="getImageUrl(`activities-icons/${activity}.svg`)"
         :alt="activity"

runtime/dapp-frontend-vue/src/components/UserBalance/UserBalance.vue

@@ -18,7 +18,7 @@
       :width="16"
       class="dapp-logo__image"
     />
-    {{ userBalance }} $ACTIV
+    {{ userBalance }} {{ $t("common.currency_name") }}
   </div>
 </template>
 

runtime/dapp-frontend-vue/tests/unit/components/LeaderBoardRow.spec.ts

@@ -134,11 +134,11 @@ describe("LeaderBoardRow -->", () => {
   //   );
   // });
 
-  it("should display correctly formatted amount of $FIT", () => {
+  it("should display correctly formatted amount of $ACTIV", () => {
     expect(
       widget.find(".dapp-leaderboard-item__amount span").text()
     ).to.be.equal(
-      `$${widget.vm.formatAmount(widget.props("data").amount, 2)} FIT`
+      `$${widget.vm.formatAmount(widget.props("data").amount, 2)} ACTIV`
     );
   });
 });

runtime/dapp-frontend-vue/tests/unit/components/Tabs.spec.ts

@@ -34,7 +34,7 @@ const componentOptions = {
             direction: "up",
           },
           {
-            title: "$FIT earned",
+            title: "$ACTIV earned",
             amount: 560,
             direction: "down",
           },
@@ -70,7 +70,7 @@ const componentOptions = {
             direction: "down",
           },
           {
-            title: "$FIT earned",
+            title: "$ACTIV earned",
             amount: 350,
             direction: "down",
           },