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,16 +19,10 @@ export default function SurveyWidget() {
   }
 
   return (
-    <>
+    <div className="user-notifications">
-      <button
+      <div className="notification-entry">
-        className="project-list-sidebar-survey-dismiss"
+        <div role="alert" className="alert alert-info-alt">
-        type="button"
+          <div className="notification-body">
-        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"
@@ -39,6 +33,19 @@ export default function SurveyWidget() {
               {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 {
+  .alert-info-alt {
-    position: relative;
+    font-size: @font-size-small;
-    z-index: 1;
+    margin-bottom: 0;
-    float: right;
+
+    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;