diff --git a/services/web/frontend/js/features/project-list/components/survey-widget.tsx b/services/web/frontend/js/features/project-list/components/survey-widget.tsx index 3d160620a9..127ad19e4a 100644 --- a/services/web/frontend/js/features/project-list/components/survey-widget.tsx +++ b/services/web/frontend/js/features/project-list/components/survey-widget.tsx @@ -19,26 +19,33 @@ export default function SurveyWidget() { } return ( - <> - -
- {survey.preText}  - - {survey.linkText} - +
+
+
+
+ {survey.preText}  + + {survey.linkText} + +
+
+ +
+
- +
) } diff --git a/services/web/frontend/stylesheets/app/project-list-react.less b/services/web/frontend/stylesheets/app/project-list-react.less index a66fe572cc..4d455924f4 100644 --- a/services/web/frontend/stylesheets/app/project-list-react.less +++ b/services/web/frontend/stylesheets/app/project-list-react.less @@ -730,20 +730,22 @@ left: 0; width: 15%; - .project-list-sidebar-survey-dismiss { - position: relative; - z-index: 1; - float: right; + .alert-info-alt { + font-size: @font-size-small; + margin-bottom: 0; + + a { + text-decoration: none; + } } @media (max-width: @screen-xs-max) { - line-height: @mobile-action-element-height; position: static; display: block; margin-top: @margin-sm; width: initial; - .project-list-sidebar-survey { + .alert-info-alt { font-size: unset; &:before { @@ -751,17 +753,12 @@ } .project-list-sidebar-survey-link { - display: inline-flex; + display: block; align-items: center; min-width: @mobile-action-element-width; min-height: @mobile-action-element-height; + padding-top: @padding-md; } } - - .project-list-sidebar-survey-dismiss { - width: @mobile-action-element-width; - height: @mobile-action-element-height; - border: 0; - } } } diff --git a/services/web/frontend/stylesheets/components/alerts.less b/services/web/frontend/stylesheets/components/alerts.less index 817bf906a9..e84a12d6e4 100755 --- a/services/web/frontend/stylesheets/components/alerts.less +++ b/services/web/frontend/stylesheets/components/alerts.less @@ -67,6 +67,10 @@ .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text); } +.alert-info-alt { + .alert-variant(@alert-info-alt-bg; @alert-info-alt-border; @alert-info-alt-text); +} + .btn-alert-info { .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border); .alert-btn(@btn-info-bg); diff --git a/services/web/frontend/stylesheets/core/variables.less b/services/web/frontend/stylesheets/core/variables.less index 5c505cc285..abea268ddb 100644 --- a/services/web/frontend/stylesheets/core/variables.less +++ b/services/web/frontend/stylesheets/core/variables.less @@ -646,6 +646,10 @@ @alert-info-text: #fff; @alert-info-border: transparent; +@alert-info-alt-bg: @v2-dash-pane-bg; +@alert-info-alt-text: @v2-dash-pane-subdued-color; +@alert-info-alt-border: transparent; + @alert-warning-bg: @brand-warning; @alert-warning-text: #fff; @alert-warning-border: transparent; diff --git a/services/web/frontend/stylesheets/variables/all.less b/services/web/frontend/stylesheets/variables/all.less index 2da309bf3b..039aec49a4 100644 --- a/services/web/frontend/stylesheets/variables/all.less +++ b/services/web/frontend/stylesheets/variables/all.less @@ -571,6 +571,10 @@ @alert-info-text: #fff; @alert-info-border: transparent; +@alert-info-alt-bg: @v2-dash-pane-bg; +@alert-info-alt-text: @v2-dash-pane-subdued-color; +@alert-info-alt-border: transparent; + @alert-warning-bg: @brand-warning; @alert-warning-text: #fff; @alert-warning-border: transparent;