2826: Fixed styling of form

os2display · Nov 20, 2024 · b8c0e84 · b8c0e84
1 parent fb58dfe
commit b8c0e84
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/src/components/feed-sources/feed-source-form.jsx b/src/components/feed-sources/feed-source-form.jsx
@@ -57,20 +57,23 @@ function FeedSourceForm({
         <ContentBody>
           <FormInput
             name="title"
+            formGroupClasses="mb-2"
             type="text"
             label={t("feed-source-name-label")}
             value={feedSource.title}
             onChange={handleInput}
           />
           <FormInputArea
             name="description"
+            formGroupClasses="mb-2"
             type="text"
             label={t("feed-source-description-label")}
             value={feedSource.description}
             onChange={handleInput}
           />
           <FormSelect
             name="feedType"
+            formGroupClasses="mb-2"
             label={t("feed-source-feed-type-label")}
             value={feedSource.feedType}
             onChange={onFeedTypeChange}

diff --git a/src/components/util/forms/form-input-area.jsx b/src/components/util/forms/form-input-area.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
+import { FormLabel } from "react-bootstrap";
 
 /**
  * A text area for forms.
@@ -17,11 +18,16 @@ function FormInputArea({
   label,
   onChange,
   value = "",
+  formGroupClasses = "",
   placeholder = "",
+  required = false,
 }) {
   return (
-    <div className="form-group">
-      <label htmlFor={name}>{label}</label>
+    <div className={"form-group " + formGroupClasses}>
+      <FormLabel htmlFor={name}>
+        {label}
+        {required && " *"}
+      </FormLabel>
       <textarea
         name={name}
         id={name}
@@ -40,6 +46,7 @@ FormInputArea.propTypes = {
   label: PropTypes.string.isRequired,
   placeholder: PropTypes.string,
   value: PropTypes.string,
+  required: PropTypes.bool,
   onChange: PropTypes.func.isRequired,
 };
 

diff --git a/src/translations/da/common.json b/src/translations/da/common.json
@@ -793,7 +793,7 @@
     "configuration-themes": "Temaer",
     "configuration-users": "Brugere",
     "activation-codes": "Aktiveringskoder",
-    "configuration-feedsources": "Datakilde"
+    "configuration-feedsources": "Datakilder"
   },
   "topbar": {
     "brand": "OS2Display",