aboutsummaryrefslogtreecommitdiffstats
path: root/server/sonar-web/src/main/js/app/components/promotion-notification/PromotionNotification.tsx
diff options
context:
space:
mode:
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.tsx63
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')};
+`;