Fixes #631: Fix alignment of Bluesky icon

digimezzo · Jul 31, 2024 · 6a32667 · 6a32667
1 parent 4683c3b
commit 6a32667
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/src/app/ui/components/information/about/about.component.html b/src/app/ui/components/information/about/about.component.html
@@ -14,19 +14,19 @@
     <mat-divider class="my-4"></mat-divider>
     <div class="title">{{ 'contact-us' | translate }}</div>
     <div class="contact-item mb-2 mt-3">
-        <i class="contact-item-icon mr-2 las la-globe"></i>
+        <i class="contact-item-icon las la-globe"></i>
         <a href="{{ websiteUrl }}" matTooltip="{{ websiteUrl }}">{{ 'website' | translate }}</a>
     </div>
     <div class="contact-item mb-2">
-        <i class="contact-item-icon mr-2 lab la-mastodon"></i>
+        <i class="contact-item-icon lab la-mastodon"></i>
         <a href="{{ mastodonUrl }}" matTooltip="{{ mastodonUrl }}">Mastodon</a>
     </div>
     <div class="contact-item mb-2">
-        <i class="contact-item-icon-fa mr-2 fa-brands fa-bluesky"></i>
+        <i class="contact-item-icon-fa fa-brands fa-bluesky"></i>
         <a href="{{ blueskyUrl }}" matTooltip="{{ blueskyUrl }}">Bluesky</a>
     </div>
     <div class="contact-item">
-        <i class="contact-item-icon mr-2 lab la-github"></i>
+        <i class="contact-item-icon lab la-github"></i>
         <a href="{{ githubUrl }}" matTooltip="{{ githubUrl }}">GitHub</a>
     </div>
     <mat-divider class="my-4"></mat-divider>

diff --git a/src/app/ui/components/information/about/about.component.scss b/src/app/ui/components/information/about/about.component.scss
@@ -5,11 +5,12 @@
 }
 
 .contact-item-icon {
+    width: 36px;
     font-size: 28px;
 }
 
 .contact-item-icon-fa {
-    margin-left: 2px;
-    margin-right: 1px;
-    font-size: 20px;
+    padding-left: 3px;
+    width: 36px;
+    font-size: 18px;
 }