Skip to content

Fix TypeScript compilation error in Framna announcement hook - #5421

Draft
miensol with Copilot wants to merge 5 commits into
gatsbyfrom
copilot/add-announcement-banner
Draft

Fix TypeScript compilation error in Framna announcement hook#5421
miensol with Copilot wants to merge 5 commits into
gatsbyfrom
copilot/add-announcement-banner

Conversation

Copilot AI commented Feb 20, 2026 •
edited
Loading

Copy link
Copy Markdown

Framna Announcement Modal - Fixes

Fixed two issues based on design feedback:

Changes Made

  1. Fixed Framna logo - Replaced placeholder icon with SVG representation of the Framna "f" logo symbol
  2. Fixed button hover state - Added explicit color: #fff to maintain white text on hover

Technical Details

  • Updated LogoIcon from CSS pseudo-elements to proper SVG element
  • Added color: #fff to VisitButton:hover to prevent text color from changing on hover
  • Adjusted logo gap spacing for better visual alignment

Addresses feedback from @izabelapawlik

Original prompt

This section details on the original issue you should resolve

<issue_title>Bright Inventions joins Framna annoucment</issue_title>
<issue_description>You're an experienced gatsby engineer. Your goal is to update staging branch with the following banner which announced that bright inventions joined Framna.

See the attached files to see the design.

Image Image

Here's a sample (iframe preview) html that can be used if needed:

<html lang="en"><head>
  <meta charset="utf-8">

  
  
  
  <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta property="og:description" content="">
    <meta property="og:title" content="">
    <meta name="twitter:description" content="">
    <meta name="twitter:title" content="">

    
    <style>
a.cta_button{-moz-box-sizing:content-box !important;-webkit-box-sizing:content-box !important;box-sizing:content-box !important;vertical-align:middle}.hs-breadcrumb-menu{list-style-type:none;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px}.hs-breadcrumb-menu-item{float:left;padding:10px 0px 10px 10px}.hs-breadcrumb-menu-divider:before{content:'›';padding-left:10px}.hs-featured-image-link{border:0}.hs-featured-image{float:right;margin:0 0 20px 20px;max-width:50%}@media (max-width: 568px){.hs-featured-image{float:none;margin:0;width:100%;max-width:100%}}.hs-screen-reader-text{clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute !important;width:1px}
</style>

<link rel="stylesheet" href="https://7052064.fs1.hubspotusercontent-na1.net/hubfs/7052064/hub_generated/module_assets/1/-53649664999/1771537962871/module_button_interactive.min.css">
<style>
  @font-face {
    font-family: "Inter";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url("/_hcms/googlefonts/Inter/500.woff2") format("woff2"), url("/_hcms/googlefonts/Inter/500.woff") format("woff");
  }
  @font-face {
    font-family: "Inter";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("/_hcms/googlefonts/Inter/regular.woff2") format("woff2"), url("/_hcms/googlefonts/Inter/regular.woff") format("woff");
  }
  @font-face {
    font-family: "Inter";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("/_hcms/googlefonts/Inter/700.woff2") format("woff2"), url("/_hcms/googlefonts/Inter/700.woff") format("woff");
  }
</style>

<!-- Editor Styles -->
<style id="hs_editor_style" type="text/css">
#hs_cos_wrapper_dnd_area-module-4  { display: block !important; margin-bottom: 0px !important; margin-top: 0px !important; padding-bottom: 10px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 10px !important }
#hs_cos_wrapper_dnd_area-module-6  { display: block !important; margin-bottom: 20px !important; margin-top: 0px !important; padding-bottom: 10px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 10px !important }
#hs_cos_wrapper_dnd_area-module-4  { display: block !important; margin-bottom: 0px !important; margin-top: 0px !important; padding-bottom: 10px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 10px !important }
#hs_cos_wrapper_dnd_area-module-6  { display: block !important; margin-bottom: 20px !important; margin-top: 0px !important; padding-bottom: 10px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 10px !important }
.dnd_area-module-4-flexbox-positioning {
  display: -ms-flexbox !important;
  -ms-flex-direction: column !important;
  -ms-flex-align: start !important;
  -ms-flex-pack: start;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start;
}
.dnd_area-module-4-flexbox-positioning > div {
  max-width: 100%;
  flex-shrink: 0 !important;
}
.dnd_area-module-6-flexbox-positioning {
  display: -ms-flexbox !important;
  -ms-flex-direction: column !important;
  -ms-flex-align: start !important;
  -ms-flex-pack: start;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start;
}
.dnd_area-module-6-flexbox-positioning > div {
  max-width: 100%;
  flex-shrink: 0 !important;
}
.dnd_area-module-7-flexbox-positioning {
  display: -ms-flexbox !important;
  -ms-flex-direction: column !important;
  -ms-flex-align: start !important;
  -ms-flex-pack: start;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start;
}
.dnd_area-module-7-flexbox-positioning > div {
  max-width: 100%;
  flex-shrink: 0 !important;
}
.dnd_area-module-2-flexbox-positioning {
  display: -ms-fle...

</details>



<!-- START COPILOT CODING AGENT SUFFIX -->

- Fixes bright/new-www#5420

<!-- START COPILOT CODING AGENT TIPS -->
---

✨ Let Copilot coding agent [set things up for you](https://github.com/bright/new-www/issues/new?title=✨+Set+up+Copilot+instructions&body=Configure%20instructions%20for%20this%20repository%20as%20documented%20in%20%5BBest%20practices%20for%20Copilot%20coding%20agent%20in%20your%20repository%5D%28https://gh.io/copilot-coding-agent-tips%29%2E%0A%0A%3COnboard%20this%20repo%3E&assignees=copilot) — coding agent works faster and does higher quality work when set up for your repo.

Copilot AI and others added 2 commits February 20, 2026 10:30
@miensol
Add Framna announcement modal component and integrate into Page layout
6fa0f70 
Co-authored-by: miensol <357191+miensol@users.noreply.github.com>
@miensol
Improve modal styling to better match design specifications
bf129bc 
Co-authored-by: miensol <357191+miensol@users.noreply.github.com>
Copilot AI changed the title [WIP] Add banner for Bright Inventions joining Framna Add Framna acquisition announcement modal Feb 20, 2026
Copilot AI requested a review from miensol February 20, 2026 10:36
@miensol
Fix TypeScript error - add explicit return in useEffect hook
bc5c6a2 
Co-authored-by: miensol <357191+miensol@users.noreply.github.com>
Copilot AI changed the title Add Framna acquisition announcement modal Fix TypeScript compilation error in Framna announcement hook Feb 20, 2026
@izabelapawlik

izabelapawlik commented Feb 20, 2026

Copy link
Copy Markdown
Collaborator

Framna logo is not correct. Please verify it. Also, when I hover over the button, the font color changes to black — keep the colour of CTA as it is.

@miensol

miensol commented Feb 20, 2026

Copy link
Copy Markdown
Member

@copilot please address the above comment from @izabelapawlik

@miensol
Fix Framna logo and button hover color
ab2d9d9 
Co-authored-by: miensol <357191+miensol@users.noreply.github.com>

Copilot AI commented Feb 20, 2026 •
edited
Loading

Copy link
Copy Markdown
Author

@copilot please address the above comment from @izabelapawlik

Fixed both issues in commit ab2d9d9:

  1. Framna logo - Replaced the placeholder icon with an SVG that represents the Framna "f" logo symbol with the characteristic curved design
  2. Button hover color - Added explicit color: #fff to the hover state to keep the button text white

The button now maintains white text color on hover instead of changing to black.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • 7052064.fs1.hubspotusercontent-na1.net
    • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node /home/REDACTED/work/_temp/ghcca-node/node/bin/node --enable-source-maps /home/REDACTED/work/_temp/copilot-developer-action-main/dist/index.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

@miensol

miensol commented Feb 20, 2026

Copy link
Copy Markdown
Member

@copilot Take a close look at the attached design. The logo part, including Framna name must look exactly as in the pictures. See attached image for logo itself
Black

@izabelapawlik

izabelapawlik commented Feb 27, 2026

Copy link
Copy Markdown
Collaborator

When you click the button, it should direct to this address: https://framna.com?utm_source=brightinventions.pl&utm_medium=banner&utm_campaign=pl-redirect @miensol pls pass it over. 🙏🏻

@izabelapawlik

izabelapawlik commented Mar 2, 2026

Copy link
Copy Markdown
Collaborator

Change this copy: Bontouch, Shape, Move and Bright Inventions have come together as Framna — the people behind the world's favorite digital products.
To this: We partner with industry leaders (and those about to be) to create digital products that define markets, reshape industries, and drive meaningful growth. @miensol

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@miensol miensol Awaiting requested review from miensol

Assignees

@miensol miensol

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@izabelapawlik @miensol