kitchen-simulator 5.0.0-test.4 → 5.0.0-test.5

package/src/components/toolbar/popup/submitforquote/styles.css

@@ -1,105 +0,0 @@
-/**
- * Styles for submit for quote panel
- */
-
-.submit-for-quote {
-  width: 100%;
-  height: 100%;
-  user-select: none;
-}
-
-.submit-for-quote-header {
-  background-color: #1183b7;
-  height: 30px;
-  padding-right: 6px;
-}
-
-.submit-for-quote-header-icon {
-  float: right;
-  margin-top: 4px;
-}
-
-.submit-for-quote-desc {
-  font-size: 14px;
-  margin-top: 20px;
-  margin-left: 40px;
-}
-
-.submit-for-quote-form {
-  font-size: 12px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-}
-
-.submit-for-quote-form-item {
-  width: 345px;
-  margin-top: 20px;
-}
-
-.submit-for-quote-footer {
-  width: 70px;
-  margin-left: 350px;
-  margin-top: 15px;
-  cursor: pointer;
-}
-
-.submit-for-quote-form-item-label {
-  padding-left: 3px;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.submit-for-quote-form-item-span {
-  display: inline-block;
-  width: 92px;
-  padding-left: 3px;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.submit-for-quote-form-item-checkbox {
-  position: relative;
-  margin-right: 4px;
-  top: 2px;
-}
-
-.submit-for-quote-form-item-input {
-  width: 250px;
-  margin-left: 5px;
-}
-
-.submit-for-quote-form-item-button {
-  width: 230px;
-  height: 23px;
-  margin-left: 20px;
-  color: white !important;
-}
-
-.submit-for-quote-form-item-button > .MuiSelect-icon {
-  color: white !important;
-}
-
-.submit-for-quote-form-item-button-icon {
-  width: 45px;
-  display: inline-block;
-}
-
-.submit-for-quote-form-item-button-img {
-  display: block;
-  margin: auto;
-}
-
-.submit-for-quote-form-item-textarea {
-  width: 100%;
-  height: 100%;
-  margin-top: 10px;
-  resize: none;
-}

package/src/components/toolbar/popup/submitforquote/styles.js

@@ -1,294 +0,0 @@
-import styled from 'styled-components';
-import {
-  BG_COLOR_1,
-  BG_COLOR_HOVER,
-  DEFAULT_FONT_FAMILY,
-  SECONDARY_PURPLE_COLOR,
-  TEXT_COLOR_NEUTRAL_1,
-  TEXT_COLOR_NEUTRAL_2,
-  TEXT_COLOR_NEUTRAL_3,
-  TEXT_COLOR_NEUTRAL_0
-} from '../../../../constants';
-
-export const DialogTitle = styled.span`
-  color: ${TEXT_COLOR_NEUTRAL_1};
-  font-family: ${DEFAULT_FONT_FAMILY};
-  font-size: 22px;
-  font-weight: 700;
-  line-height: 30px;
-  text-align: left;
-  margin-bottom: 1rem;
-`;
-
-export const DialogContent = styled.span`
-  font-family: ${DEFAULT_FONT_FAMILY};
-  color: ${TEXT_COLOR_NEUTRAL_1};
-
-  @media screen and (min-width: 1024) {
-    font-size: 11px;
-  }
-  @media screen and (max-width: 1024) {
-    font-size: 11px;
-  }
-  @media screen and (min-width: 1366) {
-    font-size: 13px;
-  }
-  @media screen and (max-width: 1366) {
-    font-size: 13px;
-  }
-  @media screen and (min-width: 1440) {
-    font-size: 16px;
-  }
-  @media screen and (max-width: 1440) {
-    font-size: 16px;
-  }
-  font-weight: 400;
-  line-height: 18px;
-  text-align: left;
-  width: 100%;
-`;
-export const DialogContents = styled.span`
-  font-family: ${DEFAULT_FONT_FAMILY};
-  color: ${TEXT_COLOR_NEUTRAL_1};
-  padding: 10px 0px;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 18px;
-  text-align: left;
-`;
-
-export const DialogContentSelection = styled.div`
-  display: flex;
-  flex-direction: column;
-  max-height: calc(100vh - 300px);
-`;
-
-export const DialogAction = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 2rem;
-`;
-
-export const Button = styled.div`
-  padding: 10px 20px;
-  cursor: pointer;
-  margin-right: 10px;
-  color: ${SECONDARY_PURPLE_COLOR};
-  font-weight: bold;
-  font-family: ${DEFAULT_FONT_FAMILY};
-  font-size: 16px;
-  border-radius: 20px;
-  :hover {
-    background-color: ${BG_COLOR_HOVER};
-  }
-`;
-
-export const DialogTextArea = styled.textarea`
-  font-family: ${DEFAULT_FONT_FAMILY};
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 22px;
-  text-align: left;
-  padding: 10px;
-  resize: none;
-  height: 140px;
-  width: 100%;
-  outline: 0;
-  border-radius: 5px;
-  :hover {
-    border: 2px solid ${SECONDARY_PURPLE_COLOR};
-  }
-  :focus {
-    border: 2px solid ${SECONDARY_PURPLE_COLOR};
-  }
-`;
-
-export const StyledInputWrapper = styled.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  margin: 10px 0px;
-`;
-
-export const PlusImage = styled.img`
-  position: absolute;
-  height: 25px;
-  width: 25px;
-  transform: rotate(45deg);
-  right: 15px;
-  cursor: pointer;
-  background-color: ${TEXT_COLOR_NEUTRAL_3};
-  -webkit-mask-image: url(${props => props.maskImage + '?nocache=2025'});
-  -webkit-mask-size: 100% 100%;
-  -webkit-mask-repeat: no-repeat;
-`;
-
-export const StyledInput = styled.input`
-  width: 100%;
-  font-family: ${DEFAULT_FONT_FAMILY};
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 22px;
-  height: 50px;
-  text-align: left;
-  padding: 10px;
-  padding-right: 60px;
-  color: ${TEXT_COLOR_NEUTRAL_2};
-  border: 1px solid;
-  border-radius: 5px;
-  outline: 0;
-  :focus {
-    border: 2px solid ${SECONDARY_PURPLE_COLOR};
-  }
-  :hover {
-    border: 2px solid ${SECONDARY_PURPLE_COLOR};
-  }
-`;
-
-export const StyledInputLabel = styled.span`
-  font-size: 16px;
-  font-family: ${DEFAULT_FONT_FAMILY};
-  font-weight: 400;
-  line-height: 22px;
-  text-align: left;
-  position: absolute;
-  left: 47px;
-  color: ${TEXT_COLOR_NEUTRAL_2};
-  user-select: none;
-`;
-
-export const StyledInputHeadLabel = styled.span`
-  font-size: 13px;
-  font-family: ${DEFAULT_FONT_FAMILY};
-  font-weight: 400;
-  line-height: 18px;
-  text-align: left;
-  position: absolute;
-  left: 37px;
-  top: -9px;
-  background-color: ${BG_COLOR_1};
-  padding: 0px 7px;
-  color: ${SECONDARY_PURPLE_COLOR};
-  user-select: none;
-`;
-
-export const StyledSelectLabel = styled.span`
-  position: absolute;
-  left: 8px;
-
-  @media screen and (min-width: 1024) {
-    font-size: 11px;
-  }
-  @media screen and (max-width: 1024) {
-    font-size: 11px;
-  }
-  @media screen and (min-width: 1366) {
-    font-size: 13px;
-  }
-  @media screen and (max-width: 1366) {
-    font-size: 13px;
-  }
-  @media screen and (min-width: 1440) {
-    font-size: 16px;
-  }
-  @media screen and (max-width: 1440) {
-    font-size: 16px;
-  }
-  line-height: 18px;
-  padding: 0px 8px;
-  top: -9px;
-  font-weight: 400;
-  background-color: ${BG_COLOR_1};
-  color: ${TEXT_COLOR_NEUTRAL_2};
-  font-family: ${DEFAULT_FONT_FAMILY};
-`;
-
-export const StyledSelect = styled.div`
-  cursor: pointer;
-  padding: 10px;
-  color: ${TEXT_COLOR_NEUTRAL_1};
-  font-family: ${DEFAULT_FONT_FAMILY};
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 22px;
-  text-align: left;
-  height: 35px;
-  border-radius: 5px;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  border: 2px solid ${TEXT_COLOR_NEUTRAL_3};
-  :hover {
-    border-color: ${SECONDARY_PURPLE_COLOR};
-  }
-`;
-
-export const StyledSelectOption = styled.div`
-  padding: 12px 20px;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 22px;
-  display: flex;
-  align-items: center;
-  text-align: left;
-  font-family: ${DEFAULT_FONT_FAMILY};
-  cursor: pointer;
-  :hover {
-    background-color: ${BG_COLOR_HOVER};
-  }
-`;
-
-export const SelectArrow = styled.img`
-  position: absolute;
-  right: 15px;
-  cursor: pointer;
-  width: 15px;
-  height: 9px;
-  background-color: ${TEXT_COLOR_NEUTRAL_3};
-  -webkit-mask-image: url(${props => props.maskImage + '?nocache=2025'});
-  -webkit-mask-size: 100% 100%;
-  -webkit-mask-repeat: no-repeat;
-`;
-
-export const StyledSelectWrapper = styled.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  margin: 10px 0px;
-`;
-
-export const DoorCategoryImage = styled.img`
-  width: 22px;
-  height: 22px;
-  margin-left: 5px;
-  margin-right: 10px;
-  background-color: ${SECONDARY_PURPLE_COLOR};
-  -webkit-mask-image: url(${props => props.maskImage + '?nocache=2025'});
-  -webkit-mask-size: 100% 100%;
-  -webkit-mask-repeat: no-repeat;
-`;
-
-export const StyledCheck = styled.div`
-  border: 1px solid;
-  margin-right: 10px;
-  color: ${TEXT_COLOR_NEUTRAL_2};
-  height: 20px;
-  border-radius: 50%;
-  width: 20px;
-  padding: 2px;
-  cursor: pointer;
-  background-size: 16px 16px;
-  background-position: center;
-  background-clip: content-box;
-  :hover {
-    color: ${SECONDARY_PURPLE_COLOR};
-  }
-`;
-
-export const StyledPhoneMethod = styled.div`
-  font-family: ${DEFAULT_FONT_FAMILY};
-  color: ${TEXT_COLOR_NEUTRAL_1};
-  display: flex;
-  font-size: 14px;
-  align-items: center;
-`;

package/src/components/toolbar/popup/submitprompt/index.jsx

@@ -1,89 +0,0 @@
-import React from 'react';
-import * as S from './styles';
-import Dialog from '@material-ui/core/Dialog';
-import { withStyles } from '@material-ui/core/styles';
-import styled from 'styled-components';
-import {
-  TEXT_COLOR_NEUTRAL_2,
-  SECONDARY_PURPLE_COLOR,
-  DEFAULT_FONT_FAMILY,
-  TEXT_COLOR_NEUTRAL_1,
-  SUBMIT_ADD_CART
-} from '../../../../constants';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Checkbox from '@material-ui/core/Checkbox';
-
-const StyledDialog = styled(Dialog)`
-  .MuiDialog-paperWidthSm {
-    border-radius: 10px;
-  }
-`;
-
-const StyledMuiCheckbox = withStyles({
-  root: {
-    color: TEXT_COLOR_NEUTRAL_2,
-    '&$checked': {
-      color: SECONDARY_PURPLE_COLOR
-    }
-  },
-  checked: {}
-})(props => <Checkbox color="default" {...props} />);
-
-const DialogContents = styled.span`
-  font-family: ${DEFAULT_FONT_FAMILY};
-  color: ${TEXT_COLOR_NEUTRAL_1};
-  padding: 10px 0px;
-
-  @media screen and (min-width: 1024) {
-    font-size: 11px;
-  }
-  @media screen and (max-width: 1024) {
-    font-size: 11px;
-  }
-  @media screen and (min-width: 1366) {
-    font-size: 13px;
-  }
-  @media screen and (max-width: 1366) {
-    font-size: 13px;
-  }
-  @media screen and (min-width: 1440) {
-    font-size: 16px;
-  }
-  @media screen and (max-width: 1440) {
-    font-size: 16px;
-  }
-  font-weight: 400;
-  line-height: 18px;
-  text-align: left;
-`;
-class SubmitPromptPopup extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let { visible, submitType } = this.props;
-    return (
-      <StyledDialog open={visible} onClose={() => this.props.handleClose()}>
-        {submitType === SUBMIT_ADD_CART ? (
-          <S.DialogContent>
-            You must first save your project before adding to cart. <br />
-            Do you want to save it now?
-          </S.DialogContent>
-        ) : (
-          <S.DialogContent>
-            You must first save your project before submitting the design.
-            <br />
-            Do you want to save it now?
-          </S.DialogContent>
-        )}
-        <S.DialogAction>
-          <S.Button onClick={() => this.props.handleOk(true)}>Yes</S.Button>
-          <S.Button onClick={() => this.props.handleClose()}>No</S.Button>
-        </S.DialogAction>
-      </StyledDialog>
-    );
-  }
-}
-
-export default SubmitPromptPopup;

package/src/components/toolbar/popup/submitprompt/styles.css

@@ -1,64 +0,0 @@
-.container {
-  width: 60px;
-  position: relative;
-  padding-left: 20px;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-/* Hide the browser's default checkbox */
-.container input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-}
-
-/* Create a custom checkbox */
-.checkmark {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 13px;
-  width: 13px;
-  background-color: #eee;
-}
-
-/* On mouse-over, add a grey background color */
-.container:hover input ~ .checkmark {
-  background-color: #ccc;
-}
-
-/* When the checkbox is checked, add a blue background */
-.container input:checked ~ .checkmark {
-  background-color: #2196f3;
-}
-
-/* Create the checkmark/indicator (hidden when not checked) */
-.checkmark:after {
-  content: '';
-  position: absolute;
-  display: none;
-}
-
-/* Show the checkmark when checked */
-.container input:checked ~ .checkmark:after {
-  display: block;
-}
-
-/* Style the checkmark/indicator */
-.container .checkmark:after {
-  left: 4px;
-  top: 1px;
-  width: 3px;
-  height: 7px;
-  border: solid white;
-  border-width: 0 2px 2px 0;
-  -webkit-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  transform: rotate(45deg);
-}

package/src/components/toolbar/popup/submitprompt/styles.js

@@ -1,42 +0,0 @@
-import styled from 'styled-components';
-import {
-  BG_COLOR_HOVER,
-  DEFAULT_FONT_FAMILY,
-  SECONDARY_PURPLE_COLOR,
-  TEXT_COLOR_NEUTRAL_1
-} from '../../../../constants';
-
-export const DialogTitle = styled.span`
-  font-weight: bold;
-  color: ${TEXT_COLOR_NEUTRAL_1};
-  font-family: ${DEFAULT_FONT_FAMILY};
-  font-size: 26px;
-  padding: 25px 30px;
-`;
-
-export const DialogContent = styled.span`
-  font-family: ${DEFAULT_FONT_FAMILY};
-  color: ${TEXT_COLOR_NEUTRAL_1};
-  padding: 10px 30px;
-  padding-top: 30px;
-`;
-
-export const DialogAction = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  padding: 15px 30px 25px;
-`;
-
-export const Button = styled.div`
-  padding: 10px 20px;
-  cursor: pointer;
-  margin-right: 10px;
-  color: ${SECONDARY_PURPLE_COLOR};
-  font-weight: bold;
-  font-family: ${DEFAULT_FONT_FAMILY};
-  font-size: 16px;
-  border-radius: 20px;
-  :hover {
-    background-color: ${BG_COLOR_HOVER};
-  }
-`;

package/src/components/toolbar/toolbar-button.jsx

@@ -1,90 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import * as SharedStyle from '../../shared-style';
-
-//http://www.cssportal.com/css-tooltip-generator/
-
-const STYLE = {
-  width: '30px',
-  height: '30px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  marginBottom: '5px',
-  fontSize: '25px',
-  position: 'relative',
-  cursor: 'pointer'
-};
-
-const STYLE_TOOLTIP = {
-  position: 'absolute',
-  width: '140px',
-  color: SharedStyle.COLORS.white,
-  background: SharedStyle.COLORS.black,
-  height: '30px',
-  lineHeight: '30px',
-  textAlign: 'center',
-  visibility: 'visible',
-  borderRadius: '6px',
-  opacity: '0.8',
-  left: '100%',
-  top: '50%',
-  marginTop: '-15px',
-  marginLeft: '15px',
-  zIndex: '999',
-  fontSize: '12px'
-};
-
-const STYLE_TOOLTIP_PIN = {
-  position: 'absolute',
-  top: '50%',
-  right: '100%',
-  marginTop: '-8px',
-  width: '0',
-  height: '0',
-  borderRight: '8px solid #000000',
-  borderTop: '8px solid transparent',
-  borderBottom: '8px solid transparent'
-};
-
-export default class ToolbarButton extends Component {
-  constructor(props, context) {
-    super(props, context);
-    this.state = { active: false };
-  }
-
-  render() {
-    let { state, props } = this;
-    let color =
-      props.active || state.active
-        ? SharedStyle.SECONDARY_COLOR.icon
-        : SharedStyle.PRIMARY_COLOR.icon;
-
-    return (
-      <div
-        style={STYLE}
-        onMouseOver={event => this.setState({ active: true })}
-        onMouseOut={event => this.setState({ active: false })}
-      >
-        <div style={{ color }} onClick={props.onClick}>
-          {props.children}
-        </div>
-
-        {/* {
-          state.active ?
-          <div style={STYLE_TOOLTIP}>
-            <span style={STYLE_TOOLTIP_PIN} />
-            {props.tooltip}
-          </div>
-          : null
-        } */}
-      </div>
-    );
-  }
-}
-
-ToolbarButton.propTypes = {
-  active: PropTypes.bool.isRequired,
-  tooltip: PropTypes.string.isRequired,
-  onClick: PropTypes.func.isRequired
-};

package/src/components/toolbar/toolbar-load-button.jsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FaFolderOpen as IconLoad } from 'react-icons/fa';
-import ToolbarButton from './toolbar-button';
-import { browserUpload } from '../../utils/browser';
-
-export default function ToolbarLoadButton(
-  { state },
-  { translator, projectActions }
-) {
-  let loadProjectFromFile = event => {
-    event.preventDefault();
-    browserUpload().then(data => {
-      projectActions.loadProject(JSON.parse(data));
-    });
-  };
-
-  return (
-    <ToolbarButton
-      active={false}
-      tooltip={translator.t('Load project')}
-      onClick={loadProjectFromFile}
-    >
-      <IconLoad />
-    </ToolbarButton>
-  );
-}
-
-ToolbarLoadButton.propTypes = {
-  state: PropTypes.object.isRequired
-};
-
-ToolbarLoadButton.contextTypes = {
-  projectActions: PropTypes.object.isRequired,
-  translator: PropTypes.object.isRequired
-};