From 9228df4e2889fb9c7aaf34a5880d04d5cfbcef59 Mon Sep 17 00:00:00 2001
From: Oscar Hinton <Hinton@users.noreply.github.com>
Date: Fri, 21 Feb 2025 16:56:05 +0100
Subject: [PATCH] Remove unused CSS from browser (#13453)

Cleanup browser CSS by removing unused rules. There are probably more unused CSS rules but it's not trivial to audit and we will probably remove them as part of the auth redesign.
---
 apps/browser/src/popup/scss/base.scss        | 182 ----------
 apps/browser/src/popup/scss/box.scss         | 164 ---------
 apps/browser/src/popup/scss/environment.scss |  44 ---
 apps/browser/src/popup/scss/misc.scss        |   9 -
 apps/browser/src/popup/scss/modal.scss       | 356 -------------------
 apps/browser/src/popup/scss/pages.scss       | 245 -------------
 apps/browser/src/popup/scss/popup.scss       |   1 -
 7 files changed, 1001 deletions(-)
 delete mode 100644 apps/browser/src/popup/scss/modal.scss

diff --git a/apps/browser/src/popup/scss/base.scss b/apps/browser/src/popup/scss/base.scss
index 554396fa038..bfa037eea23 100644
--- a/apps/browser/src/popup/scss/base.scss
+++ b/apps/browser/src/popup/scss/base.scss
@@ -356,86 +356,10 @@ header:not(bit-callout header, bit-dialog header, popup-page header) {
   }
 }
 
-.no-bg {
-  background-color: transparent;
-}
-
-.no-pad {
-  padding: 0 !important;
-}
-
 .content {
   padding: 15px 5px;
 }
 
-.tabs {
-  width: 100%;
-  height: 55px;
-  border-top: 1px solid #000000;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  overflow: hidden;
-
-  @include themify($themes) {
-    background-color: themed("tabBackgroundColor");
-    border-top-color: themed("borderColor");
-  }
-
-  ul {
-    display: flex;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-
-    li {
-      flex: 1;
-      display: inline-block;
-      padding: 0;
-      margin: 0;
-
-      a,
-      button {
-        text-align: center;
-        display: block;
-        padding: 7px 0;
-        text-decoration: none;
-        font-size: 12px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        width: 100%;
-
-        @include themify($themes) {
-          color: themed("mutedColor");
-        }
-
-        &:hover,
-        &:focus {
-          @include themify($themes) {
-            background-color: themed("tabBackgroundHoverColor");
-          }
-        }
-
-        i {
-          display: block;
-          margin-bottom: 2px;
-          text-align: center;
-        }
-      }
-
-      &.active {
-        a,
-        button {
-          @include themify($themes) {
-            color: themed("primaryColor");
-          }
-        }
-      }
-    }
-  }
-}
-
 app-root {
   position: absolute;
   width: 100%;
@@ -475,16 +399,6 @@ main:not(popup-page main) {
     display: flex;
     flex-flow: column;
     height: calc(100% - 44px);
-
-    &.tab-page {
-      height: calc(100% - 99px);
-    }
-  }
-}
-
-.tab-page {
-  main {
-    bottom: 55px;
   }
 }
 
@@ -534,102 +448,6 @@ main:not(popup-page main) {
   width: 100%;
 }
 
-.org-filter-content {
-  padding-bottom: 5px;
-  padding-left: 7px;
-  .org-filter {
-    @include themify($themes) {
-      background-color: themed("buttonBackgroundColor");
-    }
-    border-radius: $border-radius;
-    padding: 6px 10px;
-    width: auto;
-    max-width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    .org-filter-text-container {
-      // src: https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
-      display: flex;
-      flex: 1;
-      min-width: 0;
-
-      .org-filter-text-name {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-  }
-}
-.vault-select {
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-
-  @include themify($themes) {
-    background-color: themed("boxBackgroundColor");
-  }
-  margin-right: 18px;
-  margin-top: 1px;
-  @include themify($themes) {
-    border: 1px solid themed("borderColor");
-  }
-  border-radius: $border-radius;
-  button {
-    border: none;
-    background: transparent;
-    width: auto;
-    max-width: 100%;
-
-    padding: 5px 10px;
-    text-align: start;
-    @include themify($themes) {
-      color: themed("textColor");
-    }
-
-    a {
-      @include themify($themes) {
-        color: themed("textColor");
-      }
-    }
-
-    &:hover {
-      @include themify($themes) {
-        background-color: themed("boxBackgroundHoverColor");
-      }
-    }
-
-    i.vault-select-prefix-icon {
-      margin-right: 5px;
-    }
-    i.vault-select-suffix-icon {
-      margin-left: 5px;
-    }
-
-    .vault-select-org-text-container {
-      display: flex;
-      flex: 1;
-      min-width: 0;
-      align-items: center;
-      .vault-select-org-name {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-  }
-  .border {
-    @include themify($themes) {
-      background: themed("borderColor");
-    }
-    left: 10px;
-    width: calc(100% - 20px);
-    height: 1px;
-    position: relative;
-  }
-}
-
 .login-with-device {
   .fingerprint-phrase-header {
     padding-top: 1rem;
diff --git a/apps/browser/src/popup/scss/box.scss b/apps/browser/src/popup/scss/box.scss
index 179673279e6..1e053f6b9da 100644
--- a/apps/browser/src/popup/scss/box.scss
+++ b/apps/browser/src/popup/scss/box.scss
@@ -18,39 +18,6 @@
     }
   }
 
-  .box-header-expandable {
-    padding: 10px 5px;
-    margin: 0 5px;
-    text-transform: uppercase;
-    display: flex;
-    width: calc(100% - 10px);
-    box-sizing: border-box;
-    align-items: center;
-    border-radius: $border-radius;
-
-    @include themify($themes) {
-      color: themed("headingColor");
-    }
-
-    &:hover,
-    &:focus-visible,
-    &.active {
-      @include themify($themes) {
-        background-color: themed("boxBackgroundHoverColor");
-      }
-    }
-
-    .icon {
-      display: flex;
-      align-items: center;
-      margin-right: 5px;
-
-      @include themify($themes) {
-        color: themed("headingColor");
-      }
-    }
-  }
-
   .box-content {
     @include themify($themes) {
       background-color: themed("backgroundColor");
@@ -200,35 +167,6 @@
       }
     }
   }
-
-  &.only-list {
-    margin-bottom: 0;
-
-    .box-content {
-      border-bottom: none;
-    }
-  }
-
-  &.full-list {
-    margin: 0;
-
-    .box-content {
-      border: none;
-    }
-  }
-}
-
-.stacked-boxes {
-  display: flex;
-  flex-direction: column;
-}
-
-.box-section-divider {
-  border-top: 1px solid #000000;
-
-  @include themify($themes) {
-    border-color: themed("borderColor");
-  }
 }
 
 .box-content-row {
@@ -243,10 +181,6 @@
     background-color: themed("boxBackgroundColor");
   }
 
-  &.no-bg {
-    background-color: rgba(0, 0, 0, 0) !important;
-  }
-
   &:last-child {
     &:before {
       border: none;
@@ -599,15 +533,6 @@
     }
   }
 
-  .row-sub-label {
-    margin: 0 15px;
-    white-space: nowrap;
-
-    @include themify($themes) {
-      color: themed("mutedColor");
-    }
-  }
-
   .icon {
     display: flex;
     justify-content: center;
@@ -630,68 +555,6 @@
     }
   }
 
-  &.totp {
-    .totp-code {
-      font-family: $font-family-monospace;
-      font-size: 1.1em;
-    }
-
-    .totp-countdown {
-      margin: 3px 3px 0 0;
-      display: block;
-      user-select: none;
-
-      .totp-sec {
-        font-size: 0.85em;
-        position: absolute;
-        line-height: 32px;
-        width: 32px;
-        text-align: center;
-      }
-
-      svg {
-        width: 32px;
-        height: 32px;
-        transform: rotate(-90deg);
-      }
-
-      .totp-circle {
-        fill: none;
-
-        @include themify($themes) {
-          stroke: themed("totpStrokeColor");
-        }
-
-        &.inner {
-          stroke-width: 3;
-          stroke-dasharray: 78.6;
-          stroke-dashoffset: 0;
-        }
-
-        &.outer {
-          stroke-width: 2;
-          stroke-dasharray: 88;
-          stroke-dashoffset: 0;
-        }
-      }
-    }
-
-    &.low {
-      .totp-sec,
-      .totp-code {
-        @include themify($themes) {
-          color: themed("dangerColor");
-        }
-      }
-
-      .totp-circle {
-        @include themify($themes) {
-          stroke: themed("dangerColor");
-        }
-      }
-    }
-  }
-
   .progress {
     display: flex;
     height: 5px;
@@ -740,12 +603,6 @@
   }
 }
 
-.truncate-box {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-}
-
 .truncate {
   display: inline-block;
   white-space: nowrap;
@@ -768,24 +625,3 @@ form {
     }
   }
 }
-
-.account-switcher-row {
-  @include themify($themes) {
-    color: themed("textColor");
-    background-color: themed("boxBackgroundColor");
-  }
-
-  &:hover,
-  &:focus,
-  &.active {
-    @include themify($themes) {
-      background-color: themed("listItemBackgroundHoverColor");
-    }
-  }
-
-  &-details {
-    @include themify($themes) {
-      color: themed("mutedColor");
-    }
-  }
-}
diff --git a/apps/browser/src/popup/scss/environment.scss b/apps/browser/src/popup/scss/environment.scss
index 0fb8e0ddaba..042bcd1b450 100644
--- a/apps/browser/src/popup/scss/environment.scss
+++ b/apps/browser/src/popup/scss/environment.scss
@@ -45,47 +45,3 @@ html.browser_safari {
     border-color: #2e3440;
   }
 }
-
-.environment-selector-btn {
-  font-size: $font-size-small;
-  color: $text-muted;
-  line-height: 25px;
-  font-weight: 400;
-  padding-left: 15px;
-
-  span {
-    font-weight: 600;
-    font-size: $font-size-small;
-  }
-}
-
-.environment-selector-dialog {
-  @include themify($themes) {
-    background-color: themed("boxBackgroundColor");
-  }
-  padding: 5px;
-  width: 100%;
-  box-shadow:
-    0 2px 2px 0 rgba(0, 0, 0, 0.14),
-    0 3px 1px -2px rgba(0, 0, 0, 0.12),
-    0 1px 5px 0 rgba(0, 0, 0, 0.2);
-  border-radius: $border-radius;
-}
-
-.environment-selector-dialog-item {
-  @include themify($themes) {
-    color: themed("textColor") !important;
-  }
-  width: 100%;
-  text-align: left;
-  padding: 0px 15px 0px 5px;
-  border-radius: 3px;
-  border: 1px solid transparent;
-  transition: all 0.2s ease-in-out;
-
-  &:hover {
-    @include themify($themes) {
-      background-color: themed("listItemBackgroundHoverColor") !important;
-    }
-  }
-}
diff --git a/apps/browser/src/popup/scss/misc.scss b/apps/browser/src/popup/scss/misc.scss
index f61d593c43f..86623e395e8 100644
--- a/apps/browser/src/popup/scss/misc.scss
+++ b/apps/browser/src/popup/scss/misc.scss
@@ -334,11 +334,6 @@ img,
   }
 }
 
-app-about .modal-body > *,
-app-vault-view .box-footer {
-  user-select: auto;
-}
-
 /* tweak for inconsistent line heights in cipher view */
 .box-footer button,
 .box-footer a {
@@ -359,10 +354,6 @@ html.force_redraw {
   animation: redraw 1s linear infinite;
 }
 
-.rounded-circle {
-  border-radius: 50% !important;
-}
-
 /* override for vault icon in browser (pre extension refresh) */
 app-vault-icon:not(app-vault-list-items-container app-vault-icon) > div {
   display: flex;
diff --git a/apps/browser/src/popup/scss/modal.scss b/apps/browser/src/popup/scss/modal.scss
deleted file mode 100644
index 1d86b1e880a..00000000000
--- a/apps/browser/src/popup/scss/modal.scss
+++ /dev/null
@@ -1,356 +0,0 @@
-@import "variables.scss";
-
-$white: white;
-$black: black;
-$line-height-base: 14px;
-$border-radius-lg: $border-radius;
-
-// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss
-
-$grid-breakpoints: (
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-) !default;
-
-$zindex-modal-backdrop: 1040 !default;
-$zindex-modal: 1050 !default;
-
-// Padding applied to the modal body
-$modal-inner-padding: 10px !default;
-
-$modal-dialog-margin: 0.5rem !default;
-$modal-dialog-margin-y-sm-up: 1.75rem !default;
-
-$modal-title-line-height: $line-height-base !default;
-
-//$modal-content-bg: $background-color-alt !default;
-$modal-content-border-color: rgba($black, 0.2) !default;
-$modal-content-border-width: 1px !default;
-$modal-content-box-shadow-xs: none;
-$modal-content-box-shadow-sm-up: none;
-
-$modal-backdrop-bg: $black !default;
-$modal-backdrop-opacity: 0.5 !default;
-$modal-header-border-color: $border-color-dark !default;
-$modal-footer-border-color: $modal-header-border-color !default;
-$modal-header-border-width: $modal-content-border-width !default;
-$modal-footer-border-width: $modal-header-border-width !default;
-$modal-header-padding: 12px !default;
-
-$modal-lg: 800px !default;
-$modal-md: 500px !default;
-$modal-sm: 300px !default;
-
-$modal-transition: transform 0.3s ease-out !default;
-
-$close-font-size: $font-size-base * 1.5 !default;
-$close-font-weight: bold !default;
-$close-color: $black !default;
-$close-text-shadow: 0 1px 0 $white !default;
-
-// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss
-
-@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
-  $min: breakpoint-min($name, $breakpoints);
-
-  @if $min {
-    @media (min-width: $min) {
-      @content;
-    }
-  } @else {
-    @content;
-  }
-}
-
-@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
-  $min: map-get($breakpoints, $name);
-  @return if($min != 0, $min, null);
-}
-
-// Custom Added CSS animations
-
-@keyframes modalshow {
-  0% {
-    opacity: 0;
-    transform: translate(0, -25%);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translate(0, 0);
-  }
-}
-
-@keyframes backdropshow {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: $modal-backdrop-opacity;
-  }
-}
-
-// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_modal.scss
-
-// .modal-open      - body class for killing the scroll
-// .modal           - container to scroll within
-// .modal-dialog    - positioning shell for the actual modal
-// .modal-content   - actual modal w/ bg and corners and stuff
-
-// Kill the scroll on the body
-.modal-open {
-  overflow: hidden;
-}
-
-// Container that the modal scrolls within
-.modal {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: $zindex-modal;
-  //display: none;
-  overflow: hidden;
-  // Prevent Chrome on Windows from adding a focus outline. For details, see
-  // https://github.com/twbs/bootstrap/pull/10951.
-  outline: 0;
-  // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
-  // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
-  // See also https://github.com/twbs/bootstrap/issues/17695
-  .modal-open & {
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-}
-
-// Shell div to position the modal with bottom padding
-.modal-dialog {
-  position: relative;
-  width: auto;
-  margin: $modal-dialog-margin;
-  // allow clicks to pass through for custom click handling to close modal
-  pointer-events: none;
-  // When fading in the modal, animate it to slide down
-  .modal.fade & {
-    //@include transition($modal-transition);
-    //transform: translate(0, -25%);
-    animation: modalshow 0.3s ease-in;
-  }
-  //.modal.show & {
-  //    transform: translate(0, 0);
-  //}
-  transform: translate(0, 0);
-}
-
-.modal-dialog-centered {
-  display: flex;
-  align-items: center;
-  min-height: calc(100% - (#{$modal-dialog-margin} * 2));
-}
-
-// Actual modal
-.modal-content {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
-  // counteract the pointer-events: none; in the .modal-dialog
-  pointer-events: auto;
-  //background-color: $modal-content-bg;
-  background-clip: padding-box;
-  border: $modal-content-border-width solid $modal-content-border-color;
-  //@include border-radius($border-radius-lg);
-  //@include box-shadow($modal-content-box-shadow-xs);
-  border-radius: $border-radius-lg;
-  box-shadow: $modal-content-box-shadow-xs;
-  // Remove focus outline from opened modal
-  outline: 0;
-
-  @include themify($themes) {
-    background-color: themed("backgroundColorAlt");
-  }
-}
-
-// Modal background
-.modal-backdrop {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: $zindex-modal-backdrop;
-  background-color: $modal-backdrop-bg;
-  // Fade for backdrop
-  &.fade {
-    //opacity: 0;
-    animation: backdropshow 0.1s ease-in;
-  }
-  //&.show {
-  //    opacity: $modal-backdrop-opacity;
-  //}
-  opacity: $modal-backdrop-opacity;
-}
-
-// Modal header
-// Top section of the modal w/ title and dismiss
-.modal-header {
-  display: flex;
-  align-items: flex-start; // so the close btn always stays on the upper right corner
-  justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
-  padding: $modal-header-padding $modal-inner-padding;
-  border-bottom: $modal-header-border-width solid $modal-header-border-color;
-  //@include border-top-radius($border-radius-lg);
-
-  @include themify($themes) {
-    border-bottom-color: themed("borderColor");
-  }
-
-  .close {
-    padding: $modal-header-padding $modal-inner-padding;
-    // auto on the left force icon to the right even when there is no .modal-title
-    margin: (-$modal-header-padding) (-$modal-inner-padding) (-$modal-header-padding) auto;
-  }
-
-  h5 {
-    font-size: $font-size-base;
-    font-weight: bold;
-    display: flex;
-    align-items: center;
-
-    .bwi {
-      margin-right: 5px;
-    }
-  }
-}
-
-// Title text within header
-.modal-title {
-  margin-bottom: 0;
-  line-height: $modal-title-line-height;
-}
-
-// Modal body
-// Where all modal content resides (sibling of .modal-header and .modal-footer)
-.modal-body {
-  position: relative;
-  // Enable `flex-grow: 1` so that the body take up as much space as possible
-  // when should there be a fixed height on `.modal-dialog`.
-  flex: 1 1 auto;
-  padding: $modal-inner-padding;
-}
-
-// Footer (for actions)
-.modal-footer {
-  display: flex;
-  align-items: center; // vertically center
-  //justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
-  padding: $modal-inner-padding;
-  border-top: $modal-footer-border-width solid $modal-footer-border-color;
-
-  @include themify($themes) {
-    border-top-color: themed("borderColor");
-  }
-
-  // Easily place margin between footer elements
-  button {
-    margin-right: 10px;
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-
-  .right {
-    margin-left: auto;
-    display: flex;
-  }
-}
-
-// Measure scrollbar width for padding body during modal show/hide
-.modal-scrollbar-measure {
-  position: absolute;
-  top: -9999px;
-  width: 50px;
-  height: 50px;
-  overflow: scroll;
-}
-
-// Scale up the modal
-@include media-breakpoint-up(sm) {
-  // Automatically set modal's width for larger viewports
-  .modal-dialog {
-    max-width: $modal-md;
-    margin: $modal-dialog-margin-y-sm-up auto;
-  }
-
-  .modal-dialog-centered {
-    min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2));
-  }
-
-  .modal-content {
-    //@include box-shadow($modal-content-box-shadow-sm-up);
-    box-shadow: $modal-content-box-shadow-sm-up;
-  }
-
-  .modal-sm {
-    max-width: $modal-sm;
-  }
-}
-
-@include media-breakpoint-up(lg) {
-  .modal-lg {
-    max-width: $modal-lg;
-  }
-}
-
-// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_close.scss
-
-.close {
-  float: right;
-  font-size: $close-font-size;
-  font-weight: $close-font-weight;
-  line-height: 1;
-  color: $close-color;
-  text-shadow: $close-text-shadow;
-  opacity: 0.5;
-
-  &:hover,
-  &:focus {
-    color: $close-color;
-    text-decoration: none;
-    opacity: 0.75;
-  }
-  // Opinionated: add "hand" cursor to non-disabled .close elements
-  &:not(:disabled):not(.disabled) {
-    cursor: pointer;
-  }
-}
-
-// Additional properties for button version
-// iOS requires the button element instead of an anchor tag.
-// If you want the anchor version, it requires `href="#"`.
-// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
-
-// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type
-button.close {
-  padding: 0;
-  background-color: transparent;
-  border: 0;
-  -webkit-appearance: none;
-}
-// stylelint-enable
-
-// box
-
-.modal-content .box {
-  margin-top: 20px;
-
-  &:first-child {
-    margin-top: 0;
-  }
-}
diff --git a/apps/browser/src/popup/scss/pages.scss b/apps/browser/src/popup/scss/pages.scss
index 2fd903fedc7..4c2daab2159 100644
--- a/apps/browser/src/popup/scss/pages.scss
+++ b/apps/browser/src/popup/scss/pages.scss
@@ -1,61 +1,5 @@
 @import "variables.scss";
 
-app-sync {
-  main {
-    .btn {
-      margin-bottom: 10px;
-    }
-  }
-}
-
-app-generator .generated-block {
-  font-size: $font-size-large;
-  font-family: $font-family-monospace;
-  margin: 8px;
-  padding: 8px 10px 8px 0;
-  display: flex;
-  border-radius: $border-radius;
-  border: 1px solid;
-
-  @include themify($themes) {
-    background-color: transparent;
-    border-color: themed("borderColorAlt");
-  }
-
-  .generated-wrapper {
-    text-align: left;
-    width: 100%;
-    min-width: 0;
-    white-space: pre-wrap;
-    word-break: break-all;
-    padding: 15px;
-    border-radius: $border-radius;
-
-    @include themify($themes) {
-      background-color: themed("backgroundColor");
-    }
-  }
-
-  .action-buttons {
-    display: flex;
-    align-self: center;
-    height: 100%;
-    margin-left: 10px;
-
-    button {
-      padding: 6px;
-      margin: 2px;
-      border-radius: $border-radius;
-
-      &:hover {
-        @include themify($themes) {
-          background-color: themed("hoverColorTransparent");
-        }
-      }
-    }
-  }
-}
-
 app-home {
   position: fixed;
   height: 100%;
@@ -148,29 +92,6 @@ body.body-full {
   margin: 15px 0 15px 0;
 }
 
-app-options {
-  .box {
-    margin: 10px 0;
-
-    & + .box {
-      margin-top: 10px;
-    }
-  }
-}
-
-app-vault-view,
-app-vault-add-edit,
-app-generator,
-app-vault-attachments {
-  .box {
-    margin: 15px 0 25px 0;
-
-    & + .box {
-      margin-top: 25px;
-    }
-  }
-}
-
 .useBrowserlink {
   margin-left: 5px;
   margin-top: 20px;
@@ -216,169 +137,3 @@ app-vault-attachments {
     margin-bottom: 0;
   }
 }
-
-app-fido2-v1 {
-  .auth-wrapper {
-    display: flex;
-    flex-direction: column;
-    padding: 12px 24px 12px 24px;
-
-    .auth-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .left {
-        padding-right: 10px;
-
-        .logo {
-          display: inline-flex;
-          align-items: center;
-
-          i.bwi {
-            font-size: 35px;
-            margin-right: 3px;
-            @include themify($themes) {
-              color: themed("primaryColor");
-            }
-          }
-
-          span {
-            font-size: 45px;
-            font-weight: 300;
-            margin-top: -3px;
-            @include themify($themes) {
-              color: themed("primaryColor");
-            }
-          }
-        }
-      }
-
-      .search {
-        padding: 7px 10px;
-        width: 100%;
-        text-align: left;
-        position: relative;
-        display: flex;
-
-        .bwi {
-          position: absolute;
-          top: 15px;
-          left: 20px;
-
-          @include themify($themes) {
-            color: themed("labelColor");
-          }
-        }
-
-        input {
-          width: 100%;
-          margin: 0;
-          border: none;
-          padding: 5px 10px 5px 30px;
-          border-radius: $border-radius;
-
-          &:focus {
-            border-radius: $border-radius;
-            outline: none;
-          }
-
-          &[type="search"]::-webkit-search-cancel-button {
-            -webkit-appearance: none;
-            appearance: none;
-            background-repeat: no-repeat;
-            mask-image: none;
-            -webkit-mask-image: none;
-          }
-        }
-      }
-    }
-
-    .auth-flow {
-      display: flex;
-      align-items: flex-start;
-      flex-direction: column;
-      margin-top: 32px;
-
-      .subtitle {
-        font-family: "DM Sans";
-        font-size: 24px;
-        font-style: normal;
-        font-weight: 600;
-        line-height: 32px;
-      }
-
-      .box.list {
-        overflow-y: auto;
-      }
-
-      .box-content {
-        max-height: 140px;
-      }
-
-      @media screen and (min-height: 501px) and (max-height: 600px) {
-        .box-content {
-          max-height: 200px;
-        }
-      }
-
-      @media screen and (min-height: 601px) {
-        .box-content {
-          max-height: 260px;
-        }
-      }
-
-      .box-content-row {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin: 0px;
-        padding: 0px;
-        margin-bottom: 12px;
-
-        button {
-          min-height: 44px;
-        }
-
-        .row-main {
-          border-radius: 6px;
-          padding: 5px 0px 5px 12px;
-
-          &:focus {
-            @include themify($themes) {
-              padding: 3px 0px 3px 10px;
-              border: 2px solid themed("headerInputBackgroundFocusColor");
-            }
-          }
-
-          &.row-selected {
-            @include themify($themes) {
-              outline: none;
-              padding-left: 7px;
-              border-left: 5px solid themed("primaryColor");
-              background-color: themed("headerBackgroundHoverColor");
-              color: themed("headerColor");
-            }
-          }
-        }
-
-        .row-main-content {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-
-          .detail {
-            min-height: 15px;
-            display: block;
-          }
-        }
-      }
-
-      .btn {
-        width: 100%;
-        font-size: 16px;
-        font-weight: 600;
-      }
-    }
-  }
-}
diff --git a/apps/browser/src/popup/scss/popup.scss b/apps/browser/src/popup/scss/popup.scss
index 8dc2c206f87..9bec001c936 100644
--- a/apps/browser/src/popup/scss/popup.scss
+++ b/apps/browser/src/popup/scss/popup.scss
@@ -7,7 +7,6 @@
 @import "box.scss";
 @import "buttons.scss";
 @import "misc.scss";
-@import "modal.scss";
 @import "environment.scss";
 @import "pages.scss";
 @import "plugins.scss";