fix modtools

src/components/Admintools.jsx

@@ -110,7 +110,6 @@ function Admintools() {
       )}
       <div>
         <br />
-        <div className="modaldivider" />
         <h3 className="modaltitle">{t`IP Actions`}</h3>
         <p className="modalcotext">
           {t`Do stuff with IPs (one IP per line)`}

src/components/ModCanvastools.jsx

@@ -263,7 +263,6 @@ function ModCanvastools() {
         }
         </select>
       </p>
-      <br />
       <div className="modaldivider" />
       <h3 className="modaltitle">{t`Image Upload`}</h3>
       <p className="modalcotext">{t`Upload images to canvas`}</p>

src/components/Modtools.jsx

@@ -15,30 +15,33 @@ const CONTENT = {
 };
 
 function Modtools() {
-  const [selectedPart, selectPart] = useState('canvas');
+  const [selectedPart, selectPart] = useState('Canvas');
 
   const userlvl = useSelector((state) => state.user.userlvl);
 
   const Content = CONTENT[selectedPart];
 
+  const parts = Object.keys(CONTENT)
+    .filter((part) => part !== 'Admin' || userlvl === 1);
+
   return (
     <>
       <div style={{ textAlign: 'center' }}>
-        {Object.keys(CONTENT)
-          .filter((part) => part !== 'Admin' || userlvl === 1)
-          .map((part) => (
+        {parts.map((part, ind) => (
+          <React.Fragment key={part}>
             <span
               role="button"
               tabIndex={-1}
-              key={part}
               className="modallink"
-              style={(selectedPart === part) && {
+              style={(selectedPart === part) ? {
                 fontWeight: 'bold',
-              }}
+              } : {}}
               onClick={() => selectPart(part)}
             >{part}</span>
-          ),
-          )}
+            {(ind !== parts.length - 1)
+              && <span className="hdivider" />}
+          </React.Fragment>
+        ))}
       </div>
       <div className="modaldivider" />
       {Content && <Content />}

src/components/UserAreaContent.jsx

@@ -83,30 +83,34 @@ const UserAreaContent = () => {
           tabIndex={-1}
           className="modallink"
           onClick={logout}
-        > {t`Log out`}</span> |
+        > {t`Log out`}</span>
+        <span className="hdivider" />
         <span
           role="button"
           tabIndex={-1}
           className="modallink"
           onClick={() => setArea('CHANGE_NAME')}
-        > {t`Change Username`}</span> |
+        > {t`Change Username`}</span>
+        <span className="hdivider" />
         {(mailreg)
           && (
-          <span>
+          <React.Fragment key="mc">
             <span
               role="button"
               tabIndex={-1}
               className="modallink"
               onClick={() => setArea('CHANGE_MAIL')}
-            > {t`Change Mail`}</span> |
-          </span>
+            > {t`Change Mail`}</span>
+            <span className="hdivider" />
+          </React.Fragment>
           )}
         <span
           role="button"
           tabIndex={-1}
           className="modallink"
           onClick={() => setArea('CHANGE_PASSWORD')}
-        > {t`Change Password`}</span> |
+        > {t`Change Password`}</span>
+        <span className="hdivider" />
         <span
           role="button"
           tabIndex={-1}

src/styles/default.css

@@ -564,6 +564,13 @@ tr:nth-child(even) {
   background-color: hsla(216, 4%, 74%, .3);
 }
 
+.hdivider{
+  margin-left: 5px;
+  margin-right: 5px;
+  border-left: 1px solid #000;
+  height: 100%;
+}
+
 .modalinfo {
   color: #4f545c;
   font-size: 15px;