[web] Make the welcome page cards all have the same widths (implementation 2) (#20570)

* welcome page adjusted columns in BS5

* [web] Fix card color

* [web] Fixup card width in BS3

* [web] Fix lint

* [web] Fix cards text color in BS3

* [web] Fix cards positioning in BS3

* [web] Prevent cards from becoming too large on big screens

---------

Co-authored-by: Ilkin Ismailov <ilkin.ismailov@overleaf.com>
GitOrigin-RevId: 9b91c073a62dae7cad4402908a34f9880ecdb0ac

services/web/frontend/js/features/project-list/components/welcome-message-new/welcome-message-create-new-project-dropdown.tsx

@@ -126,6 +126,7 @@ function WelcomeMessageCreateNewProjectDropdown({
   return (
     <BootstrapVersionSwitcher
       bs3={
+        <div className="welcome-message-card-item">
           <div
             role="button"
             tabIndex={0}
@@ -162,7 +163,11 @@ function WelcomeMessageCreateNewProjectDropdown({
                 </button>
                 <button
                   onClick={e =>
-                  handleDropdownItemClick(e, 'upload_project', 'upload-project')
+                    handleDropdownItemClick(
+                      e,
+                      'upload_project',
+                      'upload-project'
+                    )
                   }
                 >
                   {t('upload_project')}
@@ -202,9 +207,10 @@ function WelcomeMessageCreateNewProjectDropdown({
               </div>
             )}
           </div>
+        </div>
       }
       bs5={
-        <Dropdown>
+        <Dropdown className="welcome-message-card-item">
           <DropdownToggle
             as={CustomDropdownToggle}
             id="create-new-project-dropdown-toggle-btn"

services/web/frontend/js/features/project-list/components/welcome-message-new/welcome-message-link.tsx

@@ -14,6 +14,7 @@ export default function WelcomeMessageLink({
   onClick,
 }: WelcomeMessageLinkProps) {
   return (
+    <div className="welcome-message-card-item">
       <a
         href={href}
         onClick={onClick}
@@ -29,5 +30,6 @@ export default function WelcomeMessageLink({
           aria-hidden="true"
         />
       </a>
+    </div>
   )
 }

services/web/frontend/stylesheets/app/project-list-react.less

@@ -98,6 +98,16 @@
         }
       }
 
+      .welcome-message-card-item {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+
+        @media (min-width: @screen-md-min) {
+          flex: 0 1 310px;
+        }
+      }
+
       .welcome-message-card {
         border: 1px solid @neutral-20;
         border-radius: 16px;
@@ -115,6 +125,7 @@
         @media (min-width: @screen-md-min) {
           margin: 0 15px;
           height: 240px;
+          width: auto;
         }
 
         &:hover {
@@ -122,6 +133,8 @@
         }
 
         .welcome-message-card-img {
+          max-width: 100%;
+
           @media (min-width: @screen-md-min) {
             margin-bottom: 20px;
           }
@@ -159,7 +172,7 @@
           }
 
           > a {
-            color: @ol-blue-gray-3;
+            color: @gray-dark;
             display: block;
 
             &:hover {
@@ -179,7 +192,7 @@
         &,
         &:hover {
           text-decoration: none;
-          color: @ol-blue-gray-3;
+          color: @gray-dark;
         }
       }
     }

services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss

@@ -115,7 +115,6 @@
         justify-content: space-between;
         padding: var(--spacing-08) var(--spacing-06);
         margin: var(--spacing-05) 0;
-        width: 280px;
         height: 200px;
         position: relative;
         cursor: pointer;
@@ -130,12 +129,26 @@
         }
 
         .welcome-message-card-img {
+          max-width: 100%;
+
           @include media-breakpoint-up(lg) {
             margin-bottom: var(--spacing-07);
           }
         }
       }
 
+      .welcome-message-card-item {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        width: 280px;
+
+        @include media-breakpoint-up(lg) {
+          flex: 0 1 312px;
+          width: auto;
+        }
+      }
+
       .create-new-project-dropdown {
         transform: none !important;
         top: 100% !important;
@@ -156,7 +169,7 @@
         &,
         &:hover {
           text-decoration: none;
-          color: $neutral-60;
+          color: var(--bs-body-color);
         }
       }
     }