chore(react/settings): use FormGroup for labels

Author: eliandoran

apps/client/src/widgets/type_widgets/options/appearance.tsx

@@ -145,20 +145,20 @@ function ApplicationTheme() {
 
     return (
         <OptionsSection title={t("theme.title")}>
-            <Column>
-                <label>{t("theme.theme_label")}</label>
-                <FormSelect 
-                    values={themes} currentValue={theme} onChange={setTheme}
-                    keyProperty="val" titleProperty="title"
-                />
-            </Column>
+            <div className="row">
+                <FormGroup name="theme" label={t("theme.theme_label")} className="col-md-6" style={{ marginBottom: 0 }}>
+                    <FormSelect
+                        values={themes} currentValue={theme} onChange={setTheme}
+                        keyProperty="val" titleProperty="title"
+                    />
+                </FormGroup>
 
-            <Column className="side-checkbox">
-                <FormCheckbox
-                    name="override-theme-fonts"
-                    label={t("theme.override_theme_fonts_label")}
-                    currentValue={overrideThemeFonts} onChange={setOverrideThemeFonts} />
-            </Column>
+                <FormGroup className="side-checkbox col-md-6" name="override-theme-fonts">
+                    <FormCheckbox                        
+                        label={t("theme.override_theme_fonts_label")}
+                        currentValue={overrideThemeFonts} onChange={setOverrideThemeFonts} />
+                </FormGroup>
+            </div>
         </OptionsSection>
     )
 }
@@ -189,24 +189,22 @@ function Font({ title, fontFamilyOption, fontSizeOption }: { title: string, font
         <>
             <h5>{title}</h5>
             <div className="row">
-                <Column md={4}>
-                    <label>{t("fonts.font_family")}</label>
+                <FormGroup className="col-md-4" label={t("fonts.font_family")}>
                     <FormSelectWithGroups
                         values={FONT_FAMILIES}
                         currentValue={fontFamily} onChange={setFontFamily}
                         keyProperty="value" titleProperty="label"                    
                     />
-                </Column>
+                </FormGroup>
 
-                <Column md={6}>
-                    <label>{t("fonts.size")}</label>
+                <FormGroup className="col-md-6" label={t("fonts.size")}>
                     <FormTextBoxWithUnit
                         name="tree-font-size"
                         type="number" min={50} max={200} step={10}
                         currentValue={fontSize} onChange={setFontSize}
                         unit={t("units.percentage")}
                     />
-                </Column>
+                </FormGroup>
             </div>            
         </>
     );

apps/client/src/widgets/type_widgets/options/code_notes.tsx

@@ -56,15 +56,14 @@ function Appearance() {
 
     return (
         <OptionsSection title={t("code_theme.title")}>
-            <FormGroup className="row">
-                <Column>
-                    <label>{t("code_theme.color-scheme")}</label>
+            <div className="row" style={{ marginBottom: "15px" }}>
+                <FormGroup label={t("code_theme.color-scheme")} className="col-md-6" style={{ marginBottom: 0 }}>
                     <FormSelect 
                         values={themes}
                         keyProperty="id" titleProperty="name"
                         currentValue={codeNoteTheme} onChange={setCodeNoteTheme}
                     />
-                </Column>
+                </FormGroup>
 
                 <Column className="side-checkbox">
                     <FormCheckbox
@@ -73,7 +72,7 @@ function Appearance() {
                         currentValue={codeLineWrapEnabled} onChange={setCodeLineWrapEnabled}
                     />
                 </Column>
-            </FormGroup>
+            </div>
 
             <CodeNotePreview wordWrapping={codeLineWrapEnabled} themeName={codeNoteTheme} />
         </OptionsSection>

apps/client/src/widgets/type_widgets/options/text_notes.tsx

@@ -153,9 +153,8 @@ function CodeBlockStyle() {
 
     return (
         <OptionsSection title={t("highlighting.title")}>            
-            <FormGroup className="row">
-                <Column md={6}>
-                    <label>{t("highlighting.color-scheme")}</label>
+            <div className="row" style={{ marginBottom: "15px" }}>
+                <FormGroup className="col-md-6" label={t("highlighting.color-scheme")} style={{ marginBottom: 0 }}>
                     <FormSelectWithGroups
                         values={themes}
                         keyProperty="val" titleProperty="title"
@@ -164,7 +163,7 @@ function CodeBlockStyle() {
                             setCodeBlockTheme(newTheme);
                         }}
                     />
-                </Column>
+                </FormGroup>
 
                 <Column md={6} className="side-checkbox">
                     <FormCheckbox
@@ -173,7 +172,7 @@ function CodeBlockStyle() {
                         currentValue={codeBlockWordWrap} onChange={setCodeBlockWordWrap}
                     />
                 </Column>
-            </FormGroup>
+            </div>
 
             <CodeBlockPreview theme={codeBlockTheme} wordWrap={codeBlockWordWrap} />
         </OptionsSection>
@@ -302,21 +301,19 @@ function DateTimeFormatOptions() {
             </FormText>
 
             <FormGroup className="row align-items-center">
-              <Column>
-                  <label>{t("custom_date_time_format.format_string")}</label>
+              <FormGroup className="col-md-6" label={t("custom_date_time_format.format_string")}>
                   <FormTextBox
                         name="custom-date-time-format"
                         placeholder="YYYY-MM-DD HH:mm"
                         currentValue={customDateTimeFormat || "YYYY-MM-DD HH:mm"} onChange={setCustomDateTimeFormat}
                   />
-              </Column>
+              </FormGroup>
 
-              <Column>
-                <label>{t("custom_date_time_format.formatted_time")}</label>
+              <FormGroup className="col-md-6" label={t("custom_date_time_format.formatted_time")}>
                 <div className="formatted-date">
                     {formatDateTime(new Date(), customDateTimeFormat)}
                 </div>
-              </Column>
+              </FormGroup>
             </FormGroup>
         </OptionsSection>
     )