Improved styles for buttons

Author: pomber

packages/mdx/dev/content/scrollycoding.mdx

@@ -8,6 +8,10 @@ npm install next react react-dom
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
 
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
+
 <CH.Scrollycoding>
 
 Create a `next.config.js` file at the root of your project.
@@ -37,6 +41,18 @@ module.exports = withMDX({
 })
 ```
 
+```js foo.js
+
+```
+
+```js barbarbar.js
+
+```
+
+```js bax.js
+
+```
+
 ---
 
 ```css index.css

packages/mdx/src/mini-editor/dialog.scss

@@ -2,15 +2,10 @@
   overflow: hidden;
 }
 
-.ch-expand-button {
-  width: 1.5em;
-  height: 1.5em;
-  cursor: pointer;
-}
-
 .ch-expand-dialog {
   height: 100vh;
   width: 100vw;
+  max-width: 900px;
   border: 0;
   background-color: transparent;
 }

packages/mdx/src/mini-editor/editor-frame.tsx

@@ -194,7 +194,7 @@ function TabsContainer({
           <TabTitle title={title} />
         </div>
       ))}
-      <div style={{ flex: 1 }} />
+      <div style={{ flex: 1, minWidth: "0.8em" }} />
       {button}
     </>
   )

packages/mdx/src/mini-editor/editor-tween.tsx

@@ -100,13 +100,13 @@ function EditorTween({
     <>
       {showCopyButton ? (
         <CopyButton
+          className="ch-editor-button"
           content={northContent}
-          style={{ marginRight: "0.8em" }}
         />
       ) : undefined}
       {showExpandButton ? (
         <ExpandButton
-          style={{ marginRight: "0.8em" }}
+          className="ch-editor-button"
           step={next || prev}
           theme={codeConfig.theme}
         />
@@ -116,8 +116,8 @@ function EditorTween({
 
   const southCopyButton = showCopyButton ? (
     <CopyButton
+      className="ch-editor-button"
       content={southContent}
-      style={{ marginRight: "0.8em" }}
     />
   ) : undefined
 

packages/mdx/src/mini-editor/expand-button.tsx

@@ -7,17 +7,20 @@ export function ExpandButton({
   style,
   step,
   theme,
+  className,
 }: {
   style?: React.CSSProperties
   step: EditorStep
   theme: IRawTheme
+  className?: string
 }) {
   const [expanded, setExpanded] = React.useState(false)
   const ref = React.useRef<any>(null)
   const files = step.files
   return (
     <>
       <ExpandIcon
+        className={className}
         style={style}
         onClick={() => {
           ref.current.showModal()
@@ -61,15 +64,17 @@ export function ExpandButton({
 function ExpandIcon({
   onClick,
   style,
+  className,
 }: {
   onClick: () => void
   style?: React.CSSProperties
+  className?: string
 }) {
   return (
     <svg
       style={style}
       onClick={onClick}
-      className="ch-expand-button"
+      className={className}
       fill="none"
       stroke="currentColor"
       viewBox="0 0 24 24"

packages/mdx/src/mini-editor/index.scss

@@ -94,3 +94,12 @@
   font-size: 12px;
   margin: 0;
 }
+
+.ch-editor-button {
+  width: 1.5em;
+  height: 1.5em;
+  cursor: pointer;
+  min-width: 1.5em;
+  min-height: 1.5em;
+  margin-right: 0.8em;
+}

packages/mdx/src/smooth-code/code-tween.tsx

@@ -171,13 +171,7 @@ function AfterDimensions({
       />
       {config.showCopyButton ? (
         <CopyButton
-          style={{
-            position: "absolute",
-            top: 10,
-            right: 10,
-            width: "1.1em",
-            height: "1.1em",
-          }}
+          className="ch-code-button"
           content={stepInfo?.code?.prev}
         />
       ) : undefined}

packages/mdx/src/smooth-code/copy-button.tsx

@@ -3,32 +3,29 @@ import React from "react"
 export function CopyButton({
   content,
   style,
+  className,
 }: {
   content: string
   style?: React.CSSProperties
+  className?: string
 }) {
   const [copied, setCopied] = React.useState(false)
 
   return (
     <svg
-      style={{
-        width: "1.5em",
-        height: "1.5em",
-        cursor: "pointer",
-        ...style,
-      }}
+      style={style}
       onClick={() => {
         copyToClipboard(content)
         setCopied(true)
         setTimeout(() => {
           setCopied(false)
         }, 1200)
       }}
-      className="ch-copy-button"
       fill="none"
       stroke="currentColor"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
+      className={className}
     >
       <title>Copy</title>
 

packages/mdx/src/smooth-code/index.scss

@@ -25,3 +25,12 @@
   background-color: var(--ch-selection-background);
   color: inherit;
 }
+
+.ch-code-button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 1.1em;
+  height: 1.1em;
+  cursor: pointer;
+}