@codecademy/codebytes 0.2.1-alpha.a29b64.0 → 0.2.1-alpha.cfe771.0

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-### [0.2.1-alpha.a29b64.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.2.0...@codecademy/codebytes@0.2.1-alpha.a29b64.0) (2022-01-04)
+### [0.2.1-alpha.cfe771.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.2.0...@codecademy/codebytes@0.2.1-alpha.cfe771.0) (2022-01-07)
 
 **Note:** Version bump only for package @codecademy/codebytes
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/codebytes",
   "description": "Codebytes Code Editor",
-  "version": "0.2.1-alpha.a29b64.0",
+  "version": "0.2.1-alpha.cfe771.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "sideEffects": [
     "**/*.css",
@@ -50,5 +50,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "44e6bad947fe2052d41347c37f3ae285f6f0248a"
+  "gitHead": "152cbfee536dbc4fb1ac52fcd4ee6a82f25def61"
 }

package/src/MonacoEditor/colorsDark.ts

@@ -51,4 +51,4 @@ export const ui = {
 
 export type SyntaxColors = typeof syntax;
 
-export type UIColors = typeof ui;
+export type UIColors = typeof ui;

package/src/MonacoEditor/theme.ts

@@ -61,4 +61,4 @@ const theme = ({
   },
 });
 
-export const dark = theme(darkColors);
+export const dark = theme(darkColors);

package/src/MonacoEditor/types.ts

@@ -1 +1 @@
-export type Monaco = typeof import('monaco-editor');
+export type Monaco = typeof import('monaco-editor');

package/src/editor.tsx

@@ -6,7 +6,7 @@ import {
   ToolTip,
 } from '@codecademy/gamut';
 import { CopyIcon } from '@codecademy/gamut-icons';
-import { theme } from '@codecademy/gamut-styles';
+import { colors } from '@codecademy/gamut-styles';
 import styled from '@emotion/styled';
 import React, { useState } from 'react';
 
@@ -23,9 +23,9 @@ const Output = styled.pre<{ hasError: boolean }>`
   font-family: Monaco;
   font-size: 0.875rem;
   overflow: auto;
-  ${({ hasError }) => `
+  ${({ hasError, theme }) => `
   color: ${hasError ? theme.colors.orange : theme.colors.white};
-  background-color: ${theme.colors['gray-900']};
+  background-color: ${colors['gray-900']};
 `}
 `;
 

package/src/index.tsx

@@ -27,8 +27,8 @@ const editorBaseStyles = system.css({
   borderColor: 'gray-900',
   display: 'flex',
   flexDirection: 'column',
-  height: '400px',
-  width: '688px',
+  height: '25rem',
+  width: '43rem',
   overflow: 'hidden',
 });
 export interface EditorStyleProps