fix(fe/styles): style fixes
This commit is contained in:
parent
49f42e937f
commit
6aed184ad9
6 changed files with 17 additions and 16 deletions
|
@ -113,6 +113,7 @@
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border-radius: 0.8rem;
|
border-radius: 0.8rem;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
|
box-shadow: 0 5px 30px 0 rgb(31 38 135 / 10%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.container-padding {
|
.container-padding {
|
||||||
|
|
|
@ -14,7 +14,7 @@ import { colorClass } from "../visual/colors";
|
||||||
const defaultIconProps: IconProps = {
|
const defaultIconProps: IconProps = {
|
||||||
name: "RiFolder2Fill",
|
name: "RiFolder2Fill",
|
||||||
size: "1.6rem",
|
size: "1.6rem",
|
||||||
color: `${colorClass("cyan0")}-font`,
|
color: `${colorClass("1")}-font`,
|
||||||
};
|
};
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
|
|
|
@ -45,12 +45,12 @@ export class SettingsDialog extends React.Component<Props, State, {}> {
|
||||||
preferencePane: {
|
preferencePane: {
|
||||||
name: "RiSettings3Fill",
|
name: "RiSettings3Fill",
|
||||||
size: "1.6rem",
|
size: "1.6rem",
|
||||||
color: "cyan0",
|
color: "cyan1",
|
||||||
},
|
},
|
||||||
managementPane: {
|
managementPane: {
|
||||||
name: "RiWindowFill",
|
name: "RiWindowFill",
|
||||||
size: "1.6rem",
|
size: "1.6rem",
|
||||||
color: "cyan0",
|
color: "cyan1",
|
||||||
},
|
},
|
||||||
})}
|
})}
|
||||||
login={this.props.login}
|
login={this.props.login}
|
||||||
|
|
|
@ -421,7 +421,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="v-mid item-cell">
|
<div className="v-mid item-cell">
|
||||||
<RiFile2Fill size="3rem" className="cyan0-font" />
|
<RiFile2Fill size="3rem" className="cyan1-font" />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -481,13 +481,13 @@ export class FilesPanel extends React.Component<Props, State, {}> {
|
||||||
);
|
);
|
||||||
|
|
||||||
const detailColor = this.state.showDetail.has(item.name)
|
const detailColor = this.state.showDetail.has(item.name)
|
||||||
? "cyan0"
|
? "cyan1"
|
||||||
: "grey0";
|
: "grey0";
|
||||||
const op = item.isDir ? (
|
const op = item.isDir ? (
|
||||||
<div className={`v-mid item-cell item-op ${showOp}`}>
|
<div className={`v-mid item-cell item-op ${showOp}`}>
|
||||||
<span onClick={() => this.select(item.name)} className="float-l">
|
<span onClick={() => this.select(item.name)} className="float-l">
|
||||||
{isSelected
|
{isSelected
|
||||||
? getIcon("RiCheckboxFill", "1.8rem", "cyan0")
|
? getIcon("RiCheckboxFill", "1.8rem", "cyan1")
|
||||||
: getIcon("RiCheckboxBlankFill", "1.8rem", "black1")}
|
: getIcon("RiCheckboxBlankFill", "1.8rem", "black1")}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -502,7 +502,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
|
||||||
|
|
||||||
<span onClick={() => this.select(item.name)} className="float-l">
|
<span onClick={() => this.select(item.name)} className="float-l">
|
||||||
{isSelected
|
{isSelected
|
||||||
? getIcon("RiCheckboxFill", "1.8rem", "cyan0")
|
? getIcon("RiCheckboxFill", "1.8rem", "cyan1")
|
||||||
: getIcon("RiCheckboxBlankFill", "1.8rem", "black1")}
|
: getIcon("RiCheckboxBlankFill", "1.8rem", "black1")}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -569,14 +569,14 @@ export class FilesPanel extends React.Component<Props, State, {}> {
|
||||||
? `${dirPath}${item.name}`
|
? `${dirPath}${item.name}`
|
||||||
: `${dirPath}/${item.name}`;
|
: `${dirPath}/${item.name}`;
|
||||||
|
|
||||||
const selectedIconColor = isSelected ? "cyan0-font" : "grey0-font";
|
const selectedIconColor = isSelected ? "cyan1-font" : "grey0-font";
|
||||||
const descIconColor = this.state.showDetail.has(item.name)
|
const descIconColor = this.state.showDetail.has(item.name)
|
||||||
? "cyan0-font"
|
? "cyan1-font"
|
||||||
: "grey0-font";
|
: "grey0-font";
|
||||||
const icon = item.isDir ? (
|
const icon = item.isDir ? (
|
||||||
<RiFolder2Fill size="1.8rem" className="yellow0-font" />
|
<RiFolder2Fill size="1.8rem" className="yellow0-font" />
|
||||||
) : (
|
) : (
|
||||||
<RiFile2Fill size="1.8rem" className="cyan0-font" />
|
<RiFile2Fill size="1.8rem" className="cyan1-font" />
|
||||||
);
|
);
|
||||||
const fileType = item.isDir
|
const fileType = item.isDir
|
||||||
? this.props.msg.pkg.get("item.type.folder")
|
? this.props.msg.pkg.get("item.type.folder")
|
||||||
|
@ -786,11 +786,11 @@ export class FilesPanel extends React.Component<Props, State, {}> {
|
||||||
|
|
||||||
const rowsViewColorClass =
|
const rowsViewColorClass =
|
||||||
this.props.ui.control.controls.get(filesViewCtrl) === "rows"
|
this.props.ui.control.controls.get(filesViewCtrl) === "rows"
|
||||||
? "cyan0-font"
|
? "cyan1-font"
|
||||||
: "black-font";
|
: "black-font";
|
||||||
const tableViewColorClass =
|
const tableViewColorClass =
|
||||||
this.props.ui.control.controls.get(filesViewCtrl) === "table"
|
this.props.ui.control.controls.get(filesViewCtrl) === "table"
|
||||||
? "cyan0-font"
|
? "cyan1-font"
|
||||||
: "black-font";
|
: "black-font";
|
||||||
const itemListPane = (
|
const itemListPane = (
|
||||||
<div>
|
<div>
|
||||||
|
|
|
@ -88,17 +88,17 @@ export class RootFrame extends React.Component<Props, State, {}> {
|
||||||
filesPanel: {
|
filesPanel: {
|
||||||
name: "RiFolder2Fill",
|
name: "RiFolder2Fill",
|
||||||
size: "1.6rem",
|
size: "1.6rem",
|
||||||
color: "cyan0",
|
color: "cyan1",
|
||||||
},
|
},
|
||||||
uploadingsPanel: {
|
uploadingsPanel: {
|
||||||
name: "RiUploadCloudFill",
|
name: "RiUploadCloudFill",
|
||||||
size: "1.6rem",
|
size: "1.6rem",
|
||||||
color: "blue0",
|
color: "cyan1",
|
||||||
},
|
},
|
||||||
sharingsPanel: {
|
sharingsPanel: {
|
||||||
name: "RiShareBoxLine",
|
name: "RiShareBoxLine",
|
||||||
size: "1.6rem",
|
size: "1.6rem",
|
||||||
color: "purple0",
|
color: "cyan1",
|
||||||
},
|
},
|
||||||
})}
|
})}
|
||||||
login={this.props.login}
|
login={this.props.login}
|
||||||
|
|
|
@ -98,7 +98,7 @@ export class TopBar extends React.Component<Props, State, {}> {
|
||||||
className={`margin-r-m ${showSettings}`}
|
className={`margin-r-m ${showSettings}`}
|
||||||
>
|
>
|
||||||
{this.props.msg.pkg.get("settings")}
|
{this.props.msg.pkg.get("settings")}
|
||||||
{/* {getIcon("RiSettings4Line", "1.8rem", "cyan0")} */}
|
{/* {getIcon("RiSettings4Line", "1.8rem", "cyan1")} */}
|
||||||
</button>,
|
</button>,
|
||||||
|
|
||||||
<button onClick={this.logout} className={`${showLogin}`}>
|
<button onClick={this.logout} className={`${showLogin}`}>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue