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}
-
+
+
+
+
+
+
+
+
- >
+
)
}
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;