From df030d50e31a685ed8efeb11d702fcd689fbecfb Mon Sep 17 00:00:00 2001
From: Hafiz <hafizbhamidi@gmail.com>
Date: Sun, 10 Aug 2025 21:16:46 -0500
Subject: [PATCH] Update G1G1 Notification

- Updated text styling for title & description
- Updated button styling
- Updated close button
---
 .../components/header/notifications/g1g1.vue  | 65 +++++++++----------
 website/common/locales/en/groups.json         |  2 +-
 2 files changed, 31 insertions(+), 36 deletions(-)

diff --git a/website/client/src/components/header/notifications/g1g1.vue b/website/client/src/components/header/notifications/g1g1.vue
index 013bf0370f..3794abebd2 100644
--- a/website/client/src/components/header/notifications/g1g1.vue
+++ b/website/client/src/components/header/notifications/g1g1.vue
@@ -25,24 +25,32 @@
         {{ $t('sendGift') }}
       </div>
     </div>
-    <div
-      class="notification-remove"
-      @click.stop="remove()"
-    >
-      <div
-        v-once
-        class="svg-icon"
-        v-html="icons.close"
-      ></div>
-    </div>
+    <close-x
+      @close="remove()"
+    />
   </div>
 </template>
 
 <style lang='scss' scoped>
   @import '@/assets/scss/colors.scss';
 
-  small, strong {
+  small {
     color: $white;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 14px;
+    line-height: 24px;
+    letter-spacing: 0;
+  }
+
+  strong {
+    color: $white;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 700;
+    font-style: normal;
+    font-size: 14px;
+    line-height: 24px;
   }
 
   .notification {
@@ -55,31 +63,22 @@
     cursor: pointer;
   }
 
-  .notification-remove {
-    position: absolute;
-    width: 18px;
-    height: 18px;
-    padding: 4px;
-    right: 24px;
-    top: 24px;
-
-    .svg-icon {
-      width: 10px;
-      height: 10px;
-    }
-  }
 
   .btn-secondary {
     min-width: 5.75rem;
     width: auto;
     max-width: calc(100% - 2rem);
-    min-height: 1.5rem;
+    min-height: 32px;
     padding: 0.25rem 0.75rem;
     border-radius: 2px;
     border-color: $white;
     box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
-    font-size: 12px;
-    font-weight: bold;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 700;
+    font-style: normal;
+    font-size: 14px;
+    line-height: 24px;
+    color: $gray-50;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -87,17 +86,13 @@
 </style>
 
 <script>
-import closeIcon from '@/assets/svg/close-teal.svg?raw';
+import closeX from '@/components/ui/closeX';
 
 export default {
-  props: ['notification', 'eventKey'],
-  data () {
-    return {
-      icons: Object.freeze({
-        close: closeIcon,
-      }),
-    };
+  components: {
+    closeX,
   },
+  props: ['notification', 'eventKey'],
   methods: {
     remove () {
       if (this.eventKey) {
diff --git a/website/common/locales/en/groups.json b/website/common/locales/en/groups.json
index 2de39ea075..b1ae6565bd 100644
--- a/website/common/locales/en/groups.json
+++ b/website/common/locales/en/groups.json
@@ -116,7 +116,7 @@
   "needsTextPlaceholder": "Type your message here.",
   "messageCopiedToClipboard": "Message copied to clipboard.",
   "leaderOnlyChallenges": "Only group leader can create challenges",
-  "sendGift": "Send a Gift",
+  "sendGift": "Send Gift",
   "selectGift": "Select Gift",
   "selectSubscription": "Select Subscription",
   "sendGiftToWhom": "Who would you like to send a gift to?",