update home hero

OpenMeet-Team · Jan 11, 2025 · e59deba · e59deba
1 parent dcc3620
commit e59deba
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 3 deletions.
diff --git a/src/components/common/ShareComponent.vue b/src/components/common/ShareComponent.vue
@@ -9,6 +9,7 @@
     data-cy="share-button"
   >
     <q-list>
+      <MenuItemComponent label="Bluesky" icon="fab fa-bluesky" icon-color="blue" @click="shareTo('bluesky')"/>
       <MenuItemComponent label="Facebook" icon="fab fa-facebook" icon-color="blue" @click="shareTo('facebook')"/>
       <MenuItemComponent label="X" icon="fab fa-square-x-twitter" icon-color="black" @click="shareTo('x')"/>
       <MenuItemComponent label="LinkedIn" icon="fab fa-linkedin" icon-color="blue-8" @click="shareTo('linkedin')"/>
@@ -24,6 +25,7 @@ import MenuItemComponent from 'components/common/MenuItemComponent.vue'
 
 // Define the URLs for each social media platform
 const shareUrls = {
+  bluesky: (url: string) => `https://bsky.app/intent/compose?text=${encodeURIComponent(url)}`,
   facebook: (url: string) => `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`,
   x: (url: string, text: string) => `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`,
   linkedin: (url: string) => `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`,

diff --git a/src/components/group/GroupLeadComponent.vue b/src/components/group/GroupLeadComponent.vue
@@ -27,16 +27,16 @@ const { navigateToMember } = useNavigation()
         <q-card-section>
           <div class="text-h4 text-bold q-py-none q-mb-md" data-cy="group-name">{{ group.name }}</div>
           <div class="row items-start no-wrap" v-if="group.location">
-            <q-icon size="sm" left name="sym_r_location_on"/>
+            <q-icon size="sm" left name="sym_r_location_on" class="text-purple-300"/>
             <div class="text-body1">{{ group.location }}</div>
           </div>
           <div class="row items-start no-wrap q-mt-xs">
-            <q-icon size="sm" left name="sym_r_people"/>
+            <q-icon size="sm" left name="sym_r_people" class="text-purple-300"/>
             <div class="text-body1 q-mr-sm">{{ group.groupMembersCount }} {{ pluralize(group.groupMembersCount as number, 'member') }}</div>|
             <div class="text-body1 q-ml-sm">{{ group.visibility }} group</div>
           </div>
           <div class="row items-start q-mt-xs" v-if="group.createdBy">
-            <q-icon size="sm" left name="sym_r_person"/>
+            <q-icon size="sm" left name="sym_r_person" class="text-purple-300"/>
             <div class="text-body1 cursor-pointer">Organised by <span class="router-link-inherit" v-if="group.createdBy" @click.stop="navigateToMember(group.createdBy)">{{ group.createdBy.name }}</span></div>
           </div>
         </q-card-section>

diff --git a/src/components/home/HomeHeroComponent.vue b/src/components/home/HomeHeroComponent.vue
@@ -130,5 +130,8 @@ const onJoinNowClick = () => {
 :deep(.q-btn) {
   text-transform: uppercase;
   font-weight: 600;
+  color: white;
+  background: linear-gradient(to right, $purple-400, $purple-200);
 }
+
 </style>
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
@@ -127,6 +127,14 @@ $warning: $orange;
   background-color: $purple-500;
 }
 
+.text-purple-200 {
+  color: $purple-200;
+}
+
+.text-purple-300 {
+  color: $purple-300;
+}
+
 .text-purple-400 {
   color: $purple-400;
 }