improve social icons

rafa-lopes-pt · Jul 31, 2024 · 64a90cd · 64a90cd
1 parent 75a79f1
commit 64a90cd
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 8 deletions.
diff --git a/frontend/src/components/misc/Icons.tsx b/frontend/src/components/misc/Icons.tsx
@@ -3,6 +3,9 @@ enum FontAwesomeIcons {
     youtube = "fa-brands fa-youtube",
     facebook = "fa-brands fa-facebook",
     instagram = "fa-brands fa-instagram",
+    github = "fa-brands fa-github",
+    linkedin = "fa-brands fa-linkedin",
+    mail = "fa-solid fa-envelopes-bulk",
     hamburger = "fa-solid fa-bars",
     left = "fa-solid fa-circle-chevron-left",
     right = "fa-solid fa-circle-chevron-right",

diff --git a/frontend/src/pages/App.tsx b/frontend/src/pages/App.tsx
@@ -72,9 +72,9 @@ function App() {
 
 				{/* social icons */}
 				<div className="social-icons">
-					<IconButton icon={FontAwesomeIcons.youtube} />
-					<IconButton icon={FontAwesomeIcons.facebook} />
-					<IconButton icon={FontAwesomeIcons.instagram} />
+					<a href="https://github.com/rafa-lopes-pt/tea-shop" target="_blank" rel="noopener noreferrer"><IconButton icon={FontAwesomeIcons.github} /></a>
+					<a href="https://www.linkedin.com/in/rafael-lopes-software-developer/" target="_blank" rel="noopener noreferrer"><IconButton icon={FontAwesomeIcons.linkedin} /></a>
+					<a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer"><IconButton icon={FontAwesomeIcons.mail} /></a>
 				</div>
 
 				<AnimatePresence>

diff --git a/frontend/src/sass/pages/_app.scss b/frontend/src/sass/pages/_app.scss
@@ -80,13 +80,14 @@
 	gap: 1em;
 	padding: 1em 0em;
 
-	& > * {
+	& * {
 		max-width: 100%;
+		margin: auto;
 	}
 	@include media-query.small-screen() {
 		flex-direction: row;
 		align-items: center;
 		justify-content: space-evenly;
-		font-size: 0.5rem;
+		font-size: 0.8rem;
 	}
 }
diff --git a/frontend/src/sass/sass.css b/frontend/src/sass/sass.css