Color tweaks

Author: OskarDamkjaer

src/browser/modules/Editor/Editor.jsx

@@ -461,12 +461,6 @@ export class Editor extends Component {
 
     const editorIsEmpty = this.getEditorValue().length > 0
     const buttons = [
-      {
-        onClick: () => this.setEditorValue(''),
-        icon: eraser2,
-        title: 'Clear',
-        disabled: editorIsEmpty
-      },
       {
         onClick: this.state.contentId
           ? () =>
@@ -486,7 +480,8 @@ export class Editor extends Component {
         onClick: this.execCurrent,
         icon: controlsPlay,
         title: 'Play',
-        disabled: editorIsEmpty
+        disabled: editorIsEmpty,
+        iconColor: this.props.theme.linkHover
       }
     ]
 
@@ -496,7 +491,7 @@ export class Editor extends Component {
     return (
       <Bar expanded={isFullscreen} card={isCardSize}>
         <Header expanded={isFullscreen} card={isCardSize}>
-          <ActionButtons buttons={buttons} />
+          <ActionButtons width={15} buttons={buttons} />
         </Header>
         <EditorWrapper expanded={isFullscreen} card={isCardSize}>
           <Codemirror

src/browser/modules/Editor/EditorWrapper.tsx

@@ -55,27 +55,24 @@ export function EditorFrame({ bus }: EditorFrameProps) {
     bus.send(SET_CONTENT, { message: '' })
   }
 
-  const fullscreenIcon = isFullscreen ? <ContractIcon /> : <ExpandIcon />
-  const expandCollapseIcon = isCardSize ? <UpIcon /> : <DownIcon />
-
   const buttons = [
     {
       onClick: toggleFullscreen,
       disabled: false,
-      title: 'Fullscreen',
-      Icon: fullscreenIcon
+      title: isFullscreen ? 'Close fullscreen' : 'Fullscreen',
+      icon: isFullscreen ? <ContractIcon /> : <ExpandIcon />
     },
     {
       onClick: toggleCardView,
       disabled: false,
       title: isCardSize ? 'Collapse' : 'Cardview',
-      Icon: expandCollapseIcon
+      icon: isCardSize ? <UpIcon /> : <DownIcon />
     },
     {
       onClick: clearEditor,
       disabled: false,
       title: 'Clear',
-      Icon: CloseIcon
+      icon: <CloseIcon />
     }
   ]
 
@@ -84,21 +81,11 @@ export function EditorFrame({ bus }: EditorFrameProps) {
       <FrameHeader>
         <FrameHeaderText> </FrameHeaderText>
         <UIControls>
-          <FrameButton
-            title={isFullscreen ? 'Close fullscreen' : 'Fullscreen'}
-            onClick={onClick}
-          >
-            <fullscreenIcon />
-          </FrameButton>
-          <FrameButton
-            title={isCardSize ? 'Expand' : 'Collapse'}
-            onClick={onClick}
-          >
-            <CloseIcon />
-          </FrameButton>
-          <FrameButton title={'Reset editor'} onClick={clearEditor}>
-            <CloseIcon />
-          </FrameButton>
+          {buttons.map(({ onClick, icon, title }) => (
+            <FrameButton key={`frame-${title}`} title={title} onClick={onClick}>
+              {icon}
+            </FrameButton>
+          ))}
         </UIControls>
       </FrameHeader>
       {

src/browser/modules/Editor/styled.tsx

@@ -34,30 +34,12 @@ export const BaseBar = styled.div<ResizeableProps>`
   border-radius: 2px;
   // minmax(0, 1fr) prevents the editor from growing the text field
   grid-template-columns: minmax(0, 1fr) auto;
-  grid-template-areas: ${(props): string => {
-    if (props.expanded || props.card) {
-      return "'header' 'editor'"
-    }
-    return "'editor header'"
-  }};
+  grid-template-areas: 'editor header';
 `
 
 export const Header = styled.div<ResizeableProps>`
   grid-area: header;
   border-radius: 4px 4px 0 0;
-  ${(props): string => {
-    if (props.expanded) {
-      return `background-color: #4d4a57;
-              border-radius: 0;
-      `
-    }
-    if (props.card) {
-      return `background-color: #4d4a57;
-              transition-duration: 0.3s;`
-    }
-    return ''
-  }}
-
   display: flex;
   justify-content: flex-end;
   padding-top: 7px
@@ -100,7 +82,7 @@ const BaseEditorWrapper = styled.div<ResizeableProps>`
     return '0'
   }};
 
-  ${(props): string => (props.expanded ? '' : 'transition-duration: 0.1s;')}
+  transition-duration: 0.1s;
 
   .CodeMirror {
     color: ${(props): string => props.theme.editorCommandColor};
@@ -124,7 +106,6 @@ export const FrameHeader = styled.div`
   display: flex;
   flex-direction: column;
   margin-left: 7px;
-  margin-right: 7px;
   height: 33px;
 `