ppfun/pixelplanet
13
Fork 18
Code Issues 24 Pull Requests Releases 2 Activity

remove modiletitle class and replace it with h3

Browse Source
This commit is contained in:
HF 2022-08-15 21:56:11 +02:00
parent 63bf9b15ff
commit 680cd4327e
15 changed files with 58 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Admintools.jsx
View File

@ -104,7 +104,7 @@ function Admintools() {
)} )}
<div> <div>
<br /> <br />
<h3 className="modaltitle">{t`IP Actions`}</h3> <h3>{t`IP Actions`}</h3>
<p className="modalcotext"> <p className="modalcotext">
{t`Do stuff with IPs (one IP per line)`} {t`Do stuff with IPs (one IP per line)`}
</p> </p>
@ -153,7 +153,7 @@ function Admintools() {
</button> </button>
<br /> <br />
<div className="modaldivider" /> <div className="modaldivider" />
<h3 className="modaltitle">{t`Manage Moderators`}</h3> <h3>{t`Manage Moderators`}</h3>
<p className="modalcotext"> <p className="modalcotext">
{t`Remove Moderator`} {t`Remove Moderator`}
</p> </p>

8
src/components/BanInfo.jsx
View File

@ -83,19 +83,19 @@ const BanInfo = ({ close }) => {
))} ))}
{(reason) && ( {(reason) && (
<React.Fragment key="rea"> <React.Fragment key="rea">
<h3 className="modaltitle">{t`Reason`}:</h3> <h3>{t`Reason`}:</h3>
<p className="modaltext">{reason}</p> <p className="modaltext">{reason}</p>
</React.Fragment> </React.Fragment>
)} )}
{(mod) && ( {(mod) && (
<React.Fragment key="mod"> <React.Fragment key="mod">
<h3 className="modaltitle">{t`By Mod`}:</h3> <h3>{t`By Mod`}:</h3>
<p className="modaltext">{mod}</p> <p className="modaltext">{mod}</p>
</React.Fragment> </React.Fragment>
)} )}
{(expireTs > 0) && ( {(expireTs > 0) && (
<React.Fragment key="exp"> <React.Fragment key="exp">
<h3 className="modaltitle">{t`Duration`}:</h3> <h3>{t`Duration`}:</h3>
<p className="modaltext"> <p className="modaltext">
{t`Your ban expires at `} {t`Your ban expires at `}
<span style={{ fontWeight: 'bold' }}>{expire}</span> <span style={{ fontWeight: 'bold' }}>{expire}</span>
@ -110,7 +110,7 @@ const BanInfo = ({ close }) => {
)} )}
{(expireTs < 0) && ( {(expireTs < 0) && (
<React.Fragment key="nb"> <React.Fragment key="nb">
<h3 className="modaltitle">{t`Unbanned`}:</h3> <h3>{t`Unbanned`}:</h3>
<p className="modaltext">{t`Now that you have seen this message, you are no longer banned.`}</p> <p className="modaltext">{t`Now that you have seen this message, you are no longer banned.`}</p>
</React.Fragment> </React.Fragment>
)} )}

6
src/components/CanvasItem.jsx
View File

@ -22,8 +22,8 @@ const CanvasItem = ({
alt="preview" alt="preview"
src={`/preview${canvasId}.png`} src={`/preview${canvasId}.png`}
/> />
<p className="modalcvtext"> <div className="modalcvtext">
<span className="modaltitle">{canvas.title}</span><br /> <h4>{canvas.title}</h4>
{(online) && ( {(online) && (
<React.Fragment key="online"> <React.Fragment key="online">
{t`Online Users`}:&nbsp; {t`Online Users`}:&nbsp;
@ -67,7 +67,7 @@ const CanvasItem = ({
? <span key="voxsize"> x {THREE_CANVAS_HEIGHT} Voxels</span> ? <span key="voxsize"> x {THREE_CANVAS_HEIGHT} Voxels</span>
: <span key="pxlsize"> Pixels</span>} : <span key="pxlsize"> Pixels</span>}
</span> </span>
</p> </div>
</div> </div>
); );

4
src/components/Converter.jsx
View File

@ -213,7 +213,7 @@ function Converter() {
} }
</select> </select>
</div> </div>
<h3 className="modaltitle">{t`Palette Download`}</h3> <h3>{t`Palette Download`}</h3>
<div className="modalcotext"> <div className="modalcotext">
{jt`Palette for ${gimpLink}`}:&nbsp; {jt`Palette for ${gimpLink}`}:&nbsp;
<button <button
@ -233,7 +233,7 @@ function Converter() {
Download Download
</button> </button>
</div> </div>
<h3 className="modaltitle">{t`Image Converter`}</h3> <h3>{t`Image Converter`}</h3>
<p className="modalcotext">{t`Convert an image to canvas colors`}</p> <p className="modalcotext">{t`Convert an image to canvas colors`}</p>
<input <input
type="file" type="file"

8
src/components/ModCanvastools.jsx
View File

@ -252,7 +252,7 @@ function ModCanvastools() {
</select> </select>
</p> </p>
<div className="modaldivider" /> <div className="modaldivider" />
<h3 className="modaltitle">{t`Image Upload`}</h3> <h3>{t`Image Upload`}</h3>
<p className="modalcotext">{t`Upload images to canvas`}</p> <p className="modalcotext">{t`Upload images to canvas`}</p>
<p className="modalcotext"> <p className="modalcotext">
{t`File`}:&nbsp; {t`File`}:&nbsp;
@ -316,7 +316,7 @@ function ModCanvastools() {
<br /> <br />
<div className="modaldivider" /> <div className="modaldivider" />
<h3 className="modaltitle">{t`Pixel Protection`}</h3> <h3>{t`Pixel Protection`}</h3>
<p className="modalcotext"> <p className="modalcotext">
{t`Set protection of areas \ {t`Set protection of areas \
(if you need finer grained control, \ (if you need finer grained control, \
@ -399,7 +399,7 @@ function ModCanvastools() {
<div> <div>
<br /> <br />
<div className="modaldivider" /> <div className="modaldivider" />
<h3 className="modaltitle">{t`Rollback to Date`}</h3> <h3>{t`Rollback to Date`}</h3>
<p className="modalcotext"> <p className="modalcotext">
{t`Rollback an area of the canvas to a set date (00:00 UTC)`} {t`Rollback an area of the canvas to a set date (00:00 UTC)`}
</p> </p>
@ -474,7 +474,7 @@ function ModCanvastools() {
)} )}
<br /> <br />
<div className="modaldivider" /> <div className="modaldivider" />
<h3 className="modaltitle">{t`Canvas Cleaner`}</h3> <h3>{t`Canvas Cleaner`}</h3>
<p className="modalcotext"> <p className="modalcotext">
{t`Apply a filter to clean trash in large canvas areas.`} {t`Apply a filter to clean trash in large canvas areas.`}
</p> </p>

2
src/components/ModIIDtools.jsx
View File

@ -49,7 +49,7 @@ function ModIIDtools() {
return ( return (
<div style={{ textAlign: 'center', paddingLeft: '5%', paddingRight: '5%' }}> <div style={{ textAlign: 'center', paddingLeft: '5%', paddingRight: '5%' }}>
<h3 className="modaltitle">{t`IID Actions`}</h3> <h3>{t`IID Actions`}</h3>
<select <select
value={iIDAction} value={iIDAction}
onChange={(e) => { onChange={(e) => {

10
src/components/SocialSettings.jsx
View File

@ -27,15 +27,14 @@ const SocialSettings = ({ done }) => {
margin: 10, margin: 10,
}} }}
> >
<span <h3
style={{ style={{
flex: 'auto', flex: 'auto',
textAlign: 'left', textAlign: 'left',
}} }}
className="modaltitle"
> >
{t`Block all Private Messages`} {t`Block all Private Messages`}
</span> </h3>
<MdToggleButton <MdToggleButton
value={blockDm} value={blockDm}
onToggle={() => { onToggle={() => {
@ -46,13 +45,12 @@ const SocialSettings = ({ done }) => {
/> />
</div> </div>
<div className="modaldivider" /> <div className="modaldivider" />
<p <h3
style={{ style={{
textAlign: 'left', textAlign: 'left',
marginLeft: 10, marginLeft: 10,
}} }}
className="modaltitle" >{t`Unblock Users`}</h3>
>{t`Unblock Users`}</p>
{ {
(blocked.length) ? ( (blocked.length) ? (
<span <span

2
src/components/windows/Archive.jsx
View File

@ -17,7 +17,7 @@ const Archive = () => (
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 /> 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).`} {t`Here we collect those canvases to archive them in a proper way (which is currently just one).`}
</p> </p>
<p className="modaltitle">{t`Political Compass Canvas`}</p> <h3>{t`Political Compass Canvas`}</h3>
<img <img
style={imageStyle} style={imageStyle}
alt="political-compass" alt="political-compass"

10
src/components/windows/Help.jsx
View File

@ -49,15 +49,15 @@ pixels and 7s on already set pixels.`}<br />
</p> </p>
<p>Guilded ({t`recommended`}): <a href="./guilded" target="_blank" rel="noopener noreferrer">pixelplanet.fun/guilded</a></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>{t`Source on `}<a href="https://git.pixelplanet.fun" target="_blank" rel="noopener noreferrer">git.pixelplanet.fun</a></p>
<p className="modaltitle">{t`Map Data`}</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 className="modaltext">{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> can be downloaded from mega.nz here: `}<a href="https://mega.nz/#!JpkBwAbJ!EnSLlZmKv3kEBE0HDhakTgAZZycD3ELjduajJxPGaXo">pixelplanetmap.zip</a> (422MB)</p>
<p className="modaltitle">{t`Banned? Detected as Proxy?`}</p> <h3>{t`Banned? Detected as Proxy?`}</h3>
<div className="modaltext"> <div className="modaltext">
<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> <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 /> <GetIID />
</div> </div>
<h3 className="modaltitle">2D {t`Controls`}</h3> <h3>2D {t`Controls`}</h3>
<div className="modaltext" style={{ lineHeight: 1.8 }}> <div className="modaltext" style={{ lineHeight: 1.8 }}>
{t`Click a color in palette to select it`}<br /> {t`Click a color in palette to select it`}<br />
{jt`Press ${bindG} to toggle grid`}<br /> {jt`Press ${bindG} to toggle grid`}<br />
@ -74,7 +74,7 @@ can be downloaded from mega.nz here: `}<a href="https://mega.nz/#!JpkBwAbJ!EnSLl
{jt`${mouseSymbol} Left click or ${touchSymbol} tap to place a pixel`}<br /> {jt`${mouseSymbol} Left click or ${touchSymbol} tap to place a pixel`}<br />
{jt`Click ${mouseSymbol} middle mouse button or ${touchSymbol} long-tap to select current hovering color`}<br /> {jt`Click ${mouseSymbol} middle mouse button or ${touchSymbol} long-tap to select current hovering color`}<br />
</div> </div>
<h3 className="modaltitle">3D {t`Controls`}</h3> <h3>3D {t`Controls`}</h3>
<div className="modaltext" style={{ lineHeight: 1.8 }}> <div className="modaltext" style={{ lineHeight: 1.8 }}>
{jt`Press ${bindW}, ${bindA}, ${bindS}, ${bindD} to move`}<br /> {jt`Press ${bindW}, ${bindA}, ${bindS}, ${bindD} to move`}<br />
{jt`Press ${bindAUp}, ${bindALeft}, ${bindADown}, ${bindARight} to move`}<br /> {jt`Press ${bindAUp}, ${bindALeft}, ${bindADown}, ${bindARight} to move`}<br />
@ -86,7 +86,7 @@ can be downloaded from mega.nz here: `}<a href="https://mega.nz/#!JpkBwAbJ!EnSLl
{jt`${mouseSymbol} Right click or ${touchSymbol} double-tap to remove a pixel`}<br /> {jt`${mouseSymbol} Right click or ${touchSymbol} double-tap to remove a pixel`}<br />
{jt`Click ${mouseSymbol} middle mouse button or ${touchSymbol} long-tap to select current hovering color`}<br /> {jt`Click ${mouseSymbol} middle mouse button or ${touchSymbol} long-tap to select current hovering color`}<br />
</div> </div>
<h3 className="modaltitle">Palette Credits</h3> <h3>Palette Credits</h3>
<div className="modaltext"> <div className="modaltext">
{jt`We thanks those artists very much, they offered their palettes to the public on`}&nbsp; {jt`We thanks those artists very much, they offered their palettes to the public on`}&nbsp;
<a href="https://lospec.com/">lospec.com</a> <a href="https://lospec.com/">lospec.com</a>

10
src/components/windows/Register.jsx
View File

@ -87,7 +87,7 @@ const Register = ({ windowId }) => {
<p key={error} className="errormessage"><span>{t`Error`}</span> <p key={error} className="errormessage"><span>{t`Error`}</span>
:&nbsp;{error}</p> :&nbsp;{error}</p>
))} ))}
<p className="modaltitle">{t`Name`}:</p> <h3>{t`Name`}:</h3>
<input <input
name="name" name="name"
className="reginput" className="reginput"
@ -95,7 +95,7 @@ const Register = ({ windowId }) => {
type="text" type="text"
placeholder={t`Name`} placeholder={t`Name`}
/> />
<p className="modaltitle">{t`Email`}:</p> <h3>{t`Email`}:</h3>
<input <input
name="email" name="email"
className="reginput" className="reginput"
@ -103,7 +103,7 @@ const Register = ({ windowId }) => {
type="text" type="text"
placeholder={t`Email`} placeholder={t`Email`}
/> />
<p className="modaltitle">{t`Password`}:</p> <h3>{t`Password`}:</h3>
<input <input
name="password" name="password"
className="reginput" className="reginput"
@ -111,7 +111,7 @@ const Register = ({ windowId }) => {
type="password" type="password"
placeholder={t`Password`} placeholder={t`Password`}
/> />
<p className="modaltitle">{t`Confirm Password`}:</p> <h3>{t`Confirm Password`}:</h3>
<input <input
name="confirmpassword" name="confirmpassword"
className="reginput" className="reginput"
@ -119,7 +119,7 @@ const Register = ({ windowId }) => {
type="password" type="password"
placeholder={t`Confirm Password`} placeholder={t`Confirm Password`}
/> />
<p className="modaltitle">{t`Captcha`}:</p> <h3>{t`Captcha`}:</h3>
<Captcha autoload={false} width={60} key={captKey} /> <Captcha autoload={false} width={60} key={captKey} />
<button type="submit"> <button type="submit">
{(submitting) ? '...' : t`Submit`} {(submitting) ? '...' : t`Submit`}

5
src/components/windows/Settings.jsx
View File

@ -52,7 +52,7 @@ const SettingsItemSelect = ({
}) => ( }) => (
<div style={itemStyles}> <div style={itemStyles}>
<div style={rowStyles}> <div style={rowStyles}>
<h3 style={titleStyles} className="modaltitle">{title}</h3> <h3 style={titleStyles}>{title}</h3>
{(icon) && <img alt="" src={icon} />} {(icon) && <img alt="" src={icon} />}
<select <select
value={selected} value={selected}
@ -85,7 +85,6 @@ const SettingsItem = React.memo(({
<div style={rowStyles}> <div style={rowStyles}>
<h3 <h3
style={titleStyles} style={titleStyles}
className="modaltitle"
> >
{title} {keyBind && <kbd>{keyBind}</kbd>} {title} {keyBind && <kbd>{keyBind}</kbd>}
</h3> </h3>
@ -222,7 +221,7 @@ function Settings() {
{(window.ssv && navigator.cookieEnabled && window.ssv.langs) && ( {(window.ssv && navigator.cookieEnabled && window.ssv.langs) && (
<div style={itemStyles}> <div style={itemStyles}>
<div style={rowStyles}> <div style={rowStyles}>
<h3 style={titleStyles} className="modaltitle"> <h3 style={titleStyles}>
{t`Select Language`} {t`Select Language`}
</h3> </h3>
<LanguageSelect /> <LanguageSelect />

34
src/styles/default.css
View File

@ -176,6 +176,28 @@ h2 {
margin-top: 12px; margin-top: 12px;
} }
h3 {
color: #4f545c;
font-weight: 500;
font-size: 16px;
line-height: 24px;
margin-left: 0;
margin-right: 10px;
overflow: hidden;
word-wrap: break-word;
margin-bottom: 0;
}
h4 {
color: #4f545c;
font-weight: 500;
font-size: 15px;
line-height: 22px;
overflow: hidden;
word-wrap: break-word;
margin: 2px 10px 0 0;
}
tr:nth-child(even) { tr:nth-child(even) {
background-color: #dddddd; background-color: #dddddd;
} }
@ -541,18 +563,6 @@ tr:nth-child(even) {
padding: 0; padding: 0;
} }
.modaltitle {
color: #4f545c;
font-weight: 500;
font-size: 16px;
line-height: 24px;
margin-left: 0;
margin-right: 10px;
overflow: hidden;
word-wrap: break-word;
margin-bottom: 0;
}
.modaldesc { .modaldesc {
box-sizing: border-box; box-sizing: border-box;
flex: 1 1 auto; flex: 1 1 auto;

2
src/styles/theme-dark-round.css
View File

@ -103,7 +103,7 @@ tr:nth-child(even) {
color: #f4f4f4; color: #f4f4f4;
} }
.modaltitle { h3, h4 {
color: #d7e5fb; color: #d7e5fb;
} }

2
src/styles/theme-dark-sstraight.css
View File

@ -108,7 +108,7 @@ tr:nth-child(even) {
color: #f8f8f8; color: #f8f8f8;
} }
.modaltitle { h3, h4 {
color: #f38826; color: #f38826;
} }

2
src/styles/theme-dark.css
View File

@ -74,7 +74,7 @@ tr:nth-child(even) {
color: #f4f4f4; color: #f4f4f4;
} }
.modaltitle { h3, h4 {
color: #d7e5fb; color: #d7e5fb;
} }