Dev

assets/styles/base.scss

@@ -50,9 +50,9 @@ $grayscale: (
 	--btn-white-bg: rgba(255, 255, 255, 90%);
 	--btn-white-bg-hover: rgba(255, 255, 255, 75%);
 	--btn-white-bg-active: rgba(255, 255, 255, 90%);
-	--btn-secondary-bg: rgba(255, 255, 255, 5%);
-	--btn-secondary-bg-hover: rgba(255, 255, 255, 8%);
-	--btn-secondary-bg-active: rgba(255, 255, 255, 5%);
+	--btn-secondary-bg: rgba(255, 255, 255, 8%);
+	--btn-secondary-bg-hover: rgba(255, 255, 255, 10%);
+	--btn-secondary-bg-active: rgba(255, 255, 255, 7%);
 
 	/** Other */
 	--network-widget-background: rgba(0, 0, 0, 10%);

components/Notifications.vue

@@ -110,7 +110,8 @@ const handleActionCallback = (callback, notification) => {
 
 	box-sizing: border-box;
 	width: 330px;
-	background: var(--notification-background);
+	background: var(--card-background);
+	box-shadow: inset 0 0 0 2px var(--op-5), 0 14px 34px rgba(0, 0, 0, 15%), 0 4px 14px rgba(0, 0, 0, 5%);
 
 	border-radius: 8px;
 	padding: 12px;
@@ -136,7 +137,7 @@ const handleActionCallback = (callback, notification) => {
 
 .description {
 	font-size: 12px;
-	font-weight: 500;
+	font-weight: 600;
 	line-height: 18px;
 	color: var(--txt-tertiary);
 

components/Skeleton.vue

@@ -2,6 +2,10 @@
 const props = defineProps({
 	w: String,
 	h: String,
+	c: {
+		type: String,
+		default: "gray",
+	},
 	r: {
 		type: String,
 		default: "50",
@@ -10,14 +14,28 @@ const props = defineProps({
 </script>
 
 <template>
-	<div :style="{ width: `${w}px`, height: `${h}px`, borderRadius: `${r}px` }" :class="$style.wrapper" />
+	<div :style="{ width: `${w}px`, height: `${h}px`, borderRadius: `${r}px` }" :class="[$style.wrapper, $style[c]]" />
 </template>
 
 <style module>
 .wrapper {
-	background: var(--op-10);
-
 	animation: skeleton 1s ease infinite;
+
+	&.green {
+		background: rgba(10, 219, 111, 30%);
+	}
+
+	&.yellow {
+		background: rgba(255, 212, 0, 30%);
+	}
+
+	&.red {
+		background: var(--red);
+	}
+
+	&.gray {
+		background: var(--op-10);
+	}
 }
 
 @keyframes skeleton {

components/TheFooter.vue

@@ -135,6 +135,9 @@ const handleChangeTheme = (theme) => {
 					<NuxtLink to="/addresses" :class="$style.link">
 						<Text size="12" weight="500" color="tertiary"> Addresses </Text>
 					</NuxtLink>
+					<NuxtLink to="/gas" :class="$style.link">
+						<Text size="12" weight="500" color="tertiary">Gas Tracker</Text>
+					</NuxtLink>
 				</Flex>
 			</Flex>
 		</Flex>

components/TheHeader.vue

@@ -10,6 +10,7 @@ import { isMac, getNetworkName } from "@/services/utils/general"
 /** UI */
 import { Dropdown, DropdownItem, DropdownTitle } from "@/components/ui/Dropdown"
 import Tooltip from "@/components/ui/Tooltip.vue"
+import Button from "@/components/ui/Button.vue"
 import Kbd from "@/components/ui/Kbd.vue"
 
 /** Store */
@@ -89,7 +90,7 @@ const handleNavigate = (url) => {
 
 			<Flex justify="center" align="center" wrap="wrap" gap="8" :class="$style.links">
 				<NuxtLink to="/" :class="[$style.link, isActive('index') && $style.active]">
-					<Text size="13" weight="600" color="tertiary">Explorer</Text>
+					<Text size="13" weight="600" color="tertiary">Explore</Text>
 				</NuxtLink>
 
 				<NuxtLink to="/txs" :class="[$style.link, isActive('txs') && $style.active]">
@@ -127,9 +128,9 @@ const handleNavigate = (url) => {
 				</Dropdown>
 
 				<Tooltip position="end" delay="250">
-					<Flex @click="appStore.showCmd = true" align="center" gap="8" :class="$style.button">
+					<Button @click="appStore.showCmd = true" type="secondary" size="small">
 						<Icon name="search" size="16" color="secondary" />
-					</Flex>
+					</Button>
 
 					<template #content>
 						<Flex align="center" gap="8">
@@ -146,7 +147,7 @@ const handleNavigate = (url) => {
 
 		<Flex v-if="showPopup" @click="showPopup = false" direction="column" gap="8" :class="$style.menu_popup">
 			<NuxtLink to="/" :class="[$style.link, isActive('index') && $style.active]">
-				<Text size="13" weight="600" color="tertiary">Explorer</Text>
+				<Text size="13" weight="600" color="tertiary">Explore</Text>
 			</NuxtLink>
 
 			<NuxtLink to="/txs" :class="[$style.link, isActive('txs') && $style.active]">

components/cmd/CommandMenu.vue

@@ -332,6 +332,15 @@ const quickCommandsActions = [
 			router.push(`/address/${hash}`)
 		},
 	},
+	{
+		type: "callback",
+		icon: "gas",
+		title: "Open Gas Tracker",
+		runText: "Open Gas Tracker",
+		callback: () => {
+			router.push("/gas")
+		},
+	},
 ]
 const quickCommandsGroup = computed(() => {
 	return {