Use app logo on landing page

Author: kadiryazici

src/components/EmptyState.vue

@@ -22,12 +22,19 @@ withDefaults(defineProps<Props>(), {
 
 <template>
   <div class="empty-state">
-    <Component
-      :is="icon"
-      v-if="icon != null"
-      class="empty-state-icon"
-      :class="{ 'empty-state-icon-big': iconSize === EmptyStateIconSize.Big }"
-    />
+    <div
+      v-if="icon != null || $slots.icon != null"
+      class="empty-state-icon-wrapper"
+    >
+      <slot name="icon">
+        <Component
+          :is="icon"
+          v-if="icon != null"
+          class="empty-state-icon"
+          :class="{ 'empty-state-icon-big': iconSize === EmptyStateIconSize.Big }"
+        />
+      </slot>
+    </div>
 
     <PageHeader>
       {{ description }}
@@ -58,7 +65,10 @@ withDefaults(defineProps<Props>(), {
   &-icon {
     font-size: 30px;
     color: var(--white);
-    margin-bottom: 15px;
+
+    &-wrapper {
+      margin-bottom: 15px
+    }
 
     &-big {
       font-size: 50px;

src/pages/LandingPage.vue

@@ -47,10 +47,15 @@ function handleLogin() {
 </script>
 
 <template>
-  <EmptyState
-    :icon="Icons.Github"
-    description="Welcome to Gitification"
-  >
+  <EmptyState description="Welcome to Gitification">
+    <template #icon>
+      <img
+        width="75"
+        height="75"
+        src="/src/assets/img/icon.png"
+      >
+    </template>
+
     <template #footer>
       <AppButton @click="handleLogin">
         Log in via Github