From b59f23bf70160ab8c780be161635e13cbc4d8b99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Ars=C3=A8ne?= <david.arsene.ext@ovhcloud.com>
Date: Mon, 7 Oct 2024 14:50:30 +0200
Subject: [PATCH] feat(restricted): bump bootstrap 5
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref: MANAGER-15385

Signed-off-by: David Arsène <david.arsene.ext@ovhcloud.com>
---
 packages/manager/apps/restricted/package.json               | 2 +-
 .../restricted/ErrorJumbotron/error-jumbotron.styles.scss   | 4 ++++
 .../apps/restricted/src/restricted/GuideCard/GuideCard.tsx  | 6 +++---
 .../manager/apps/restricted/src/restricted/Restricted.tsx   | 2 +-
 .../apps/restricted/src/restricted/restricted.styles.scss   | 3 +++
 yarn.lock                                                   | 5 +++++
 6 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/manager/apps/restricted/package.json b/packages/manager/apps/restricted/package.json
index 292251ebe88a..7448518fc1ce 100644
--- a/packages/manager/apps/restricted/package.json
+++ b/packages/manager/apps/restricted/package.json
@@ -24,7 +24,7 @@
     "@ovh-ux/manager-vite-config": "^0.8.0",
     "@ovh-ux/request-tagger": "^0.3.0",
     "@ovh-ux/ui-kit": "^6.10.5",
-    "bootstrap": "4.6.0",
+    "bootstrap": "5.0.0",
     "font-awesome": "^4.7.0",
     "i18next": "^23.8.2",
     "i18next-http-backend": "^1.3.0",
diff --git a/packages/manager/apps/restricted/src/restricted/ErrorJumbotron/error-jumbotron.styles.scss b/packages/manager/apps/restricted/src/restricted/ErrorJumbotron/error-jumbotron.styles.scss
index 1806c2800351..830a4ed36fbd 100644
--- a/packages/manager/apps/restricted/src/restricted/ErrorJumbotron/error-jumbotron.styles.scss
+++ b/packages/manager/apps/restricted/src/restricted/ErrorJumbotron/error-jumbotron.styles.scss
@@ -5,4 +5,8 @@
     border-radius: 0 !important;
     color: rgb(193, 27, 27);
   }
+
+  ul {
+    padding-inline-start: 2.5rem;
+  }
 }
diff --git a/packages/manager/apps/restricted/src/restricted/GuideCard/GuideCard.tsx b/packages/manager/apps/restricted/src/restricted/GuideCard/GuideCard.tsx
index c73e2a29bb38..3a3ed70b88d0 100644
--- a/packages/manager/apps/restricted/src/restricted/GuideCard/GuideCard.tsx
+++ b/packages/manager/apps/restricted/src/restricted/GuideCard/GuideCard.tsx
@@ -12,15 +12,15 @@ const GuideCard = ({ id, link }: Guide) => {
   const translationPrefix = `restricted_guide_card_${id}`;
   return (
     <a
-      className="guide-card py-2 oui-tile d-flex flex-column align-items-start p-3"
+      className="guide-card p-3 oui-tile d-flex flex-column align-items-start"
       target="_blank"
       rel="noreferrer noopener"
       href={region === 'US' ? US_GUIDE : link[locale] ?? link.default}
     >
       <h5 className="guide-title">{t('restricted_guide_card_title')}</h5>
-      <h3 className="font-weight-bold">{t(`${translationPrefix}_title`)}</h3>
+      <h3 className="fw-bold">{t(`${translationPrefix}_title`)}</h3>
       <div className="oui-tile__body mt-3">
-        <p className="oui-tile__description font-weight-normal">
+        <p className="oui-tile__description fw-normal">
           {t(`${translationPrefix}_description`)}
         </p>
         <span className="oui-link oui-link_icon">
diff --git a/packages/manager/apps/restricted/src/restricted/Restricted.tsx b/packages/manager/apps/restricted/src/restricted/Restricted.tsx
index 8826eb9e0d49..34f803331c32 100644
--- a/packages/manager/apps/restricted/src/restricted/Restricted.tsx
+++ b/packages/manager/apps/restricted/src/restricted/Restricted.tsx
@@ -13,7 +13,7 @@ const Restricted = (): JSX.Element => (
   <div className="restricted d-flex flex-column h-100">
     <Navbar />
     <Sidebar />
-    <div className="restricted-main d-flex flex-column mx-auto px-5">
+    <div className="restricted-main d-flex flex-column px-5">
       <ErrorJumbotron />
       <div className="restricted-guides mb-4 d-flex flex-column flex-md-row">
         {GUIDES.map((guide) => (
diff --git a/packages/manager/apps/restricted/src/restricted/restricted.styles.scss b/packages/manager/apps/restricted/src/restricted/restricted.styles.scss
index 724727c4f558..a2e8970d5f5c 100644
--- a/packages/manager/apps/restricted/src/restricted/restricted.styles.scss
+++ b/packages/manager/apps/restricted/src/restricted/restricted.styles.scss
@@ -1,3 +1,5 @@
+@import 'bootstrap/scss/bootstrap';
+
 .restricted {
   background-color: rgb(241, 249, 253);
 
@@ -10,6 +12,7 @@
   }
 
   .restricted-main {
+    @extend .mx-auto;
     box-sizing: border-box;
     background-color: white;
     max-width: 62rem;
diff --git a/yarn.lock b/yarn.lock
index a6e838c93669..732763a5d257 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11504,6 +11504,11 @@ bootstrap@4.6.0:
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.0.tgz#97b9f29ac98f98dfa43bf7468262d84392552fd7"
   integrity sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==
 
+bootstrap@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.0.0.tgz#97635ac0e0d6cb466700ebf0fd266bfabf352ed2"
+  integrity sha512-tmhPET9B9qCl8dCofvHeiIhi49iBt0EehmIsziZib65k1erBW1rHhj2s/2JsuQh5Pq+xz2E9bEbzp9B7xHG+VA==
+
 bootstrap@^3.3.6, bootstrap@^3.3.7, bootstrap@^3.4.1, bootstrap@~3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.4.1.tgz#c3a347d419e289ad11f4033e3c4132b87c081d72"