Merge pull request #454 from Senryoku/tweak/LayoutIcons

[Client] Layout Icons
Senryoku · May 3, 2023 · c6a5620 · c6a5620
2 parents 881a9ad + 93b2c7c
commit c6a5620
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 28 deletions.
diff --git a/client/src/assets/img/tap-icon.svg b/client/src/assets/img/tap-icon.svg
diff --git a/client/src/components/CardImage.vue b/client/src/components/CardImage.vue
@@ -29,34 +29,10 @@
 			class="split-button"
 			:class="{ 'battle-button': card.type.includes('Battle') }"
 		>
-			<font-awesome-layers>
-				<font-awesome-icon
-					icon="fa-solid fa-arrow-rotate-right"
-					class="split-icon"
-					transform="grow-2"
-					size="lg"
-					style="color: black"
-				></font-awesome-icon>
-				<font-awesome-icon
-					icon="fa-solid fa-arrow-rotate-right"
-					class="split-icon"
-					size="lg"
-				></font-awesome-icon>
-			</font-awesome-layers>
+			<img src="../assets/img/tap-icon.svg" class="split-icon" />
 		</div>
 		<div v-if="card.layout === 'split-left'" class="split-left-button">
-			<font-awesome-layers>
-				<font-awesome-icon
-					icon="fa-solid fa-arrow-rotate-left"
-					class="split-left-icon"
-					transform="grow-2"
-					size="lg"
-					style="color: black"
-				>
-				</font-awesome-icon>
-				<font-awesome-icon icon="fa-solid fa-arrow-rotate-left" class="split-left-icon" size="lg">
-				</font-awesome-icon>
-			</font-awesome-layers>
+			<img src="../assets/img/tap-icon.svg" class="split-left-icon" />
 		</div>
 		<div :class="{ 'flip-container': hasBack }">
 			<clazy-load
@@ -221,7 +197,7 @@ img {
 }
 
 .battle-button {
-	right: 1.8em;
+	right: 1.4em;
 }
 
 .booster .flip-button,
@@ -294,15 +270,20 @@ img {
 .split-icon,
 .split-left-icon {
 	transition: transform 0.2s, text-shadow 0.2s;
+	width: 1em;
 	color: white;
 }
 
 .split-button:hover .split-icon {
 	transform: rotateZ(90deg);
 }
 
+.split-left-icon {
+	transform: scaleX(-1);
+}
+
 .split-left-button:hover .split-left-icon {
-	transform: rotateZ(-89.999deg);
+	transform: rotateZ(-89.999deg) scaleX(-1);
 }
 
 .split-button ~ div .front-image,