From 26844e49b237aaa87d8f1ea0f313dfa6a09058d4 Mon Sep 17 00:00:00 2001
From: Muhammad Hamza <hamza.6.shakeel@gmail.com>
Date: Tue, 17 Sep 2024 16:27:35 +0500
Subject: [PATCH] fa library added

---
 lib/main.dart                | 7 +++++++
 lib/pages/home.dart          | 1 +
 lib/sections/about_me.dart   | 5 +++--
 lib/sections/basic_info.dart | 4 +++-
 lib/sections/services.dart   | 3 +--
 web/icons/play-solid.svg     | 1 -
 6 files changed, 15 insertions(+), 6 deletions(-)
 delete mode 100644 web/icons/play-solid.svg

diff --git a/lib/main.dart b/lib/main.dart
index 743f50a5..364dfca0 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -24,6 +24,13 @@ void main() {
   // with the provided parameters and components.
   runApp(Document(
     title: 'Hamza',
+    head: <Component>[
+      link(
+        href:
+            'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css',
+        rel: 'stylesheet',
+      ),
+    ],
     styles: [
       // Special import rule to include to another css file.
       css.import('https://fonts.googleapis.com/css?family=Montserrat'),
diff --git a/lib/pages/home.dart b/lib/pages/home.dart
index bd085461..1aeb8bea 100644
--- a/lib/pages/home.dart
+++ b/lib/pages/home.dart
@@ -22,6 +22,7 @@ class Home extends StatelessComponent {
     css('.home-body')
         .box(
           width: 100.vw,
+          padding: EdgeInsets.symmetric(horizontal: 50.px),
         )
         .background(
           color: Colors.black,
diff --git a/lib/sections/about_me.dart b/lib/sections/about_me.dart
index 690708bc..921cd139 100644
--- a/lib/sections/about_me.dart
+++ b/lib/sections/about_me.dart
@@ -82,7 +82,7 @@ class AboutMeSection extends StatelessComponent {
           div(classes: 'tech-stack', [
             for (final t in tech)
               span([
-                img(src: StaticAssets.playIcon, height: 10),
+                i(classes: 'fa-solid fa-play play-icon', []),
                 span(classes: 'tech-item', [
                   text(t),
                 ]),
@@ -158,8 +158,9 @@ class AboutMeSection extends StatelessComponent {
           justifyContent: JustifyContent.start,
         )
         .box(
-          padding: EdgeInsets.only(top: 5.vh, right: 5.vw),
+          padding: EdgeInsets.only(top: 5.vh),
         ),
+    css('.play-icon').text(color: primaryColor),
     css('.title').text(
       fontFamily: FontFamily('Montserrat'),
       fontWeight: FontWeight.w100,
diff --git a/lib/sections/basic_info.dart b/lib/sections/basic_info.dart
index fe34e816..8037d084 100644
--- a/lib/sections/basic_info.dart
+++ b/lib/sections/basic_info.dart
@@ -1,3 +1,4 @@
+import 'package:devfolio/constants/theme.dart';
 import 'package:devfolio/utils/assets.dart';
 import 'package:jaspr/jaspr.dart';
 
@@ -21,7 +22,7 @@ class BasicInfoSection extends StatelessComponent {
         h1(classes: 'first-name', [text('Muhammad')]),
         h1(classes: 'last-name', [text('Hamza')]),
         span(classes: 'subtitle', [
-          img(classes: 'play-icon', src: StaticAssets.playIcon, height: 20),
+          i(classes: 'fa-solid fa-play play-icon', []),
           span(classes: 'dynamic-subtitles', [
             text('Flutter Enthusiast'),
           ])
@@ -72,6 +73,7 @@ class BasicInfoSection extends StatelessComponent {
           image: ImageStyle.url(StaticAssets.bwImage),
           size: BackgroundSize.cover,
         ),
+    css('.play-icon').text(color: primaryColor),
     css('.subtitle')
         .flexbox(direction: FlexDirection.row, alignItems: AlignItems.center),
     css('.dynamic-subtitles')
diff --git a/lib/sections/services.dart b/lib/sections/services.dart
index 8cb788ca..3ab1c7a0 100644
--- a/lib/sections/services.dart
+++ b/lib/sections/services.dart
@@ -56,7 +56,7 @@ class ServicesSection extends StatelessComponent {
           justifyContent: JustifyContent.start,
         )
         .box(
-          padding: EdgeInsets.only(top: 5.vh, right: 5.vw),
+          padding: EdgeInsets.symmetric(vertical: 5.vh),
         ),
     css('.title').text(
       fontFamily: FontFamily('Montserrat'),
@@ -72,7 +72,6 @@ class ServicesSection extends StatelessComponent {
         )
         .box(
           margin: EdgeInsets.only(top: 50.px),
-          width: 100.percent,
         ),
   ];
 }
diff --git a/web/icons/play-solid.svg b/web/icons/play-solid.svg
deleted file mode 100644
index 36054df9..00000000
--- a/web/icons/play-solid.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#c0392b" d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>
\ No newline at end of file