Merge pull request #11129 from overleaf/jel-survey-link-mobile

[web] Fix line height for survey text on mobile

GitOrigin-RevId: f96e682b8534d7404c89b45ad4264538bf8a0a2e

services/web/frontend/js/features/project-list/components/survey-widget.tsx

@@ -19,26 +19,33 @@ export default function SurveyWidget() {
   }
 
   return (
-    <>
-      <button
-        className="project-list-sidebar-survey-dismiss"
-        type="button"
-        title="Dismiss Overleaf survey"
-        onClick={dismissSurvey}
-      >
-        <span aria-hidden>&times;</span>
-      </button>
-      <div className="project-list-sidebar-survey">
-        {survey.preText}&nbsp;
-        <a
-          className="project-list-sidebar-survey-link"
-          href={survey.url}
-          target="_blank"
-          rel="noreferrer noopener"
-        >
-          {survey.linkText}
-        </a>
+    <div className="user-notifications">
+      <div className="notification-entry">
+        <div role="alert" className="alert alert-info-alt">
+          <div className="notification-body">
+            {survey.preText}&nbsp;
+            <a
+              className="project-list-sidebar-survey-link"
+              href={survey.url}
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              {survey.linkText}
+            </a>
+          </div>
+          <div className="notification-close">
+            <button
+              type="button"
+              className="close pull-right"
+              title="Dismiss Overleaf survey"
+              onClick={dismissSurvey}
+            >
+              <span aria-hidden="true">&times;</span>
+              <span className="sr-only">Dismiss Overleaf survey</span>
+            </button>
+          </div>
+        </div>
       </div>
-    </>
+    </div>
   )
 }

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

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

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;

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;