ui: Use structure-icons as much as possible (#6851)

* ui: Delete a bunch of CSS that we recently moved elsewhere

* ui: Add some masking placeholders

* Switch out hashicorp logo for one from structure-icons

* Change copy-button to use new copy-action icon

* Change secret-button to use new visibility-hide/show icons

* New folder icon for KVs

* Cleanup some of the icons we no longer use

* Switch from %with-exit to standard-like %with-exit-icon

* Move all chevrons to use structure-icons properly

* Use star-fill as much as possible

* Remove the remaining icons from icons/index plus the file itself

ui-v2/app/styles/base/components/buttons/layout.scss

@@ -34,6 +34,14 @@
   padding-top: calc(0.4em - 1px) !important;
   padding-bottom: calc(0.4em - 1px) !important;
 }
+%copy-button:empty {
+  padding: 5px !important;
+  margin-right: 0;
+  margin-top: -5px;
+}
+%copy-button:not(:empty)::before {
+  margin-right: 10px;
+}
 %internal-button {
   padding: 0.9em 1em;
   text-align: center;

ui-v2/app/styles/base/components/buttons/skin.scss

@@ -15,15 +15,11 @@
   min-height: 17px;
 }
 %copy-button::before {
-  @extend %with-copy-action-icon;
+  @extend %with-copy-action-mask, %as-pseudo;
-  @extend %as-pseudo;
+  background-color: $gray-500;
-  width: 16px;
-  height: 16px;
-  position: absolute;
-  left: 12px;
 }
-%copy-button:not(:empty) {
+%copy-button:not(:empty)::before {
-  padding-left: 38px !important;
+  margin-right: 10px;
 }
 %primary-button,
 %secondary-button,
@@ -44,7 +40,8 @@
   color: $color-action;
   background-color: $gray-050;
 }
-%copy-button:disabled {
+%copy-button:hover::before {
+  background-color: $blue-500;
 }
 %copy-button:active {
   background-color: $gray-200;

ui-v2/app/styles/base/icons/base-variables.scss

@@ -42,7 +42,6 @@ $edit-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns=
 $exit-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 19V5h5.944V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-5.98h-2V19H5zm9-16v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" fill="%23000"/></svg>');
 $expand-less-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 13l2.3 2.3-2.89 2.87 1.42 1.42L8.7 16.7 11 19v-6H5zm14-2l-2.3-2.3 2.89-2.87-1.42-1.42L15.3 7.3 13 5v6h6z" fill="%23000"/></svg>');
 $expand-more-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14 4l2.3 2.3-2.89 2.87 1.42 1.42L17.7 7.7 20 10V4h-6zm-4 16l-2.3-2.3 2.89-2.87-1.42-1.42L6.3 16.3 4 14v6h6z" fill="%23000"/></svg>');
-$eye-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="8" viewBox="0 0 16 8" xmlns="http://www.w3.org/2000/svg"><path d="M10.229 1.301A3.493 3.493 0 0 1 11.5 4a3.493 3.493 0 0 1-1.271 2.699c1.547-.431 3.008-1.326 4.393-2.699-1.385-1.373-2.846-2.268-4.393-2.699zM5.771 6.7A3.493 3.493 0 0 1 4.5 4c0-1.086.495-2.057 1.271-2.699C4.224 1.732 2.763 2.627 1.378 4c1.385 1.373 2.846 2.268 4.393 2.699zM8 8C5.054 8 2.388 6.667 0 4c2.388-2.667 5.054-4 8-4 2.946 0 5.612 1.333 8 4-2.388 2.667-5.054 4-8 4zm.965-4.25a1 1 0 1 0 .07-2 1 1 0 0 0-.07 2z" fill="%237C8896"/></svg>');
 $file-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.714 7.714L14.43 3.43h-10v17.14h14.285V7.714zM20.143 7v13.571c0 .786-.643 1.429-1.429 1.429H4.43A1.433 1.433 0 0 1 3 20.571V3.43C3 2.643 3.643 2 4.429 2h10.714l5 5zM5.857 17.714h10v-1.428h-10v1.428zm0-2.857h10V13.43h-10v1.428zm0-2.857h10v-1.429h-10V12zm0-4.286h5.714V6.286H5.857v1.428z" fill="%23000"/></svg>');
 $file-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20.143 7v13.571c0 .786-.643 1.429-1.429 1.429H4.43A1.433 1.433 0 0 1 3 20.571V3.43C3 2.643 3.643 2 4.429 2h10.714l5 5zm-1.429.714H14.43V3.43h-10v17.14h14.285V7.714z" fill="%23000"/></svg>');
 $filter-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" fill="%23000"/></svg>');

ui-v2/app/styles/base/icons/icon-placeholders.scss

@@ -98,6 +98,11 @@
   background-image: $check-circle-fill-svg;
 }
 
+%with-check-circle-fill-mask {
+  @extend %with-mask;
+  mask-image: $check-circle-fill-svg;
+}
+
 %with-check-circle-outline-icon {
   @extend %with-icon;
   background-image: $check-circle-outline-svg;
@@ -178,6 +183,10 @@
   @extend %with-icon;
   background-image: $copy-action-svg;
 }
+%with-copy-action-mask {
+  @extend %with-mask;
+  mask-image: $copy-action-svg;
+}
 
 %with-copy-success-icon {
   @extend %with-icon;
@@ -229,11 +238,6 @@
   background-image: $expand-more-svg;
 }
 
-%with-eye-icon {
-  @extend %with-icon;
-  background-image: $eye-svg;
-}
-
 %with-file-fill-icon {
   @extend %with-icon;
   background-image: $file-fill-svg;
@@ -269,6 +273,11 @@
   background-image: $folder-outline-svg;
 }
 
+%with-folder-outline-mask {
+  @extend %with-mask;
+  mask-image: $folder-outline-svg;
+}
+
 %with-git-branch-icon {
   @extend %with-icon;
   background-image: $git-branch-svg;
@@ -289,6 +298,10 @@
   background-image: $hashicorp-logo-svg;
 }
 
+%with-hashicorp-logo-mask {
+  @extend %with-mask;
+  mask-image: $hashicorp-logo-svg;
+}
 %with-help-circle-fill-icon {
   @extend %with-icon;
   background-image: $help-circle-fill-svg;
@@ -473,6 +486,11 @@
   background-image: $star-fill-svg;
 }
 
+%with-star-fill-mask {
+  @extend %with-mask;
+  mask-image: $star-fill-svg;
+}
+
 %with-star-outline-icon {
   @extend %with-icon;
   background-image: $star-outline-svg;
@@ -572,8 +590,16 @@
   @extend %with-icon;
   background-image: $visibility-hide-svg;
 }
+%with-visibility-hide-mask {
+  @extend %with-mask;
+  mask-image: $visibility-hide-svg;
+}
 
 %with-visibility-show-icon {
   @extend %with-icon;
   background-image: $visibility-show-svg;
 }
+%with-visibility-show-mask {
+  @extend %with-mask;
+  mask-image: $visibility-show-svg;
+}

ui-v2/app/styles/components/anchors.scss

@@ -1,6 +1,7 @@
 @import '../base/components/anchors/index';
-a[rel*='external'] {
+a[rel*='external']::after {
-  @extend %with-exit;
+  @extend %with-exit-icon, %as-pseudo;
+  margin-left: 8px;
 }
 %main-content label a[rel*='help'] {
   color: $gray-400;

ui-v2/app/styles/components/app-view/skin.scss

@@ -1,3 +1,10 @@
+/*TODO: Rename this to %app-view-brand-icon or similar */
+%with-external-source-icon {
+  background-repeat: no-repeat;
+  background-size: contain;
+  width: 18px;
+  height: 18px;
+}
 %app-view h2,
 %app-view fieldset {
   border-bottom: $decor-border-200;

ui-v2/app/styles/components/buttons.scss

@@ -1,7 +1,4 @@
 @import '../base/components/buttons/index';
-%copy-button {
-  @extend %with-clipboard;
-}
 button[type='submit'],
 a.type-create {
   @extend %primary-button;

ui-v2/app/styles/components/checkbox-group/index.scss

@@ -1,2 +0,0 @@
-@import './skin';
-@import './layout';

ui-v2/app/styles/components/checkbox-group/layout.scss

@@ -1,9 +0,0 @@
-%checkbox-group span {
-  display: inline-block;
-  margin-left: 10px;
-  min-width: 50px;
-}
-%checkbox-group label {
-  margin-right: 10px;
-  white-space: nowrap;
-}

ui-v2/app/styles/components/checkbox-group/skin.scss

@@ -1,3 +0,0 @@
-%checkbox-group label {
-  cursor: pointer;
-}

ui-v2/app/styles/components/form-elements/index.scss

@@ -1,2 +0,0 @@
-@import './skin';
-@import './layout';

ui-v2/app/styles/components/form-elements/layout.scss

@@ -1,62 +0,0 @@
-%form-row {
-  margin-bottom: 1.4em;
-}
-%form-element {
-  @extend %form-row;
-}
-%form-element,
-%form-element > em,
-%form-element > span,
-%form-element textarea {
-  display: block;
-}
-%form-element a {
-  display: inline;
-}
-%form-element > em > code {
-  display: inline-block;
-}
-%form-element [type='text'],
-%form-element [type='password'] {
-  display: inline-flex;
-  justify-content: flex-start;
-}
-%form-element textarea {
-  resize: vertical;
-}
-%form-element > span {
-  margin-bottom: 0.5em;
-}
-%form-element > span + em {
-  margin-top: -0.5em;
-  margin-bottom: 0.5em;
-}
-%form-element textarea {
-  max-width: 100%;
-  min-width: 100%;
-  min-height: 70px;
-  padding: 0.625em 15px;
-}
-%form-element [type='text'],
-%form-element [type='password'] {
-  max-width: 100%;
-  width: 100%;
-  height: 2.25em;
-}
-%form-element > em {
-  margin-top: 2px;
-}
-%form-element > em > code {
-  padding: 0 4px;
-}
-%form-element [type='text'],
-%form-element [type='password'],
-%form-element textarea {
-  padding: 17px 13px;
-}
-%form-element textarea {
-  padding: 6px 13px;
-}
-%form-element > span {
-  margin-bottom: 0.4em !important;
-}

ui-v2/app/styles/components/form-elements/skin.scss

@@ -1,61 +0,0 @@
-%form-element > strong {
-  @extend %with-error;
-}
-%form-element-error > input,
-%form-element-error > textarea {
-  border: $decor-border-100;
-}
-%form-element [type='text'],
-%form-element [type='password'],
-%form-element textarea {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  box-shadow: inset 0 4px 1px rgba(0, 0, 0, 0.06);
-  border-radius: $decor-radius-100;
-  border: $decor-border-100;
-}
-%form-element [type='text']:focus,
-%form-element [type='password']:focus,
-%form-element textarea:focus {
-  outline: none;
-}
-%form-element > em > code {
-  border-radius: $decor-radius-100;
-}
-%form-element-error > input {
-  border-color: $color-failure !important;
-}
-%form-element > strong {
-  color: $color-failure;
-}
-%form-element > em {
-  color: $gray-400;
-}
-%form-element > em > code {
-  background-color: $gray-200;
-  color: $magenta-600;
-  border-radius: $decor-radius-100;
-}
-%form-element > span {
-  color: $black;
-}
-%form-element [type='text'],
-%form-element [type='password'],
-%form-element textarea {
-  color: $gray-500;
-}
-%form-element [type='text'],
-%form-element [type='password'],
-%form-element textarea {
-  border-color: $gray-300;
-}
-%form-element [type='text']:hover,
-%form-element [type='password']:hover,
-%form-element textarea:hover {
-  border-color: $gray-500;
-}
-%form-element [type='text']:focus,
-%form-element [type='password']:focus,
-%form-element textarea:focus {
-  border-color: $blue-500;
-}

ui-v2/app/styles/components/freetext-filter.scss

@@ -1,5 +1,4 @@
 @import './freetext-filter/index';
-@import './icons/index';
 .freetext-filter {
   @extend %freetext-filter;
 }

ui-v2/app/styles/components/healthcheck-info.scss

@@ -1,10 +1,9 @@
 @import './healthcheck-info/index';
-@import './icons/index';
+%table tr .healthcheck-info {
-tr .healthcheck-info {
   @extend %healthcheck-info;
 }
 // TODO: Look at why we can't have the zeros in the healthcheck-info
-td span.zero {
+%table td span.zero {
   @extend %with-minus-square-fill-color-icon;
   background-position: left center;
   display: block;

ui-v2/app/styles/components/healthchecked-resource.scss

@@ -13,6 +13,11 @@
 }
 
 %stats-card-icon:last-child {
+  /* TODO: In order to get rid of our colored star */
+  /* this needs to use a %mask, and we are already using */
+  /* our before/after psuedo elements for the tooltip */
+  /* so this will need reworking slighly before we can */
+  /* get rid of our hardcoded magenta star icon */
   @extend %with-star-icon;
 }
 %stats-card header > .zero {

ui-v2/app/styles/components/icons/index.scss

@@ -1,140 +0,0 @@
-/*TODO: The old pseudo-icon was to specific */
-/* make a temporary one with the -- prefix */
-/* to make it more reusable temporarily */
-%bg-icon {
-  background-repeat: no-repeat;
-  background-position: center;
-}
-%--pseudo-icon {
-  display: inline-block;
-  content: '';
-  visibility: visible;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-%pseudo-icon-bg-img {
-  @extend %--pseudo-icon;
-  position: relative;
-  background-size: contain;
-  background-color: transparent;
-}
-%pseudo-icon-css {
-  @extend %--pseudo-icon;
-  display: block;
-  position: absolute;
-  top: 50%;
-  width: 1em;
-  height: 1em;
-  margin-top: -0.6em;
-  background-color: currentColor;
-}
-/* %pseudo-icon-mask, %pseudo-icon-overlay ?*/
-%pseudo-icon {
-  @extend %pseudo-icon-css;
-}
-%with-external-source-icon {
-  background-repeat: no-repeat;
-  background-size: contain;
-  width: 18px;
-  height: 18px;
-}
-%with-folder {
-  text-indent: 30px;
-}
-%with-hashicorp,
-%with-folder,
-%with-chevron,
-%with-clipboard {
-  position: relative;
-}
-%with-chevron {
-  padding-left: 10px;
-  display: inline-block;
-}
-%with-hashicorp {
-  background-color: $white;
-}
-%with-hashicorp::before {
-  @extend %pseudo-icon;
-  opacity: 0.45;
-  background-image: $hashicorp-logo-svg;
-  background-size: cover;
-  width: 20px;
-  height: 20px;
-  left: -25px;
-  margin-top: -10px;
-  background-color: $color-transparent;
-}
-%with-clipboard {
-  padding-left: 38px !important;
-}
-%with-clipboard::before {
-  @extend %pseudo-icon;
-  background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="17" xmlns="http://www.w3.org/2000/svg"><g fill="%231563FF"><path d="M1.5 10.6v.156c0-.117-.043-.156-.033-.156H1.5zm0 0V1.5h8v2.97H11V1.344C11 .602 10.343 0 9.533 0H1.467C.657 0 0 .602 0 1.344v9.412c0 .742.657 1.344 1.467 1.344h2.995v-1.5H1.5zm-.033-9.1c-.01 0 .033-.04.033-.156V1.5h-.033zm8.033 0v-.156c0 .117.043.156.033.156H9.5zm0 0v-.156c0 .117.043.156.033.156H9.5zm0 0v2.97H11V1.344C11 .602 10.343 0 9.533 0H1.467C.657 0 0 .602 0 1.344v9.412c0 .742.657 1.344 1.467 1.344h2.995v-1.5H1.5V1.5h8zm-8 0h-.033c-.01 0 .033-.04.033-.156V1.5zm0 9.256c0-.117-.043-.156-.033-.156H1.5v.156z" fill-rule="nonzero"/><path d="M14.4 4.5H5.6c-.083 0-.1.016-.1-.033v10.266c0-.049.017-.033.1-.033h8.8c.083 0 .1-.016.1.033V4.467c0 .049-.017.033-.1.033zm0-1.5c.884 0 1.6.657 1.6 1.467v10.266c0 .81-.716 1.467-1.6 1.467H5.6c-.884 0-1.6-.657-1.6-1.467V4.467C4 3.657 4.716 3 5.6 3h8.8z" fill-rule="nonzero"/><path d="M2.5 8.25H10v1.154H2.5z"/><path d="M10.942 8.705l.001.001-2.827 2.828-.807-.808 2.02-2.02-2.02-2.021.807-.808 2.827 2.827v.001z"/></g></svg>');
-  width: 16px;
-  height: 17px;
-  left: 12px;
-  margin-top: -8px;
-  background-color: $color-transparent;
-}
-%with-chevron::before {
-  @extend %pseudo-icon;
-  content: '❮';
-  width: 6px;
-  background-color: transparent;
-  left: 0;
-  font-size: 0.7rem;
-}
-%with-folder::before {
-  @extend %pseudo-icon;
-  width: 12px;
-  height: 12px;
-  top: 50%;
-  margin-top: -6px;
-  left: 2px;
-  background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="14" height="13" xmlns="http://www.w3.org/2000/svg"><path d="M4.779 1H1.8c-.439 0-.8.37-.8.833v9.334c0 .463.361.833.8.833h10.4c.439 0 .8-.37.8-.833V3.833C13 3.37 12.639 3 12.2 3H6.35a.5.5 0 0 1-.42-.228L4.78 1z" stroke="%23BBC4D2" fill="none"/></svg>');
-  background-color: $color-transparent;
-}
-%with-exit::after {
-  @extend %pseudo-icon-bg-img;
-  top: 3px;
-  right: -8px;
-  background-image: $exit-svg;
-  background-color: $color-transparent;
-  width: 16px;
-  height: 16px;
-}
-/*TODO: All chevrons need merging */
-%with-chevron-down::before {
-  @extend %pseudo-icon-bg-img;
-  background-image: $chevron-svg;
-  width: 10px;
-  height: 6px;
-}
-%with-star-before::before,
-%with-star-after::after {
-  @extend %pseudo-icon-bg-img;
-  background-image: $star-svg;
-  width: 10px;
-  height: 9px;
-}
-%with-star-before::before {
-  padding-right: 12px;
-}
-%with-star-after::after {
-  padding-left: 22px;
-}
-%with-star {
-  @extend %with-star-before;
-}
-%with-eye::before {
-  @extend %pseudo-icon-bg-img;
-  background-image: $eye-svg;
-  width: 16px;
-  height: 8px;
-  padding-right: 12px;
-}
-%with-tick {
-  @extend %pseudo-icon;
-  background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="10" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M8.95 0L10 .985 3.734 8 0 4.737l.924-1.11 2.688 2.349z" fill="%23FFF"/></svg>');
-}

ui-v2/app/styles/components/modal-dialog/index.scss

@@ -1,2 +0,0 @@
-@import './skin';
-@import './layout';

ui-v2/app/styles/components/modal-dialog/layout.scss

@@ -1,72 +0,0 @@
-%modal-dialog > div > div {
-  @extend %modal-window;
-}
-%with-modal {
-  overflow: hidden;
-}
-%modal-dialog {
-  z-index: 500;
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-}
-%modal-control,
-%modal-control + * {
-  display: none;
-}
-%modal-control:checked + * {
-  display: block;
-}
-%modal-dialog > label {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-%modal-dialog > div {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}
-%modal-window.overflowing {
-  overflow: auto;
-  height: 100%;
-}
-%modal-window {
-  max-width: 855px;
-  position: relative;
-  z-index: 1;
-}
-%modal-window > * {
-  padding-left: 15px;
-  padding-right: 15px;
-}
-%modal-window > div {
-  overflow-y: auto;
-  max-height: 80vh;
-  padding: 20px 23px;
-}
-%modal-window > footer,
-%modal-window > header {
-  padding-top: 12px;
-  padding-bottom: 10px;
-}
-%modal-window table {
-  height: 150px !important;
-}
-%modal-window tbody {
-  max-height: 100px;
-}
-%modal-window > header {
-  position: relative;
-}
-%modal-window > header [for='modal_close'] {
-  float: right;
-  text-indent: -9000px;
-  width: 23px;
-  height: 23px;
-}

ui-v2/app/styles/components/modal-dialog/skin.scss

@@ -1,35 +0,0 @@
-%modal-dialog > label {
-  background-color: rgba($white, 0.9);
-}
-%modal-window {
-  box-shadow: 2px 8px 8px 0 rgba($black, 0.1);
-}
-%modal-window {
-  /*%frame-gray-000*/
-  background-color: $white;
-  border: $decor-border-100;
-  border-color: $gray-300;
-}
-%modal-window > footer,
-%modal-window > header {
-  @extend %frame-gray-800;
-}
-%modal-window > footer {
-  border-top-width: 1px;
-}
-%modal-window > header {
-  border-bottom-width: 1px;
-}
-
-%modal-window > header [for='modal_close'] {
-  @extend %bg-icon;
-  background-image: $cancel-plain-svg;
-  background-size: 80%;
-
-  cursor: pointer;
-  /*%frame-gray-050??*/
-  background-color: $gray-050;
-  border: $decor-border-100;
-  border-color: $gray-300;
-  border-radius: $decor-radius-100;
-}

ui-v2/app/styles/components/product/footer.scss

@@ -1,5 +1,14 @@
 %footer > a:first-child {
-  @extend %with-hashicorp;
+  position: relative;
+}
+%footer > a:first-child::before {
+  @extend %with-hashicorp-logo-mask, %as-pseudo;
+  background-color: $gray-400;
+  font-size: 1.4em;
+  position: absolute;
+  top: 50%;
+  margin-top: -0.7em;
+  left: -25px;
 }
 %footer {
   border-top: $decor-border-100;

ui-v2/app/styles/components/product/index.scss

@@ -1,7 +1,3 @@
-/* TODO: All of these folders should be self contained */
-/* figure out what the best way to deal with 'icons' is */
-/* most probably a centralized module */
-@import '../icons/index';
 @import './loader';
 @import './main-header-horizontal';
 @import '../main-nav-horizontal/index';

ui-v2/app/styles/components/radio-group/index.scss

@@ -1 +0,0 @@
-@import './layout';

ui-v2/app/styles/components/radio-group/layout.scss

@@ -1,23 +0,0 @@
-%radio-group {
-  overflow: hidden;
-}
-%radio-group label {
-  float: left;
-}
-%radio-group label > span {
-  float: right;
-}
-%radio-group {
-  padding-left: 1px;
-}
-%radio-group label:not(:last-child) {
-  margin-right: 25px;
-}
-%radio-group label > span {
-  margin-left: 1em;
-  margin-top: 0.2em;
-}
-%radio-group label,
-%radio-group label > span {
-  margin-bottom: 0 !important;
-}

ui-v2/app/styles/components/secret-button.scss

@@ -3,9 +3,19 @@
   @extend %secret-button;
 }
 %secret-button {
-  visibility: hidden;
+  position: relative;
-  @extend %with-eye;
 }
 %secret-button span {
+  visibility: hidden;
   position: absolute;
 }
+%secret-button em {
+  margin-left: 22px;
+}
+%secret-button span::before {
+  @extend %with-visibility-show-mask, %as-pseudo;
+  background-color: $gray-500;
+}
+%secret-button input:checked + span::before {
+  @extend %with-visibility-hide-mask;
+}

ui-v2/app/styles/components/secret-button/layout.scss

@@ -4,20 +4,20 @@
 %secret-button input {
   display: none;
 }
-%secret-button input + em {
+%secret-button input ~ em {
   visibility: hidden;
   font-style: normal;
 }
-%secret-button input:checked + em {
+%secret-button input:checked ~ em {
   @extend %user-select-text;
   visibility: visible;
   cursor: auto;
 }
-%secret-button input + em::before {
+%secret-button input ~ em::before {
   display: inline;
   visibility: visible;
   content: '■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■';
 }
-%secret-button input:checked + em::before {
+%secret-button input:checked ~ em::before {
   display: none;
 }

ui-v2/app/styles/components/table.scss

@@ -1,4 +1,3 @@
-@import './icons/index';
 @import '../base/components/table/index';
 table {
   @extend %table, %table-flex;
@@ -19,8 +18,11 @@ html.template-service.template-list main th:first-child {
   text-indent: 28px;
 }
 
-td.folder {
+td.folder::before {
-  @extend %with-folder;
+  @extend %with-folder-outline-mask, %as-pseudo;
+  background-color: $gray-300;
+  margin-top: 1px;
+  margin-right: 5px;
 }
 table:not(.sessions) tbody tr {
   cursor: pointer;

ui-v2/app/styles/components/tabular-details/skin.scss

@@ -1,5 +1,5 @@
-%tabular-details-toggle-button {
+%tabular-details-toggle-button::before {
-  @extend %with-chevron-down;
+  @extend %with-chevron-down-icon, %as-pseudo;
 }
 %tabular-details td:only-child {
   cursor: default;

ui-v2/app/styles/components/toggle/index.scss

@@ -1,2 +0,0 @@
-@import './skin';
-@import './layout';

ui-v2/app/styles/components/toggle/layout.scss

@@ -1,36 +0,0 @@
-%toggle label {
-  position: relative;
-}
-%toggle input {
-  display: none;
-}
-%toggle label span {
-  display: inline-block;
-  padding-left: 34px;
-}
-%toggle label span::before,
-%toggle label span::after {
-  position: absolute;
-  display: block;
-  content: '';
-  top: 50%;
-}
-%toggle label span::before {
-  left: 0px;
-  width: 24px;
-  height: 12px;
-  margin-top: -5px;
-}
-%toggle label span::after {
-  margin-top: -3px;
-  width: 8px;
-  height: 8px;
-}
-%toggle label input:checked + span::after,
-%toggle-negative label input + span::after {
-  left: 14px;
-}
-%toggle label span::after,
-%toggle-negative label input:checked + span::after {
-  left: 2px;
-}

ui-v2/app/styles/components/toggle/skin.scss

@@ -1,30 +0,0 @@
-/* TODO: Maybe move this to reset? */
-%toggle label span {
-  cursor: pointer;
-}
-%toggle label span::after {
-  border-radius: $decor-radius-full;
-}
-%toggle label span::before {
-  border-radius: 7px;
-}
-%toggle-negative {
-  border: 0;
-}
-%toggle.type-negative {
-  @extend %toggle-negative;
-}
-%toggle label span {
-  color: $gray-900;
-}
-%toggle label span::after {
-  background-color: $white;
-}
-%toggle label input:checked + span::before,
-%toggle-negative label input + span::before {
-  background-color: $blue-500;
-}
-%toggle label span::before,
-%toggle-negative label input:checked + span::before {
-  background-color: $gray-300;
-}

ui-v2/app/styles/routes/dc/acls/index.scss

@@ -1,7 +1,6 @@
-td a.is-management {
-  @extend %with-star-after;
-}
 td a.is-management::after {
+  @extend %with-star-fill-mask, %as-pseudo;
+  background-color: $magenta-600;
   height: 16px;
   top: 2px;
   padding-left: 32px;

ui-v2/app/styles/routes/dc/acls/tokens/index.scss

@@ -5,14 +5,12 @@
   float: right;
 }
 %token-yours {
-  text-indent: 20px;
   color: $blue-500;
-  padding-left: 15px;
 }
-%token-yours::after {
+%token-yours::before {
-  @extend %with-tick;
+  @extend %with-check-circle-fill-mask, %as-pseudo;
-  border-radius: 100%;
   background-color: $blue-500;
+  margin-right: 5px;
 }
 .me ~ :nth-last-child(2) {
   @extend %token-yours;

ui-v2/app/styles/routes/dc/settings/index.scss

@@ -2,10 +2,9 @@
   position: relative;
 }
 #urls_service span::after {
-  @extend %with-tick;
+  @extend %with-check-circle-fill-color-icon, %as-pseudo;
-  background-color: $green-500;
+  position: absolute;
-  border-radius: 100%;
+  top: 3px;
-  top: 13px;
   right: 0;
 }
 #urls_service span::after {

ui-v2/app/templates/components/secret-button.hbs

@@ -1,5 +1,5 @@
 <label class="type-reveal">
-  <span>Reveal</span>
   <input type="checkbox" />
+  <span>Reveal</span>
   <em>{{yield}}</em>
 </label>