update availability status and enhanced styling unavailable-pill

antoniosubasic · Dec 19, 2024 · 2294377 · 2294377
1 parent 1d1b589
commit 2294377
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -5,7 +5,7 @@ import Taskbar from './components/Taskbar.vue'
 </script>
 
 <template>
-  <AvailabilityPill :available="true" availableText="Open for Internships" unavailableText="Currently employed" />
+  <AvailabilityPill :available="false" availableText="Open for Internships" unavailableText="Employed for Internship Position 2025" />
   <Intro class="intro" forename="Antonio" surename="Subašić" />
   <p class="bio">A passionate Computer Science student specializing in software development and problem-solving, with a focus on building efficient, scalable applications and crafting innovative digital solutions.</p>
   <Taskbar

diff --git a/src/components/AvailabilityPill.vue b/src/components/AvailabilityPill.vue
@@ -49,8 +49,8 @@ onMounted(() => {
 }
 
 .pill.unavailable {
-  background-color: #fff0f0;
-  color: #d8000c;
+  background-color: #fff9c4;
+  color: #ff9114;
 }
 
 .dot {
@@ -67,7 +67,7 @@ onMounted(() => {
 }
 
 .dot.unavailable {
-  background-color: #a60005;
+  background-color: #ff9114;
 }
 
 @keyframes expand {
@@ -97,16 +97,16 @@ onMounted(() => {
   }
 
   .pill.unavailable {
-    background-color: #2e0000;
-    color: #ff0d00;
+    background-color: #4e432e;
+    color: #fff59d;
   }
 
   .dot.available {
     background-color: #00ff0d;
   }
 
   .dot.unavailable {
-    background-color: #ff0d00;
+    background-color: #fff59d;
   }
 
   .animate {