devop: adjust actions ui bg, spacing in tokens and add header

enkryptcom · Jan 3, 2025 · f508fe9 · f508fe9
1 parent dd01b2b
commit f508fe9
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 12 deletions.
diff --git a/packages/extension/src/ui/action/styles/color.less b/packages/extension/src/ui/action/styles/color.less
@@ -1,6 +1,7 @@
 @primary: #684cff;
 @primary01: rgba(5, 192, 165, 0.1);
 @primaryLight: rgba(104, 76, 255, 0.1);
+@primary007: rgba(104, 76, 255, 0.07);
 
 @primaryLabel: #202124;
 @secondaryLabel: #5f6368;

diff --git a/...ges/extension/src/ui/action/views/network-activity/components/network-activity-action.vue b/...ges/extension/src/ui/action/views/network-activity/components/network-activity-action.vue
@@ -51,15 +51,15 @@ defineEmits<{
 
 .network-activity {
   &__action {
-    padding: 0 12px 8px 12px;
+    padding: 4px 12px 8px 12px;
     box-sizing: border-box;
 
     &-wrap {
       width: 100%;
       height: 72px;
       left: 12px;
       top: 0px;
-      background: @actionBg;
+      background: @primary007;
       border-radius: 12px;
       display: flex;
       justify-content: space-around;

diff --git a/packages/extension/src/ui/action/views/network-assets/components/network-assets-header.vue b/packages/extension/src/ui/action/views/network-assets/components/network-assets-header.vue
@@ -0,0 +1,54 @@
+<template>
+  <a class="network-assets__header">
+    <div class="network-assets__header__token">
+      <p>Token</p>
+    </div>
+
+    <div>
+      <p>Last 24h</p>
+    </div>
+
+    <div class="network-assets__header__price">
+      <p>Value</p>
+    </div>
+  </a>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="less">
+@import '@action/styles/theme.less';
+.network-assets {
+  &__header {
+    padding: 10px 12px 2px 12px;
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: end;
+    flex-direction: row;
+    p {
+      color: @black06;
+      font-size: 10px;
+      font-weight: 500;
+      line-height: 11px;
+      letter-spacing: 1.5px;
+      text-transform: uppercase;
+      margin: 0;
+    }
+
+    &__token {
+      width: 200px;
+      p {
+        padding-left: 48px;
+      }
+    }
+
+    &__price {
+      width: 162px;
+      p {
+        text-align: end;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/network-assets/components/network-assets-item.vue b/packages/extension/src/ui/action/views/network-assets/components/network-assets-item.vue
@@ -89,8 +89,8 @@ const props = defineProps({
 use([SVGRenderer, LineChart, TooltipComponent, GridComponent]);
 
 const option = ref({
-  width: 32,
-  height: 32,
+  width: 48,
+  height: 20,
   color: [props.token.priceChangePercentage >= 0 ? '#80FFA5' : '#e01f43'],
   grid: { show: false, left: 0, top: 0 },
   xAxis: [
@@ -180,8 +180,8 @@ const toggleDetail = () => {
 <style lang="less">
 @import '@action/styles/theme.less';
 .chart {
-  height: 32px;
-  width: 32px;
+  height: 20px;
+  width: 48px;
 }
 .down {
   color: @error;
@@ -192,7 +192,7 @@ const toggleDetail = () => {
 .network-assets {
   &__token {
     height: 72px;
-    padding: 0 20px;
+    padding: 0 6px;
     position: relative;
     box-sizing: border-box;
     display: flex;
@@ -202,7 +202,7 @@ const toggleDetail = () => {
     border-radius: 10px;
     transition: background 300ms ease-in-out;
     text-decoration: none;
-    margin: 0 12px;
+    margin: 0 6px;
     cursor: pointer;
 
     &:hover {
@@ -214,7 +214,7 @@ const toggleDetail = () => {
       justify-content: flex-start;
       align-items: center;
       flex-direction: row;
-      width: 190px;
+      width: 200px;
       overflow: hidden;
 
       &.max {
@@ -280,8 +280,8 @@ const toggleDetail = () => {
     &-sparkline {
       text-align: center;
       img {
-        max-height: 32px;
-        max-width: 32px;
+        max-height: 20px;
+        max-width: 48px;
       }
       p {
         display: flex;
@@ -304,7 +304,7 @@ const toggleDetail = () => {
 
     &-price {
       text-align: right;
-      width: 160px;
+      width: 162px;
 
       h4 {
         font-style: normal;

diff --git a/packages/extension/src/ui/action/views/network-assets/index.vue b/packages/extension/src/ui/action/views/network-assets/index.vue
@@ -14,6 +14,7 @@
           />
 
           <network-activity-action v-bind="$attrs" />
+          <network-assets-header v-if="!isLoading && assets.length > 0" />
           <network-assets-item
             v-for="(item, index) in assets"
             :key="index"
@@ -62,6 +63,7 @@ import { useRoute } from 'vue-router';
 import NetworkActivityTotal from '../network-activity/components/network-activity-total.vue';
 import NetworkActivityAction from '../network-activity/components/network-activity-action.vue';
 import NetworkAssetsItem from './components/network-assets-item.vue';
+import NetworkAssetsHeader from './components/network-assets-header.vue';
 import NetworkAssetsLoading from './components/network-assets-loading.vue';
 import CustomScrollbar from '@action/components/custom-scrollbar/index.vue';
 import { computed, onMounted, type PropType, ref, toRef, watch } from 'vue';