From f40cd4f376b23fa01b054d7d7d72fd2c8d17b5cd Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 15 Jun 2020 17:46:56 -0300 Subject: [PATCH 01/10] :construction: mount component on mobile view --- client/modules/IDE/pages/IDEViewMobile.jsx | 233 +++++++++++++++++++-- 1 file changed, 221 insertions(+), 12 deletions(-) diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index 845f5203..2af67ab9 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -1,14 +1,33 @@ 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'; +// Imports to be Refactored +import { bindActionCreators } from 'redux'; +import * as FileActions from '../actions/files'; +import * as IDEActions from '../actions/ide'; +import * as ProjectActions from '../actions/project'; +import * as EditorAccessibilityActions from '../actions/editorAccessibility'; +import * as PreferencesActions from '../actions/preferences'; +import * as UserActions from '../../User/actions'; +import * as ToastActions from '../actions/toast'; +import * as ConsoleActions from '../actions/console'; +import { getHTMLFile } from '../reducers/files'; + +// Local Imports +import Editor from '../components/Editor'; import { prop, remSize } from '../../../theme'; + const background = prop('Button.default.background'); const textColor = prop('primaryTextColor'); const Header = styled.div` + position: fixed; width: 100%; background-color: ${background}; color: ${textColor}; @@ -17,13 +36,18 @@ const Header = styled.div` const Footer = styled.div` width: 100%; - position: absolute; + position: fixed; bottom: 0; background: ${background}; color: ${textColor}; padding-left: ${remSize(32)}; `; +const Content = styled.div` +`; + +const f = x => x; + const Screen = ({ children }) => (
{children} @@ -33,16 +57,201 @@ Screen.propTypes = { children: PropTypes.node.isRequired }; -export default () => ( - -

Mobile View

+const IDEViewMobile = (props) => { + // const + // const { + // preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, selectedFile, updateFileContent, files, closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, showRuntimeErrorWarning, hideRuntimeErrorWarning + // } = props; + + const [tmController, setTmController] = useState(null); + + return ( + +

Mobile View

+ {/*
+ { [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()}
) } +
*/} + + + +

Bottom Bar

+ + ); +}; -

-
This page is under construction. -
Click here to return to the regular editor -

+IDEViewMobile.propTypes = { -

Bottom Bar

- -); + preferences: PropTypes.shape({ + fontSize: PropTypes.number.isRequired, + autosave: PropTypes.bool.isRequired, + linewrap: PropTypes.bool.isRequired, + lineNumbers: PropTypes.bool.isRequired, + lintWarning: PropTypes.bool.isRequired, + textOutput: PropTypes.bool.isRequired, + gridOutput: PropTypes.bool.isRequired, + soundOutput: PropTypes.bool.isRequired, + theme: PropTypes.string.isRequired, + autorefresh: PropTypes.bool.isRequired + }).isRequired, + + ide: PropTypes.shape({ + isPlaying: PropTypes.bool.isRequired, + isAccessibleOutputPlaying: PropTypes.bool.isRequired, + consoleEvent: PropTypes.array, + modalIsVisible: PropTypes.bool.isRequired, + sidebarIsExpanded: PropTypes.bool.isRequired, + consoleIsExpanded: PropTypes.bool.isRequired, + preferencesIsVisible: PropTypes.bool.isRequired, + projectOptionsVisible: PropTypes.bool.isRequired, + newFolderModalVisible: PropTypes.bool.isRequired, + shareModalVisible: PropTypes.bool.isRequired, + shareModalProjectId: PropTypes.string.isRequired, + shareModalProjectName: PropTypes.string.isRequired, + shareModalProjectUsername: PropTypes.string.isRequired, + editorOptionsVisible: PropTypes.bool.isRequired, + keyboardShortcutVisible: PropTypes.bool.isRequired, + unsavedChanges: PropTypes.bool.isRequired, + infiniteLoop: PropTypes.bool.isRequired, + previewIsRefreshing: PropTypes.bool.isRequired, + infiniteLoopMessage: PropTypes.string.isRequired, + projectSavedTime: PropTypes.string, + previousPath: PropTypes.string.isRequired, + justOpenedProject: PropTypes.bool.isRequired, + errorType: PropTypes.string, + runtimeErrorWarningVisible: PropTypes.bool.isRequired, + uploadFileModalVisible: PropTypes.bool.isRequired + }).isRequired, + + editorAccessibility: PropTypes.shape({ + lintMessages: PropTypes.array.isRequired, + }).isRequired, + + project: PropTypes.shape({ + id: PropTypes.string, + name: PropTypes.string.isRequired, + owner: PropTypes.shape({ + username: PropTypes.string, + id: PropTypes.string + }), + updatedAt: PropTypes.string + }).isRequired, + + updateLintMessage: PropTypes.func.isRequired, + + clearLintMessage: PropTypes.func.isRequired, + + selectedFile: PropTypes.shape({ + id: PropTypes.string.isRequired, + content: PropTypes.string.isRequired, + name: PropTypes.string.isRequired + }).isRequired, + + updateFileContent: PropTypes.func.isRequired, + + files: PropTypes.arrayOf(PropTypes.shape({ + id: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + content: PropTypes.string.isRequired + })).isRequired, + + closeEditorOptions: PropTypes.func.isRequired, + + showEditorOptions: PropTypes.func.isRequired, + + showKeyboardShortcutModal: PropTypes.func.isRequired, + + setUnsavedChanges: PropTypes.func.isRequired, + + startRefreshSketch: PropTypes.func.isRequired, + + stopSketch: PropTypes.func.isRequired, + + expandSidebar: PropTypes.func.isRequired, + + collapseSidebar: PropTypes.func.isRequired, + + clearConsole: PropTypes.func.isRequired, + + console: PropTypes.arrayOf(PropTypes.shape({ + method: PropTypes.string.isRequired, + args: PropTypes.arrayOf(PropTypes.string) + })).isRequired, + + showRuntimeErrorWarning: PropTypes.func.isRequired, + + hideRuntimeErrorWarning: PropTypes.func.isRequired, + +}; + + +function mapStateToProps(state) { + return { + files: state.files, + selectedFile: state.files.find(file => file.isSelectedFile) || + state.files.find(file => file.name === 'sketch.js') || + state.files.find(file => file.name !== 'root'), + htmlFile: getHTMLFile(state.files), + ide: state.ide, + preferences: state.preferences, + editorAccessibility: state.editorAccessibility, + user: state.user, + project: state.project, + toast: state.toast, + console: state.console + }; +} + +function mapDispatchToProps(dispatch) { + return bindActionCreators( + Object.assign( + {}, + EditorAccessibilityActions, + FileActions, + ProjectActions, + IDEActions, + PreferencesActions, + UserActions, + ToastActions, + ConsoleActions + ), + dispatch + ); +} + + +export default withRouter(connect(mapStateToProps, mapDispatchToProps)(IDEViewMobile)); From fb831f5f62132c085f434d5d8d9d3ca3062f720f Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 15 Jun 2020 17:59:11 -0300 Subject: [PATCH 02/10] :bug: fix basic layout issues --- client/modules/IDE/pages/IDEViewMobile.jsx | 88 ++++++++++++---------- 1 file changed, 48 insertions(+), 40 deletions(-) diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index 2af67ab9..206ffae4 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -31,7 +31,9 @@ const Header = styled.div` width: 100%; background-color: ${background}; color: ${textColor}; + padding: ${remSize(12)}; padding-left: ${remSize(32)}; + z-index: 1; `; const Footer = styled.div` @@ -44,9 +46,10 @@ const Footer = styled.div` `; const Content = styled.div` + z-index: 0; + margin-top: ${remSize(16)}; `; -const f = x => x; const Screen = ({ children }) => (
@@ -59,55 +62,60 @@ Screen.propTypes = { const IDEViewMobile = (props) => { // const - // const { - // preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, selectedFile, updateFileContent, files, closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, showRuntimeErrorWarning, hideRuntimeErrorWarning - // } = props; + const { + preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, selectedFile, updateFileContent, files, closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, showRuntimeErrorWarning, hideRuntimeErrorWarning + } = props; const [tmController, setTmController] = useState(null); return ( -

Mobile View

+
+ {/*

Mobile View

*/} +

{project.name}

+

{selectedFile.name}

+
{/*
{ [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()}
) }
*/} - - + + +

Bottom Bar

 ); From 11adfbfca5c2b180ca4eaf2bdf38c28967d1fb31 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 15 Jun 2020 18:34:04 -0300 Subject: [PATCH 03/10] :construction: add button to return to main view --- client/modules/IDE/pages/IDEViewMobile.jsx | 49 ++++++++++++++++------ 1 file changed, 36 insertions(+), 13 deletions(-) diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index 206ffae4..8d75c04e 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -21,28 +21,39 @@ import { getHTMLFile } from '../reducers/files'; // Local Imports import Editor from '../components/Editor'; import { prop, remSize } from '../../../theme'; - +import CloseIcon from '../../../images/exit.svg'; const background = prop('Button.default.background'); const textColor = prop('primaryTextColor'); + const Header = styled.div` position: fixed; width: 100%; - background-color: ${background}; + background: ${background}; + color: ${textColor}; + padding: ${remSize(12)}; + padding-left: ${remSize(32)}; + padding-right: ${remSize(32)}; + z-index: 1; + + display: flex; + flex: 1; + flex-direction: row; + // justify-content: space-between; + align-items: center; +`; + +const Footer = styled.div` + position: fixed; + width: 100%; + background: ${background}; color: ${textColor}; padding: ${remSize(12)}; padding-left: ${remSize(32)}; z-index: 1; -`; -const Footer = styled.div` - width: 100%; - position: fixed; bottom: 0; - background: ${background}; - color: ${textColor}; - padding-left: ${remSize(32)}; `; const Content = styled.div` @@ -50,6 +61,14 @@ const Content = styled.div` margin-top: ${remSize(16)}; `; +const Icon = styled.a` + > svg { + fill: ${textColor}; + color: ${textColor}; + margin: 8px + } +`; + const Screen = ({ children }) => (
@@ -71,9 +90,13 @@ const IDEViewMobile = (props) => { return (
- {/*

Mobile View

*/} -

{project.name}

-

{selectedFile.name}

+
+

{project.name}

+

{selectedFile.name}

+
+ +
{/*
{ [preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, selectedFile, updateFileContent, files, closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, showRuntimeErrorWarning, hideRuntimeErrorWarning] @@ -116,7 +139,7 @@ const IDEViewMobile = (props) => { provideController={setTmController} /> -

Bottom Bar

+

Bottom Bar

); }; From 32dd85eb69a03aee31ad5589e651b99fe5bbe2f4 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 15 Jun 2020 18:47:08 -0300 Subject: [PATCH 04/10] :bug: fix unused vars on IDEViewMobile --- client/modules/IDE/pages/IDEViewMobile.jsx | 60 +++++++++++----------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index 8d75c04e..4897e550 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -105,37 +105,37 @@ const IDEViewMobile = (props) => { From 2b179194f8a7aa05a8c6b12736b41d6504e232a6 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 15 Jun 2020 18:52:40 -0300 Subject: [PATCH 05/10] :lipstick: fix svg margin --- client/modules/IDE/pages/IDEViewMobile.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index 4897e550..40734b4b 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -65,7 +65,7 @@ const Icon = styled.a` > svg { fill: ${textColor}; color: ${textColor}; - margin: 8px + margin-left: ${remSize(16)}; } `; From 7f8138a204d5c73a54eca5e283811d7c19a91378 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Mon, 15 Jun 2020 18:59:21 -0300 Subject: [PATCH 06/10] :bug: add correct verification to --- client/modules/IDE/pages/IDEViewMobile.jsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index 40734b4b..dfb8787d 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -79,6 +79,8 @@ Screen.propTypes = { children: PropTypes.node.isRequired }; +const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id); + const IDEViewMobile = (props) => { // const const { @@ -130,7 +132,7 @@ const IDEViewMobile = (props) => { isExpanded={ide.sidebarIsExpanded} expandSidebar={expandSidebar} collapseSidebar={collapseSidebar} - isUserOwner={setTmController} + isUserOwner={isUserOwner(props)} clearConsole={clearConsole} consoleEvents={console} showRuntimeErrorWarning={showRuntimeErrorWarning} @@ -247,6 +249,11 @@ IDEViewMobile.propTypes = { hideRuntimeErrorWarning: PropTypes.func.isRequired, + user: PropTypes.shape({ + authenticated: PropTypes.bool.isRequired, + id: PropTypes.string, + username: PropTypes.string + }).isRequired, }; From 5aa349522ac9fcf25310ccd4c316e8d2672e5930 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Tue, 16 Jun 2020 16:52:35 -0300 Subject: [PATCH 07/10] :ok_hand: fix icon import --- client/modules/IDE/pages/IDEViewMobile.jsx | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index dfb8787d..84fd68f0 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,7 +21,7 @@ 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'; const background = prop('Button.default.background'); const textColor = prop('primaryTextColor'); @@ -40,7 +40,7 @@ const Header = styled.div` display: flex; flex: 1; flex-direction: row; - // justify-content: space-between; + justify-content: flex-start; align-items: center; `; @@ -82,7 +82,6 @@ Screen.propTypes = { const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id); const IDEViewMobile = (props) => { - // const const { preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, selectedFile, updateFileContent, files, closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, showRuntimeErrorWarning, hideRuntimeErrorWarning } = props; @@ -92,18 +91,14 @@ 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()}
) } -
*/} Date: Thu, 18 Jun 2020 14:16:28 -0300 Subject: [PATCH 08/10] :ok_hand: remove inline styles from IconLink component --- client/modules/IDE/pages/IDEViewMobile.jsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index 84fd68f0..ff6e5481 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -69,6 +69,12 @@ const Icon = styled.a` } `; +const StyledLink = styled(Link)` + width: 3rem; + margin-right: 1.25rem; + margin-left: none; +`; + const Screen = ({ children }) => (
@@ -91,9 +97,9 @@ const IDEViewMobile = (props) => { return (
- +

{project.name}

{selectedFile.name}

From 81cf4157404616282b4d3e58671422231d17e982 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Thu, 18 Jun 2020 14:21:09 -0300 Subject: [PATCH 09/10] :ok_hand: move aria-label to icon link wrapper --- client/modules/IDE/pages/IDEViewMobile.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx index ff6e5481..be1be931 100644 --- a/client/modules/IDE/pages/IDEViewMobile.jsx +++ b/client/modules/IDE/pages/IDEViewMobile.jsx @@ -69,7 +69,7 @@ const Icon = styled.a` } `; -const StyledLink = styled(Link)` +const IconLinkWrapper = styled(Link)` width: 3rem; margin-right: 1.25rem; margin-left: none; @@ -97,9 +97,9 @@ const IDEViewMobile = (props) => { return (
- - + + +

{project.name}

{selectedFile.name}

From a99d2b8c8b29ff0f06730c77692299adb4b0dc72 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Thu, 18 Jun 2020 15:34:28 -0400 Subject: [PATCH 10/10] Add theming to common/icons --- client/common/Icons.jsx | 25 ++++++++++++++++++++-- client/common/icons.jsx | 25 ++++++++++++++++++++-- client/modules/IDE/pages/IDEViewMobile.jsx | 4 ++-- client/theme.js | 12 +++++++++++ 4 files changed, 60 insertions(+), 6 deletions(-) diff --git a/client/common/Icons.jsx b/client/common/Icons.jsx index 66a72c94..06f18895 100644 --- a/client/common/Icons.jsx +++ b/client/common/Icons.jsx @@ -1,11 +1,14 @@ import React from 'react'; import PropTypes from 'prop-types'; +import styled from 'styled-components'; +import { remSize, prop } from '../theme'; import SortArrowUp from '../images/sort-arrow-up.svg'; import SortArrowDown from '../images/sort-arrow-down.svg'; import Github from '../images/github.svg'; import Google from '../images/google.svg'; import Plus from '../images/plus-icon.svg'; import Close from '../images/close.svg'; +import Exit from '../images/exit.svg'; import DropdownArrow from '../images/down-filled-triangle.svg'; // HOC that adds the right web accessibility props @@ -15,16 +18,33 @@ import DropdownArrow from '../images/down-filled-triangle.svg'; // Need to add size to these - like small icon, medium icon, large icon. etc. function withLabel(SvgComponent) { const Icon = (props) => { + const StyledIcon = styled(SvgComponent)` + &&& { + color: ${prop('Icon.default')}; + & g, & path, & polygon { + opacity: 1; + fill: ${prop('Icon.default')}; + } + &:hover { + color: ${prop('Icon.hover')}; + & g, & path, & polygon { + opacity: 1; + fill: ${prop('Icon.hover')}; + } + } + } + `; + const { 'aria-label': ariaLabel } = props; if (ariaLabel) { - return (); } - return ( { + const StyledIcon = styled(SvgComponent)` + &&& { + color: ${prop('Icon.default')}; + & g, & path, & polygon { + opacity: 1; + fill: ${prop('Icon.default')}; + } + &:hover { + color: ${prop('Icon.hover')}; + & g, & path, & polygon { + opacity: 1; + fill: ${prop('Icon.hover')}; + } + } + } + `; + const { 'aria-label': ariaLabel } = props; if (ariaLabel) { - return (); } - return ( {
- +

{project.name}

diff --git a/client/theme.js b/client/theme.js index 5215dd99..561fd835 100644 --- a/client/theme.js +++ b/client/theme.js @@ -85,6 +85,10 @@ export default { border: grays.middleLight, }, }, + Icon: { + default: grays.middleGray, + hover: grays.darker + } }, [Theme.dark]: { colors, @@ -113,6 +117,10 @@ export default { border: grays.middleDark, }, }, + Icon: { + default: grays.middleLight, + hover: grays.lightest + } }, [Theme.contrast]: { colors, @@ -141,5 +149,9 @@ export default { border: grays.middleDark, }, }, + Icon: { + default: grays.mediumLight, + hover: colors.yellow + } }, };