diff options
Diffstat (limited to 'server/sonar-web/src/main/js/app/components/promotion-notification/PromotionNotification.tsx')
-rw-r--r-- | server/sonar-web/src/main/js/app/components/promotion-notification/PromotionNotification.tsx | 63 |
1 files changed, 38 insertions, 25 deletions
diff --git a/server/sonar-web/src/main/js/app/components/promotion-notification/PromotionNotification.tsx b/server/sonar-web/src/main/js/app/components/promotion-notification/PromotionNotification.tsx index cd423d7a912..b47b0ebf588 100644 --- a/server/sonar-web/src/main/js/app/components/promotion-notification/PromotionNotification.tsx +++ b/server/sonar-web/src/main/js/app/components/promotion-notification/PromotionNotification.tsx @@ -17,58 +17,71 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +import styled from '@emotion/styled'; +import { ButtonPrimary, ButtonSecondary, themeBorder, themeColor } from 'design-system'; import * as React from 'react'; import { dismissNotice } from '../../../api/users'; -import { ButtonLink } from '../../../components/controls/buttons'; import { translate } from '../../../helpers/l10n'; import { getBaseUrl } from '../../../helpers/system'; -import { isLoggedIn, NoticeType } from '../../../types/users'; +import { NoticeType, isLoggedIn } from '../../../types/users'; import { CurrentUserContextInterface } from '../current-user/CurrentUserContext'; import withCurrentUserContext from '../current-user/withCurrentUserContext'; -import './PromotionNotification.css'; export function PromotionNotification(props: CurrentUserContextInterface) { - const { currentUser } = props; + const { currentUser, updateDismissedNotices } = props; - if (!isLoggedIn(currentUser) || currentUser.dismissedNotices[NoticeType.SONARLINT_AD]) { - return null; - } - - const onClick = () => { - dismissNotice(NoticeType.SONARLINT_AD) + const onClick = React.useCallback(() => { + return dismissNotice(NoticeType.SONARLINT_AD) .then(() => { - props.updateDismissedNotices(NoticeType.SONARLINT_AD, true); + updateDismissedNotices(NoticeType.SONARLINT_AD, true); }) .catch(() => { /* noop */ }); - }; + }, [updateDismissedNotices]); + + if (!isLoggedIn(currentUser) || currentUser.dismissedNotices[NoticeType.SONARLINT_AD]) { + return null; + } return ( - <div className="toaster sw-flex sw-items-center sw-px-4"> + <PromotionNotificationWrapper className="it__promotion_notification sw-z-global-popup sw-rounded-1 sw-flex sw-items-center sw-px-4"> <div className="sw-mr-2"> <img alt="SonarQube + SonarLint" height={80} src={`${getBaseUrl()}/images/sq-sl.svg`} /> </div> - <div className="toaster-content sw-flex-1 sw-px-2 sw-py-4"> + <PromotionNotificationContent className="sw-flex-1 sw-px-2 sw-py-4"> <span className="sw-body-sm-highlight">{translate('promotion.sonarlint.title')}</span> <p className="sw-mt-2">{translate('promotion.sonarlint.content')}</p> - </div> - <div className="toaster-actions spacer-left padded-left display-flex-column display-flex-center"> - <a - className="button button-primary sw-mb-4" - href="https://www.sonarsource.com/products/sonarlint/?referrer=sonarqube-welcome" - rel="noreferrer" + </PromotionNotificationContent> + <div className="sw-ml-2 sw-pl-2 sw-flex sw-flex-col sw-items-stretch"> + <ButtonPrimary + className="sw-mb-4" + to="https://www.sonarsource.com/products/sonarlint/?referrer=sonarqube-welcome" onClick={onClick} - target="_blank" > {translate('learn_more')} - </a> - <ButtonLink className="toaster-link" onClick={onClick}> + </ButtonPrimary> + <ButtonSecondary className="sw-justify-center" onClick={onClick}> {translate('dismiss')} - </ButtonLink> + </ButtonSecondary> </div> - </div> + </PromotionNotificationWrapper> ); } export default withCurrentUserContext(PromotionNotification); + +const PromotionNotificationWrapper = styled.div` + position: fixed; + right: 10px; + bottom: 10px; + max-width: 600px; + box-shadow: 1px 1px 5px 0px black; + + background: ${themeColor('promotionNotificationBackground')}; + color: ${themeColor('promotionNotification')}; +`; + +const PromotionNotificationContent = styled.div` + border-right: ${themeBorder('default', 'promotionNotificationSeparator')}; +`; |