Editor file uploader design update (#11447)

* Redesign the styling of conflict state for file upload in the editor

* Change overwrite button style from primary (green) to danger (red)

* Change the idle state and dragging state styling to match the error state new design:

    *remove the double border; only keep the dashed border
    * on idle state, change border color

* Add hardcoded texts to translation file

* Add padding to prevent text is becoming too near to the border when multiple files appear in the conflict file list

* Apply custom file uploader style to smaller screen

GitOrigin-RevId: 266e60bb8575a02c02c1ed1d7fa04cdb101f3dd1

services/web/frontend/extracted-translations.json

@@ -151,6 +151,7 @@
   "disable_stop_on_first_error": "",
   "dismiss": "",
   "dismiss_error_popup": "",
+  "do_you_want_to_overwrite_them": "",
   "documentation": "",
   "doesnt_match": "",
   "doing_this_allow_log_in_through_institution": "",
@@ -470,6 +471,7 @@
   "overall_theme": "",
   "overleaf": "",
   "overleaf_labs": "",
+  "overwrite": "",
   "owned_by_x": "",
   "owner": "",
   "page_current": "",
@@ -690,6 +692,7 @@
   "tex_live_version": "",
   "thank_you_exclamation": "",
   "thanks_settings_updated": "",
+  "the_following_files_already_exist_in_this_project": "",
   "this_action_cannot_be_undone": "",
   "this_grants_access_to_features_2": "",
   "this_project_is_public": "",

services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-upload-doc.js

@@ -1,5 +1,5 @@
-import { Trans } from 'react-i18next'
-import { Alert, Button } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
+import { Button } from 'react-bootstrap'
 import { useCallback, useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import Uppy from '@uppy/core'
@@ -225,13 +225,15 @@ UploadErrorMessage.propTypes = {
 }
 
 function UploadConflicts({ cancel, conflicts, handleOverwrite }) {
+  const { t } = useTranslation()
+
   return (
-    <Alert bsStyle="warning" className="small">
-      <p className="text-center">
-        The following files already exist in this project:
+    <div className="small modal-new-file--body-conflict">
+      <p className="text-center mb-0">
+        {t('the_following_files_already_exist_in_this_project')}
       </p>
 
-      <ul className="text-center list-unstyled row-spaced-small">
+      <ul className="text-center list-unstyled row-spaced-small mt-1">
         {conflicts.map((conflict, index) => (
           <li key={index}>
             <strong>{conflict.meta.name}</strong>
@@ -240,19 +242,19 @@ function UploadConflicts({ cancel, conflicts, handleOverwrite }) {
       </ul>
 
       <p className="text-center row-spaced-small">
-        Do you want to overwrite them?
+        {t('do_you_want_to_overwrite_them')}
       </p>
 
       <p className="text-center">
-        <Button bsStyle="primary" onClick={handleOverwrite}>
-          Overwrite
+        <Button bsStyle={null} className="btn-secondary" onClick={cancel}>
+          {t('cancel')}
         </Button>
         &nbsp;
-        <Button bsStyle={null} className="btn-secondary" onClick={cancel}>
-          Cancel
+        <Button bsStyle="danger" onClick={handleOverwrite}>
+          {t('overwrite')}
         </Button>
       </p>
-    </Alert>
+    </div>
   )
 }
 UploadConflicts.propTypes = {

services/web/frontend/stylesheets/app/editor/file-tree.less

@@ -477,6 +477,18 @@
   padding-top: 20px;
 }
 
+.modal-new-file--body-conflict {
+  background-color: @red-10;
+  border: 1px dashed @red-50;
+  min-height: 400px;
+  border-radius: 3px;
+  color: @neutral-90;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: @padding-sm;
+}
+
 .modal-footer {
   .approaching-file-limit {
     font-weight: bold;
@@ -491,8 +503,24 @@
   font-family: inherit;
 }
 
-.modal-new-file--body-upload .uppy-size--md {
-  .uppy-Dashboard-AddFiles-title {
-    font-size: inherit;
+.modal-new-file--body-upload .uppy-Dashboard {
+  .uppy-Dashboard-inner {
+    border: none;
+  }
+
+  .uppy-Dashboard-dropFilesHereHint {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  .uppy-Dashboard-AddFiles {
+    margin: 0;
+    border: 1px dashed @neutral-60;
+    height: 100%;
+    .uppy-Dashboard-AddFiles-title {
+      font-size: inherit;
+    }
   }
 }

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

@@ -43,6 +43,9 @@
 @orange-dark: #9e5e04;
 @pink: #c3325f;
 @purple: #7a43b6;
+@red-10: #f9f1f1;
+@red-50: #b83a33;
+@neutral-60: #677283;
 
 @brand-primary: @ol-green;
 @brand-secondary: @ol-dark-green;

services/web/locales/en.json

@@ -334,6 +334,7 @@
   "dismiss_error_popup": "Dismiss first error alert",
   "do_not_have_acct_or_do_not_want_to_link": "If you don’t have an <b>__appName__</b> account, or if you don’t want to link to your <b>__institutionName__</b> account, please click <b>__clickText__</b>.",
   "do_not_link_accounts": "Don’t link accounts",
+  "do_you_want_to_overwrite_them": "Do you want to overwrite them?",
   "document_history": "Document history",
   "documentation": "Documentation",
   "does_not_contain_or_significantly_match_your_email": "Does not contain or significantly match your email",
@@ -1015,6 +1016,7 @@
   "overleaf_history_system": "Overleaf History System",
   "overleaf_labs": "Overleaf Labs",
   "overview": "Overview",
+  "overwrite": "Overwrite",
   "owned_by_x": "owned by __x__",
   "owner": "Owner",
   "page_current": "Page __page__, Current Page",
@@ -1444,6 +1446,7 @@
   "thanks_settings_updated": "Thanks, your settings have been updated.",
   "the_easy_online_collab_latex_editor": "The easy to use, online, collaborative LaTeX editor",
   "the_file_supplied_is_of_an_unsupported_type ": "The link to open this content on Overleaf pointed to the wrong kind of file. Valid file types are .tex documents and .zip files. If this keeps happening for links on a particular site, please report this to them.",
+  "the_following_files_already_exist_in_this_project": "The following files already exist in this project:",
   "the_overleaf_student_plan_is_for_students_using_overleaf_during_their_studies": "The Overleaf Student plan is for <0>students using Overleaf during their studies</0>",
   "the_project_that_contains_this_file_is_not_shared_with_you": "The project that contains this file is not shared with you",
   "the_requested_conversion_job_was_not_found": "The link to open this content on Overleaf specified a conversion job that could not be found. It’s possible that the job has expired and needs to be run again. If this keeps happening for links on a particular site, please report this to them.",