remove modaltext and modalcotext classes

2022-08-15 22:28:41 +02:00 · 2022-08-15 22:28:41 +02:00 · 343c2da231
commit 343c2da231
parent 680cd4327e
25 changed files with 155 additions and 192 deletions
--- a/src/components/Admintools.jsx
+++ b/src/components/Admintools.jsx
@ -88,7 +88,7 @@ function Admintools() {
      {resp && (
        <div className="respbox">
          {resp.split('\n').map((line) => (
-            <p key={line.slice(0, 3)} className="modaltext">
+            <p key={line.slice(0, 3)}>
              {line}
            </p>
          ))}
@ -105,7 +105,7 @@ function Admintools() {
      <div>
        <br />
        <h3>{t`IP Actions`}</h3>
-        <p className="modalcotext">
+        <p>
          {t`Do stuff with IPs (one IP per line)`}
        </p>
        <select
@ -154,7 +154,7 @@ function Admintools() {
        <br />
        <div className="modaldivider" />
        <h3>{t`Manage Moderators`}</h3>
-        <p className="modalcotext">
+        <p>
          {t`Remove Moderator`}
        </p>
        {(modlist.length) ? (
@ -188,14 +188,14 @@ function Admintools() {
          </span>
        )
          : (
-            <p className="modaltext">{t`There are no mods`}</p>
+            <p>{t`There are no mods`}</p>
          )}
        <br />

-        <p className="modalcotext">
+        <p>
          {t`Assign new Mod`}
        </p>
-        <p className="modalcotext">
+        <p>
          {t`Enter UserName of new Mod`}:&nbsp;
          <input
            value={modName}
--- a/src/components/Alert.jsx
+++ b/src/components/Alert.jsx
@ -67,7 +67,7 @@ const Alert = () => {
      >
        <h2>{title}</h2>
        {(message) && (
-        <p className="modaltext">
+        <p>
          {message}
        </p>
        )}
--- a/src/components/BanInfo.jsx
+++ b/src/components/BanInfo.jsx
@ -63,7 +63,7 @@ const BanInfo = ({ close }) => {

  return (
    <div style={{ userSelect: 'text' }}>
-      <p className="modaltext">
+      <p>
        {t`You are banned. You think it is unjustifed? Check out the `}
        <span
          role="button"
@ -84,19 +84,19 @@ const BanInfo = ({ close }) => {
      {(reason) && (
        <React.Fragment key="rea">
          <h3>{t`Reason`}:</h3>
-          <p className="modaltext">{reason}</p>
+          <p>{reason}</p>
        </React.Fragment>
      )}
      {(mod) && (
        <React.Fragment key="mod">
          <h3>{t`By Mod`}:</h3>
-          <p className="modaltext">{mod}</p>
+          <p>{mod}</p>
        </React.Fragment>
      )}
      {(expireTs > 0) && (
        <React.Fragment key="exp">
          <h3>{t`Duration`}:</h3>
-          <p className="modaltext">
+          <p>
            {t`Your ban expires at `}
            <span style={{ fontWeight: 'bold' }}>{expire}</span>
            {t` which is in `}
@ -111,7 +111,7 @@ const BanInfo = ({ close }) => {
      {(expireTs < 0) && (
        <React.Fragment key="nb">
          <h3>{t`Unbanned`}:</h3>
-          <p className="modaltext">{t`Now that you have seen this message, you are no longer banned.`}</p>
+          <p>{t`Now that you have seen this message, you are no longer banned.`}</p>
        </React.Fragment>
      )}
      <p>
--- a/src/components/Captcha.jsx
+++ b/src/components/Captcha.jsx
@ -64,7 +64,7 @@ const Captcha = ({ autoload, width }) => {

  return (
    <>
-      <p className="modaltext">
+      <p>
        {t`Type the characters from the following image:`}
        &nbsp;
        <span style={{ fontSize: 11 }}>
@ -120,7 +120,7 @@ const Captcha = ({ autoload, width }) => {
            </span>
          )}
      </div>
-      <p className="modaltext">
+      <p>
        {t`Can't read? Reload:`}&nbsp;
        <span
          role="button"
--- a/src/components/Converter.jsx
+++ b/src/components/Converter.jsx
@ -187,7 +187,7 @@ function Converter() {

  return (
    <div style={{ textAlign: 'center' }}>
-      <div className="modalcotext">{t`Choose Canvas`}:&nbsp;
+      <div>{t`Choose Canvas`}:&nbsp;
        <select
          value={selectedCanvas}
          onChange={(e) => {
@ -214,7 +214,7 @@ function Converter() {
        </select>
      </div>
      <h3>{t`Palette Download`}</h3>
-      <div className="modalcotext">
+      <div>
        {jt`Palette for ${gimpLink}`}:&nbsp;
        <button
          type="button"
@ -234,7 +234,7 @@ function Converter() {
        </button>
      </div>
      <h3>{t`Image Converter`}</h3>
-      <p className="modalcotext">{t`Convert an image to canvas colors`}</p>
+      <p>{t`Convert an image to canvas colors`}</p>
      <input
        type="file"
        id="imgfile"
@ -253,7 +253,7 @@ function Converter() {
          setInputImageCanvas(imageData);
        }}
      />
-      <p className="modalcotext">{t`Choose Strategy`}:&nbsp;
+      <p>{t`Choose Strategy`}:&nbsp;
        <select
          value={selectedStrategy}
          onChange={(e) => {
@ -280,7 +280,7 @@ function Converter() {
            if (!showExtraOptions) setExtraRender(false);
          }}
        >
-          <p style={{ fontHeight: 16 }} className="modalcotext">
+          <p style={{ fontHeight: 16 }}>
            <input
              type="checkbox"
              checked={serpentine}
@ -293,7 +293,7 @@ function Converter() {
            />
            {t`Serpentine`}
          </p>
-          <span className="modalcotext">{t`Minimum Color Distance`}:&nbsp;
+          <span>{t`Minimum Color Distance`}:&nbsp;
            <input
              type="number"
              step="1"
@ -309,7 +309,7 @@ function Converter() {
              }}
            />&nbsp;
          </span>
-          <p style={{ fontHeight: 16 }} className="modalcotext">
+          <p style={{ fontHeight: 16 }}>
            <input
              type="checkbox"
              checked={GIMPerror}
@ -324,7 +324,7 @@ function Converter() {
          </p>
        </div>
      )}
-      <p className="modalcotext">{t`Choose Color Mode`}:&nbsp;
+      <p>{t`Choose Color Mode`}:&nbsp;
        <select
          value={selectedColorDist}
          onChange={(e) => {
@ -342,7 +342,7 @@ function Converter() {
          }
        </select>
      </p>
-      <p style={{ fontHeight: 16 }} className="modalcotext">
+      <p style={{ fontHeight: 16 }}>
        <input
          type="checkbox"
          checked={gridEnabled}
@ -362,7 +362,7 @@ function Converter() {
            if (!gridEnabled) setGridRender(false);
          }}
        >
-          <p style={{ fontHeight: 16 }} className="modalcotext">
+          <p style={{ fontHeight: 16 }}>
            <input
              type="checkbox"
              checked={gridLight}
@ -375,7 +375,7 @@ function Converter() {
            />
            {t`Light Grid`}
          </p>
-          <span className="modalcotext">{t`Offset`} X:&nbsp;
+          <span>{t`Offset`} X:&nbsp;
            <input
              type="number"
              step="1"
@ -391,7 +391,7 @@ function Converter() {
              }}
            />&nbsp;
          </span>
-          <span className="modalcotext">{t`Offset`} Y:&nbsp;
+          <span>{t`Offset`} Y:&nbsp;
            <input
              type="number"
              step="1"
@ -409,7 +409,7 @@ function Converter() {
          </span>
        </div>
      )}
-      <p style={{ fontHeight: 16 }} className="modalcotext">
+      <p style={{ fontHeight: 16 }}>
        <input
          type="checkbox"
          checked={scalingEnabled}
@ -431,7 +431,7 @@ function Converter() {
            if (!scalingEnabled) setScalingRender(false);
          }}
        >
-          <span className="modalcotext">{t`Width`}:&nbsp;
+          <span>{t`Width`}:&nbsp;
            <input
              type="number"
              step="1"
@ -462,7 +462,7 @@ function Converter() {
              }}
            />&nbsp;
          </span>
-          <span className="modalcotext">{t`Height`}:&nbsp;
+          <span>{t`Height`}:&nbsp;
            <input
              type="number"
              step="1"
@ -493,7 +493,7 @@ function Converter() {
              }}
            />
          </span>
-          <p style={{ fontHeight: 16 }} className="modalcotext">
+          <p style={{ fontHeight: 16 }}>
            <input
              type="checkbox"
              checked={selectedScaleKeepRatio}
@ -503,7 +503,7 @@ function Converter() {
            />
            {t`Keep Ratio`}
          </p>
-          <p style={{ fontHeight: 16 }} className="modalcotext">
+          <p style={{ fontHeight: 16 }}>
            <input
              type="checkbox"
              checked={scalingAA}
--- a/src/components/LogInArea.jsx
+++ b/src/components/LogInArea.jsx
@ -16,7 +16,7 @@ const LogInArea = ({ windowId }) => {

  return (
    <div style={{ textAlign: 'center' }}>
-      <p className="modaltext">
+      <p>
        {t`Login to access more features and stats.`}
      </p><br />
      <h2>{t`Login with Name or Mail:`}</h2>
--- a/src/components/MdToggleButton.jsx
+++ b/src/components/MdToggleButton.jsx
@ -1,15 +0,0 @@
-/**
- */
-
-import React from 'react';
-import ToggleButton from 'react-toggle';
-
-const MdToggleButton = ({ value, onToggle, deactivated }) => (
-  <ToggleButton
-    checked={value}
-    onChange={onToggle}
-    disabled={deactivated}
-  />
-);
-
-export default MdToggleButton;
--- a/src/components/ModCanvastools.jsx
+++ b/src/components/ModCanvastools.jsx
@ -219,7 +219,7 @@ function ModCanvastools() {
      {resp && (
        <div className="respbox">
          {resp.split('\n').map((line) => (
-            <p key={line.slice(0, 3)} className="modaltext">
+            <p key={line.slice(0, 3)}>
              {line}
            </p>
          ))}
@ -233,7 +233,7 @@ function ModCanvastools() {
          </span>
        </div>
      )}
-      <p className="modalcotext">{t`Choose Canvas`}:&nbsp;
+      <p>{t`Choose Canvas`}:&nbsp;
        <select
          value={selectedCanvas}
          onChange={(e) => {
@ -253,8 +253,8 @@ function ModCanvastools() {
      </p>
      <div className="modaldivider" />
      <h3>{t`Image Upload`}</h3>
-      <p className="modalcotext">{t`Upload images to canvas`}</p>
-      <p className="modalcotext">
+      <p>{t`Upload images to canvas`}</p>
+      <p>
        {t`File`}:&nbsp;
        <input type="file" name="image" id="imgfile" />
      </p>
@ -274,8 +274,8 @@ function ModCanvastools() {
          </option>
        ))}
      </select>
-      <p className="modalcotext">{descAction}</p>
-      <p className="modalcotext">
+      <p>{descAction}</p>
+      <p>
        {t`Coordinates in X_Y format:`}&nbsp;
        <input
          value={coords}
@ -317,7 +317,7 @@ function ModCanvastools() {
      <br />
      <div className="modaldivider" />
      <h3>{t`Pixel Protection`}</h3>
-      <p className="modalcotext">
+      <p>
        {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() {
          </option>
        ))}
      </select>
-      <p className="modalcotext">
+      <p>
        {t`Top-left corner`} (X_Y):&nbsp;
        <input
          value={tlcoords}
@ -356,7 +356,7 @@ function ModCanvastools() {
          }}
        />
      </p>
-      <p className="modalcotext">
+      <p>
        {t`Bottom-right corner`} (X_Y):&nbsp;
        <input
          value={brcoords}
@ -400,7 +400,7 @@ function ModCanvastools() {
          <br />
          <div className="modaldivider" />
          <h3>{t`Rollback to Date`}</h3>
-          <p className="modalcotext">
+          <p>
            {t`Rollback an area of the canvas to a set date (00:00 UTC)`}
          </p>
          <input
@ -413,7 +413,7 @@ function ModCanvastools() {
              selectDate(evt.target.value);
            }}
          />
-          <p className="modalcotext">
+          <p>
            {t`Top-left corner`} (X_Y):&nbsp;
            <input
              value={tlrcoords}
@ -431,7 +431,7 @@ function ModCanvastools() {
              }}
            />
          </p>
-          <p className="modalcotext">
+          <p>
            {t`Bottom-right corner`} (X_Y):&nbsp;
            <input
              value={brrcoords}
@ -475,7 +475,7 @@ function ModCanvastools() {
      <br />
      <div className="modaldivider" />
      <h3>{t`Canvas Cleaner`}</h3>
-      <p className="modalcotext">
+      <p>
        {t`Apply a filter to clean trash in large canvas areas.`}
      </p>
      <select
@ -494,11 +494,11 @@ function ModCanvastools() {
          </option>
        ))}
      </select>
-      <p className="modalcotext">{descCleanAction}</p>
-      <p className="modalcotext" style={{ fontWeight: 'bold' }}>
+      <p>{descCleanAction}</p>
+      <p style={{ fontWeight: 'bold' }}>
        {cleanerStatusString}
      </p>
-      <p className="modalcotext">
+      <p>
        {t`Top-left corner`} (X_Y):&nbsp;
        <input
          value={tlccoords}
@ -516,7 +516,7 @@ function ModCanvastools() {
          }}
        />
      </p>
-      <p className="modalcotext">
+      <p>
        {t`Bottom-right corner`} (X_Y):&nbsp;
        <input
          value={brccoords}
--- a/src/components/ModIIDtools.jsx
+++ b/src/components/ModIIDtools.jsx
@ -97,7 +97,7 @@ function ModIIDtools() {
          </p>
        </React.Fragment>
      )}
-      <p className="modalcotext">
+      <p>
        {' IID: '}
        <input
          value={iid}
--- a/src/components/ModWatchtools.jsx
+++ b/src/components/ModWatchtools.jsx
@ -100,7 +100,7 @@ function ModWatchtools() {
      {resp && (
        <div className="respbox">
          {resp.split('\n').map((line) => (
-            <p key={line.slice(0, 3)} className="modaltext">
+            <p key={line.slice(0, 3)}>
              {line}
            </p>
          ))}
@ -114,8 +114,8 @@ function ModWatchtools() {
          </span>
        </div>
      )}
-      <p className="modalcotext">{t`Check who placed in an area`}</p>
-      <p className="modalcotext">{t`Canvas`}:&nbsp;
+      <p>{t`Check who placed in an area`}</p>
+      <p>{t`Canvas`}:&nbsp;
        <select
          value={selectedCanvas}
          onChange={(e) => {
@ -165,7 +165,7 @@ function ModWatchtools() {
          }}
        />
      </p>
-      <p className="modalcotext">
+      <p>
        {t`Top-left corner`} (X_Y):&nbsp;
        <input
          value={tlcoords}
@ -183,7 +183,7 @@ function ModWatchtools() {
          }}
        />
      </p>
-      <p className="modalcotext">
+      <p>
        {t`Bottom-right corner`} (X_Y):&nbsp;
        <input
          value={brcoords}
--- a/src/components/Rankings.jsx
+++ b/src/components/Rankings.jsx
@ -84,7 +84,7 @@ const Rankings = () => {
            ))}
        </tbody>
      </table>
-      <p className="modaltext">
+      <p>
        {t`Ranking updates every 5 min. Daily rankings get reset at midnight UTC.`}
      </p>
    </>
--- a/src/components/SettingsItem.jsx
+++ 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,
+}) => (
+  <div className="setitem">
+    <div className="setrow">
+      <h3 className="settitle">
+        {title} {keyBind && <kbd>{keyBind}</kbd>}
+      </h3>
+      <ToggleButton
+        checked={value}
+        onChange={onToggle}
+        disabled={deactivated}
+      />
+    </div>
+    <div className="modaldesc">{children}</div>
+    <div className="modaldivider" />
+  </div>
+), (prevProps, nextProps) => prevProps.value === nextProps.value);
+
+export default SettingsItem;
--- 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 (
    <div className="inarea">
-      <div
-        style={{
-          display: 'flex',
-          flexWrap: 'nowrap',
-          margin: 10,
+      <SettingsItem
+        title={t`Block all Private Messages`}
+        value={blockDm}
+        onToggle={() => {
+          if (!fetching) {
+            dispatch(setBlockingDm(!blockDm));
+          }
        }}
-      >
-        <h3
-          style={{
-            flex: 'auto',
-            textAlign: 'left',
-          }}
-        >
-          {t`Block all Private Messages`}
-        </h3>
-        <MdToggleButton
-          value={blockDm}
-          onToggle={() => {
-            if (!fetching) {
-              dispatch(setBlockingDm(!blockDm));
-            }
-          }}
-        />
-      </div>
-      <div className="modaldivider" />
+      />
      <h3
        style={{
          textAlign: 'left',
@ -75,7 +59,7 @@ const SocialSettings = ({ done }) => {
          </span>
        )
          : (
-            <p className="modaltext">{t`You have no users blocked`}</p>
+            <p>{t`You have no users blocked`}</p>
          )
      }
      <div className="modaldivider" />
--- a/src/components/Tabs.jsx
+++ b/src/components/Tabs.jsx
@ -21,7 +21,7 @@ const Tabs = ({ children, activeTab, setActiveTab }) => (
        );
      })}
    </ol>
-    <div className="tab-content">
+    <div className="content">
      {children.map((child) => {
        if (!child.props || child.props.label !== activeTab) {
          return undefined;
--- a/src/components/UserAreaContent.jsx
+++ b/src/components/UserAreaContent.jsx
@ -76,7 +76,7 @@ const UserAreaContent = () => {
        value={stats.ranking}
        rank
      />
-      <div className="modaltext">
+      <div>
        <p>{t`Your name is: ${name}`}</p>(
        <span
          role="button"
--- a/src/components/windows/Archive.jsx
+++ b/src/components/windows/Archive.jsx
@ -11,8 +11,8 @@ const imageStyle = {
 };

 const Archive = () => (
-  <div style={{ textAlign: 'center', paddingLeft: '5%', paddingRight: '5%' }}>
-    <p className="modaltext">
+  <div className="content">
+    <p>
      {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.`}<br />
      {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"
    />
-    <p className="modaltext">
+    <p>
      {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.`}<br />
      {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.`}
    </p>
-    <p>
+    <p className="modalinfo">
      Timelapse:
      <a href="https://storage.pixelplanet.fun/compass-timelapse.webm">
        Download
--- a/src/components/windows/CanvasSelect.jsx
+++ b/src/components/windows/CanvasSelect.jsx
@ -22,14 +22,8 @@ const CanvasSelect = ({ windowId }) => {
    [dispatch]);

  return (
-    <div style={{
-      textAlign: 'center',
-      paddingLeft: '5%',
-      paddingRight: '5%',
-      paddingTop: 20,
-    }}
-    >
-      <p className="modaltext">
+    <div className="content">
+      <p>
        {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:`}&nbsp;
--- a/src/components/windows/ForgotPassword.jsx
+++ b/src/components/windows/ForgotPassword.jsx
@ -66,8 +66,8 @@ const ForgotPassword = ({ windowId }) => {
    );
  }
  return (
-    <div style={{ paddingLeft: '5%', paddingRight: '5%', textAlign: 'center' }}>
-      <p className="modaltext">
+    <div className="content">
+      <p>
        {t`Enter your mail address and we will send you a new password:`}
      </p><br />
      <form onSubmit={handleSubmit}>
--- a/src/components/windows/Help.jsx
+++ b/src/components/windows/Help.jsx
@ -37,8 +37,8 @@ const Help = () => {
  const mailLink = <a href="mailto:admin@pixelplanet.fun">admin@pixelplanet.fun</a>;

  return (
-    <div style={{ textAlign: 'center', paddingLeft: '5%', paddingRight: '5%' }}>
-      <p className="modaltext">
+    <div className="content">
+      <p>
        {t`Place color pixels on a large canvas with other players online!`}<br />
        {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.`}<br />
        {t`Higher zoomlevels take some time to update, the 3D globe gets updated at least once per day.`}<br />
        {t`Have fun!`}
      </p>
-      <p>Guilded ({t`recommended`}): <a href="./guilded" target="_blank" rel="noopener noreferrer">pixelplanet.fun/guilded</a></p>
-      <p>{t`Source on `}<a href="https://git.pixelplanet.fun" target="_blank" rel="noopener noreferrer">git.pixelplanet.fun</a></p>
+      <p className="modalinfo">Guilded ({t`recommended`}): <a href="./guilded" target="_blank" rel="noopener noreferrer">pixelplanet.fun/guilded</a></p>
+      <p className="modalinfo">{t`Source on `}<a href="https://git.pixelplanet.fun" target="_blank" rel="noopener noreferrer">git.pixelplanet.fun</a></p>
      <h3>{t`Map Data`}</h3>
-      <p className="modaltext">{t`The bare map data that we use, together with converted OpenStreetMap tiles for orientation, \
+      <p>{t`The bare map data that we use, together with converted OpenStreetMap tiles for orientation, \
 can be downloaded from mega.nz here: `}<a href="https://mega.nz/#!JpkBwAbJ!EnSLlZmKv3kEBE0HDhakTgAZZycD3ELjduajJxPGaXo">pixelplanetmap.zip</a> (422MB)</p>
      <h3>{t`Banned? Detected as Proxy?`}</h3>
-      <div className="modaltext">
+      <div>
        <p>{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:`}</p>
        <GetIID />
      </div>
      <h3>2D {t`Controls`}</h3>
-      <div className="modaltext" style={{ lineHeight: 1.8 }}>
+      <div style={{ lineHeight: 1.5 }}>
        {t`Click a color in palette to select it`}<br />
        {jt`Press ${bindG} to toggle grid`}<br />
        {jt`Press ${bindX} to toggle showing of pixel activity`}<br />
@ -75,7 +75,7 @@ can be downloaded from mega.nz here: `}<a href="https://mega.nz/#!JpkBwAbJ!EnSLl
        {jt`Click ${mouseSymbol} middle mouse button or ${touchSymbol} long-tap to select current hovering color`}<br />
      </div>
      <h3>3D {t`Controls`}</h3>
-      <div className="modaltext" style={{ lineHeight: 1.8 }}>
+      <div style={{ lineHeight: 1.5 }}>
        {jt`Press ${bindW}, ${bindA}, ${bindS}, ${bindD} to move`}<br />
        {jt`Press ${bindAUp}, ${bindALeft}, ${bindADown}, ${bindARight} to move`}<br />
        {jt`Press ${bindE} and ${bindC} to fly up and down`}<br />
@ -87,7 +87,7 @@ can be downloaded from mega.nz here: `}<a href="https://mega.nz/#!JpkBwAbJ!EnSLl
        {jt`Click ${mouseSymbol} middle mouse button or ${touchSymbol} long-tap to select current hovering color`}<br />
      </div>
      <h3>Palette Credits</h3>
-      <div className="modaltext">
+      <div>
        {jt`We thanks those artists very much, they offered their palettes to the public on`}&nbsp;
        <a href="https://lospec.com/">lospec.com</a>
        <p>
--- a/src/components/windows/Register.jsx
+++ b/src/components/windows/Register.jsx
@ -77,12 +77,12 @@ const Register = ({ windowId }) => {
  };

  return (
-    <div style={{ textAlign: 'center' }}>
+    <div className="content">
      <form
        style={{ paddingLeft: '5%', paddingRight: '5%' }}
        onSubmit={handleSubmit}
      >
-        <p className="modaltext">{t`Register new account here`}</p><br />
+        <p>{t`Register new account here`}</p>
        {errors.map((error) => (
          <p key={error} className="errormessage"><span>{t`Error`}</span>
            :&nbsp;{error}</p>
--- 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,
 }) => (
-  <div style={itemStyles}>
-    <div style={rowStyles}>
-      <h3 style={titleStyles}>{title}</h3>
+  <div className="setitem">
+    <div className="setrow">
+      <h3 className="settitle">{title}</h3>
      {(icon) && <img alt="" src={icon} />}
      <select
        value={selected}
@ -78,27 +52,6 @@ const SettingsItemSelect = ({
  </div>
 );

-const SettingsItem = React.memo(({
-  title, keyBind, value, onToggle, children, deactivated,
-}) => (
-  <div style={itemStyles}>
-    <div style={rowStyles}>
-      <h3
-        style={titleStyles}
-      >
-        {title} {keyBind && <kbd>{keyBind}</kbd>}
-      </h3>
-      <MdToggleButton
-        value={value}
-        onToggle={onToggle}
-        deactivated={deactivated}
-      />
-    </div>
-    <div className="modaldesc">{children}</div>
-    <div className="modaldivider" />
-  </div>
-), (prevProps, nextProps) => prevProps.value === nextProps.value);
-
 function Settings() {
  const [
    isGridShown,
@ -128,7 +81,7 @@ function Settings() {
  const audioAvailable = window.AudioContext || window.webkitAudioContext;

  return (
-    <div style={{ paddingLeft: '5%', paddingRight: '5%', paddingTop: 30 }}>
+    <div className="content">
      <SettingsItem
        title={t`Show Grid`}
        keyBind={c('keybinds').t`G`}
@ -219,9 +172,9 @@ function Settings() {
        </SettingsItemSelect>
      )}
      {(window.ssv && navigator.cookieEnabled && window.ssv.langs) && (
-        <div style={itemStyles}>
-          <div style={rowStyles}>
-            <h3 style={titleStyles}>
+        <div className="setitem">
+          <div className="setrow">
+            <h3 className="settitle">
              {t`Select Language`}
            </h3>
            <LanguageSelect />
--- a/src/styles/default.css
+++ b/src/styles/default.css
@ -189,7 +189,7 @@ h3 {
 }

 h4 {
-  color: #4f545c;
+  color: #202327;
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
@ -548,19 +548,16 @@ tr:nth-child(even) {
  font-size: 16px;
 }

-.modaltext, .modalcotext {
+.content {
+  padding-left: 5%;
+  padding-right: 5%;
  color: hsla(0, 0%, 0%, 0.6);
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  position: relative;
-  text-align: inherit;
  float: none;
-}
-
-.modaltext {
-  margin: 0;
-  padding: 0;
+  text-align: center;
 }

 .modaldesc {
@ -595,8 +592,6 @@ tr:nth-child(even) {
  position: relative;
  text-align: inherit;
  float: none;
-  margin: 0;
-  padding: 0;
 }

 .modalcvtext {
@ -611,6 +606,35 @@ tr:nth-child(even) {
  width: 75%;
 }

+.setitem, .setrow {
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: nowrap;
+  box-sizing: border-box;
+  flex: 1 1 auto;
+}
+
+.setitem h3 {
+  margin-top: 0;
+}
+
+.setitem {
+  align-items: stretch;
+  flex-direction: column;
+  text-align: initial;
+  margin-bottom: 6px;
+  margin-top: 10px;
+}
+
+.settitle {
+  flex: 1 1 auto;
+}
+
+.setrow {
+  align-items: center;
+  flex-direction: row;
+}
+
 .ModalClose, .ModalRestore {
  position: fixed;
  display: flex;
--- a/src/styles/theme-dark-round.css
+++ b/src/styles/theme-dark-round.css
@ -99,7 +99,7 @@ tr:nth-child(even) {
  border-radius: 12px;
 }

-.modaltext, .modalcotext {
+.content {
  color: #f4f4f4;
 }

--- a/src/styles/theme-dark-sstraight.css
+++ b/src/styles/theme-dark-sstraight.css
@ -104,7 +104,7 @@ tr:nth-child(even) {
  border-radius: 10px;
 }

-.modaltext, .modalcotext {
+.content {
  color: #f8f8f8;
 }

--- a/src/styles/theme-dark.css
+++ b/src/styles/theme-dark.css
@ -70,7 +70,7 @@ tr:nth-child(even) {
  color: #f4f4f4;
 }

-.modaltext, .modalcotext {
+.content {
  color: #f4f4f4;
 }