[Refactor] Tidy up the color variables.
This commit is contained in:
@@ -16,7 +16,6 @@
|
||||
height: 100%;
|
||||
font-size: 1.4rem;
|
||||
resize: none;
|
||||
color: var(--dark_basic_text_color);
|
||||
&.is_disabled {
|
||||
color: var(--dark_500_color);
|
||||
pointer-events: none;
|
||||
|
||||
@@ -22,11 +22,11 @@
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-radius: 0.4rem;
|
||||
background-color: (#00000044);
|
||||
background-color: var(--dark_1000_color_66);
|
||||
backdrop-filter: blur(4rem);
|
||||
border: solid 0.1rem var(--dark_700_color);
|
||||
&:hover {
|
||||
background-color: (#00000088);
|
||||
background-color: var(--dark_1000_color_aa);
|
||||
}
|
||||
&:active {
|
||||
backdrop-filter: blur(1.4rem);
|
||||
@@ -35,7 +35,6 @@
|
||||
|
||||
.edit_button {
|
||||
padding: 0.8rem 1.2rem;
|
||||
color: var(--dark_basic_text_color);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-size: 1.4rem;
|
||||
@@ -62,7 +61,6 @@
|
||||
}
|
||||
|
||||
.save_button_label {
|
||||
color: var(--dark_basic_text_color);
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
@@ -91,7 +89,6 @@
|
||||
|
||||
.open_webpage_text {
|
||||
font-size: 1.2rem;
|
||||
color: var(--dark_basic_text_color);
|
||||
}
|
||||
|
||||
.external_link_svg {
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import clsx from "clsx";
|
||||
import CircularProgress from "@mui/material/CircularProgress";
|
||||
import styles from "./DownloadModels.module.scss";
|
||||
import {
|
||||
RadioButton,
|
||||
// DownloadModels,
|
||||
} from "../index";
|
||||
|
||||
export const DownloadModels = (props) => {
|
||||
const options = props.options.map(item => ({
|
||||
...item,
|
||||
@@ -25,25 +23,11 @@ export const DownloadModels = (props) => {
|
||||
downloadStartFunction={props.downloadStartFunction}
|
||||
/>
|
||||
</>
|
||||
// <div className={styles.container}>
|
||||
// {props.models.map((option) => (
|
||||
// <ModelSelector key={option.model_id} option={option} {...props}/>
|
||||
// ))}
|
||||
// </div>
|
||||
);
|
||||
};
|
||||
|
||||
const ModelSelector = ({option, ...props}) => {
|
||||
const { t } = useTranslation();
|
||||
const [circular_color, setCircularColor] = useState("");
|
||||
const [circular_color_2, setCircularColor2] = useState("");
|
||||
useEffect(() => {
|
||||
const circular_color = getComputedStyle(document.documentElement).getPropertyValue("--dark_600_color");
|
||||
setCircularColor(circular_color.trim());
|
||||
const circular_color_2 = getComputedStyle(document.documentElement).getPropertyValue("--primary_300_color");
|
||||
setCircularColor2(circular_color_2.trim());
|
||||
}, []);
|
||||
|
||||
|
||||
const renderContent = () => {
|
||||
const circular_progress = Math.floor(option.progress / 10) * 10;
|
||||
@@ -56,13 +40,13 @@ const ModelSelector = ({option, ...props}) => {
|
||||
variant={(option.progress === 100) ? "indeterminate" : "determinate"}
|
||||
value={circular_progress}
|
||||
size="3rem"
|
||||
sx={{ color: circular_color_2 }}
|
||||
sx={{ color: "var(--primary_300_color)" }}
|
||||
/>
|
||||
<p className={styles.progress_label}>{`${Math.round(option.progress)}%`}</p>
|
||||
</>
|
||||
);
|
||||
case option.is_pending:
|
||||
return <CircularProgress size="3rem" sx={{ color: circular_color }}/>;
|
||||
return <CircularProgress size="3rem" sx={{ color: "var(--dark_600_color)" }}/>;
|
||||
case !option.is_downloaded:
|
||||
return (
|
||||
<button
|
||||
|
||||
@@ -22,11 +22,9 @@
|
||||
}
|
||||
.download_button_label {
|
||||
font-size: 1.2rem;
|
||||
color: var(--dark_basic_text_color);
|
||||
}
|
||||
|
||||
.progress_label {
|
||||
position: absolute;
|
||||
font-size: 1rem;
|
||||
color: var(--dark_basic_text_color);
|
||||
}
|
||||
@@ -8,7 +8,6 @@
|
||||
.label {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
color: var(--dark_basic_text_color);
|
||||
white-space: nowrap;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
@@ -31,13 +31,6 @@ export const Slider = (props) => {
|
||||
backgroundColor: "var(--dark_800_color)",
|
||||
padding: "0.6rem 1rem",
|
||||
lineHeight: "1.15",
|
||||
// top: "-1.4rem",
|
||||
// "&::before": {
|
||||
// left: "30%",
|
||||
// width: "1rem",
|
||||
// height: "1rem",
|
||||
// clipPath: "polygon(50% 0, 100% 100%, 0 100%)",
|
||||
// },
|
||||
},
|
||||
},
|
||||
"& .MuiSlider-markLabel": {
|
||||
|
||||
@@ -16,7 +16,6 @@
|
||||
height: 100%;
|
||||
font-size: 1.4rem;
|
||||
resize: none;
|
||||
color: var(--dark_basic_text_color);
|
||||
&.is_disable {
|
||||
color: var(--dark_500_color);
|
||||
pointer-events: none;
|
||||
|
||||
@@ -41,5 +41,4 @@
|
||||
|
||||
.button_text {
|
||||
font-size: 1.2rem;
|
||||
color: var(--dark_basic_text_color);
|
||||
}
|
||||
@@ -32,7 +32,6 @@
|
||||
.item_text {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 300;
|
||||
color: var(--dark_basic_text_color);
|
||||
&.is_redoable {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
@@ -56,7 +55,7 @@
|
||||
|
||||
.delete_svg {
|
||||
width: 2.4rem;
|
||||
color: #bb4448;
|
||||
color: var(--error_bc_color);
|
||||
}
|
||||
|
||||
.redo_svg {
|
||||
@@ -77,7 +76,6 @@
|
||||
.add_button {
|
||||
padding: 0.8rem 1.2rem;
|
||||
background-color: var(--primary_600_color);
|
||||
color: var(--dark_basic_text_color);
|
||||
font-size: 1.4rem;
|
||||
border-radius: 0.4rem;
|
||||
text-align: center;
|
||||
|
||||
@@ -61,7 +61,6 @@
|
||||
|
||||
.device_label {
|
||||
font-size: 1.8rem;
|
||||
color: var(--dark_basic_text_color);
|
||||
}
|
||||
|
||||
.device_contents {
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
background-color: var(--dark_850_color);
|
||||
}
|
||||
&.is_selected .controller_switcher_label {
|
||||
color: var(--dark_basic_text_color);
|
||||
color: var(--dark_200_color);
|
||||
}
|
||||
}
|
||||
.controller_switcher_label {
|
||||
@@ -92,7 +92,6 @@
|
||||
transform: translateX(10%) rotate(90deg);
|
||||
}
|
||||
.sample_text_button_label {
|
||||
color: var(--dark_basic_text_color);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 110%;
|
||||
@@ -281,7 +280,6 @@
|
||||
}
|
||||
|
||||
.restore_default_settings_button {
|
||||
color: var(--dark_basic_text_color);
|
||||
font-size: 1.2rem;
|
||||
margin-top: 6rem;
|
||||
padding: 0.8rem;
|
||||
|
||||
Reference in New Issue
Block a user