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

use wrapper

Browse Source
This commit is contained in:
srgooglo 2022-10-25 12:09:53 +00:00
parent 44fb448f3a
commit c552a6a345
2 changed files with 134 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/app/src/components/Settings/index.jsx
View File

@ -24,7 +24,7 @@ const ItemTypes = {
SliderColorPicker: SliderPicker,
}
const SettingsFooter = () => {
const SettingsFooter = (props) => {
const isDevMode = window.__evite?.env?.NODE_ENV !== "production"
return <div className="footer" >
@ -43,7 +43,7 @@ const SettingsFooter = () => {
</div>
</div>
<div>
<antd.Button type="link" onClick={this.onClickAppAbout}>
<antd.Button type="link" onClick={props.onClickAppAbout}>
<Translation>
{t => t("about")}
</Translation>
@ -425,7 +425,8 @@ export default class SettingsMenu extends React.PureComponent {
}
render() {
return <div className="settings">
return <div className="settings_wrapper">
<div className="settings">
<antd.Tabs
activeKey={this.state.activeKey}
centered
@ -435,7 +436,8 @@ export default class SettingsMenu extends React.PureComponent {
{this.generateSettingsTabs()}
</antd.Tabs>
<SettingsFooter />
<SettingsFooter onClickAppAbout={this.onClickAppAbout} />
</div>
</div>
}
}

52
packages/app/src/components/Settings/index.less
View File

@ -1,5 +1,6 @@
.settings {
display : flex;
.settings_wrapper {
.settings {
display: flex;
flex-direction: column;
>div {
@ -7,9 +8,9 @@
}
.group {
display : flex;
display: flex;
flex-direction: column;
color : var(--background-color-contrast);
color: var(--background-color-contrast);
h1,
h2,
@ -35,16 +36,16 @@
}
.header {
display : inline-flex;
display: inline-flex;
flex-direction: row;
align-items : center;
align-items: center;
justify-content: space-between;
width: 100%;
.title {
display : flex;
display: flex;
align-items: center;
color : var(--background-color-contrast);
color: var(--background-color-contrast);
h1,
h2,
@ -53,13 +54,13 @@
h5,
h6 {
margin: 0;
color : var(--background-color-contrast);
color: var(--background-color-contrast);
}
p {
font-size: 11px;
color : var(--background-color-contrast);
margin : 0;
color: var(--background-color-contrast);
margin: 0;
}
>div {
@ -71,24 +72,24 @@
display: inline-flex;
align-items: center;
> div {
>div {
margin-right: 10px;
}
}
}
.component {
display : flex;
display: flex;
flex-direction: column;
--ignore-dragger: true;
padding : 0 20px;
padding: 0 20px;
span {
color: var(--background-color-contrast);
}
> div {
>div {
margin-bottom: 10px;
}
}
@ -96,33 +97,33 @@
.footer {
position: relative;
width : 100%;
width: 100%;
padding-top : 20px;
padding-top: 20px;
padding-bottom: 20px;
display : flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items : center;
align-items: center;
>div {
margin-bottom: 10px;
font-family: "Space Mono", monospace;
font-size : 10px;
font-size: 10px;
display : flex;
display: flex;
flex-direction: row;
align-items : center;
align-items: center;
justify-content: center;
.ant-tag {
height : 18px;
height: 18px;
line-height: 18px;
font-size : 10px;
font-size: 10px;
}
>div {
@ -132,7 +133,8 @@
}
.ant-tabs-nav-list {
width : 100%;
width: 100%;
justify-content: space-evenly;
}
}
}