Remove the character from the program editor

Author: sbates-idrc

src/ProgramBlockEditor.js

@@ -19,7 +19,6 @@ import ProgramSequence from './ProgramSequence';
 import ToggleSwitch from './ToggleSwitch';
 import { ReactComponent as AddIcon } from './svg/Add.svg';
 import { ReactComponent as DeleteAllIcon } from './svg/DeleteAll.svg';
-import { getWorldCharacter } from './Worlds';
 import './ProgramBlockEditor.scss';
 
 // TODO: Send focus to Delete toggle button on close of Delete All confirmation
@@ -754,8 +753,6 @@ export class ProgramBlockEditor extends React.Component<ProgramBlockEditorProps,
         const contents = this.renderProgramSections();
         contents.push(this.makeEndOfProgramAddNodeSection(this.props.programSequence.getProgramLength()));
 
-        const character = getWorldCharacter(this.props.theme, this.props.world);
-
         return (
             <div className='ProgramBlockEditor__container'>
                 <div className='ProgramBlockEditor__header'>
@@ -788,18 +785,6 @@ export class ProgramBlockEditor extends React.Component<ProgramBlockEditorProps,
                         </span>
                     </div>
                 </div>
-                <div className='ProgramBlockEditor__character-column'>
-                    <div
-                        aria-hidden='true'
-                        className={`ProgramBlockEditor__character-column-character-container
-                            ProgramBlockEditor__character-column-character-container--${this.props.world}`}
-                        role='img'>
-                        {React.createElement(
-                            character,
-                            { className: 'ProgramBlockEditor__character-column-character' }
-                        )}
-                    </div>
-                </div>
                 <div
                     className={'ProgramBlockEditor__program-sequence-scroll-container' + (!this.props.editingDisabled && this.props.isDraggingCommand ? ' ProgramBlockEditor__program-sequence-scroll-container--isDragging': '') }
                     ref={this.programSequenceContainerRef}

src/ProgramBlockEditor.scss

@@ -12,15 +12,15 @@
     border-radius: 3px;
     display: grid;
     height: 100%;
-    grid-template-columns: 3rem auto;
+    grid-template-columns: auto;
     grid-template-rows: min-content auto;
 }
 
 .ProgramBlockEditor__header {
     background-color: #CCE6E2;
     display: grid;
     grid-column-start: 1;
-    grid-column-end: 3;
+    grid-column-end: 2;
     grid-row-start: 1;
     grid-row-end: 2;
     grid-template-columns: auto auto;
@@ -95,37 +95,12 @@
     height: 1.4rem;
 }
 
-.ProgramBlockEditor__character-column {
-    align-items: center;
-    background-color: #30444E;
-    border-right: 1px solid #19282F;
-    border-radius: 3px 0 0 3px;
-    box-shadow: 2px 0px 1px #8F8F8F;
-    display: flex;
-    justify-content: center;
-    padding: 0 0.5rem;
-}
-
-.ProgramBlockEditor__character-column-character-container {
-    box-sizing: border-box;
-    height: 45px;
-    width: 45px;
-    border-radius: 4px;
-    border: 2px solid #22343C;
-}
-
-.ProgramBlockEditor__character-column-character {
-    width: 2.5rem;
-    height: 2.5rem;
-    padding: 0.4rem;
-}
-
 .ProgramBlockEditor__program-sequence-scroll-container {
     border-radius: 0 3px 3px 0px;
     display: grid;
     grid-template-rows: auto 9rem auto;
-    grid-column-start: 2;
-    grid-column-end: 3;
+    grid-column-start: 1;
+    grid-column-end: 2;
     grid-row-start: 2;
     grid-row-end: 3;
     background: #FFF;

src/Themes.scss

@@ -266,15 +266,6 @@ body.light-theme {
         color: #1E1E1E;
     }
 
-    .ProgramBlockEditor__character-column {
-        background-color: #EBFAF8;
-        border-right: 2px solid #D3E7EC;
-    }
-
-    .ProgramBlockEditor__character-column-character-container {
-        border: 2px solid #818A98;
-    }
-
     .ProgramBlockEditor__program-sequence-scroll-container {
         background-color: white;
     }
@@ -710,10 +701,6 @@ body.dark-theme {
         border: 2px solid #33717F;
     }
 
-    .ProgramBlockEditor__character-column {
-        background-color: #30444E;
-    }
-
     .ProgramBlockEditor__header {
         background-color: #30444E;
         color: #EBFAF8;
@@ -1381,10 +1368,6 @@ body.gray-theme {
         background-color: #D5D8DD;
     }
 
-    .ProgramBlockEditor__character-column {
-        background-color: #F1F2F4;
-    }
-
     .ProgramBlockEditor__program-sequence-scroll-container {
         background-color: white;
         margin-left: 0.1rem;
@@ -2483,11 +2466,6 @@ body.contrast-theme {
         }
     }
 
-    .ProgramBlockEditor__character-column {
-        background-color: black;
-        border-right: 2px solid #9DA4AF;
-    }
-
     .ProgramBlockEditor__program-sequence-scroll-container {
         background-color: black;
     }