Merge pull request #2497 from overleaf/pr-add-dropbox-survey-link

Add dropbox survey link.

GitOrigin-RevId: cfb23c88a38833ff56170c35fea1c78b1172edd3

services/web/app/views/project/list.pug

@@ -47,6 +47,28 @@ block content
 						aside.project-list-sidebar
 							include ./list/side-bar
 
+						.project-list-sidebar-survey(
+							ng-if="shouldShowSurveyLink"
+							ng-cloak
+						)
+							| What would you like to see next in Overleaf?
+							| 
+							|
+							a.project-list-sidebar-survey-link(
+								href="https://forms.gle/om5t48UUj7LecHMP8"
+								target="_blank"
+								rel="noreferrer noopener"
+							) Take our short survey
+							| .
+							button.project-list-sidebar-survey-dismiss(
+								type="button"
+								title="Dismiss Overleaf survey"
+								ng-click="dismissSurvey()"
+							)
+								span(
+									aria-hidden="true"
+								) ×
+
 					.project-list-main.col-md-10.col-xs-9
 						include ./list/notifications
 						include ./list/project-list

services/web/frontend/js/main/project-list/project-list.js

@@ -25,6 +25,17 @@ define(['base', 'main/project-list/services/project-list'], function(App) {
         newValue === 'ownerName' ? ownerNameComparator : defaultComparator
     })
 
+    $scope.shouldShowSurveyLink = true
+
+    if (localStorage('dismissed-db-survey') === true) {
+      $scope.shouldShowSurveyLink = false
+    }
+
+    $scope.dismissSurvey = () => {
+      localStorage('dismissed-db-survey', true)
+      $scope.shouldShowSurveyLink = false
+    }
+
     $timeout(() => recalculateProjectListHeight(), 10)
 
     $scope.$watch(

services/web/frontend/stylesheets/app/sidebar-v2-dash-pane.less

@@ -11,6 +11,51 @@
   padding-right: 15px;
 }
 
+.project-list-sidebar-survey {
+  position: relative;
+  font-size: @font-size-small;
+  background-color: @v2-dash-pane-bg;
+  color: @v2-dash-pane-subdued-color;
+  padding: @folders-menu-item-v-padding 20px @folders-menu-item-v-padding
+    @folders-menu-item-h-padding;
+  &::before {
+    content: '';
+    display: block;
+    height: 15px;
+    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1), transparent);
+    position: absolute;
+    bottom: 100%;
+    width: 100%;
+    left: 0;
+  }
+}
+.project-list-sidebar-survey-link {
+  color: @v2-dash-pane-color;
+  font-weight: bold;
+  &:hover,
+  &:active,
+  &:focus {
+    text-decoration: none;
+    color: @v2-dash-pane-color;
+  }
+}
+
+.project-list-sidebar-survey-dismiss {
+  .btn-inline-link;
+  position: absolute;
+  top: @folders-menu-item-v-padding;
+  right: @folders-menu-item-v-padding;
+  font-size: @font-size-base;
+  line-height: 1;
+  color: @v2-dash-pane-color;
+  &:hover,
+  &:active,
+  &:focus {
+    text-decoration: none;
+    color: @v2-dash-pane-color;
+  }
+}
+
 .project-list-sidebar-v2-pane {
   flex-grow: 0;
   flex-shrink: 0;

services/web/frontend/stylesheets/core/ol-variables.less

@@ -180,6 +180,7 @@
 @v2-dash-pane-bg: @ol-blue-gray-4;
 @v2-dash-pane-link-color: #fff;
 @v2-dash-pane-color: #fff;
+@v2-dash-pane-subdued-color: @ol-blue-gray-2;
 @v2-dash-pane-toggle-color: #fff;
 @v2-dash-pane-btn-bg: @ol-blue-gray-5;
 @v2-dash-pane-btn-hover-bg: @ol-blue-gray-6;