code-dot-org · Erin007 · Feb 3, 2026 · Feb 3, 2026
diff --git a/apps/src/templates/instructions/AniGifPreview.jsx b/apps/src/templates/instructions/AniGifPreview.jsx
@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import Radium from 'radium'; // eslint-disable-line no-restricted-imports
 import React from 'react';
 import {connect} from 'react-redux';
 
@@ -32,19 +33,17 @@ class ImagePreviewUnwrapped extends React.Component {
       ariaLabel = `${ariaLabel}. ${alt}`;
     }
 
-    const previewStyle = {
-      ...styles.aniGifPreview(url),
-      ...(noVisualization ? styles.bigPreview : {}),
-    };
-
     return (
       <div id="ani-gif-preview-wrapper" style={styles.wrapper}>
         <div
           id="ani-gif-preview"
           role="button"
           tabIndex={0}
           aria-label={ariaLabel}
-          style={previewStyle}
+          style={[
+            styles.aniGifPreview(url),
+            noVisualization && styles.bigPreview,
+          ]}
           onClick={showInstructionsDialog}
           onKeyDown={this.handleKeyDown}
         />
@@ -70,7 +69,7 @@ const styles = {
   },
 };
 
-export const ImagePreview = ImagePreviewUnwrapped;
+export const ImagePreview = Radium(ImagePreviewUnwrapped);
 export default connect(
   state => ({
     url: state.pageConstants.aniGifURL,

diff --git a/apps/src/templates/instructions/ChatBubble.jsx b/apps/src/templates/instructions/ChatBubble.jsx
@@ -1,5 +1,5 @@
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import Radium from 'radium'; // eslint-disable-line no-restricted-imports
 import React from 'react';
 
 import color from '@cdo/apps/util/color';
@@ -8,7 +8,38 @@ import ChatBubbleTip from './ChatBubbleTip';
 import InlineAudio from './InlineAudio';
 import {shouldDisplayChatTips} from './utils';
 
-import styles from './chat-bubble.module.scss';
+const styles = {
+  container: {
+    position: 'relative',
+  },
+
+  main: {
+    backgroundColor: color.white,
+    borderRadius: 10,
+    margin: '5px 0',
+    paddingTop: 5,
+    paddingBottom: 5,
+    paddingLeft: 10,
+    paddingRight: 10,
+    position: 'relative',
+    borderWidth: 2,
+  },
+
+  minecraft: {
+    borderRadius: 4,
+    borderWidth: 0,
+  },
+
+  withAudioControls: {
+    paddingRight: 76,
+  },
+
+  audioControls: {
+    position: 'absolute',
+    top: 7,
+    right: 12,
+  },
+};
 
 var audioStyle = {
   wrapper: {
@@ -43,20 +74,17 @@ const ChatBubble = ({
   isDashed = isDashed || false;
   const showAudioControls = textToSpeechEnabled && (ttsUrl || ttsMessage);
 
-  const mainClassName = classNames(styles.main, {
-    [styles.minecraft]: isMinecraft,
-    [styles.withAudioControls]: showAudioControls,
-  });
-
   return (
-    <div className={styles.container}>
+    <div style={styles.container}>
       <div
-        className={mainClassName}
-        style={{
-          borderColor,
-          backgroundColor,
-          borderStyle: isDashed ? 'dashed' : 'solid',
-        }}
+        style={[
+          styles.main,
+          isMinecraft && styles.minecraft,
+          showAudioControls && styles.withAudioControls,
+          {borderColor},
+          {backgroundColor},
+          {borderStyle: isDashed ? 'dashed' : 'solid'},
+        ]}
       >
         {children}
         {shouldDisplayChatTips(skinId) && (
@@ -68,7 +96,7 @@ const ChatBubble = ({
         )}
       </div>
       {showAudioControls && (
-        <div className={styles.audioControls}>
+        <div style={styles.audioControls}>
           <InlineAudio src={ttsUrl} message={ttsMessage} style={audioStyle} />
         </div>
       )}
@@ -88,4 +116,4 @@ ChatBubble.propTypes = {
   textToSpeechEnabled: PropTypes.bool,
 };
 
-export default ChatBubble;
+export default Radium(ChatBubble);
diff --git a/apps/src/templates/instructions/ChatBubbleTip.jsx b/apps/src/templates/instructions/ChatBubbleTip.jsx
@@ -1,28 +1,33 @@
 import PropTypes from 'prop-types';
+import Radium from 'radium'; // eslint-disable-line no-restricted-imports
 import React from 'react';
 import {connect} from 'react-redux';
 
-import styles from './chat-bubble-tip.module.scss';
-
 const ChatBubbleTip = ({isRtl, color, background, isDashed}) => {
   background = background || 'white';
   color = color || 'none';
   isDashed = isDashed || false;
 
+  const styles = {
+    svg: {
+      position: 'absolute',
+      left: isRtl ? undefined : -24,
+      right: isRtl ? -24 : undefined,
+      bottom: 5,
+    },
+    polyline: {
+      stroke: color,
+      strokeWidth: 2,
+      fill: background,
+    },
+  };
+
   return (
-    <svg
-      height="30"
-      width="30"
-      className={isRtl ? styles.svgRtl : styles.svgLtr}
-    >
+    <svg height="30" width="30" style={styles.svg}>
       <polyline
         points={isRtl ? '6,25 25,25 5,5' : '24,24 5,24 25,5'}
-        style={{
-          stroke: color,
-          strokeWidth: 2,
-          fill: background,
-          strokeDasharray: isDashed ? '5,5' : '0,0',
-        }}
+        style={styles.polyline}
+        strokeDasharray={isDashed ? '5,5' : '0,0'}
       />
     </svg>
   );
@@ -39,4 +44,4 @@ export default connect(state => {
   return {
     isRtl: state.isRtl,
   };
-})(ChatBubbleTip);
+})(Radium(ChatBubbleTip));
diff --git a/apps/src/templates/instructions/CollapserButton.jsx b/apps/src/templates/instructions/CollapserButton.jsx
@@ -1,12 +1,11 @@
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import Radium from 'radium'; // eslint-disable-line no-restricted-imports
 import React, {Component} from 'react';
 
 import msg from '@cdo/locale';
 
 import FontAwesome from '../../legacySharedComponents/FontAwesome';
-
-import styles from './collapser-button.module.scss';
+import color from '../../util/color';
 
 /**
  * A button for toggling the collapse state of instructions in CSF
@@ -27,8 +26,7 @@ class CollapserButton extends Component {
     return (
       <button
         type="button"
-        className={styles.collapseButton}
-        style={this.props.style}
+        style={[styles.collapseButton, this.props.style]}
         id="toggleButton"
         onClick={this.props.onClick}
       >
@@ -46,26 +44,28 @@ class CollapserButton extends Component {
             icon={
               this.props.collapsed ? 'chevron-circle-down' : 'chevron-circle-up'
             }
-            className={
+            style={
               this.props.isRtl ? styles.collapseIconRtl : styles.collapseIcon
             }
           />
         )}
-        <div className={styles.textWrapper}>
-          <div className={styles.labelGrid}>
+        <div style={{display: 'inline-block', userSelect: 'none'}}>
+          <div style={{display: 'grid'}}>
             <div
-              className={classNames(
-                styles.label,
-                this.props.collapsed ? styles.show : styles.hide
-              )}
+              style={{
+                opacity: this.props.collapsed ? 1 : 0,
+                gridRow: 1,
+                gridColumn: 1,
+              }}
             >
               {msg.more()}
             </div>
             <div
-              className={classNames(
-                styles.label,
-                this.props.collapsed ? styles.hide : styles.show
-              )}
+              style={{
+                opacity: this.props.collapsed ? 0 : 1,
+                gridRow: 1,
+                gridColumn: 1,
+              }}
             >
               {msg.less()}
             </div>
@@ -76,4 +76,27 @@ class CollapserButton extends Component {
   }
 }
 
-export default CollapserButton;
+const styles = {
+  collapseButton: {
+    backgroundColor: color.neutral_white,
+    border: `2px solid ${color.neutral_dark}`,
+    color: color.neutral_dark,
+    whiteSpace: 'nowrap',
+    ':hover': {
+      backgroundColor: color.neutral_dark20,
+      boxShadow: 'none',
+    },
+    ':focus': {
+      backgroundColor: color.neutral_dark20,
+      boxShadow: 'none',
+    },
+  },
+  collapseIcon: {
+    marginRight: 5,
+  },
+  collapseIconRtl: {
+    marginLeft: 5,
+  },
+};
+
+export default Radium(CollapserButton);
diff --git a/apps/src/templates/instructions/HeightResizer.jsx b/apps/src/templates/instructions/HeightResizer.jsx
@@ -4,11 +4,11 @@
  * which handles any movement.
  */
 import PropTypes from 'prop-types';
+import Radium from 'radium'; // eslint-disable-line no-restricted-imports
 import React from 'react';
 
 import styleConstants from '../../styleConstants';
-
-import styles from './height-resizer.module.scss';
+import color from '../../util/color';
 
 const RESIZER_HEIGHT = styleConstants['resize-bar-width'];
 
@@ -151,38 +151,76 @@ class HeightResizer extends React.Component {
   };
 
   render() {
-    let mainStyle, ellipsisClassName, mainClass;
+    let mainStyle, ellipsisStyle, ellipsisClassName;
     if (this.props.vertical) {
-      mainClass = styles.mainVertical;
-      mainStyle = {
-        left: this.props.position - RESIZER_HEIGHT,
-        ...this.props.style,
-      };
+      mainStyle = [
+        styles.mainVertical,
+        {
+          left: this.props.position - RESIZER_HEIGHT,
+        },
+        this.props.style,
+      ];
+      ellipsisStyle = styles.ellipsisVertical;
       ellipsisClassName = 'fa fa-ellipsis-v';
     } else {
-      mainClass = styles.main;
-      mainStyle = {
-        top: this.props.position - RESIZER_HEIGHT,
-        ...this.props.style,
-      };
+      mainStyle = [
+        styles.main,
+        {
+          top: this.props.position - RESIZER_HEIGHT,
+        },
+        this.props.style,
+      ];
+      ellipsisStyle = styles.ellipsis;
       ellipsisClassName = 'fa fa-ellipsis-h';
     }
 
     return (
       <div
         id="ui-test-resizer"
         style={mainStyle}
-        className={mainClass}
         ref={ref => (this.resizerRef = ref)}
       >
-        <div
-          className={`${styles.ellipsis} ${
-            this.props.vertical ? styles.ellipsisVertical : ''
-          } ${ellipsisClassName}`}
-        />
+        <div style={ellipsisStyle} className={ellipsisClassName} />
       </div>
     );
   }
 }
 
-export default HeightResizer;
+const styles = {
+  main: {
+    position: 'absolute',
+    height: RESIZER_HEIGHT,
+    left: 0,
+    right: 0,
+    cursor: 'ns-resize',
+  },
+  mainVertical: {
+    position: 'absolute',
+    width: RESIZER_HEIGHT,
+    top: 0,
+    bottom: 0,
+    cursor: 'ew-resize',
+  },
+  ellipsis: {
+    width: '100%',
+    color: color.lighter_gray,
+    fontSize: 24,
+    textAlign: 'center',
+    whiteSpace: 'nowrap',
+    lineHeight: RESIZER_HEIGHT + 'px',
+    paddingTop: 1, // results in a slightly better centering
+  },
+  ellipsisVertical: {
+    width: '100%',
+    color: color.lighter_gray,
+    fontSize: 24,
+    textAlign: 'center',
+    whiteSpace: 'nowrap',
+    lineHeight: RESIZER_HEIGHT + 'px',
+    top: '50%',
+    position: 'absolute',
+    transform: 'translateY(-50%)',
+  },
+};
+
+export default Radium(HeightResizer);
diff --git a/apps/src/templates/instructions/InlineFeedback.jsx b/apps/src/templates/instructions/InlineFeedback.jsx
@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import Radium from 'radium'; // eslint-disable-line no-restricted-imports
 import React, {Component} from 'react';
 import ReactDOM from 'react-dom';
 
@@ -55,4 +56,4 @@ class InlineFeedback extends Component {
   }
 }
 
-export default InlineFeedback;
+export default Radium(InlineFeedback);