diff --git a/client/common/Icons.jsx b/client/common/Icons.jsx index 66a72c94..05708733 100644 --- a/client/common/Icons.jsx +++ b/client/common/Icons.jsx @@ -7,6 +7,9 @@ import Google from '../images/google.svg'; import Plus from '../images/plus-icon.svg'; import Close from '../images/close.svg'; import DropdownArrow from '../images/down-filled-triangle.svg'; +import Play from '../images/triangle-arrow-right.svg'; +import Preferences from '../images/preferences.svg'; + // HOC that adds the right web accessibility props // https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html @@ -49,3 +52,5 @@ export const GoogleIcon = withLabel(Google); export const PlusIcon = withLabel(Plus); export const CloseIcon = withLabel(Close); export const DropdownArrowIcon = withLabel(DropdownArrow); +export const PlayIcon = withLabel(Play); +export const PreferencesIcon = withLabel(Preferences); diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index 27124ee6..a8149d3b 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -// import { Link } from 'react-router'; +import { Link } from 'react-router'; import { connect } from 'react-redux'; import { withRouter } from 'react-router'; import { useState } from 'react'; @@ -21,10 +21,12 @@ import { getHTMLFile } from '../reducers/files'; // Local Imports import Editor from '../components/Editor'; import { prop, remSize } from '../../../theme'; -import CloseIcon from '../../../images/exit.svg'; +import { CloseIcon } from '../../../common/Icons'; + import PreferencesIcon from '../../../images/preferences.svg'; import PlayIcon from '../../../images/triangle-arrow-right.svg'; + const background = prop('Button.default.background'); const textColor = prop('primaryTextColor'); @@ -42,7 +44,7 @@ const Header = styled.div` display: flex; flex: 1; flex-direction: row; - // justify-content: space-between; + justify-content: flex-start; align-items: center; `; @@ -63,12 +65,11 @@ const Content = styled.div` margin-top: ${remSize(16)}; `; -const Icon = styled.a` +const IconButton = styled.button` + width: 3rem; > svg { - fill: ${textColor}; - color: ${textColor}; - margin-left: ${remSize(16)}; - align-items: center; + width: 100%; + height: auto; } `; @@ -95,26 +96,23 @@ const IDEViewMobile = (props) => { return (
+ +
- {/*
- { [preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, selectedFile, updateFileContent, files, closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, showRuntimeErrorWarning, hideRuntimeErrorWarning] - .map(pr =>
{pr.toString()}
) } -
*/}