#6157 Upgrade bootstrap from v4 to v5 (#6158)

* feat: upgraded to bootstrap v5

* fix: pr reviews

* fix: encrypted contact page

* fix: position relative

Author: ioanatflowcrypt

extension/chrome/elements/pgp_block.htm

@@ -22,7 +22,7 @@
             <tbody>
               <tr class="print_header_info">
                 <td class="print_user_email" data-test="print-user-email"></td>
-                <td class="display-table float-right">
+                <td class="display-table float-end">
                   <span class="print_encrypted_with_label">Encrypted with</span>
                   <img src="/img/logo/flowcrypt-logo-125-27.png" width="auto" height="22" alt="FlowCrypt a.s. Mail" class="logo" />
                 </td>

extension/chrome/settings/index.htm

@@ -21,19 +21,19 @@
     <section id="header-row">
       <div class="container">
         <div class="row">
-          <div class="col-12 col-lg-6 text-left logo-row">
+          <div class="col-12 col-lg-6 text-start logo-row">
             <img class="cryptup-logo" src="/img/logo/full-logo.svg" alt="FlowCrypt Logo" />
             <span class="subscription">
               <a class="level green_label short" href="https://flowcrypt.com/account">free forever</a>
               <span class="expire"></span>
             </span>
           </div>
 
-          <div class="col-12 col-lg-6 text-right">
+          <div class="col-12 col-lg-6 text-end position-relative">
             <div class="profile-row">
               <div class="public-profile-container hide_if_setup_not_done public_profile_indicator_container" style="visibility: hidden">
                 <div id="public-profile-indicator">
-                  <a href="https://flowcrypt.com/account" target="_blank"> Encrypted Contact Page </a>
+                  <a href="https://flowcrypt.com/account" target="_blank" class="action-open-encrypted-contact-page"> Encrypted Contact Page </a>
                 </div>
               </div>
               <a href="#" class="email-address action-toggle-accounts-menu" data-test="action-toggle-accounts-menu"></a>
@@ -199,7 +199,7 @@ <h1 class="text-center">FlowCrypt Settings</h1>
               <div class="col-12 flex" style="padding-left: 0">
                 <img src="/img/svgs/key-icon.svg" class="key-icon" alt="key icon" />
                 <span class="my-keys-copy">My Keys</span>
-                <span class="text-right keys-link-top-right-container">
+                <span class="text-end keys-link-top-right-container">
                   <a href="#" class="show_settings_page my_key_link add_key" data-test="action-open-add-key-page" page="/chrome/settings/modules/add_key.htm"
                     >Add Key</a
                   >
@@ -218,7 +218,7 @@ <h1 class="text-center">FlowCrypt Settings</h1>
           <div class="col-12 col-lg-2">
             <a href="#" class="show_settings_page" page="modules/help.htm" data-test="action-open-modules-help">Need Help?</a>
           </div>
-          <div class="col-12 col-lg-8 row">
+          <div class="col-12 col-lg-8 d-flex justify-content-center">
             <a href="https://flowcrypt.com/terms" target="_blank" class="gray_link">Terms</a>
             <a href="https://flowcrypt.com/privacy" target="_blank" class="gray_link">Privacy</a>
             <a href="https://github.com/FlowCrypt/flowcrypt-browser" target="_blank" class="gray_link advanced">Source</a>
@@ -228,7 +228,7 @@ <h1 class="text-center">FlowCrypt Settings</h1>
               >
             </span>
           </div>
-          <div class="col-12 col-lg-2 text-right hide_if_setup_not_done">
+          <div class="col-12 col-lg-2 text-end hide_if_setup_not_done">
             <a class="toggle-settings advanced" href="#" data-test="action-toggle-screen-basic">Basic Settings</a
             ><a class="toggle-settings basic" href="#" data-test="action-toggle-screen-additional">Additional Settings</a>
           </div>

extension/chrome/settings/setup.htm

@@ -21,11 +21,11 @@
     <section id="header-row">
       <div class="container">
         <div class="row">
-          <div class="col-12 col-lg-6 text-left logo-row">
+          <div class="col-12 col-lg-6 text-start logo-row">
             <img class="cryptup-logo" src="/img/logo/full-logo.svg" alt="FlowCrypt Logo" />
           </div>
 
-          <div class="col-12 col-lg-6 text-right">
+          <div class="col-12 col-lg-6 text-end">
             <div class="profile-row">
               <div class="public-profile-container hide_if_setup_not_done public_profile_indicator_container" style="visibility: hidden"></div>
               <a href="#" class="email-address action-toggle-accounts-menu" data-test="action-toggle-accounts-menu"></a>

extension/css/settings.css

@@ -47,6 +47,19 @@ html {
   display: none;
 }
 
+#header-row .action-open-encrypted-contact-page,
+#header-row .action-toggle-accounts-menu,
+#footer-row a {
+  text-decoration: none;
+}
+
+#header-row .action-open-encrypted-contact-page:hover,
+#header-row .action-toggle-accounts-menu:hover,
+#footer-row a:hover {
+  color: #0056b3;
+  text-decoration: underline;
+}
+
 #header-row .logo-row a.cryptup-logo-row {
   text-decoration: none;
 }
@@ -332,12 +345,17 @@ a.gray_link {
   padding: 36px 0;
 }
 
+.profile-row {
+  position: relative;
+}
+
 #settings-row .box {
   background-color: #31a217;
 
   /* background-image: -webkit-linear-gradient(140deg, #31A217 -40%, green 0%, #31A217 100%);
 */
   border: 0;
+  position: relative;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   display: block;
@@ -870,4 +888,4 @@ span.fc-badge {
 .fc-badge-light-gray {
   background-color: #bcbcbc;
   color: #444 !important;
-}
+}

extension/js/common/settings.ts

@@ -427,7 +427,7 @@ export class Settings {
       return [
         `<a href="#" ${isHeaderRow && 'id = "header-row"'} class="row alt-accounts action_select_account">`,
         `  <div class="col-2"><img class="profile-img" src="${Xss.escape(picture)}" alt=""></div>`,
-        '  <div class="col-10 text-left">',
+        '  <div class="col-10 text-start">',
         `    <div class="contains_email" data-test="action-switch-to-account">${Xss.escape(email)}</div>`,
         '  </div>',
         '</a>',

package-lock.json

@@ -48,12 +48,12 @@
     "@zxcvbn-ts/core": "^3.0.4",
     "@zxcvbn-ts/language-common": "^3.0.4",
     "@zxcvbn-ts/language-en": "^3.0.2",
-    "bootstrap": "4.6.2",
+    "bootstrap": "^5.3.3",
     "dompurify": "3.3.1",
     "filesize": "11.0.13",
     "fs-extra": "^11.3.3",
     "globby": "^16.1.0",
-    "jquery": "^3.7.1",
+    "jquery": "^4.0.0",
     "linkify-html": "4.3.2",
     "linkifyjs": "4.3.2",
     "node-forge": "1.3.3",