RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-11 03:24:16 +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, SliderColorPicker: SliderPicker,
} }
const SettingsFooter = () => { const SettingsFooter = (props) => {
const isDevMode = window.__evite?.env?.NODE_ENV !== "production" const isDevMode = window.__evite?.env?.NODE_ENV !== "production"
return <div className="footer" > return <div className="footer" >
@ -43,7 +43,7 @@ const SettingsFooter = () => {
</div> </div>
</div> </div>
<div> <div>
<antd.Button type="link" onClick={this.onClickAppAbout}> <antd.Button type="link" onClick={props.onClickAppAbout}>
<Translation> <Translation>
{t => t("about")} {t => t("about")}
</Translation> </Translation>
@ -425,7 +425,8 @@ export default class SettingsMenu extends React.PureComponent {
} }
render() { render() {
return <div className="settings"> return <div className="settings_wrapper">
<div className="settings">
<antd.Tabs <antd.Tabs
activeKey={this.state.activeKey} activeKey={this.state.activeKey}
centered centered
@ -435,7 +436,8 @@ export default class SettingsMenu extends React.PureComponent {
{this.generateSettingsTabs()} {this.generateSettingsTabs()}
</antd.Tabs> </antd.Tabs>
<SettingsFooter /> <SettingsFooter onClickAppAbout={this.onClickAppAbout} />
</div>
</div> </div>
} }
} }

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

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