Merge branch 'dev/5.0.x' into rc/5.0.x

packages/app/src/components/PagePathNav.tsx

@@ -36,7 +36,7 @@ const PagePathNav: FC<Props> = (props: Props) => {
   }
 
   const copyDropdownId = `copydropdown${isCompactMode ? '-subnav-compact' : ''}-${pageId}`;
-  const copyDropdownToggleClassName = 'd-block text-muted bg-transparent btn-copy border-0 py-0';
+  const copyDropdownToggleClassName = 'd-block btn-outline-secondary btn-copy border-0 text-muted p-2';
 
   return (
     <div className="grw-page-path-nav">

packages/app/src/styles/_editor-attachment.scss

@@ -109,10 +109,6 @@
     border-top: 1px dotted $gray-300;
     border-bottom: none;
 
-    &:active {
-      box-shadow: none;
-    }
-
     &:hover,
     &:focus {
       border-bottom: none;

packages/app/src/styles/_override-bootstrap-variables.scss

@@ -79,23 +79,15 @@ $border-radius: 4px;
 $border-radius-sm: 0;
 $border-radius-lg: 8px;
 
-// Buttons + Forms
-//
-// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
-
-$input-btn-focus-box-shadow: none;
-
 // Buttons
 //
 // For each of Bootstrap's buttons, define text, background, and border color.
 $btn-link-disabled-color: $gray-500;
-$btn-focus-box-shadow: none;
 $btn-active-box-shadow: none;
 
 //== Forms
 //
 $input-border-color: $gray-300;
-
 $input-placeholder-color: $gray-500;
 
 $custom-control-indicator-border-color: $gray-400;

packages/app/src/styles/_override-rbt.scss

@@ -5,7 +5,6 @@
     // focus
     &.focus {
       border-color: inherit;
-      box-shadow: none;
     }
   }
 }

packages/app/src/styles/_page-tree.scss

@@ -21,10 +21,6 @@ $grw-pagetree-item-padding-left: 10px;
       transition: all 0.2s ease-out;
       transform: rotate(0deg);
 
-      &:focus {
-        box-shadow: none;
-      }
-
       &.grw-pagetree-open {
         transform: rotate(90deg);
       }

packages/app/src/styles/atoms/_buttons.scss

@@ -7,6 +7,9 @@
   &:not(:disabled):not(.disabled):not(:hover) {
     background-color: transparent;
   }
+  &:focus {
+    box-shadow: none;
+  }
 }
 
 .btn.btn-bookmark {
@@ -18,11 +21,17 @@
   &:not(:disabled):not(.disabled):not(:hover) {
     background-color: transparent;
   }
+  &:focus {
+    box-shadow: none;
+  }
 }
 
 .btn-copy,
 .btn-edit {
-  opacity: 0.3;
+  &:not(:hover):not(:active) {
+    background-color: transparent !important;
+  }
+  opacity: 0.5;
 }
 
 .btn-edit-tags {

packages/app/src/styles/molecules/page-editor-mode-manager.scss

@@ -26,7 +26,4 @@
       letter-spacing: -0.6px;
     }
   }
-  &:not(:disabled):not(.disabled):focus {
-    box-shadow: none;
-  }
 }

packages/app/src/styles/molecules/slack-notification.scss

@@ -20,9 +20,6 @@
   // in the input and form-control element
   .grw-form-control-slack-notification.form-control {
     height: $input-height-slack;
-    &:focus {
-      box-shadow: none;
-    }
   }
   .grw-input-group-slack-notification {
     height: $input-height-slack;

packages/app/src/styles/theme/_reboot-bootstrap-theme-colors.scss

@@ -77,6 +77,7 @@ $theme-colors: map-merge($theme-colors, $colors);
   .btn-#{$color} {
     @include button-variant($value, $value);
     @include button-svg-icon-variant($value, $value);
+    box-shadow: none !important;
   }
 }
 
@@ -89,6 +90,7 @@ $theme-colors: map-merge($theme-colors, $colors);
     .show > &.dropdown-toggle {
       color: $value;
     }
+    box-shadow: none !important;
   }
 }