From 646e7c2ef03ba2dfc8686149b6fd475f7eae09d1 Mon Sep 17 00:00:00 2001
From: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com>
Date: Wed, 29 Jan 2025 11:21:59 +0100
Subject: [PATCH] Merge pull request #23071 from
 overleaf/rd-migrate-project-id-bs5

Migrate the admin project info page to Bootstrap 5

GitOrigin-RevId: 36ce714ca56e4aeea9f20a84fda6991fb53627c4
---
 .../js/features/ui/components/bootstrap-5/table.tsx         | 5 ++++-
 .../frontend/stylesheets/bootstrap-5/components/tabs.scss   | 6 ++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/table.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/table.tsx
index 7599d0a74d..8f6fe3ee60 100644
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/table.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/table.tsx
@@ -4,6 +4,7 @@ import classnames from 'classnames'
 export function TableContainer({
   responsive,
   bordered,
+  striped,
   children,
 }: React.ComponentProps<typeof BS5Table>) {
   return (
@@ -11,6 +12,7 @@ export function TableContainer({
       className={classnames('table-container', {
         'table-container-bordered': bordered,
         'table-responsive': responsive,
+        'table-striped': striped,
       })}
     >
       {children}
@@ -26,11 +28,12 @@ function Table({
   container = true,
   responsive,
   bordered,
+  striped,
   ...rest
 }: TableProps) {
   return container ? (
     <TableContainer responsive={responsive} bordered={bordered}>
-      <BS5Table {...rest} />
+      <BS5Table striped={striped} {...rest} />
     </TableContainer>
   ) : (
     <BS5Table {...rest} />
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/tabs.scss b/services/web/frontend/stylesheets/bootstrap-5/components/tabs.scss
index 0dd2c626dc..939126d339 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/tabs.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/tabs.scss
@@ -29,7 +29,8 @@
           margin-right: 0;
         }
 
-        a {
+        a,
+        button {
           border: 0;
           border-radius: 0;
           color: var(--neutral-70);
@@ -60,7 +61,8 @@
         }
       }
 
-      li > a.active {
+      li > a.active,
+      li > button.active {
         background-color: transparent !important;
         border: 0 !important;
         border-bottom: 3px solid var(--green-50) !important;