feat: added etherlink green

baking-bad · Nov 27, 2024 · aa6d880 · aa6d880
1 parent 11a6626
commit aa6d880
Show file tree

Hide file tree

Showing 8 changed files with 7,903 additions and 14 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/assets/styles/base.scss b/src/assets/styles/base.scss
@@ -36,6 +36,7 @@ $grayscale: (
 	--gray: #363739;
 	// --warning: #fb8c00;
 	--warning: #D1AE44;
+	--etherlink-green: #38FF9C;
 
 	/* Grayscale */
 	@each $gray, $value in $grayscale {

diff --git a/src/assets/styles/text.scss b/src/assets/styles/text.scss
@@ -64,6 +64,7 @@ $textColors: (
 	"green": "--green",
 	"red": "--red",
 	"yellow": "--yellow",
+	"etherlink-green": "--etherlink-green"
 );
 
 @each $key, $value in $textColors {

diff --git a/src/components/ConnectWidget.vue b/src/components/ConnectWidget.vue
@@ -313,19 +313,19 @@ const {
 	}
 
 	& svg:first-child {
-		fill: var(--green);
+		fill: var(--etherlink-green);
 
 		transform: translateX(16px);
 
-		filter: drop-shadow(0 0px 8px var(--green));
+		filter: drop-shadow(0 0px 8px var(--etherlink-green));
 	}
 
 	& svg:last-child {
-		fill: var(--green);
+		fill: var(--etherlink-green);
 
 		transform: translateX(-16px);
 
-		filter: drop-shadow(0 0px 8px var(--green));
+		filter: drop-shadow(0 0px 8px var(--etherlink-green));
 	}
 }
 
@@ -338,7 +338,7 @@ const {
 	height: 32px;
 
 	border-radius: 8px;
-	background: var(--green);
+	background: var(--etherlink-green);
 	cursor: pointer;
 
 	margin: 0 12px;

diff --git a/src/components/ExplorerLink.vue b/src/components/ExplorerLink.vue
@@ -40,7 +40,7 @@ const props = defineProps({
 	color: var(--txt-primary);
 
 	&:hover {
-		color: var(--green);
+		color: var(--etherlink-green);
 	}
 }
 </style>
diff --git a/src/components/TransferItem.vue b/src/components/TransferItem.vue
@@ -92,7 +92,7 @@ const statusStyle = computed(() => {
 			return {color: `var(--red)`}
 		}
 
-		return {color: `var(--green)`, opacity: 0.8}
+		return {color: `var(--etherlink-green)`, opacity: 0.8}
 	}
 
 	return {color: `var(--blue)`}
@@ -199,7 +199,7 @@ const handleRemove = () => {
 
 					<Text size="16" color="black">Processing..</Text>
 				</Flex>
-				
+
 				<Text v-else size="16" color="black">Finish withdrawal</Text>
 			</Flex>
 		</Flex>
@@ -233,7 +233,7 @@ const handleRemove = () => {
 }
 
 .img {
-	border-radius: 50%;	
+	border-radius: 50%;
 }
 
 .icon_close{
@@ -257,7 +257,7 @@ const handleRemove = () => {
 	height: 32px;
 
 	border-radius: 8px;
-	background: var(--green);
+	background: var(--etherlink-green);
 	opacity: 0.85;
 	cursor: pointer;
 

diff --git a/src/components/TransferWidget.vue b/src/components/TransferWidget.vue
@@ -294,7 +294,7 @@ const warningDisplayed = ref(true)
 				</Flex>
 			</Flex>
 		</Flex>
-		
+
 		<Flex v-if="recentTransfers.length > 0" direction="column" align="center" gap="4">
 			<Flex :class="$style.transfers_header" align="center" flex="start">
 				<Text size="16" color="tertiary">Recent transfers</Text>
@@ -466,7 +466,7 @@ const warningDisplayed = ref(true)
 	height: 32px;
 
 	border-radius: 8px;
-	background: var(--green);
+	background: var(--etherlink-green);
 	opacity: 0.85;
 	cursor: pointer;
 
@@ -495,7 +495,7 @@ const warningDisplayed = ref(true)
 }
 
 .connect_wallets {
-	background: var(--yellow);
+	background: var(--etherlink-green);
 }
 
 .transfers_header {

diff --git a/src/components/ui/Stepper.vue b/src/components/ui/Stepper.vue
@@ -122,7 +122,7 @@ onMounted(() => {
 }
 
 .passed {
-	background-color: var(--green);
+	background-color: var(--etherlink-green);
 
 	animation: none;
 }