[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,85 +126,91 @@ function WelcomeMessageCreateNewProjectDropdown({
   return (
     <BootstrapVersionSwitcher
       bs3={
-        <div
-          role="button"
-          tabIndex={0}
-          className="card welcome-message-card"
-          onClick={handleClick}
-          onKeyDown={handleKeyDown}
-        >
-          <p>{t('create_a_new_project')}</p>
-          <img
-            className="welcome-message-card-img"
-            src="/img/welcome-page/create-a-new-project.svg"
-            aria-hidden="true"
-            alt=""
-          />
-          {showDropdown && (
-            <div className="card create-new-project-dropdown">
-              <button
-                onClick={e =>
-                  handleDropdownItemClick(e, 'blank_project', 'blank-project')
-                }
-              >
-                {t('blank_project')}
-              </button>
-              <button
-                onClick={e =>
-                  handleDropdownItemClick(
-                    e,
-                    'example_project',
-                    'example-project'
-                  )
-                }
-              >
-                {t('example_project')}
-              </button>
-              <button
-                onClick={e =>
-                  handleDropdownItemClick(e, 'upload_project', 'upload-project')
-                }
-              >
-                {t('upload_project')}
-              </button>
-              {isOverleaf && (
+        <div className="welcome-message-card-item">
+          <div
+            role="button"
+            tabIndex={0}
+            className="card welcome-message-card"
+            onClick={handleClick}
+            onKeyDown={handleKeyDown}
+          >
+            <p>{t('create_a_new_project')}</p>
+            <img
+              className="welcome-message-card-img"
+              src="/img/welcome-page/create-a-new-project.svg"
+              aria-hidden="true"
+              alt=""
+            />
+            {showDropdown && (
+              <div className="card create-new-project-dropdown">
+                <button
+                  onClick={e =>
+                    handleDropdownItemClick(e, 'blank_project', 'blank-project')
+                  }
+                >
+                  {t('blank_project')}
+                </button>
                 <button
                   onClick={e =>
                     handleDropdownItemClick(
                       e,
-                      'import_from_github',
-                      'import-from-github'
+                      'example_project',
+                      'example-project'
                     )
                   }
                 >
-                  {t('import_from_github')}
+                  {t('example_project')}
+                </button>
+                <button
+                  onClick={e =>
+                    handleDropdownItemClick(
+                      e,
+                      'upload_project',
+                      'upload-project'
+                    )
+                  }
+                >
+                  {t('upload_project')}
                 </button>
-              )}
-              {portalTemplates.length > 0 ? (
-                <>
-                  <hr />
-                  <div className="dropdown-header">
-                    {t('institution_templates')}
-                  </div>
-                  {portalTemplates?.map((portalTemplate, index) => (
-                    <a
-                      key={`portal-template-${index}`}
-                      href={`${portalTemplate.url}#templates`}
-                      onClick={e =>
-                        handlePortalTemplateClick(e, portalTemplate.name)
-                      }
-                    >
-                      {portalTemplate.name}
-                    </a>
-                  ))}
-                </>
-              ) : null}
-            </div>
-          )}
+                {isOverleaf && (
+                  <button
+                    onClick={e =>
+                      handleDropdownItemClick(
+                        e,
+                        'import_from_github',
+                        'import-from-github'
+                      )
+                    }
+                  >
+                    {t('import_from_github')}
+                  </button>
+                )}
+                {portalTemplates.length > 0 ? (
+                  <>
+                    <hr />
+                    <div className="dropdown-header">
+                      {t('institution_templates')}
+                    </div>
+                    {portalTemplates?.map((portalTemplate, index) => (
+                      <a
+                        key={`portal-template-${index}`}
+                        href={`${portalTemplate.url}#templates`}
+                        onClick={e =>
+                          handlePortalTemplateClick(e, portalTemplate.name)
+                        }
+                      >
+                        {portalTemplate.name}
+                      </a>
+                    ))}
+                  </>
+                ) : null}
+              </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,20 +14,22 @@ export default function WelcomeMessageLink({
   onClick,
 }: WelcomeMessageLinkProps) {
   return (
-    <a
-      href={href}
-      onClick={onClick}
-      className="card welcome-message-card welcome-message-card-link"
-      target={target || undefined}
-      rel="noopener"
-    >
-      <p>{title}</p>
-      <img
-        className="welcome-message-card-img"
-        src={imgSrc}
-        alt={title}
-        aria-hidden="true"
-      />
-    </a>
+    <div className="welcome-message-card-item">
+      <a
+        href={href}
+        onClick={onClick}
+        className="card welcome-message-card welcome-message-card-link"
+        target={target || undefined}
+        rel="noopener"
+      >
+        <p>{title}</p>
+        <img
+          className="welcome-message-card-img"
+          src={imgSrc}
+          alt={title}
+          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);
         }
       }
     }