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.
-- Admins are users with 0cd and access to `Admintools`in their User Menu for image-upload and whatever
-- 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
+- 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
+- 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,7 +96,8 @@ function ModWatchtools() {
   const cidColumn = (types) ? (types.indexOf('cid')) : -1;
 
   return (
-    <div style={{ textAlign: 'center', paddingLeft: '5%', paddingRight: '5%' }}>
+    <>
+      <div className="content">
         {resp && (
           <div className="respbox">
             {resp.split('\n').map((line) => (
@@ -123,7 +124,9 @@ function ModWatchtools() {
               selectCanvas(sel.options[sel.selectedIndex].value);
             }}
           >
-          {Object.keys(canvases).filter((c) => !canvases[c].v).map((canvas) => (
+            {Object.keys(canvases)
+              .filter((c) => !canvases[c].v)
+              .map((canvas) => (
                 <option
                   key={canvas}
                   value={canvas}
@@ -263,6 +266,7 @@ function ModWatchtools() {
         >
           {(submitting) ? '...' : t`Get Users`}
         </button>
+      </div>
       <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>
         <div className="modaldivider" />
+      </div>
       {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;
 }