diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/index.js b/src-ui/app/config_page/setting_section/setting_box/_components/index.js index ffd9fa96..d702c1ee 100644 --- a/src-ui/app/config_page/setting_section/setting_box/_components/index.js +++ b/src-ui/app/config_page/setting_section/setting_box/_components/index.js @@ -5,6 +5,7 @@ export { DropdownMenu } from "./dropdown_menu/DropdownMenu"; export { Entry } from "./entry/Entry"; export { LabelComponent } from "./label_component/LabelComponent"; export { RadioButton } from "./radio_button/RadioButton"; +export { SectionLabelComponent } from "./section_label_component/SectionLabelComponent"; export { Slider } from "./slider/Slider"; export { SwitchBox } from "./switch_box/SwitchBox"; export { ThresholdComponent } from "./threshold_component/ThresholdComponent"; diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/section_label_component/SectionLabelComponent.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/section_label_component/SectionLabelComponent.jsx new file mode 100644 index 00000000..7b79ebef --- /dev/null +++ b/src-ui/app/config_page/setting_section/setting_box/_components/section_label_component/SectionLabelComponent.jsx @@ -0,0 +1,11 @@ +import styles from "./SectionLabelComponent.module.scss"; +import clsx from "clsx"; + +export const SectionLabelComponent = (props) => { + return ( +
+ +
+
+ ); +}; \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/section_label_component/SectionLabelComponent.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/section_label_component/SectionLabelComponent.module.scss new file mode 100644 index 00000000..93be3c4b --- /dev/null +++ b/src-ui/app/config_page/setting_section/setting_box/_components/section_label_component/SectionLabelComponent.module.scss @@ -0,0 +1,16 @@ +.container { + display: flex; + justify-content: center; + align-items: center; + gap: 2rem; + padding-bottom: 2rem; +} +.section_label { + font-size: 2rem; + flex-shrink: 0; +} +.section_line { + width: 100%; + height: 0.1rem; + background: linear-gradient(90deg, var(--dark_400_color) 0%, var(--dark_600_color) 35%, var(--dark_800_color) 100%); +} \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx b/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx index 9d11bd9f..86dd6bea 100644 --- a/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx @@ -24,25 +24,30 @@ import { RadioButtonContainer, } from "../_templates/Templates"; +import { + SectionLabelComponent, +} from "../_components/"; + export const Transcription = () => { return ( - <> +
- +
); }; const Mic_Container = () => { return ( - <> +
+ - +
); }; @@ -144,11 +149,12 @@ const MicWordFilter_Box = () => { const Speaker_Container = () => { return ( - <> +
+ - +
); }; @@ -238,10 +244,11 @@ const SpeakerMaxWords_Box = () => { const TranscriptionEngine_Container = () => { return ( - <> +
+ - +
); }; diff --git a/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.module.scss b/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.module.scss index e69de29b..1170a41c 100644 --- a/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.module.scss @@ -0,0 +1,5 @@ +.container { + display: flex; + flex-direction: column; + gap: 6.4rem; +} \ No newline at end of file