Rebuilding code block menus (#5569)

app/editor/components/ToolbarButton.tsx

@@ -1,7 +1,12 @@
-import styled from "styled-components";
+import { transparentize } from "polished";
+import styled, { css } from "styled-components";
 import { s } from "@shared/styles";
 
-type Props = { active?: boolean; disabled?: boolean };
+type Props = {
+  active?: boolean;
+  disabled?: boolean;
+  hovering?: boolean;
+};
 
 export default styled.button.attrs((props) => ({
   type: props.type || "button",
@@ -14,6 +19,7 @@ export default styled.button.attrs((props) => ({
   height: 24px;
   cursor: var(--pointer);
   border: none;
+  border-radius: 2px;
   background: none;
   transition: opacity 100ms ease-in-out;
   padding: 0;
@@ -21,12 +27,19 @@ export default styled.button.attrs((props) => ({
   outline: none;
   pointer-events: all;
   position: relative;
-  color: ${s("toolbarItem")};
+  transition: background 100ms ease-in-out;
+  color: ${s("text")};
 
   &:hover {
     opacity: 1;
   }
 
+  ${(props) =>
+    props.hovering &&
+    css`
+      opacity: 1;
+    `};
+
   &:disabled {
     opacity: 0.3;
     cursor: default;
@@ -35,11 +48,16 @@ export default styled.button.attrs((props) => ({
   &:before {
     position: absolute;
     content: "";
-    top: -4px;
+    top: -6px;
     right: -4px;
     left: -4px;
-    bottom: -4px;
+    bottom: -6px;
   }
 
-  ${(props) => props.active && "opacity: 1;"};
+  ${(props) =>
+    props.active &&
+    css`
+      opacity: 1;
+      background: ${(props) => transparentize(0.9, s("accent")(props))};
+    `};
 `;