change stylings

README.md

@@ -116,9 +116,9 @@ Configuration takes place in the environment variables that are defined in ecosy
 Notes:
 
 - HOST / PORT is the host on which the ppfun server is listening. In example: If you have a reverse proxy on the same machine, HOST should still be unset or localhost, because it's where the proxy forwards to.
-- to be able to use USE_PROXYCHECK effectively, you have to have an account on proxycheck.io and PROXYCHECK_KEY set.
+- to be able to use USE_PROXYCHECK you have to have an account on proxycheck.io and set PROXYCHECK_KEY.
-- Admins are users with 0cd and access to `Admintools`in their User Menu for image-upload and whatever
+- Admins are users with 0cd and access to `Admintools`in their User Menu
-- You can find out the id of a user by looking into the logs (i.e. `info: {ip} / {id} wants to place 2 in (1701, -8315)`) when he places a pixel or by checking the MySql Users database
+- You can find out the id of a user by wiriting a message in chat and pinging
 - pixelplanet uses the unix command sendmail for sending verification and password reset mails. If you don't want to set up your own mail server, look into [ssmtp](https://wiki.archlinux.org/title/SSMTP), which provides a sendmail interface that forwards to other providers like gmail.
 - default configuartion values can be seen in `src/core/config.js`
 - The HTML for SocialMedia logins is in src/componets/UserAreaModal.js , delete stuff from there if you don't need it. The HTML for the Help Screen is in src/components/HelpModal.js

src/components/Admintools.jsx

@@ -84,7 +84,7 @@ function Admintools() {
   }, []);
 
   return (
-    <div style={{ textAlign: 'center', paddingLeft: '5%', paddingRight: '5%' }}>
+    <div className="content">
       {resp && (
         <div className="respbox">
           {resp.split('\n').map((line) => (

src/components/Converter.jsx

@@ -186,7 +186,7 @@ function Converter() {
   const gimpLink = <a href="https://www.gimp.org">GIMP</a>;
 
   return (
-    <div style={{ textAlign: 'center' }}>
+    <div className="content">
       <div>{t`Choose Canvas`}:&nbsp;
         <select
           value={selectedCanvas}

src/components/ModCanvastools.jsx

@@ -215,7 +215,7 @@ function ModCanvastools() {
     : `Status: ${cleanerstats.method} from ${cleanerstats.tl} to ${cleanerstats.br} on canvas ${canvases[cleanerstats.canvasId].ident} to ${cleanerstats.percent} done`;
 
   return (
-    <div style={{ textAlign: 'center', paddingLeft: '5%', paddingRight: '5%' }}>
+    <div className="content">
       {resp && (
         <div className="respbox">
           {resp.split('\n').map((line) => (

src/components/ModWatchtools.jsx

@@ -96,173 +96,177 @@ function ModWatchtools() {
   const cidColumn = (types) ? (types.indexOf('cid')) : -1;
 
   return (
-    <div style={{ textAlign: 'center', paddingLeft: '5%', paddingRight: '5%' }}>
+    <>
-      {resp && (
+      <div className="content">
-        <div className="respbox">
+        {resp && (
-          {resp.split('\n').map((line) => (
+          <div className="respbox">
-            <p key={line.slice(0, 3)}>
+            {resp.split('\n').map((line) => (
-              {line}
+              <p key={line.slice(0, 3)}>
-            </p>
+                {line}
-          ))}
+              </p>
-          <span
+            ))}
-            role="button"
+            <span
-            tabIndex={-1}
+              role="button"
-            className="modallink"
+              tabIndex={-1}
-            onClick={() => setResp(null)}
+              className="modallink"
+              onClick={() => setResp(null)}
+            >
+              {t`Close`}
+            </span>
+          </div>
+        )}
+        <p>{t`Check who placed in an area`}</p>
+        <p>{t`Canvas`}:&nbsp;
+          <select
+            value={selectedCanvas}
+            onChange={(e) => {
+              const sel = e.target;
+              selectCanvas(sel.options[sel.selectedIndex].value);
+            }}
           >
-            {t`Close`}
+            {Object.keys(canvases)
-          </span>
+              .filter((c) => !canvases[c].v)
-        </div>
+              .map((canvas) => (
-      )}
+                <option
-      <p>{t`Check who placed in an area`}</p>
+                  key={canvas}
-      <p>{t`Canvas`}:&nbsp;
+                  value={canvas}
-        <select
+                >
-          value={selectedCanvas}
+                  {canvases[canvas].title}
-          onChange={(e) => {
+                </option>
-            const sel = e.target;
+              ))}
-            selectCanvas(sel.options[sel.selectedIndex].value);
+          </select>
+          {` ${t`Interval`}: `}
+          <input
+            value={interval}
+            style={{
+              display: 'inline-block',
+              width: '100%',
+              maxWidth: '5em',
+            }}
+            type="text"
+            placeholder="15m"
+            onChange={(evt) => {
+              const newInterval = evt.target.value.trim();
+              selectInterval(newInterval);
+              keepState.interval = newInterval;
+            }}
+          />
+          {` ${t`IID (optional)`}: `}
+          <input
+            value={iid}
+            style={{
+              display: 'inline-block',
+              width: '100%',
+              maxWidth: '10em',
+            }}
+            type="text"
+            placeholder="xxxx-xxxxx-xxxx"
+            onChange={(evt) => {
+              const newIid = evt.target.value.trim();
+              selectIid(newIid);
+              keepState.iid = newIid;
+            }}
+          />
+        </p>
+        <p>
+          {t`Top-left corner`} (X_Y):&nbsp;
+          <input
+            value={tlcoords}
+            style={{
+              display: 'inline-block',
+              width: '100%',
+              maxWidth: '15em',
+            }}
+            type="text"
+            placeholder="X_Y"
+            onChange={(evt) => {
+              const co = evt.target.value.trim();
+              selectTLCoords(co);
+              keepState.tlcoords = co;
+            }}
+          />
+        </p>
+        <p>
+          {t`Bottom-right corner`} (X_Y):&nbsp;
+          <input
+            value={brcoords}
+            style={{
+              display: 'inline-block',
+              width: '100%',
+              maxWidth: '15em',
+            }}
+            type="text"
+            placeholder="X_Y"
+            onChange={(evt) => {
+              const co = evt.target.value.trim();
+              selectBRCoords(co);
+              keepState.brcoords = co;
+            }}
+          />
+        </p>
+        <button
+          type="button"
+          onClick={() => {
+            if (submitting) {
+              return;
+            }
+            setSubmitting(true);
+            submitWatchAction(
+              'all',
+              selectedCanvas,
+              tlcoords,
+              brcoords,
+              interval,
+              iid,
+              (ret) => {
+                setSubmitting(false);
+                setResp(ret.info);
+                if (ret.rows) {
+                  setSortBy(0);
+                  setTable({
+                    columns: ret.columns,
+                    types: ret.types,
+                    rows: ret.rows,
+                  });
+                }
+              },
+            );
           }}
         >
-          {Object.keys(canvases).filter((c) => !canvases[c].v).map((canvas) => (
+          {(submitting) ? '...' : t`Get Pixels`}
-            <option
+        </button>
-              key={canvas}
+        <button
-              value={canvas}
+          type="button"
-            >
+          onClick={() => {
-              {canvases[canvas].title}
+            if (submitting) {
-            </option>
+              return;
-          ))}
+            }
-        </select>
+            setSubmitting(true);
-        {` ${t`Interval`}: `}
+            submitWatchAction(
-        <input
+              'summary',
-          value={interval}
+              selectedCanvas,
-          style={{
+              tlcoords,
-            display: 'inline-block',
+              brcoords,
-            width: '100%',
+              interval,
-            maxWidth: '5em',
+              iid,
+              (ret) => {
+                setSubmitting(false);
+                setResp(ret.info);
+                if (ret.rows) {
+                  setSortBy(0);
+                  setTable({
+                    columns: ret.columns,
+                    types: ret.types,
+                    rows: ret.rows,
+                  });
+                }
+              },
+            );
           }}
-          type="text"
+        >
-          placeholder="15m"
+          {(submitting) ? '...' : t`Get Users`}
-          onChange={(evt) => {
+        </button>
-            const newInterval = evt.target.value.trim();
+      </div>
-            selectInterval(newInterval);
-            keepState.interval = newInterval;
-          }}
-        />
-        {` ${t`IID (optional)`}: `}
-        <input
-          value={iid}
-          style={{
-            display: 'inline-block',
-            width: '100%',
-            maxWidth: '10em',
-          }}
-          type="text"
-          placeholder="xxxx-xxxxx-xxxx"
-          onChange={(evt) => {
-            const newIid = evt.target.value.trim();
-            selectIid(newIid);
-            keepState.iid = newIid;
-          }}
-        />
-      </p>
-      <p>
-        {t`Top-left corner`} (X_Y):&nbsp;
-        <input
-          value={tlcoords}
-          style={{
-            display: 'inline-block',
-            width: '100%',
-            maxWidth: '15em',
-          }}
-          type="text"
-          placeholder="X_Y"
-          onChange={(evt) => {
-            const co = evt.target.value.trim();
-            selectTLCoords(co);
-            keepState.tlcoords = co;
-          }}
-        />
-      </p>
-      <p>
-        {t`Bottom-right corner`} (X_Y):&nbsp;
-        <input
-          value={brcoords}
-          style={{
-            display: 'inline-block',
-            width: '100%',
-            maxWidth: '15em',
-          }}
-          type="text"
-          placeholder="X_Y"
-          onChange={(evt) => {
-            const co = evt.target.value.trim();
-            selectBRCoords(co);
-            keepState.brcoords = co;
-          }}
-        />
-      </p>
-      <button
-        type="button"
-        onClick={() => {
-          if (submitting) {
-            return;
-          }
-          setSubmitting(true);
-          submitWatchAction(
-            'all',
-            selectedCanvas,
-            tlcoords,
-            brcoords,
-            interval,
-            iid,
-            (ret) => {
-              setSubmitting(false);
-              setResp(ret.info);
-              if (ret.rows) {
-                setSortBy(0);
-                setTable({
-                  columns: ret.columns,
-                  types: ret.types,
-                  rows: ret.rows,
-                });
-              }
-            },
-          );
-        }}
-      >
-        {(submitting) ? '...' : t`Get Pixels`}
-      </button>
-      <button
-        type="button"
-        onClick={() => {
-          if (submitting) {
-            return;
-          }
-          setSubmitting(true);
-          submitWatchAction(
-            'summary',
-            selectedCanvas,
-            tlcoords,
-            brcoords,
-            interval,
-            iid,
-            (ret) => {
-              setSubmitting(false);
-              setResp(ret.info);
-              if (ret.rows) {
-                setSortBy(0);
-                setTable({
-                  columns: ret.columns,
-                  types: ret.types,
-                  rows: ret.rows,
-                });
-              }
-            },
-          );
-        }}
-      >
-        {(submitting) ? '...' : t`Get Users`}
-      </button>
       <br />
       {(rows && columns && types) && (
         <React.Fragment key="pxltable">
@@ -391,7 +395,7 @@ function ModWatchtools() {
           </table>
         </React.Fragment>
       )}
-    </div>
+    </>
   );
 }
 

src/components/Modtools.jsx

@@ -30,7 +30,7 @@ function Modtools() {
 
   return (
     <>
-      <div style={{ textAlign: 'center' }}>
+      <div className="content">
         {parts.map((part, ind) => (
           <React.Fragment key={part}>
             <span
@@ -45,8 +45,8 @@ function Modtools() {
               && <span className="hdivider" />}
           </React.Fragment>
         ))}
+        <div className="modaldivider" />
       </div>
-      <div className="modaldivider" />
       {Content && <Content />}
     </>
   );

src/components/Rankings.jsx

@@ -20,7 +20,7 @@ const Rankings = () => {
 
   return (
     <>
-      <div>
+      <div className="content">
         <span
           role="button"
           tabIndex={-1}

src/components/Tabs.jsx

@@ -21,7 +21,7 @@ const Tabs = ({ children, activeTab, setActiveTab }) => (
         );
       })}
     </ol>
-    <div className="content">
+    <div className="tab-content">
       {children.map((child) => {
         if (!child.props || child.props.label !== activeTab) {
           return undefined;

src/components/UserAreaContent.jsx

@@ -56,7 +56,7 @@ const UserAreaContent = () => {
   const Area = AREAS[area];
 
   return (
-    <div style={{ textAlign: 'center' }}>
+    <div className="content">
       <UserMessages />
       <Stat
         text={t`Todays Placed Pixels`}

src/styles/default.css

@@ -132,6 +132,7 @@ a:hover {
 }
 
 .tab-list {
+  font-size: 16px;
   border-bottom: 1px solid #ccc;
   padding-left: 0;
 }
@@ -269,13 +270,6 @@ tr:nth-child(even) {
   height: 100%;
 }
 
-.win-content {
-  position: relative;
-  width: calc(100% - 3px);
-  height: calc(100% - 28px);
-  overflow-y: auto;
-}
-
 .contextmenu {
   position: absolute;
   font-size: 12px;
@@ -536,6 +530,19 @@ tr:nth-child(even) {
   overflow-y: auto;
 }
 
+.win-content {
+  position: relative;
+  width: calc(100% - 3px);
+  height: calc(100% - 28px);
+  overflow-y: auto;
+}
+
+.modal-content, .win-content {
+  color: hsla(0, 0%, 0%, 0.6);
+  font-size: 14px;
+  font-weight: 500;
+}
+
 .Alert {
   overflow-y: auto;
   max-height: 100%;
@@ -551,12 +558,6 @@ tr:nth-child(even) {
 .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;
-  float: none;
   text-align: center;
 }