style: enhance UI components with improved animations, layout, and styling across network activity views

Author: kvhnuke

packages/extension/src/ui/action/views/network-activity/components/network-activity-action.vue

@@ -49,75 +49,110 @@ defineEmits<{
 }>();
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 @import '@action/styles/theme.less';
 
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .network-activity {
   &__action {
-    padding: 4px 16px 8px 16px;
+    padding: 4px 20px 12px 20px;
     box-sizing: border-box;
+    animation: fadeInUp 0.3s ease-out;
+    animation-delay: 50ms;
+    animation-fill-mode: backwards;
 
     &-wrap {
       width: 100%;
       height: 72px;
-      left: 12px;
-      top: 0px;
-      border-radius: 12px;
+      border-radius: 14px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       flex-direction: row;
       gap: 8px;
-      button {
+      background: @white;
+      padding: 6px;
+      box-sizing: border-box;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+      border: 1px solid rgba(0, 0, 0, 0.06);
+
+      button,
+      a {
         color: inherit;
         font: inherit;
         cursor: pointer;
         outline: inherit;
-        border: inherit;
+        border: none;
+        background: transparent;
       }
     }
+
     &-item {
-      background: @primary007;
-      display: block;
+      background: rgba(0, 0, 0, 0.03);
+      display: flex;
       text-align: center;
       text-decoration: none;
       font-style: normal;
-      font-weight: 400;
+      font-weight: 500;
       font-size: 12px;
       line-height: 16px;
-      text-align: center;
-      letter-spacing: 0.5px;
+      letter-spacing: 0.3px;
       color: @primaryLabel;
       cursor: pointer;
-      height: 72px;
-      display: flex;
+      height: 60px;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       flex: 1;
-      min-width: 100px;
+      min-width: 0;
       max-width: 100%;
-      transition: background 300ms ease-in-out;
-      border-radius: 12px;
+      transition: all 0.2s ease-in-out;
+      border-radius: 10px;
+      border: none;
 
       &:hover {
-        background: @black004;
+        background: rgba(98, 126, 234, 0.1);
+      }
+
+      &:active {
+        background: rgba(98, 126, 234, 0.15);
       }
 
       svg {
-        margin-bottom: 0;
-        margin-bottom: 2px;
+        margin-bottom: 4px;
+        opacity: 0.85;
       }
+
       &:focus {
-        outline: -webkit-focus-ring-color auto 1px !important;
-        outline-offset: 2px !important;
+        outline: none;
+      }
+
+      // Reset any router-link active styles
+      &.router-link-active,
+      &.router-link-exact-active {
+        background: rgba(0, 0, 0, 0.03);
+
+        &:hover {
+          background: rgba(98, 126, 234, 0.1);
+        }
       }
     }
+
     &-divider {
       height: 48px;
       width: 1px;
-      background: @darkBg;
-      margin: 0 4px 0 4px;
+      background: rgba(0, 0, 0, 0.08);
+      margin: 0 4px;
     }
   }
 }

packages/extension/src/ui/action/views/network-activity/components/network-activity-loading.vue

@@ -12,9 +12,18 @@ defineProps({
   isEmpty: Boolean,
 });
 </script>
-<style lang="less">
+<style lang="less" scoped>
 @import '@action/styles/theme.less';
 
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 .network-activity {
   &__loading {
     width: 100%;
@@ -25,20 +34,26 @@ defineProps({
     flex-direction: column;
     padding-bottom: 56px;
     box-sizing: border-box;
+    animation: fadeIn 0.4s ease-out;
 
     svg {
-      margin-bottom: 8px;
+      margin-bottom: 12px;
+      opacity: 0.7;
     }
 
     p {
       font-style: normal;
-      font-weight: 400;
+      font-weight: 500;
       font-size: 14px;
-      line-height: 20px;
-      letter-spacing: 0.25px;
+      line-height: 22px;
+      letter-spacing: 0.2px;
       color: @tertiaryLabel;
       margin: 0;
       text-align: center;
+      padding: 16px 32px;
+      background: rgba(0, 0, 0, 0.02);
+      border-radius: 12px;
+      border: 1px dashed rgba(0, 0, 0, 0.08);
     }
   }
 }

packages/extension/src/ui/action/views/network-activity/components/network-activity-total.vue

@@ -67,58 +67,88 @@ onBeforeMount(() => {
 });
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 @import '@action/styles/theme.less';
 
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 .network-activity {
   &__total-error {
-    padding: 0 20px 12px 20px;
+    padding: 0 24px 12px 24px;
+    animation: fadeIn 0.3s ease-out;
 
     h3 {
+      margin: 0;
+      font-size: 14px;
+      line-height: 20px;
+
       span {
         color: @error;
+        font-weight: 500;
       }
     }
   }
+
   &__total {
-    padding: 0 20px 12px 20px;
+    padding: 0 24px 12px 24px;
+    animation: fadeIn 0.3s ease-out;
 
     h3 {
       font-style: normal;
       font-weight: 700;
-      font-size: 24px;
-      line-height: 32px;
-      color: @primaryLabel;
+      font-size: 28px;
+      line-height: 36px;
+      background: linear-gradient(135deg, #627eea 0%, #8a64dc 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
       margin: 0;
 
       span {
-        font-variant: small-caps;
+        font-size: 18px;
+        font-weight: 600;
+        background: linear-gradient(
+          135deg,
+          rgba(98, 126, 234, 0.7) 0%,
+          rgba(138, 100, 220, 0.7) 100%
+        );
+        -webkit-background-clip: text;
+        background-clip: text;
       }
     }
 
     p {
       font-style: normal;
-      font-weight: 400;
-      font-size: 16px;
-      line-height: 24px;
+      font-weight: 500;
+      font-size: 15px;
+      line-height: 22px;
       color: @secondaryLabel;
-      margin: 0;
+      margin: 4px 0 0 0;
     }
   }
 
   &__loader-one {
-    width: 100px;
-    height: 18px;
-    margin-bottom: 13px;
-    margin-top: 6px;
+    width: 120px;
+    height: 20px;
+    margin-bottom: 12px;
+    margin-top: 4px;
     display: block !important;
+    border-radius: 6px;
   }
 
   &__loader-two {
-    width: 70px;
-    height: 13px;
+    width: 80px;
+    height: 14px;
     display: block !important;
     margin-bottom: 6px;
+    border-radius: 4px;
   }
 }
 </style>