diff --git a/apps/browser/src/popup/scss/misc.scss b/apps/browser/src/popup/scss/misc.scss index 07f7b6d509..c106931c1f 100644 --- a/apps/browser/src/popup/scss/misc.scss +++ b/apps/browser/src/popup/scss/misc.scss @@ -422,8 +422,7 @@ img, .callout, .row-label, .modal-title, -.overlay-container, -.swal2-container { +.overlay-container { user-select: none; } diff --git a/apps/browser/src/popup/scss/plugins.scss b/apps/browser/src/popup/scss/plugins.scss index 44a181c0dc..104927d73b 100644 --- a/apps/browser/src/popup/scss/plugins.scss +++ b/apps/browser/src/popup/scss/plugins.scss @@ -1,5 +1,4 @@ @import "~ngx-toastr/toastr"; -@import "~#sweetalert2"; @import "variables.scss"; @import "buttons.scss"; @@ -98,119 +97,6 @@ } } -// SweetAlert - -.swal2-popup { - padding: 15px; - border-radius: $border-radius; - width: 34em; - - @include themify($themes) { - background-color: themed("backgroundColorAlt"); - color: themed("textColor"); - } - - .swal2-icon { - margin: 0 auto; - width: auto; - height: auto; - border: none; - } - - .swal2-content { - margin: 0; - font-size: $font-size-base; - @include themify($themes) { - color: themed("textColor"); - } - - label.checkbox { - margin-top: 10px; - display: flex; - text-align: left; - align-items: top; - - input { - margin: 3px 5px 0 1px; - } - } - - .swal2-input, - .swal2-textarea { - border: 1px solid #000000; - border-radius: $border-radius; - margin-bottom: 0; - box-shadow: none; - // Inherit theme font-size - font-size: inherit; - - // Sweetalert 1 did not have box-shadow - &:focus { - box-shadow: none; - } - @include themify($themes) { - border-color: themed("inputBorderColor"); - color: themed("textColor"); - background-color: themed("inputBackgroundColor"); - } - &::-webkit-input-placeholder { - @include themify($themes) { - color: themed("inputPlaceholderColor"); - } - } - } - } - - i.swal-custom-icon { - display: block; - margin: 0 auto; - font-size: 35px; - } - - .swal2-title { - padding: 10px 0 15px; - margin: 0; - font-size: $font-size-large; - - @include themify($themes) { - color: themed("textColor"); - } - } - - .swal2-text { - text-align: left; // sweetalert1 behaviour - font-size: $font-size-base; - - @include themify($themes) { - color: themed("textColor"); - } - } - - > .swal2-text:first-child { - margin-top: 20px; - } - - .swal2-actions { - margin: 20px auto 0; - justify-content: flex-start; - flex-direction: row-reverse; - - button { - margin-left: 10px; - @extend .btn; - - &.swal2-confirm { - @extend .btn, .primary; - font-weight: bold; - } - } - } - - .swal2-validation-message { - margin-top: 20px; - } -} - date-input-polyfill { &[data-open="true"] { z-index: 10000 !important; diff --git a/apps/browser/webpack.config.js b/apps/browser/webpack.config.js index 23fba305b6..834647231f 100644 --- a/apps/browser/webpack.config.js +++ b/apps/browser/webpack.config.js @@ -213,10 +213,6 @@ const mainConfig = { extensions: [".ts", ".js"], symlinks: false, modules: [path.resolve("../../node_modules")], - alias: { - sweetalert2: require.resolve("sweetalert2/dist/sweetalert2.js"), - "#sweetalert2": require.resolve("sweetalert2/src/sweetalert2.scss"), - }, fallback: { assert: false, buffer: require.resolve("buffer/"), diff --git a/apps/desktop/src/scss/plugins.scss b/apps/desktop/src/scss/plugins.scss index aed093d53b..c156456809 100644 --- a/apps/desktop/src/scss/plugins.scss +++ b/apps/desktop/src/scss/plugins.scss @@ -1,5 +1,4 @@ @import "~ngx-toastr/toastr"; -@import "~sweetalert2/src/sweetalert2.scss"; @import "variables.scss"; @@ -94,116 +93,3 @@ } } } - -// SweetAlert2 - -.swal2-popup { - padding: 15px; - border-radius: $border-radius; - width: 34em; - - @include themify($themes) { - background-color: themed("backgroundColorAlt"); - color: themed("textColor"); - } - - .swal2-icon { - margin: 0 auto; - width: auto; - height: auto; - border: none; - } - - .swal2-content { - margin: 0; - font-size: $font-size-base; - @include themify($themes) { - color: themed("textColor"); - } - - label.checkbox { - margin-top: 10px; - display: flex; - text-align: left; - align-items: top; - - input { - margin: 3px 5px 0 1px; - } - } - - .swal2-input, - .swal2-textarea { - border: 1px solid #000000; - border-radius: $border-radius; - margin-bottom: 0; - box-shadow: none; - // Inherit theme font-size - font-size: inherit; - - // Sweetalert 1 did not have box-shadow - &:focus { - box-shadow: none; - } - @include themify($themes) { - border-color: themed("inputBorderColor"); - color: themed("textColor"); - background-color: themed("inputBackgroundColor"); - } - &::-webkit-input-placeholder { - @include themify($themes) { - color: themed("inputPlaceholderColor"); - } - } - } - } - - i.swal-custom-icon { - display: block; - margin: 0 auto; - font-size: 35px; - } - - .swal2-title { - padding: 10px 0 15px; - margin: 0; - font-size: $font-size-large; - - @include themify($themes) { - color: themed("textColor"); - } - } - - .swal2-text { - text-align: left; // sweetalert1 behaviour - font-size: $font-size-base; - - @include themify($themes) { - color: themed("textColor"); - } - } - - > .swal2-text:first-child { - margin-top: 20px; - } - - .swal2-actions { - margin: 20px auto 0; - justify-content: flex-start; - flex-direction: row-reverse; - - button { - margin-left: 10px; - @extend .btn; - - &.swal2-confirm { - @extend .btn, .primary; - font-weight: bold; - } - } - } - - .swal2-validation-message { - margin-top: 20px; - } -} diff --git a/apps/web/src/app/app.component.ts b/apps/web/src/app/app.component.ts index 5b26527842..97d065c689 100644 --- a/apps/web/src/app/app.component.ts +++ b/apps/web/src/app/app.component.ts @@ -5,7 +5,6 @@ import { NavigationEnd, Router } from "@angular/router"; import * as jq from "jquery"; import { IndividualConfig, ToastrService } from "ngx-toastr"; import { Subject, takeUntil } from "rxjs"; -import Swal from "sweetalert2"; import { EventUploadService } from "@bitwarden/common/abstractions/event/event-upload.service"; import { NotificationsService } from "@bitwarden/common/abstractions/notifications.service"; @@ -204,10 +203,6 @@ export class AppComponent implements OnDestroy, OnInit { for (const modal of modals) { (jq(modal) as any).modal("hide"); } - - if (document.querySelector(".swal-modal") != null) { - Swal.close(undefined); - } } }); @@ -258,7 +253,6 @@ export class AppComponent implements OnDestroy, OnInit { } await this.stateService.clean({ userId: userId }); - Swal.close(); if (redirect) { this.router.navigate(["/"]); } diff --git a/apps/web/src/scss/base.scss b/apps/web/src/scss/base.scss index ad02a7ce87..4600620be8 100644 --- a/apps/web/src/scss/base.scss +++ b/apps/web/src/scss/base.scss @@ -173,9 +173,7 @@ code { } .btn:focus, -.swal2-popup .swal2-actions button:focus, .btn.focus, -.swal2-popup .swal2-actions button.focus, .form-control:focus { @include themify($themes) { box-shadow: 0 0 0 0.2rem themed("focus"); diff --git a/apps/web/src/scss/buttons.scss b/apps/web/src/scss/buttons.scss index 34a8ec66fa..c803439fe4 100644 --- a/apps/web/src/scss/buttons.scss +++ b/apps/web/src/scss/buttons.scss @@ -1,5 +1,4 @@ -.btn-primary, -.swal2-confirm { +.btn-primary { @include themify($themes) { background-color: themed("btnPrimary"); border-color: themed("btnPrimary"); @@ -37,8 +36,7 @@ } } -.btn-secondary, -.swal2-cancel { +.btn-secondary { @include themify($themes) { background-color: themed("btnSecondary"); border-color: themed("btnSecondaryBorder"); @@ -103,8 +101,7 @@ } } -.btn-danger, -.swal2-deny { +.btn-danger { @include themify($themes) { background-color: themed("btnDanger"); border-color: themed("btnDanger"); diff --git a/apps/web/src/scss/plugins.scss b/apps/web/src/scss/plugins.scss index 0610535eb5..8d3b685b03 100644 --- a/apps/web/src/scss/plugins.scss +++ b/apps/web/src/scss/plugins.scss @@ -130,96 +130,6 @@ } } -// SweetAlert2 - -[class*="swal2-"] { - &:not(.swal2-container, .swal2-confirm, .swal2-cancel, .swal2-deny) { - @include themify($themes) { - background-color: themed("backgroundColor"); - color: themed("textColor"); - } - } -} - -.swal2-container { - background-color: rgba(0, 0, 0, 0.3); -} - -.swal2-popup { - @include themify($themes) { - background-color: themed("backgroundColor"); - color: themed("textColor"); - } - border: $modal-content-border-width solid #9a9a9a; - @include border-radius($modal-content-border-radius); - padding: 15px 0 0; - width: 34em; // slightly bigger than the hardcoded 478px in v1. - - .swal2-header { - padding: 0 15px; - } - - .swal2-icon { - border: none; - height: auto; - margin: 0 auto; - width: auto; - } - - .swal2-content { - font-size: $font-size-base; - padding-bottom: 15px; - @include themify($themes) { - border-bottom: $modal-footer-border-width solid themed("separator"); - } - } - - i.swal-custom-icon { - display: block; - font-size: 35px; - margin: 0 auto; - } - - .swal2-title { - font-size: $font-size-lg; - margin: 0; - padding: 10px 0 15px; - @include themify($themes) { - color: themed("textHeadingColor"); - } - } - - .swal2-content { - font-size: $font-size-base; - padding: 0 15px 15px; - @include themify($themes) { - color: themed("textColor"); - } - } - - .swal2-actions { - @include border-radius($modal-content-border-radius); - display: flex; - flex-direction: row; - font-size: $font-size-base; - justify-content: flex-start; - margin: 0; - padding: 15px; - @include themify($themes) { - background-color: themed("backgroundColor"); - } - - button { - margin-right: 10px; - @extend .btn; - } - } - - .swal2-validation-message { - margin: 0 -15px; - } -} - date-input-polyfill { &[data-open="true"] { z-index: 10000 !important; diff --git a/apps/web/src/scss/styles.scss b/apps/web/src/scss/styles.scss index 0003f521c7..2c0f9c21fd 100644 --- a/apps/web/src/scss/styles.scss +++ b/apps/web/src/scss/styles.scss @@ -44,7 +44,6 @@ @import "~bootstrap/scss/_print"; @import "~ngx-toastr/toastr"; -@import "~#sweetalert2"; @import "./base"; @import "./buttons"; diff --git a/apps/web/webpack.config.js b/apps/web/webpack.config.js index bfdc8ae90a..c7d2bcb5e0 100644 --- a/apps/web/webpack.config.js +++ b/apps/web/webpack.config.js @@ -349,10 +349,6 @@ const webpackConfig = { extensions: [".ts", ".js"], symlinks: false, modules: [path.resolve("../../node_modules")], - alias: { - sweetalert2: require.resolve("sweetalert2/dist/sweetalert2.js"), - "#sweetalert2": require.resolve("sweetalert2/src/sweetalert2.scss"), - }, fallback: { buffer: false, util: require.resolve("util/"), diff --git a/package-lock.json b/package-lock.json index 525fbb0a18..9b07e036e2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -64,7 +64,6 @@ "proper-lockfile": "4.1.2", "qrious": "4.0.2", "rxjs": "7.8.1", - "sweetalert2": "10.16.11", "tldts": "6.0.14", "utf-8-validate": "5.0.10", "zone.js": "0.12.0", @@ -37301,14 +37300,6 @@ "webpack": ">=2" } }, - "node_modules/sweetalert2": { - "version": "10.16.11", - "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-10.16.11.tgz", - "integrity": "sha512-Rdfabv2G89Tr8vmUTb1auWCYYesKBEWnkYPSi7XaiCIW0ZXXGK8Nw1wYKPEMLU6O8gMSMJe5m6MRKqMQsAQy9A==", - "funding": { - "url": "https://sweetalert2.github.io/#donations" - } - }, "node_modules/symbol-observable": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz", diff --git a/package.json b/package.json index d067344124..6f25336db0 100644 --- a/package.json +++ b/package.json @@ -197,7 +197,6 @@ "proper-lockfile": "4.1.2", "qrious": "4.0.2", "rxjs": "7.8.1", - "sweetalert2": "10.16.11", "tldts": "6.0.14", "utf-8-validate": "5.0.10", "zone.js": "0.12.0",