From 0b3afeb6e0a70559da384d2aeaca41401c5282fe Mon Sep 17 00:00:00 2001 From: HF Date: Mon, 11 May 2020 09:13:34 +0200 Subject: [PATCH] Change Modal layout fix configure store error add css transition effects --- src/actions/index.js | 4 +- src/components/CanvasSelectModal.jsx | 47 ++++---- src/components/Chat.jsx | 4 +- src/components/ChatBox.jsx | 58 +++++++-- src/components/ChatButton.jsx | 2 +- src/components/ChatInput.jsx | 26 ++--- src/components/ChatModal.jsx | 31 ++++- src/components/CoordinatesBox.jsx | 3 +- src/components/ForgotPasswordModal.jsx | 28 ++--- src/components/HelpModal.jsx | 103 ++++++++-------- src/components/Menu.jsx | 41 +++++-- src/components/MinecraftModal.jsx | 21 ++-- src/components/Modal.jsx | 47 -------- src/components/ModalRoot.jsx | 55 +++++++-- src/components/Palette.jsx | 84 +++++++------ src/components/RegisterModal.jsx | 25 ++-- src/components/SettingsModal.jsx | 156 +++++++++++++------------ src/components/UserAreaModal.jsx | 73 ++++++------ src/reducers/modal.js | 5 +- src/styles/dark-round.css | 12 +- src/styles/dark.css | 12 +- src/styles/default.css | 32 ++++- src/ui/store.js | 2 +- src/utils/reactHookResize.js | 31 +++++ 24 files changed, 524 insertions(+), 378 deletions(-) delete mode 100644 src/components/Modal.jsx create mode 100644 src/utils/reactHookResize.js diff --git a/src/actions/index.js b/src/actions/index.js index fff3bd8..0a1172d 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -623,8 +623,8 @@ export function showCanvasSelectionModal(): Action { return showModal('CANVAS_SELECTION'); } -export function showChatModal(): Action { - if (window.innerWidth > 604) { return toggleChatBox(); } +export function showChatModal(forceModal: boolean = false): Action { + if (window.innerWidth > 604 && !forceModal) { return toggleChatBox(); } return showModal('CHAT'); } diff --git a/src/components/CanvasSelectModal.jsx b/src/components/CanvasSelectModal.jsx index 3578f76..0404787 100644 --- a/src/components/CanvasSelectModal.jsx +++ b/src/components/CanvasSelectModal.jsx @@ -5,37 +5,31 @@ import React from 'react'; import { connect } from 'react-redux'; -// import FaFacebook from 'react-icons/lib/fa/facebook'; -// import FaTwitter from 'react-icons/lib/fa/twitter'; -// import FaRedditAlien from 'react-icons/lib/fa/reddit-alien'; -import Modal from './Modal'; import CanvasItem from './CanvasItem'; import type { State } from '../reducers'; const CanvasSelectModal = ({ canvases }) => ( - -

-

- Select the canvas you want to use. - Every canvas is unique and has different palettes, - cooldown and requirements. -

- { - Object.keys(canvases).map((canvasId) => ( - - )) - } +

+

+ Select the canvas you want to use. + Every canvas is unique and has different palettes, + cooldown and requirements.

- + { + Object.keys(canvases).map((canvasId) => ( + + )) + } +

); function mapStateToProps(state: State) { @@ -43,4 +37,9 @@ function mapStateToProps(state: State) { return { canvases }; } -export default connect(mapStateToProps)(CanvasSelectModal); +const data = { + content: connect(mapStateToProps)(CanvasSelectModal), + title: 'Canvas Selection', +}; + +export default data; diff --git a/src/components/Chat.jsx b/src/components/Chat.jsx index 8c52126..81647ae 100644 --- a/src/components/Chat.jsx +++ b/src/components/Chat.jsx @@ -25,8 +25,8 @@ const Chat = ({ chatMessages, chatChannel }) => { }, [channelMessages.length]); return ( -
-
    +
    +
      { channelMessages.map((message) => (

      diff --git a/src/components/ChatBox.jsx b/src/components/ChatBox.jsx index b0c9f5e..2c9df81 100644 --- a/src/components/ChatBox.jsx +++ b/src/components/ChatBox.jsx @@ -3,24 +3,66 @@ * @flow */ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { connect } from 'react-redux'; import type { State } from '../reducers'; +import useWindowSize from '../utils/reactHookResize'; +import { showChatModal } from '../actions'; import Chat from './Chat'; -const ChatBox = ({ chatOpen }) => ( -

      - -
      -); +function ChatBox({ + chatOpen, + triggerModal, +}) { + const [render, setRender] = useState(false); + + useEffect(() => { + window.setTimeout(() => { + if (chatOpen) setRender(true); + }, 10); + }, [chatOpen]); + + const onTransitionEnd = () => { + if (!chatOpen) setRender(false); + }; + + const { width } = useWindowSize(); + if (width < 604) { + triggerModal(); + } + + return ( + (render || chatOpen) && ( +
      + + +
      + ) + ); +} -// TODO optimize function mapStateToProps(state: State) { const { chatOpen } = state.modal; return { chatOpen }; } -export default connect(mapStateToProps)(ChatBox); +function mapDispatchToProps(dispatch) { + return { + triggerModal() { + dispatch(showChatModal(true)); + }, + }; +} + +export default connect(mapStateToProps, mapDispatchToProps)(ChatBox); diff --git a/src/components/ChatButton.jsx b/src/components/ChatButton.jsx index ff35a2d..ebbb7d8 100644 --- a/src/components/ChatButton.jsx +++ b/src/components/ChatButton.jsx @@ -25,7 +25,7 @@ const ChatButton = ({ open }) => ( function mapDispatchToProps(dispatch) { return { open() { - dispatch(showChatModal()); + dispatch(showChatModal(false)); }, }; } diff --git a/src/components/ChatInput.jsx b/src/components/ChatInput.jsx index 3716820..97558dd 100644 --- a/src/components/ChatInput.jsx +++ b/src/components/ChatInput.jsx @@ -49,33 +49,33 @@ class ChatInput extends React.Component {
      { this.handleSubmit(e, chatChannel); }} - style={{ display: 'inline' }} + style={{ display: 'flex', flexDirection: 'row' }} > this.setState({ message: evt.target.value })} type="text" placeholder="Chat here" /> +
      -
      ); } diff --git a/src/components/ChatModal.jsx b/src/components/ChatModal.jsx index 6700d67..c0c955a 100644 --- a/src/components/ChatModal.jsx +++ b/src/components/ChatModal.jsx @@ -5,19 +5,40 @@ import React from 'react'; -import Modal from './Modal'; import Chat from './Chat'; const ChatModal = () => ( - +

      Chat with other people here

      -
      +
      - +
      ); -export default ChatModal; +const data = { + content: ChatModal, + title: 'Chat', +}; + +export default data; diff --git a/src/components/CoordinatesBox.jsx b/src/components/CoordinatesBox.jsx index 3151572..74d028a 100644 --- a/src/components/CoordinatesBox.jsx +++ b/src/components/CoordinatesBox.jsx @@ -19,8 +19,7 @@ function renderCoordinates(cell): string { const CoordinatesBox = ({ view, hover, notifyCopy }) => (
      { copy(location.hash); notifyCopy(); }} + onClick={() => { copy(window.location.hash); notifyCopy(); }} role="button" title="Copy to Clipboard" tabIndex="0" diff --git a/src/components/ForgotPasswordModal.jsx b/src/components/ForgotPasswordModal.jsx index 7a6a255..2defaca 100644 --- a/src/components/ForgotPasswordModal.jsx +++ b/src/components/ForgotPasswordModal.jsx @@ -6,24 +6,20 @@ import React from 'react'; import { connect } from 'react-redux'; -import Modal from './Modal'; - import { showUserAreaModal } from '../actions'; import NewPasswordForm from './NewPasswordForm'; const ForgotPasswordModal = ({ login }) => ( - -

      -

      - Enter your mail adress and we will send you a new password: -


      -

      - -

      Also join our Discord:  - pixelplanet.fun/discord

      -

      +

      +

      + Enter your mail adress and we will send you a new password: +


      +

      + +

      Also join our Discord:  + pixelplanet.fun/discord

      -       +

      ); function mapDispatchToProps(dispatch) { @@ -34,5 +30,9 @@ function mapDispatchToProps(dispatch) { }; } +const data = { + content: connect(null, mapDispatchToProps)(ForgotPasswordModal), + title: 'Restore my Password', +}; -export default connect(null, mapDispatchToProps)(ForgotPasswordModal); +export default data; diff --git a/src/components/HelpModal.jsx b/src/components/HelpModal.jsx index d6abed9..21eaf74 100644 --- a/src/components/HelpModal.jsx +++ b/src/components/HelpModal.jsx @@ -10,59 +10,60 @@ import React from 'react'; /* eslint-disable max-len */ -import Modal from './Modal'; - const HelpModal = () => ( - -

      -

      Place color pixels on a large canvas with other players online! - Our main canvas is a huge worldmap, you can place wherever you like, but you will have to wait a specific - Cooldown between pixels. You can check out the cooldown and requiremnts on the Canvas Selection menu (globe button on top). - Some canvases have a different cooldown for replacing a user-set pixels than placing on a unset pixel. i.e. 4s/7s means 4s on fresh - pixels and 7s on already set pixels. - Higher zoomlevels take some time to update, the 3D globe gets updated at least once per day. - Have fun!

      -

      Discord: pixelplanet.fun/discord

      -

      Source on github

      -

      Reddit: r/PixelPlanetFun

      -

      Map Data

      -

      The bare map data that we use, together with converted OpenStreetMap tiles for orientation, - can be downloaded from mega.nz here: pixelplanetmap.zip (422MB)

      -

      Detected as Proxy?

      -

      If you got detected as proxy, but you are none, please send us an e-mail with your IP to pixelplanetdev@gmail.com. Do not post your IP anywhere else. We are sorry for the inconvenience.

      -

      2D Controls

      -

      Click a color in palette to select

      -

      Press G to toggle grid

      -

      Press X to toggle showing of pixel activity

      -

      Press R to copy coordinates

      -

      Press Q or E to zoom

      -

      Press W,A,S, D to move

      -

      Press ↑,←,↓, → to move

      -

      Drag mouse to move

      -

      Scroll mouse wheel to zoom

      -

      Click middle mouse button to current hovering color

      -

      Pinch to zoom (on touch devices)

      -

      Pan to move (on touch devices)

      -

      Click or tap to place a pixel

      -

      3D Controls

      -

      Press W,A,S, D to move

      -

      Press ↑,←,↓, → to move

      -

      Scroll mouse wheel to zoom

      -

      Left click and drag mouse to rotate

      -

      Middle click and drag mouse to zoom

      -

      Right click and drag mouse to pan

      -

      Left Click or tap to place a pixel

      -

      Right Click of double tap to remove a pixel

      -

      Partners: crazygames.com

      -

      - This site is protected by reCAPTCHA and the Google - Privacy Policy and - Terms of Service apply. - -

      +

      +

      Place color pixels on a large canvas with other players online! + Our main canvas is a huge worldmap, you can place wherever you like, but you will have to wait a specific + Cooldown between pixels. You can check out the cooldown and requiremnts on the Canvas Selection menu (globe button on top). + Some canvases have a different cooldown for replacing a user-set pixels than placing on a unset pixel. i.e. 4s/7s means 4s on fresh + pixels and 7s on already set pixels. + Higher zoomlevels take some time to update, the 3D globe gets updated at least once per day. + Have fun!

      +

      Discord: pixelplanet.fun/discord

      +

      Source on github

      +

      Reddit: r/PixelPlanetFun

      +

      Map Data

      +

      The bare map data that we use, together with converted OpenStreetMap tiles for orientation, + can be downloaded from mega.nz here: pixelplanetmap.zip (422MB)

      +

      Detected as Proxy?

      +

      If you got detected as proxy, but you are none, please send us an e-mail with your IP to pixelplanetdev@gmail.com. Do not post your IP anywhere else. We are sorry for the inconvenience.

      +

      2D Controls

      +

      Click a color in palette to select

      +

      Press G to toggle grid

      +

      Press X to toggle showing of pixel activity

      +

      Press R to copy coordinates

      +

      Press Q or E to zoom

      +

      Press W,A,S, D to move

      +

      Press ↑,←,↓, → to move

      +

      Drag mouse to move

      +

      Scroll mouse wheel to zoom

      +

      Click middle mouse button to current hovering color

      +

      Pinch to zoom (on touch devices)

      +

      Pan to move (on touch devices)

      +

      Click or tap to place a pixel

      +

      3D Controls

      +

      Press W,A,S, D to move

      +

      Press ↑,←,↓, → to move

      +

      Scroll mouse wheel to zoom

      +

      Left click and drag mouse to rotate

      +

      Middle click and drag mouse to zoom

      +

      Right click and drag mouse to pan

      +

      Left Click or tap to place a pixel

      +

      Right Click of double tap to remove a pixel

      +

      Partners: crazygames.com

      +

      + This site is protected by reCAPTCHA and the Google + Privacy Policy and + Terms of Service apply. +

      -       +

      ); -export default HelpModal; +const data = { + content: HelpModal, + title: 'Welcome to PixelPlanet.fun', +}; + +export default data; diff --git a/src/components/Menu.jsx b/src/components/Menu.jsx index c402c9b..5342a49 100644 --- a/src/components/Menu.jsx +++ b/src/components/Menu.jsx @@ -4,7 +4,7 @@ * @flow */ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import { connect } from 'react-redux'; import HelpButton from './HelpButton'; @@ -13,15 +13,36 @@ import LogInButton from './LogInButton'; import DownloadButton from './DownloadButton'; import MinecraftButton from './MinecraftButton'; -const Menu = ({ menuOpen }) => ( -
      - - - - - -
      -); +function Menu({ + menuOpen, +}) { + const [render, setRender] = useState(false); + + useEffect(() => { + window.setTimeout(() => { + if (menuOpen) setRender(true); + }, 10); + }, [menuOpen]); + + const onTransitionEnd = () => { + if (!menuOpen) setRender(false); + }; + + return ( + (render || menuOpen) && ( +
      + + + + + +
      + ) + ); +} function mapStateToProps(state: State) { const { menuOpen } = state.gui; diff --git a/src/components/MinecraftModal.jsx b/src/components/MinecraftModal.jsx index 3f875fe..544144c 100644 --- a/src/components/MinecraftModal.jsx +++ b/src/components/MinecraftModal.jsx @@ -6,17 +6,13 @@ import React from 'react'; import { connect } from 'react-redux'; -import Modal from './Modal'; - const MinecraftModal = () => ( - -

      -

      You can also place pixels from our Minecraft Server at

      -

      -

      Please Note that the Minecraft Server is down from time to time

      -

      -       +

      +

      You can also place pixels from our Minecraft Server at

      +

      +

      Please Note that the Minecraft Server is down from time to time

      +

      ); function mapStateToProps(state: State) { @@ -24,4 +20,9 @@ function mapStateToProps(state: State) { return { center }; } -export default connect(mapStateToProps)(MinecraftModal); +const data = { + content: connect(mapStateToProps)(MinecraftModal), + title: 'PixelPlanet Minecraft Server', +}; + +export default data; diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx deleted file mode 100644 index 642cf37..0000000 --- a/src/components/Modal.jsx +++ /dev/null @@ -1,47 +0,0 @@ -/** - * - * @flow - */ - -import React from 'react'; -import Modal from 'react-modal'; -import { connect } from 'react-redux'; -import { MdClose } from 'react-icons/md'; - -import { - hideModal, -} from '../actions'; - - -function MyModal({ close, title, children }) { - return ( - -

      {title}

      -
      - {children} -       - ); -} - -function mapDispatchToProps(dispatch) { - return { - close() { - dispatch(hideModal()); - }, - }; -} - -export default connect(null, mapDispatchToProps)(MyModal); diff --git a/src/components/ModalRoot.jsx b/src/components/ModalRoot.jsx index b4e9f1a..d2f1da1 100644 --- a/src/components/ModalRoot.jsx +++ b/src/components/ModalRoot.jsx @@ -6,7 +6,13 @@ */ import React from 'react'; +import Modal from 'react-modal'; import { connect } from 'react-redux'; +import { MdClose } from 'react-icons/md'; + +import { + hideModal, +} from '../actions'; import HelpModal from './HelpModal'; import SettingsModal from './SettingsModal'; @@ -19,6 +25,7 @@ import MinecraftModal from './MinecraftModal'; const MODAL_COMPONENTS = { + NONE: { content:
      , title: '' }, HELP: HelpModal, SETTINGS: SettingsModal, USERAREA: UserAreaModal, @@ -30,15 +37,43 @@ const MODAL_COMPONENTS = { /* other modals */ }; -const ModalRoot = ({ modalType }) => { - if (!modalType) { - return null; - } - - const SpecificModal = MODAL_COMPONENTS[modalType]; - return ; +const ModalRoot = ({ modalType, modalOpen, close }) => { + const choice = MODAL_COMPONENTS[modalType || 'NONE']; + const { content: SpecificModal, title } = choice; + return ( + +

      {title}

      +
      + +       + ); }; -export default connect( - (state) => state.modal, -)(ModalRoot); +function mapStateToProps(state: State) { + const { modalType, modalOpen } = state.modal; + return { modalType, modalOpen }; +} + +function mapDispatchToProps(dispatch) { + return { + close() { + dispatch(hideModal()); + }, + }; +} + +export default connect(mapStateToProps, mapDispatchToProps)(ModalRoot); diff --git a/src/components/Palette.jsx b/src/components/Palette.jsx index b009fd4..74f03be 100644 --- a/src/components/Palette.jsx +++ b/src/components/Palette.jsx @@ -7,8 +7,8 @@ import React, { useState, useEffect } from 'react'; import { connect } from 'react-redux'; import { selectColor } from '../actions'; - import type { State } from '../reducers'; +import useWindowSize from '../utils/reactHookResize'; /* @@ -90,27 +90,6 @@ function getStylesByWindowSize( }]; } -function useWindowSize() { - const [windowSize, setWindowSize] = useState({ - width: window.innerWidth, - height: window.innerHeight, - }); - - useEffect(() => { - function handleResize() { - setWindowSize({ - width: window.innerWidth, - height: window.innerHeight, - }); - } - - window.addEventListener('resize', handleResize); - return () => window.removeEventListener('resize', handleResize); - }, []); - - return windowSize; -} - function Palette({ colors, selectedColor, @@ -119,8 +98,20 @@ function Palette({ select, clrIgnore, }) { + const [render, setRender] = useState(false); + + useEffect(() => { + window.setTimeout(() => { + if (paletteOpen) setRender(true); + }, 10); + }, [paletteOpen]); + + const onTransitionEnd = () => { + if (!paletteOpen) setRender(false); + }; + const [paletteStyle, spanStyle] = getStylesByWindowSize( - paletteOpen, + (render && paletteOpen), useWindowSize(), colors, clrIgnore, @@ -128,28 +119,31 @@ function Palette({ ); return ( -
      - {colors.slice(2).map((color, index) => ( - select(index + clrIgnore)} - /> - ))} -
      + (render || paletteOpen) && ( +
      + {colors.slice(2).map((color, index) => ( + select(index + clrIgnore)} + /> + ))} +
      + ) ); } diff --git a/src/components/RegisterModal.jsx b/src/components/RegisterModal.jsx index c66a67e..4aac298 100644 --- a/src/components/RegisterModal.jsx +++ b/src/components/RegisterModal.jsx @@ -6,8 +6,6 @@ import React from 'react'; import { connect } from 'react-redux'; -import Modal from './Modal'; - import { showUserAreaModal } from '../actions'; // import { send_registration } from '../ui/register'; @@ -15,17 +13,15 @@ import SignUpForm from './SignUpForm'; const RegisterModal = ({ login }) => ( - -

      -

      Register new account here


      -

      - -

      Also join our Discord:  - pixelplanet.fun/discord -

      +

      +

      Register new account here


      +

      + +

      Also join our Discord:  + pixelplanet.fun/discord

      -       +

      ); function mapDispatchToProps(dispatch) { @@ -36,4 +32,9 @@ function mapDispatchToProps(dispatch) { }; } -export default connect(null, mapDispatchToProps)(RegisterModal); +const data = { + content: connect(null, mapDispatchToProps)(RegisterModal), + title: 'Register New Account', +}; + +export default data; diff --git a/src/components/SettingsModal.jsx b/src/components/SettingsModal.jsx index 4529e5d..643cf27 100644 --- a/src/components/SettingsModal.jsx +++ b/src/components/SettingsModal.jsx @@ -6,7 +6,6 @@ import React from 'react'; import { connect } from 'react-redux'; -import Modal from './Modal'; import MdToggleButtonHover from './MdToggleButtonHover'; import { toggleGrid, @@ -118,82 +117,80 @@ function SettingsModal({ chatNotify, }) { return ( - -

      - - - - - - - - - { (window.backupurl) - ? ( - - ) : null } - {(typeof window.availableStyles !== 'undefined') && ( - + + + + + + + + + { (window.backupurl) + ? ( + - )} -

      -       + ) : null } + {(typeof window.availableStyles !== 'undefined') && ( + + )} +

      ); } @@ -263,4 +260,9 @@ function mapDispatchToProps(dispatch) { }; } -export default connect(mapStateToProps, mapDispatchToProps)(SettingsModal); +const data = { + content: connect(mapStateToProps, mapDispatchToProps)(SettingsModal), + title: 'Settings', +}; + +export default data; diff --git a/src/components/UserAreaModal.jsx b/src/components/UserAreaModal.jsx index 218c933..303f6d1 100644 --- a/src/components/UserAreaModal.jsx +++ b/src/components/UserAreaModal.jsx @@ -6,8 +6,6 @@ import React, { Suspense } from 'react'; import { connect } from 'react-redux'; -import Modal from './Modal'; - import type { State } from '../reducers'; @@ -86,40 +84,38 @@ const LogInArea = ({ register, forgotPassword, me }) => ( const UserAreaModal = ({ name, register, forgotPassword, doMe, logout, setUserName, setUserMailreg, }) => ( - -

      - {(name === null) - ? ( - - ) - : ( - -

      - -
      -
      - -
      -
      - Loading...
      }> - - -
      - - )} -

      Also join our Discord:  - pixelplanet.fun/discord -

      +

      + {(name === null) + ? ( + + ) + : ( + +

      + +
      +
      + +
      +
      + Loading...
      }> + + +
      + + )} +

      Also join our Discord:  + pixelplanet.fun/discord

      - +

      ); function mapDispatchToProps(dispatch) { @@ -157,4 +153,9 @@ function mapStateToProps(state: State) { return { name }; } -export default connect(mapStateToProps, mapDispatchToProps)(UserAreaModal); +const data = { + content: connect(mapStateToProps, mapDispatchToProps)(UserAreaModal), + title: 'User Area', +}; + +export default data; diff --git a/src/reducers/modal.js b/src/reducers/modal.js index 1fccec6..e0a32aa 100644 --- a/src/reducers/modal.js +++ b/src/reducers/modal.js @@ -7,11 +7,13 @@ import type { Action } from '../actions/types'; export type ModalState = { + modalOpen: boolean, modalType: ?string, chatOpen: boolean, }; const initialState: ModalState = { + modalOpen: false, modalType: null, chatOpen: false, }; @@ -31,6 +33,7 @@ export default function modal( ...state, modalType, chatOpen, + modalOpen: true, }; } @@ -38,7 +41,7 @@ export default function modal( case 'HIDE_MODAL': return { ...state, - modalType: null, + modalOpen: false, }; case 'TOGGLE_CHAT_BOX': { diff --git a/src/styles/dark-round.css b/src/styles/dark-round.css index 2a448ed..2dda730 100644 --- a/src/styles/dark-round.css +++ b/src/styles/dark-round.css @@ -41,7 +41,7 @@ tr:nth-child(even) { border-radius: 21px; } -#menu > div { +.menu > div { z-index: 1; background-color: #15374fd1; } @@ -81,6 +81,10 @@ tr:nth-child(even) { border-color: #dcddde; } +.ModalClose:hover { + background-color: #6f6f75; +} + .Overlay { background-color: rgba(187, 187, 187, 0.75); } @@ -89,6 +93,10 @@ tr:nth-child(even) { color: white; } +#chatlink { + color: #f9edde; +} + .statvalue { color: #ecc9ff; } @@ -98,7 +106,7 @@ tr:nth-child(even) { border-radius: 21px; } -.actionbuttons:hover, .coorbox:hover, #menu > div:hover { +.actionbuttons:hover, .coorbox:hover, .menu > div:hover { background-color: #363637; } diff --git a/src/styles/dark.css b/src/styles/dark.css index f75f800..c537e79 100644 --- a/src/styles/dark.css +++ b/src/styles/dark.css @@ -39,7 +39,7 @@ tr:nth-child(even) { color: #f4f4f4; } -#menu > div { +.menu > div { z-index: 1; background-color: #15374fd1; } @@ -78,6 +78,10 @@ tr:nth-child(even) { border-color: #dcddde; } +.ModalClose:hover { + background-color: #6f6f75; +} + .Overlay { background-color: rgba(187, 187, 187, 0.75); } @@ -86,6 +90,10 @@ tr:nth-child(even) { color: white; } +#chatlink { + color: #f9edde; +} + .statvalue { color: #ecc9ff; } @@ -94,7 +102,7 @@ tr:nth-child(even) { background-color: rgba(59, 59, 59, 0.8); } -.actionbuttons:hover, .coorbox:hover, #menu > div:hover { +.actionbuttons:hover, .coorbox:hover, .menu > div:hover { background-color: #363637; } diff --git a/src/styles/default.css b/src/styles/default.css index 0c5ab86..2b65caf 100644 --- a/src/styles/default.css +++ b/src/styles/default.css @@ -162,7 +162,7 @@ tr:nth-child(even) { .menu { opacity: 0; visibility: hidden; - transition: all .1s cubic-bezier(.46,.03,.52,.96); + transition: all .15s cubic-bezier(.46,.03,.52,.96); } .menu.show { @@ -341,6 +341,11 @@ tr:nth-child(even) { border-color: #dcddde; top: 30px; right: 40px; + z-index: 5; +} + +.ModalClose:hover { + background-color: #e3e3e4; } @media (max-width: 604px) { @@ -376,7 +381,6 @@ tr:nth-child(even) { margin: 0px; overflow-x: hidden; overflow-y: scroll; - height: 95%; } .chatinput { height: 22px; @@ -393,6 +397,15 @@ tr:nth-child(even) { user-select: text; margin: 0; } +#chatlink { + position: absolute; + font-weight: bold; + font-size: 20px; + right: 17px; + top: 5px; + color: #4a4a49; + cursor: pointer; +} .usermessages { font-size: 14px; @@ -477,7 +490,7 @@ tr:nth-child(even) { } #palettebox, #palettebox span { - transition: 0.3s; + transition: 0.2s; } #palettebox .selected, @@ -506,3 +519,16 @@ tr:nth-child(even) { .grecaptcha-badge { visibility: hidden; } + +.ReactModal__Overlay { + opacity: 0; + transition: opacity 200ms ease-in-out; +} + +.ReactModal__Overlay--after-open{ + opacity: 1; +} + +.ReactModal__Overlay--before-close{ + opacity: 0; +} diff --git a/src/ui/store.js b/src/ui/store.js index 1d8c714..9864e97 100644 --- a/src/ui/store.js +++ b/src/ui/store.js @@ -5,6 +5,6 @@ import configureStore from '../store/configureStore'; -const store = configureStore(); +const store = configureStore(() => null); export default store; diff --git a/src/utils/reactHookResize.js b/src/utils/reactHookResize.js new file mode 100644 index 0000000..0c40f3c --- /dev/null +++ b/src/utils/reactHookResize.js @@ -0,0 +1,31 @@ +/* + * @flex + * + * can be used in react components + * to trigger on window resize + */ + +import { useState, useEffect } from 'react'; + +function useWindowSize() { + const [windowSize, setWindowSize] = useState({ + width: window.innerWidth, + height: window.innerHeight, + }); + + useEffect(() => { + function handleResize() { + setWindowSize({ + width: window.innerWidth, + height: window.innerHeight, + }); + } + + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, []); + + return windowSize; +} + +export default useWindowSize;