Fix extension should not have runtime dependencies

- Bootstrap removed from post-install page (installed.html) - Custom CSS written in it's place - should look nearly identical WE2-1046 Signed-off-by: Tanel Metsar <taneltm@users.noreply.github.com>
web-eid · Feb 10, 2025 · d288b68 · d288b68
1 parent cbca651
commit d288b68
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 62 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,8 +37,5 @@
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.19.1",
     "webextension-polyfill": "^0.12.0"
-  },
-  "dependencies": {
-    "bootstrap": "^5.3.3"
   }
 }
diff --git a/scripts/build.mjs b/scripts/build.mjs
@@ -115,7 +115,6 @@ const targets = {
     );
     await cp("./static/_locales", "./dist/firefox/_locales");
     await cp("./static/views", "./dist/firefox/views");
-    await cp("./node_modules/bootstrap/dist/css/bootstrap.min.css", "./dist/firefox/views/bootstrap.min.css");
 
     rem(
       "Setting up the Firefox manifest"

diff --git a/static/views/installed.css b/static/views/installed.css
@@ -0,0 +1,114 @@
+:root {
+  --color-background: #FFF;
+  --color-primary: #0D6EFD;
+  --color-secondary: #6C757D;
+  --color-modal-border: #0000002D;
+  --color-modal-separator: #DEE2E6;
+  --color-text: #212529;
+  --color-btn-text: #FFF;
+
+  font-family:
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    "Noto Sans",
+    "Liberation Sans",
+    Arial,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji";
+
+  color: var(--color-text);
+
+  margin: 0;
+  height: 100vh;
+  display: flex;
+  justify-content: safe center;
+  align-items: safe center;
+  height: 100vh;
+}
+
+a {
+  color: var(--color-primary);
+}
+
+ul {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  padding-left: 2rem;
+}
+
+.modal {
+  display: flex;
+  box-sizing: border-box;
+  max-width: 500px;
+  flex-direction: column;
+  height: fit-content;
+  border-radius: 7px;
+  border: 1px solid var(--color-modal-border);
+  background-color: var(--color-background);
+
+  > * {
+    padding: 1rem;
+  }
+
+  .title {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    height: 62px;
+    font-size: 1.25rem;
+    font-weight: 500;
+    margin: 0;
+  }
+
+  .content {
+    line-height: 1.5;
+    border-top: 1px solid var(--color-modal-separator);
+    border-bottom: 1px solid var(--color-modal-separator);
+  }
+
+  .footer {
+    display: flex;
+    justify-content: end;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+
+    button {
+      cursor: pointer;
+      box-sizing: border-box;
+      min-height: 38px;
+      padding: 0.375rem 0.75rem;
+      color: var(--color-btn-text);
+      font-size: 1rem;
+      background: var(--btn-bg);
+      border: 1px solid var(--btn-bg);
+      border-radius: 6px;
+      outline: 4px solid transparent;
+      transition: outline 0.25 ease-in;
+
+      &.btn-primary {
+        --btn-bg: var(--color-primary);
+      }
+
+      &.btn-secondary {
+        --btn-bg: var(--color-secondary);
+      }
+
+      &:hover,
+      &:active,
+      &:focus {
+        background: color-mix(in srgb, var(--btn-bg), black 10%);
+        border-color: color-mix(in srgb, var(--btn-bg), black 12%);
+      }
+
+      &:focus-visible {
+        outline-color: color-mix(in srgb, var(--btn-bg), white 50%);
+      }
+    }
+  }
+}
diff --git a/static/views/installed.html b/static/views/installed.html
@@ -1,34 +1,30 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="UTF-8" />
+    <meta charset="UTF-8">
     <title>Web-eID Privacy</title>
-    <link rel="stylesheet" href="./bootstrap.min.css" />
+    <link rel="stylesheet" href="installed.css">
   </head>
   <body>
-    <div class="modal d-block" tabindex="-1" role="dialog">
-      <div class="modal-dialog modal-dialog-centered">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 id="title" class="modal-title">Web eID Data Protection Terms</h5>
-          </div>
-          <div class="modal-body" id="content">
-            Web eID transmits the following data that personally identifies you to the e-service:
-            <ul>
-              <li>the user`s certificate for authentication or signing;</li>
-              <li>URL of the website origin for authentication.</li>
-            </ul>
-            The transfer of personal data is necessary for the functioning of authentication and digital signing.
-            Transmitted data is not stored.
-            If you do not agree to the transfer of data then we recommend you to remove the Web eID extension.<br />
-            Full details about the personal data we transmit and what we do with it are provided in our
-            <a href="https://addons.mozilla.org/en-US/firefox/addon/web-eid-webextension/privacy/" target="_blank">Data Protection Terms</a>.
-          </div>
-          <div class="modal-footer">
-            <button type="button" class="btn btn-secondary" id="uninstall">Remove Web eID</button>
-            <button type="button" class="btn btn-primary" id="agree">Accept the terms</button>
-          </div>
-        </div>
+    <div class="modal" tabindex="-1" role="dialog">
+      <h1 id="title" class="title">Web eID Data Protection Terms</h1>
+
+      <div id="content" class="content">
+        Web eID transmits the following data that personally identifies you to the e-service:
+        <ul>
+          <li>the user's certificate for authentication or signing;</li>
+          <li>URL of the website origin for authentication.</li>
+        </ul>
+        The transfer of personal data is necessary for the functioning of authentication and digital signing.
+        Transmitted data is not stored.
+        If you do not agree to the transfer of data then we recommend you to remove the Web eID extension.<br />
+        Full details about the personal data we transmit and what we do with it are provided in our
+        <a href="https://addons.mozilla.org/en-US/firefox/addon/web-eid-webextension/privacy/" target="_blank">Data Protection Terms</a>.
+      </div>
+
+      <div class="footer">
+        <button type="button" class="btn btn-secondary" id="uninstall">Remove Web eID</button>
+        <button type="button" class="btn btn-primary" id="agree">Accept the terms</button>
       </div>
     </div>
     <script src="installed.js"></script>