kitchen-simulator 5.0.0-test.7 → 5.0.0-test.9

package/src/components/footerbar/styles.js

@@ -1,263 +0,0 @@
-import {
-  BG_COLOR_HOVER,
-  DEFAULT_FONT_FAMILY,
-  SECONDARY_PURPLE_COLOR,
-  TEXT_COLOR_NEUTRAL_1,
-  TEXT_COLOR_NEUTRAL_5
-} from '../../constants';
-import styled from 'styled-components';
-
-export const Toggle_2D_3D = styled.div`
-  width: 50px;
-  margin-left: 10px;
-  border-radius: 5px;
-  height: 50px;
-  align-items: center;
-  justify-content: center;
-  display: flex;
-  user-select: none;
-  :hover {
-    background-color: ${TEXT_COLOR_NEUTRAL_5};
-  }
-`;
-
-export const Toggle_2D_3D_Button = styled.div`
-  width: 50px;
-  margin-left: 10px;
-  border-radius: 5px;
-  height: 50px;
-  align-items: center;
-  justify-content: center;
-  display: flex;
-  background-color: #ffffff;
-  cursor: not-allowed;
-  opacity: 0.5;
-`;
-
-export const FooterTitle = styled.span`
-  color: ${SECONDARY_PURPLE_COLOR};
-  font-family: ${DEFAULT_FONT_FAMILY};
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 22px;
-  text-align: left;
-  user-select: none;
-`;
-
-export const Direction_Up_Down = styled.div`
-  width: 50px;
-  margin-left: 5px;
-  border-radius: 5px;
-  height: 25px;
-  align-items: center;
-  display: flex;
-  :hover {
-    background-color: ${TEXT_COLOR_NEUTRAL_5};
-  }
-`;
-
-export const Direction_Left_Right = styled.div`
-  width: 50px;
-  margin-left: 5px;
-  border-radius: 5px;
-  height: 50px;
-  align-items: center;
-  display: flex;
-  :hover {
-    background-color: ${TEXT_COLOR_NEUTRAL_5};
-  }
-`;
-
-export const ArrowIcon = styled.img`
-  height: 10px;
-  width: 12px;
-  margin: auto;
-  user-select: none;
-`;
-export const Rotation_Button = styled.div`
-  width: ${props => (props.isVertical ? '48px' : '56px')};
-  height: ${props => (props.isVertical ? '48px' : '32px')};
-  border-radius: 5px;
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  :hover {
-    background-color: ${TEXT_COLOR_NEUTRAL_5};
-  }
-`;
-export const Rotation_Icon = styled.img`
-  height: ${props => (props.height ? props.height : '22px')};
-  width: ${props => (props.width ? props.width : '22px')};
-  user-select: none;
-`;
-
-export const ZoomButton = styled.div`
-  width: 50px;
-  margin-left: 10px;
-  border-radius: 5px;
-  height: 50px;
-  align-items: center;
-  display: flex;
-  :hover {
-    background-color: ${TEXT_COLOR_NEUTRAL_5};
-  }
-`;
-
-export const ZoomIcon = styled.img`
-  height: 10px;
-  width: 12px;
-  margin: auto;
-  user-select: none;
-`;
-
-export const ZoomInput = styled.input`
-  color: ${SECONDARY_PURPLE_COLOR};
-  width: 50px;
-  margin-left: 5px;
-  border-radius: 5px;
-  font-family: ${DEFAULT_FONT_FAMILY};
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 18px;
-  text-align: center;
-  height: 50px;
-  align-items: center;
-  display: flex;
-`;
-
-export const Control = styled.div`
-  width: 28px;
-  height: 28px;
-  display: flex;
-  justify-content: center;
-  font-size: 15px;
-  cursor: pointer;
-  background-color: #fff;
-  color: white;
-  border-radius: 20px;
-  margin-right: 15px;
-  margin-top: 16px;
-  right: 260px;
-  bottom: 25px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-`;
-export const ControlTitle = styled.span`
-  margin: 10px;
-  font-size: 12px;
-`;
-export const ControlIcon = styled.div`
-  img {
-    font-size: 1.4rem;
-    box-sizing: border-box;
-    box-shadow: 0px 3px 5px -1px rgba(156, 154, 154, 0.2),
-      0px 6px 10px 0px rgba(156, 154, 154, 0.39),
-      0px 1px 18px 0px rgba(156, 154, 154, 0.12);
-
-    border-radius: 50%;
-  }
-
-  :hover {
-    img {
-      box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
-        0px 6px 10px 0px rgba(0, 0, 0, 0.39),
-        0px 1px 18px 0px rgba(0, 0, 0, 0.12);
-    }
-  }
-`;
-export const Direction = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 15px;
-  cursor: pointer;
-  color: white;
-  border-radius: 32px;
-  margin-right: 15px;
-  right: 260px;
-  bottom: 25px;
-`;
-export const DirectionIcon = styled.div`
-  position: absolute;
-  color: #494949;
-  :hover {
-    color: #2c38de;
-  }
-`;
-export const DirectionSpinIcon = styled.div`
-  position: absolute;
-  color: #494949;
-  img {
-    font-size: 1.4rem;
-    box-sizing: border-box;
-    box-shadow: 0px 3px 5px -1px rgba(156, 154, 154, 0.2),
-      0px 6px 10px 0px rgba(156, 154, 154, 0.39),
-      0px 1px 18px 0px rgba(156, 154, 154, 0.12);
-  }
-  :hover {
-    height: 40px;
-    margin-bottom: 5px;
-    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
-      0px 6px 10px 0px rgba(0, 0, 0, 0.39), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
-  }
-`;
-
-export const Toggle = styled.div`
-  display: flex;
-  align-items: center;
-  position: relative;
-  height: 36px;
-  margin-left: 20px;
-  justify-content: center;
-  font-size: 14px;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  :hover {
-    box-shadow: 0px 3px 5px -1px rgba(156, 154, 154, 0.2),
-      0px 6px 10px 0px rgba(156, 154, 154, 0.39),
-      0px 1px 18px 0px rgba(156, 154, 154, 0.12);
-    border-radius: 18px;
-  }
-`;
-export const ToggleIcon = styled.div`
-  ${'' /* transition-duration: .3s; */}
-  position: absolute;
-  top: 0px;
-  img {
-    font-size: 1.4rem;
-    box-sizing: border-box;
-    border-radius: 50%;
-  }
-`;
-export const ToggleConvertIcon = styled.div`
-  margin: 5px;
-  transition-duration: 0.3s;
-  :hover {
-    img {
-      font-size: 1.4rem;
-      box-sizing: border-box;
-      box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
-        0px 6px 10px 0px rgba(0, 0, 0, 0.39),
-        0px 1px 18px 0px rgba(0, 0, 0, 0.12);
-      border-radius: 50%;
-    }
-  }
-`;
-
-export const ElevationButton = styled.div`
-  display: flex;
-  align-items: center;
-  font-family: ${DEFAULT_FONT_FAMILY};
-  color: ${TEXT_COLOR_NEUTRAL_1};
-  font-weight: 'bold';
-  padding: 10px;
-  border-radius: 5px;
-  :hover {
-    background-color: ${TEXT_COLOR_NEUTRAL_5};
-  }
-`;

package/src/components/header/button/MenuButton.jsx

@@ -1,46 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import * as SharedStyle from '../../../shared-style';
-import * as S from './styles';
-
-export default class MenuButton extends Component {
-  constructor(props, context) {
-    super(props, context);
-    this.state = { hover: false };
-  }
-
-  render() {
-    let { state, props } = this;
-    let overlayStyle = {};
-    if (state.hover)
-      overlayStyle = {
-        ...overlayStyle,
-        display: 'block',
-        background: SharedStyle.TOOLBAR_COLOR.focus
-      };
-
-    return (
-      <S.Control
-        onMouseOver={event => this.setState({ hover: true })}
-        onMouseOut={event => this.setState({ hover: false })}
-        onClick={props.onClick}
-      >
-        {[
-          props.title !== undefined ? (
-            <S.ControlTitle key={props.title}>{props.title}</S.ControlTitle>
-          ) : null,
-          props.icon !== undefined ? (
-            <S.ControlIcon key={props.icon}>{props.icon}</S.ControlIcon>
-          ) : null
-        ]}
-      </S.Control>
-    );
-  }
-}
-
-MenuButton.propTypes = {
-  title: PropTypes.string,
-  hover: PropTypes.bool,
-  active: PropTypes.bool.isRequired,
-  onClick: PropTypes.func
-};

package/src/components/header/button/SaveButton.jsx

@@ -1,54 +0,0 @@
-import { Button } from '@material-ui/core';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import { SAVE_DESIGN } from '../../../../src/constants';
-import React, { useEffect } from 'react';
-import CheckIcon from '@material-ui/icons/Check';
-
-export const SaveButton = ({ isSaved, handleSaveBtn, isLoading }) => {
-  if (isSaved) {
-    return (
-      <Button
-        variant="outlined"
-        onClick={handleSaveBtn}
-        disabled={isLoading}
-        style={{
-          pointerEvents: isLoading ? 'none' : 'auto',
-          padding: '8px 20px',
-          color: 'rgba(76, 18, 161, 1)',
-          border: '1px solid rgba(76, 18, 161, 1)',
-          marginLeft: '1rem',
-          textTransform: 'none'
-        }}
-        startIcon={isLoading ? <CircularProgress size={20} /> : <CheckIcon />}
-      >
-        Saved
-      </Button>
-    );
-  }
-
-  return (
-    <Button
-      variant="outlined"
-      onClick={handleSaveBtn}
-      disabled={isLoading}
-      style={{
-        pointerEvents: isLoading ? 'none' : 'auto',
-        padding: '8px 20px',
-        color: 'white',
-        backgroundColor: 'rgba(76, 18, 161, 1)',
-        border: '1px solid rgba(76, 18, 161, 1)',
-        marginLeft: '1rem',
-        textTransform: 'none'
-      }}
-      startIcon={
-        isLoading ? (
-          <CircularProgress size={20} />
-        ) : (
-          <img src="/assets/img/svg/headerbar/save.svg" />
-        )
-      }
-    >
-      {SAVE_DESIGN}
-    </Button>
-  );
-};

package/src/components/header/button/styles.js

@@ -1,181 +0,0 @@
-import styled from 'styled-components';
-import * as SharedStyle from '../../../shared-style';
-
-export const Main = styled.div`
-  width: 81px;
-  height: 81px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 20px;
-  margin-left: 20px;
-  font-size: 0px;
-  position: relative;
-  cursor: pointer;
-  background: #d3e7e5;
-`;
-// export const Main = styled.div`
-//   width: 81px;
-//   height: 81px;
-//   display: flex;
-//   align-items: center;
-//   justify-content: center;
-//   margin-bottom: 20px;
-//   margin-left: 20px;
-//   font-size: 25px;
-//   position: relative;
-//   cursor: pointer;
-//   background: #d3e7e5;
-// `
-
-export const Overlay = styled.div`
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  bottom: 0px;
-  width: 100%;
-  text-align: center;
-  background: rgba(0, 0, 0, 0.5);
-  display: none;
-`;
-
-export const Title = styled.span`
-  position: absolute;
-  top: 50%;
-  left: 0px;
-  width: 100%;
-  color: #fff;
-  text-transform: uppercase;
-  transform: translate(0%, -50%);
-  font-size: 12px;
-`;
-
-export const 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'
-};
-
-export const TooltipPin = {
-  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 const Control = styled.div`
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 15px;
-  // position: fixed;
-  cursor: pointer;
-  background-color: #fff;
-  color: white;
-  border-radius: 20px;
-  margin-right: 20px;
-  margin-top: 16px;
-  right: 260px;
-  bottom: 25px;
-  :hover {
-    background-color: ${SharedStyle.TOOLBAR_COLOR.focus};
-  }
-`;
-export const Direction = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 15px;
-  // position: fixed;
-  cursor: pointer;
-  // background-color: #fff;
-  color: white;
-  border-radius: 32px;
-  margin-right: 20px;
-  right: 260px;
-  bottom: 25px;
-  // :hover{
-  //   background-color: ${SharedStyle.TOOLBAR_COLOR.active};
-  // }
-`;
-export const Toggle = styled.div`
-  height: 41px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 15px;
-  // position: fixed;
-  cursor: pointer;
-  background-image: url(/assets/img/Toggle.png);
-  background-repeat: no-repeat;
-  background-color: #fff;
-  color: white;
-  border-radius: 32px;
-  margin-right: 20px;
-  margin-top: 16px;
-  right: 260px;
-  bottom: 25px;
-  // :hover{
-  //   background-color: ${SharedStyle.TOOLBAR_COLOR.active};
-  // }
-`;
-export const Animation = styled.div`
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: block;
-  border-radius: inherit;
-  -webkit-box-shadow: 0 0 0 0 #1890ff;
-  box-shadow: 0 0 0 0 #1890ff;
-  -webkit-box-shadow: 0 0 0 0 var(--antd-wave-shadow-color);
-  box-shadow: 0 0 0 0 var(--antd-wave-shadow-color);
-  opacity: 0.2;
-  -webkit-animation: fadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1),
-    waveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
-  animation: fadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1),
-    waveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
-  -webkit-animation-fill-mode: forwards;
-  animation-fill-mode: forwards;
-  content: '';
-  pointer-events: none;
-`;
-
-export const ControlTitle = styled.span`
-  margin: 10px;
-  font-size: 12px;
-`;
-export const ControlIcon = styled.div`
-  margin: 5px;
-`;
-export const DirectionIcon = styled.div`
-  position: absolute;
-  margin: 5px;
-  color: #494949;
-`;
-export const ToggleIcon = styled.div`
-  margin: 5px;
-  padding-top: 5px;
-  transition-duration: 0.3s;
-`;

package/src/components/header/export.js

@@ -1,5 +0,0 @@
-import Header from './header';
-
-export default {
-  Header
-};