style: remove linear gradient backgrounds from various send transaction components for a cleaner UI

Author: kvhnuke

packages/extension/src/providers/common/ui/send-transaction/send-input-amount.vue

@@ -94,11 +94,6 @@ const changeFocus = () => {
 
 .send-input-amount {
   height: 96px;
-  background: linear-gradient(
-    135deg,
-    rgba(98, 126, 234, 0.04) 0%,
-    rgba(138, 100, 220, 0.02) 100%
-  );
   margin: 4px 24px 8px 24px;
   box-sizing: border-box;
   border: 1.5px solid rgba(98, 126, 234, 0.15);

packages/extension/src/providers/ethereum/ui/send-transaction/components/send-address-input.vue

@@ -119,7 +119,6 @@ const changeFocus = (val: FocusEvent) => {
   }
 
   &__avatar {
-    background: linear-gradient(135deg, #f0f4ff 0%, #e8ecf5 100%);
     box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.08);
     width: 36px;
     height: 36px;

packages/extension/src/providers/ethereum/ui/send-transaction/components/send-alert.vue

@@ -20,11 +20,6 @@ defineProps<IProps>();
 
 .send-alert {
   margin: 4px 24px 8px 24px;
-  background: linear-gradient(
-    135deg,
-    rgba(239, 68, 68, 0.08) 0%,
-    rgba(220, 38, 38, 0.05) 100%
-  );
   border: 1.5px solid rgba(239, 68, 68, 0.2);
   border-radius: 12px;
   padding: 12px 16px 12px 48px;

packages/extension/src/providers/ethereum/ui/send-transaction/components/send-token-select.vue

@@ -76,7 +76,6 @@ const balance = computed(() =>
   }
 
   &__image {
-    background: linear-gradient(135deg, #f0f4ff 0%, #e8ecf5 100%);
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
     width: 36px;
     height: 36px;

packages/extension/src/providers/ethereum/ui/send-transaction/index.vue

@@ -864,7 +864,6 @@ const selectNFT = (item: NFTItemWithCollectionName) => {
 .container {
   width: 100%;
   height: 600px;
-  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 50%, @white 100%);
   margin: 0;
   box-sizing: border-box;
   position: relative;
@@ -877,11 +876,6 @@ const selectNFT = (item: NFTItemWithCollectionName) => {
     left: 0;
     right: 0;
     height: 200px;
-    background: linear-gradient(
-      135deg,
-      rgba(98, 126, 234, 0.06) 0%,
-      rgba(138, 100, 220, 0.04) 100%
-    );
     pointer-events: none;
     z-index: 0;
   }
@@ -935,12 +929,7 @@ const selectNFT = (item: NFTItemWithCollectionName) => {
     flex-direction: row;
     width: 100%;
     box-sizing: border-box;
-    background: linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0.9) 30%,
-      @white 50%
-    );
+
     gap: 12px;
     z-index: 10;
 
@@ -966,7 +955,6 @@ const selectNFT = (item: NFTItemWithCollectionName) => {
       min-width: 0;
 
       :deep(.base-button) {
-        background: linear-gradient(135deg, #627eea 0%, #8a64dc 100%);
         border-radius: 12px;
         font-weight: 600;
         box-shadow: 0 4px 12px rgba(98, 126, 234, 0.3);

packages/extension/src/providers/ethereum/ui/send-transaction/verify-transaction/index.vue

@@ -283,7 +283,6 @@ const isHasScroll = () => {
 .container {
   width: 100%;
   height: 600px;
-  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 50%, @white 100%);
   margin: 0;
   box-sizing: border-box;
   position: relative;
@@ -296,11 +295,6 @@ const isHasScroll = () => {
     left: 0;
     right: 0;
     height: 180px;
-    background: linear-gradient(
-      135deg,
-      rgba(98, 126, 234, 0.06) 0%,
-      rgba(138, 100, 220, 0.04) 100%
-    );
     pointer-events: none;
     z-index: 0;
   }
@@ -345,7 +339,6 @@ const isHasScroll = () => {
       line-height: 28px;
       color: @primaryLabel;
       margin: 0;
-      background: linear-gradient(135deg, #627eea 0%, #8a64dc 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
@@ -426,12 +419,6 @@ const isHasScroll = () => {
     flex-direction: row;
     width: 100%;
     box-sizing: border-box;
-    background: linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0.9) 30%,
-      @white 50%
-    );
     gap: 12px;
     z-index: 10;
 
@@ -470,7 +457,6 @@ const isHasScroll = () => {
       min-width: 0;
 
       :deep(.base-button) {
-        background: linear-gradient(135deg, #627eea 0%, #8a64dc 100%);
         border-radius: 12px;
         font-weight: 600;
         box-shadow: 0 4px 12px rgba(98, 126, 234, 0.3);