From 343c2da2310b0fffb89d40dc1f673c2dea71d0a7 Mon Sep 17 00:00:00 2001 From: HF Date: Mon, 15 Aug 2022 22:28:41 +0200 Subject: [PATCH] remove modaltext and modalcotext classes --- src/components/Admintools.jsx | 12 ++--- src/components/Alert.jsx | 2 +- src/components/BanInfo.jsx | 10 ++-- src/components/Captcha.jsx | 4 +- src/components/Converter.jsx | 34 ++++++------ src/components/LogInArea.jsx | 2 +- src/components/MdToggleButton.jsx | 15 ------ src/components/ModCanvastools.jsx | 34 ++++++------ src/components/ModIIDtools.jsx | 2 +- src/components/ModWatchtools.jsx | 10 ++-- src/components/Rankings.jsx | 2 +- src/components/SettingsItem.jsx | 23 +++++++++ src/components/SocialSettings.jsx | 36 ++++--------- src/components/Tabs.jsx | 2 +- src/components/UserAreaContent.jsx | 2 +- src/components/windows/Archive.jsx | 8 +-- src/components/windows/CanvasSelect.jsx | 10 +--- src/components/windows/ForgotPassword.jsx | 4 +- src/components/windows/Help.jsx | 18 +++---- src/components/windows/Register.jsx | 4 +- src/components/windows/Settings.jsx | 63 +++-------------------- src/styles/default.css | 44 ++++++++++++---- src/styles/theme-dark-round.css | 2 +- src/styles/theme-dark-sstraight.css | 2 +- src/styles/theme-dark.css | 2 +- 25 files changed, 155 insertions(+), 192 deletions(-) delete mode 100644 src/components/MdToggleButton.jsx create mode 100644 src/components/SettingsItem.jsx diff --git a/src/components/Admintools.jsx b/src/components/Admintools.jsx index a2b1542..e630503 100644 --- a/src/components/Admintools.jsx +++ b/src/components/Admintools.jsx @@ -88,7 +88,7 @@ function Admintools() { {resp && (
{resp.split('\n').map((line) => ( -

+

{line}

))} @@ -105,7 +105,7 @@ function Admintools() {

{t`IP Actions`}

-

+

{t`Do stuff with IPs (one IP per line)`}

{ >

{title}

{(message) && ( -

+

{message}

)} diff --git a/src/components/BanInfo.jsx b/src/components/BanInfo.jsx index a7a6e2b..fe6ba93 100644 --- a/src/components/BanInfo.jsx +++ b/src/components/BanInfo.jsx @@ -63,7 +63,7 @@ const BanInfo = ({ close }) => { return (
-

+

{t`You are banned. You think it is unjustifed? Check out the `} { {(reason) && (

{t`Reason`}:

-

{reason}

+

{reason}

)} {(mod) && (

{t`By Mod`}:

-

{mod}

+

{mod}

 )} {(expireTs > 0) && (

{t`Duration`}:

-

+

{t`Your ban expires at `} {expire} {t` which is in `} @@ -111,7 +111,7 @@ const BanInfo = ({ close }) => { {(expireTs < 0) && (

{t`Unbanned`}:

-

{t`Now that you have seen this message, you are no longer banned.`}

+

{t`Now that you have seen this message, you are no longer banned.`}

 )}

diff --git a/src/components/Captcha.jsx b/src/components/Captcha.jsx index 1b085df..460044f 100644 --- a/src/components/Captcha.jsx +++ b/src/components/Captcha.jsx @@ -64,7 +64,7 @@ const Captcha = ({ autoload, width }) => { return ( <> -

+

{t`Type the characters from the following image:`}   @@ -120,7 +120,7 @@ const Captcha = ({ autoload, width }) => { )}

-

+

{t`Can't read? Reload:`}  -

{t`Choose Canvas`}:  +
{t`Choose Canvas`}: 

{t`Palette Download`}

-
+
{jt`Palette for ${gimpLink}`}: 

{t`Image Converter`}

-

{t`Convert an image to canvas colors`}

+

{t`Convert an image to canvas colors`}

-

{t`Choose Strategy`}:  +

{t`Choose Strategy`}:  {t`Serpentine`}

- {t`Minimum Color Distance`}:  + {t`Minimum Color Distance`}:    -

+

)} -

{t`Choose Color Mode`}:  +

{t`Choose Color Mode`}: 

-

+

-

+

{t`Light Grid`}

- {t`Offset`} X:  + {t`Offset`} X:    - {t`Offset`} Y:  + {t`Offset`} Y: 
)} -

+

- {t`Width`}:  + {t`Width`}:    - {t`Height`}:  + {t`Height`}:  -

+

{t`Keep Ratio`}

-

+

{ return (

-

+

{t`Login to access more features and stats.`}


{t`Login with Name or Mail:`}

diff --git a/src/components/MdToggleButton.jsx b/src/components/MdToggleButton.jsx deleted file mode 100644 index f5eb650..0000000 --- a/src/components/MdToggleButton.jsx +++ /dev/null @@ -1,15 +0,0 @@ -/** - */ - -import React from 'react'; -import ToggleButton from 'react-toggle'; - -const MdToggleButton = ({ value, onToggle, deactivated }) => ( - -); - -export default MdToggleButton; diff --git a/src/components/ModCanvastools.jsx b/src/components/ModCanvastools.jsx index 026b93b..416b371 100644 --- a/src/components/ModCanvastools.jsx +++ b/src/components/ModCanvastools.jsx @@ -219,7 +219,7 @@ function ModCanvastools() { {resp && (
{resp.split('\n').map((line) => ( -

+

{line}

))} @@ -233,7 +233,7 @@ function ModCanvastools() {
)} -

{t`Choose Canvas`}:  +

{t`Choose Canvas`}: 

@@ -274,8 +274,8 @@ function ModCanvastools() { ))} -

{descAction}

-

+

{descAction}

+

{t`Coordinates in X_Y format:`} 

{t`Pixel Protection`}

-

+

{t`Set protection of areas \ (if you need finer grained control, \ use protect with image upload and alpha layers)`} @@ -338,7 +338,7 @@ function ModCanvastools() { ))} -

+

{t`Top-left corner`} (X_Y): 

-

+

{t`Bottom-right corner`} (X_Y): 

{t`Rollback to Date`}

-

+

{t`Rollback an area of the canvas to a set date (00:00 UTC)`}

-

+

{t`Top-left corner`} (X_Y): 

-

+

{t`Bottom-right corner`} (X_Y): 

{t`Canvas Cleaner`}

-

+

{t`Apply a filter to clean trash in large canvas areas.`}

-

{descCleanAction}

-

+

{descCleanAction}

+

{cleanerStatusString}

-

+

{t`Top-left corner`} (X_Y): 

-

+

{t`Bottom-right corner`} (X_Y):  )} -

+

{' IID: '} {resp.split('\n').map((line) => ( -

+

{line}

))} @@ -114,8 +114,8 @@ function ModWatchtools() {
)} -

{t`Check who placed in an area`}

-

{t`Canvas`}:  +

{t`Check who placed in an area`}

+

{t`Canvas`}: 

-

+

{t`Bottom-right corner`} (X_Y):  { ))} -

+

{t`Ranking updates every 5 min. Daily rankings get reset at midnight UTC.`}

diff --git a/src/components/SettingsItem.jsx b/src/components/SettingsItem.jsx new file mode 100644 index 0000000..d772530 --- /dev/null +++ b/src/components/SettingsItem.jsx @@ -0,0 +1,23 @@ +import React from 'react'; +import ToggleButton from 'react-toggle'; + +const SettingsItem = React.memo(({ + title, keyBind, value, onToggle, children, deactivated, +}) => ( +
+
+

+ {title} {keyBind && {keyBind}} +

+ +
+
{children}
+
+
+), (prevProps, nextProps) => prevProps.value === nextProps.value); + +export default SettingsItem; diff --git a/src/components/SocialSettings.jsx b/src/components/SocialSettings.jsx index cdb1b2a..a5978ce 100644 --- a/src/components/SocialSettings.jsx +++ b/src/components/SocialSettings.jsx @@ -10,7 +10,7 @@ import { setBlockingDm, setUserBlock, } from '../store/actions/thunks'; -import MdToggleButton from './MdToggleButton'; +import SettingsItem from './SettingsItem'; const SocialSettings = ({ done }) => { const blocked = useSelector((state) => state.chat.blocked); @@ -20,31 +20,15 @@ const SocialSettings = ({ done }) => { return (
-
{ + if (!fetching) { + dispatch(setBlockingDm(!blockDm)); + } }} - > -

- {t`Block all Private Messages`} -

- { - if (!fetching) { - dispatch(setBlockingDm(!blockDm)); - } - }} - /> -
-
+ />

{ ) : ( -

{t`You have no users blocked`}

+

{t`You have no users blocked`}

) }
diff --git a/src/components/Tabs.jsx b/src/components/Tabs.jsx index 5ecaebe..a0f8dc9 100644 --- a/src/components/Tabs.jsx +++ b/src/components/Tabs.jsx @@ -21,7 +21,7 @@ const Tabs = ({ children, activeTab, setActiveTab }) => ( ); })} -
+
{children.map((child) => { if (!child.props || child.props.label !== activeTab) { return undefined; diff --git a/src/components/UserAreaContent.jsx b/src/components/UserAreaContent.jsx index 0d370af..d30e793 100644 --- a/src/components/UserAreaContent.jsx +++ b/src/components/UserAreaContent.jsx @@ -76,7 +76,7 @@ const UserAreaContent = () => { value={stats.ranking} rank /> -
+

{t`Your name is: ${name}`}

( ( -
-

+

+

{t`While we tend to not delete canvases, some canvases are started for fun or as a request by users who currently like a meme. \ Those canvases can get boring after a while and after weeks of no major change and if they really aren't worth being kept active, we decide to remove them.`}
{t`Here we collect those canvases to archive them in a proper way (which is currently just one).`} @@ -23,11 +23,11 @@ Those canvases can get boring after a while and after weeks of no major change a alt="political-compass" src="https://storage.pixelplanet.fun/compass-preview.png" /> -

+

{t`This canvas got requested during a time of political conflicts on the main Earth canvas. It was a 1024x1024 representation of the political compass with a 5s cooldown and 60s stacking. It got launched on May 11th and remained active for months till it got shut down on November 30th.`}
{t`We decided to archive it as a timelapse with lossless encoded webm. Taking a screenshot from the timelapse results in a perfect 1:1 representation of how the canvas was at that time.`}

-

+

Timelapse: Download diff --git a/src/components/windows/CanvasSelect.jsx b/src/components/windows/CanvasSelect.jsx index 61fc162..ef33362 100644 --- a/src/components/windows/CanvasSelect.jsx +++ b/src/components/windows/CanvasSelect.jsx @@ -22,14 +22,8 @@ const CanvasSelect = ({ windowId }) => { [dispatch]); return ( -

-

+

+

{t`Select the canvas you want to use. \ Every canvas is unique and has different palettes, cooldown and requirements. \ Archive of closed canvases can be accessed here:`}  diff --git a/src/components/windows/ForgotPassword.jsx b/src/components/windows/ForgotPassword.jsx index 23e74cd..a447e91 100644 --- a/src/components/windows/ForgotPassword.jsx +++ b/src/components/windows/ForgotPassword.jsx @@ -66,8 +66,8 @@ const ForgotPassword = ({ windowId }) => { ); } return ( -

-

+

+

{t`Enter your mail address and we will send you a new password:`}


diff --git a/src/components/windows/Help.jsx b/src/components/windows/Help.jsx index 035c2e4..0a90b70 100644 --- a/src/components/windows/Help.jsx +++ b/src/components/windows/Help.jsx @@ -37,8 +37,8 @@ const Help = () => { const mailLink = admin@pixelplanet.fun; return ( -
-

+

+

{t`Place color pixels on a large canvas with other players online!`}
{t`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 requirements on the Canvas Selection menu (globe button on top). \ @@ -47,18 +47,18 @@ pixels and 7s on already set pixels.`}
{t`Higher zoomlevels take some time to update, the 3D globe gets updated at least once per day.`}
{t`Have fun!`}

-

Guilded ({t`recommended`}): pixelplanet.fun/guilded

-

{t`Source on `}git.pixelplanet.fun

+

Guilded ({t`recommended`}): pixelplanet.fun/guilded

+

{t`Source on `}git.pixelplanet.fun

{t`Map Data`}

-

{t`The bare map data that we use, together with converted OpenStreetMap tiles for orientation, \ +

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

{t`Banned? Detected as Proxy?`}

-
+

{jt`If you got detected as proxy, but you are none, or think that you got wrongfully banned, please go to our ${guildedLink} or send us an e-mail to ${mailLink} and include the following IID:`}

2D {t`Controls`}

-
+
{t`Click a color in palette to select it`}
{jt`Press ${bindG} to toggle grid`}
{jt`Press ${bindX} to toggle showing of pixel activity`}
@@ -75,7 +75,7 @@ can be downloaded from mega.nz here: `} +
{jt`Press ${bindW}, ${bindA}, ${bindS}, ${bindD} to move`}
{jt`Press ${bindAUp}, ${bindALeft}, ${bindADown}, ${bindARight} to move`}
{jt`Press ${bindE} and ${bindC} to fly up and down`}
@@ -87,7 +87,7 @@ can be downloaded from mega.nz here: `} +
{jt`We thanks those artists very much, they offered their palettes to the public on`}  lospec.com

diff --git a/src/components/windows/Register.jsx b/src/components/windows/Register.jsx index 2e12491..e975293 100644 --- a/src/components/windows/Register.jsx +++ b/src/components/windows/Register.jsx @@ -77,12 +77,12 @@ const Register = ({ windowId }) => { }; return ( -

+
-

{t`Register new account here`}


+

{t`Register new account here`}

{errors.map((error) => (

{t`Error`} : {error}

diff --git a/src/components/windows/Settings.jsx b/src/components/windows/Settings.jsx index 0a27ce9..4b5f557 100644 --- a/src/components/windows/Settings.jsx +++ b/src/components/windows/Settings.jsx @@ -6,8 +6,8 @@ import React from 'react'; import { useSelector, useDispatch, shallowEqual } from 'react-redux'; import { c, t } from 'ttag'; +import SettingsItem from '../SettingsItem'; import LanguageSelect from '../LanguageSelect'; -import MdToggleButton from '../MdToggleButton'; import { toggleGrid, togglePixelNotify, @@ -21,38 +21,12 @@ import { selectStyle, } from '../../store/actions'; - -const flexy = { - display: 'flex', - alignItems: 'stretch', - justifyContent: 'flex-start', - flexWrap: 'nowrap', - boxSizing: 'border-box', - flex: '1 1 auto', -}; - -const itemStyles = { - ...flexy, - flexDirection: 'column', - marginBottom: 20, -}; - -const titleStyles = { - flex: '1 1 auto', -}; - -const rowStyles = { - ...flexy, - alignItems: 'center', - flexDirection: 'row', -}; - const SettingsItemSelect = ({ title, values, selected, onSelect, icon, children, }) => ( -
-
-

{title}

+
+
+

{title}

{(icon) && }