Fix icon alignment

wmde · Nov 24, 2023 · 5d2b56b · 5d2b56b
1 parent 3adf58c
commit 5d2b56b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/dashboard/components/BannerCampaign.vue b/dashboard/components/BannerCampaign.vue
@@ -18,7 +18,7 @@
 					{{ campaign.campaign }}
 				</a>
 				<a v-if="pullRequestUrl==='https://github.com/wmde/fundraising-banners/pulls'"
-					class="banner-actions-icon"
+					class="pr-icon"
 					data-tooltip="Go to PR overview"
 					:href="pullRequestUrl"
 					target="_blank"
@@ -27,7 +27,7 @@
 					<IconPullRequest/>
 				</a>
 				<a v-else
-					class="banner-actions-icon"
+					class="pr-icon"
 					data-tooltip="Go to GitHub PR"
 					:href="pullRequestUrl"
 					target="_blank"

diff --git a/dashboard/styles.scss b/dashboard/styles.scss
@@ -252,3 +252,19 @@ a {
 	font-weight: bold;
 	padding: 10px 10px 0 0;
 }
+
+.pr-icon {
+	float: right;
+	display: flex;
+	height: 40px;
+	width: 40px;
+	justify-content: center;
+	align-items: center;
+	opacity: 0.4;
+	transition: opacity 500ms ease-in-out;
+
+	&:hover,
+	&:focus {
+		opacity: 1;
+	}
+}