RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 02:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve about display information & style

Browse Source
This commit is contained in:
SrGooglo 2023-06-24 11:58:46 +00:00
parent d1b93eacac
commit 25d15730ce
2 changed files with 176 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
packages/app/constants/settings/about/index.jsx
View File

@ -151,12 +151,40 @@ export default {
</div> </div>
</div> </div>
<h3><Icons.Info />Server information</h3>
<div className="group"> <div className="group">
<div className="group_header">
<h3><Icons.Info />Server information</h3>
</div>
<div className="field"> <div className="field">
<div className="field_header"> <div className="field_header">
<h3><Icons.MdOutlineStream /> Origin</h3> <h3><Icons.MdOutlineStream /> Origin</h3>
<antd.Tooltip
title={secureConnection ? connectionsTooltipStrings.secure : connectionsTooltipStrings.insecure}
>
<antd.Tag
color={secureConnection ? "green" : "red"}
icon={secureConnection ? <Icons.MdHttps /> : <Icons.MdWarning />}
>
{
secureConnection ? " Secure connection" : "Insecure connection"
}
</antd.Tag>
</antd.Tooltip>
</div>
<div className="field_value">
{serverOrigin ?? "Unknown"}
</div>
</div>
<div className="field">
<div className="field_header">
<h3><Icons.MdOutlineMemory /> Instance Performance</h3>
</div>
<div className="field_value">
<div <div
style={{ style={{
display: "flex", display: "flex",
@ -192,35 +220,8 @@ export default {
{connectionPing?.ws}ms {connectionPing?.ws}ms
</antd.Tag> </antd.Tag>
</div> </div>
<antd.Tooltip
title={secureConnection ? connectionsTooltipStrings.secure : connectionsTooltipStrings.insecure}
>
<antd.Tag
color={secureConnection ? "green" : "red"}
icon={secureConnection ? <Icons.MdHttps /> : <Icons.MdWarning />}
>
{
secureConnection ? " Secure connection" : "Insecure connection"
}
</antd.Tag>
</antd.Tooltip>
</div> </div>
</div> </div>
<div className="field_value">
{serverOrigin ?? "Unknown"}
</div>
</div>
<div className="field">
<div className="field_header">
<h3><Icons.MdBuild /> Version</h3>
</div>
<div className="field_value">
{serverManifest?.version ?? "Unknown"}
</div>
</div> </div>
<div className="field"> <div className="field">
@ -237,14 +238,78 @@ export default {
</div> </div>
</div> </div>
<div className="group_footer"> <div className="inline_field">
{ <div className="field_header">
serverManifest?.LINEBRIDGE_SERVER_VERSION && <h5>Powered by Linebridge™</h5> <div className="field_icon">
} <Icons.MdBuild />
</div>
<p>Version</p>
</div>
<div className="field_value">
{serverManifest?.version ?? "Unknown"}
</div>
</div> </div>
</div> </div>
<Footer /> <div className="group">
<div className="inline_field">
<div className="field_header">
<div className="field_icon">
<Icons.MdInfo />
</div>
<p>React</p>
</div>
<div className="field_value">
{React.version ?? "Unknown"}
</div>
</div>
<div className="inline_field">
<div className="field_header">
<div className="field_icon">
<Icons.MdInfo />
</div>
<p>Evite Engine</p>
</div>
<div className="field_value">
{app.__eviteVersion ?? "Unknown"}
</div>
</div>
<div className="inline_field">
<div className="field_header">
<div className="field_icon">
<Icons.MdInfo />
</div>
<p>Comty.JS</p>
</div>
<div className="field_value">
{__comty_shared_state.version ?? "Unknown"}
</div>
</div>
<div className="inline_field">
<div className="field_header">
<div className="field_icon">
<Icons.MdInfo />
</div>
<p>Platform</p>
</div>
<div className="field_value">
{Capacitor.platform}
</div>
</div>
</div>
</div> </div>
} }
} }

99
packages/app/constants/settings/about/index.less
View File

@ -1,15 +1,14 @@
@border-radius: 12px;
.about_app { .about_app {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
padding: 0 20px 20px 20px;
background-color: var(--background-color-accent);
color: var(--text-color); color: var(--text-color);
border-radius: 12px; gap: 20px;
.header { .header {
display: flex; display: flex;
@ -20,10 +19,10 @@
width: 100%; width: 100%;
margin-bottom: 20px; padding: 20px;
padding: 20px 0; border-radius: @border-radius;
border-bottom: 1px solid var(--border-color); background-color: var(--background-color-accent);
.branding { .branding {
display: flex; display: flex;
@ -69,22 +68,73 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
margin-bottom: 10px;
background-color: var(--background-color-primary);
border-radius: 12px;
padding: 15px; padding: 15px;
gap: 10px;
background-color: var(--background-color-accent);
border-radius: @border-radius;
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6,
margin-top: 0; p {
margin-bottom: 5px; margin: 0;
}
.inline_field {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 10px;
background-color: var(--background-color-primary);
border-radius: 12px;
.field_header {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 8px;
font-size: 0.8rem;
.field_icon {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
background-color: var(--background-color-primary);
border-radius: 100%;
padding: 5px;
font-size: 1rem;
svg {
margin: 0;
}
}
}
.field_value {
font-family: "DM Mono", monospace;
}
} }
.field { .field {
@ -93,6 +143,8 @@
margin-bottom: 10px; margin-bottom: 10px;
gap: 10px;
.field_header { .field_header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -102,8 +154,6 @@
font-size: 0.8rem; font-size: 0.8rem;
margin-bottom: 8px;
h3 { h3 {
margin: 0; margin: 0;
} }
@ -112,19 +162,26 @@
.field_value { .field_value {
font-size: 0.9rem; font-size: 0.9rem;
display: inline-flex; display: flex;
flex-direction: row; flex-direction: column;
gap: 10px;
margin-left: 10px; margin-left: 10px;
font-family: "DM Mono", monospace; font-family: "DM Mono", monospace;
background-color: var(--background-color-accent); background-color: var(--background-color-primary);
border-radius: 7px; border-radius: 7px;
padding: 7px; padding: 7px;
.ant-progress { .ant-progress {
margin: 0; margin: 0;
height: fit-content;
.ant-progress-outer {
height: 0px !important;
}
} }
} }
} }