[Update] Config Page: Transcription Tab. Add section label.

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";

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 (
+        <div className={styles.container}>
+            <label className={styles.section_label}>{props.label}</label>
+            <div className={styles.section_line}></div>
+        </div>
+    );
+};

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%);
+}

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 (
-        <>
+        <div className={styles.container}>
             <Mic_Container />
             <Speaker_Container />
             <TranscriptionEngine_Container />
-        </>
+        </div>
     );
 };
 
 
 const Mic_Container = () => {
     return (
-        <>
+        <div>
+            <SectionLabelComponent label="Mic" />
             <MicRecordTimeout_Box />
             <MicPhraseTimeout_Box />
             <MicMaxWords_Box />
             <MicWordFilter_Box />
-        </>
+        </div>
     );
 };
 
@@ -144,11 +149,12 @@ const MicWordFilter_Box = () => {
 
 const Speaker_Container = () => {
     return (
-        <>
+        <div>
+            <SectionLabelComponent label="Speaker" />
             <SpeakerRecordTimeout_Box />
             <SpeakerPhraseTimeout_Box />
             <SpeakerMaxWords_Box />
-        </>
+        </div>
     );
 };
 
@@ -238,10 +244,11 @@ const SpeakerMaxWords_Box = () => {
 
 const TranscriptionEngine_Container = () => {
     return (
-        <>
+        <div>
+            <SectionLabelComponent label="Transcription Engines" />
             <TranscriptionEngine_Box />
             <WhisperWeightType_Box />
-        </>
+        </div>
     );
 };
 

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;
+}