use bootstrap package

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@liquid-js/qr-code-styling":"^3.1.1",
     "react": "^18.3.1",
+    "bootstrap": "^5.3.0",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^4.2.0"

public/index.html

@@ -7,12 +7,18 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="Web site created using create-react-app" />
-  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
+  <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest">
+  <link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg" color="#5bbad5">
+  <meta name="msapplication-TileColor" content="#da532c">
+  <meta name="theme-color" content="#ffffff">
   <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />
 
   <!--
       Notice the use of %PUBLIC_URL% in the tags above.

src/Components/Footer.tsx

@@ -2,22 +2,22 @@ import React from 'react'
 
 function Footer(): JSX.Element {
   return (
-    <footer className='mt-auto text-center'>
+    <footer className='mt-auto text-center text-secondary fs-6 fw-light'>
       <p>
         Build with React, based on{' '}
-        <a target='_blank' rel='noopener noreferrer' href='https://github.com/kozakdenys/qr-code-styling'>
+        <a className="text-secondary" target='_blank' rel='noopener noreferrer' href='https://github.com/kozakdenys/qr-code-styling'>
           QR Code Styling JS library.
         </a>
         {' - '}{' '}
-        <a target='_blank' rel='noopener noreferrer' href='https://github.com/awran5/custom-qr-code-styling'>
+        <a className="text-secondary" target='_blank' rel='noopener noreferrer' href='https://github.com/awran5/custom-qr-code-styling'>
           Custom QR Code Styling.
         </a>
         {' - '}{' '}
-        <a target='_blank' rel='noopener noreferrer' href='https://lesailesdumontblanc.com'>
+        <a className="text-secondary" target='_blank' rel='noopener noreferrer' href='https://lesailesdumontblanc.com'>
         © 2024 Les Ailes du Mont-Blanc
         </a>
-        &nbsp;et&nbsp;
-        <a target='_blank' rel='noopener noreferrer' href='https://sctg.eu.org'>
+        &nbsp;and&nbsp;
+        <a className="text-secondary" target='_blank' rel='noopener noreferrer' href='https://sctg.eu.org'>
         Ronan
         </a>
       </p>

src/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import ContextProvider from './Context'
 import App from './App'
-import './bootstrap.min.css'
+import 'bootstrap/dist/css/bootstrap.min.css';
 import './App.css'
 
 const container = document.getElementById('root');

yarn.lock

@@ -1670,6 +1670,11 @@
     schema-utils "^4.2.0"
     source-map "^0.7.3"
 
+"@popperjs/core@^2.11.8":
+  version "2.11.8"
+  resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
   resolved "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz"
@@ -2991,6 +2996,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz"
   integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
 
+bootstrap@^5.3.0:
+  version "5.3.3"
+  resolved "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz"
+  integrity sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz"