Removed styles from one section that ended up in generic component

src/servers/helpers/ServerForm.tsx

@@ -26,9 +26,15 @@ export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, child
   return (
     <form className="server-form" onSubmit={handleSubmit}>
       <SimpleCard className="mb-3" title={title}>
-        <FormGroupContainer value={name} onChange={setName}>Name</FormGroupContainer>
+        <FormGroupContainer labelClassName="create-server__label" value={name} onChange={setName}>
-        <FormGroupContainer type="url" value={url} onChange={setUrl}>URL</FormGroupContainer>
+          Name
-        <FormGroupContainer value={apiKey} onChange={setApiKey}>API key</FormGroupContainer>
+        </FormGroupContainer>
+        <FormGroupContainer labelClassName="create-server__label" type="url" value={url} onChange={setUrl}>
+          URL
+        </FormGroupContainer>
+        <FormGroupContainer labelClassName="create-server__label" value={apiKey} onChange={setApiKey}>API
+          key
+        </FormGroupContainer>
       </SimpleCard>
 
       <div className="text-right">{children}</div>

src/utils/FormGroupContainer.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, useRef } from 'react';
 import { v4 as uuid } from 'uuid';
 import { InputType } from 'reactstrap/lib/Input';
 
@@ -10,23 +10,28 @@ interface FormGroupContainerProps {
   required?: boolean;
   placeholder?: string;
   className?: string;
+  labelClassName?: string;
 }
 
 export const FormGroupContainer: FC<FormGroupContainerProps> = (
-  { children, value, onChange, id = uuid(), type = 'text', required = true, placeholder, className = '' },
+  { children, value, onChange, id, type, required, placeholder, className, labelClassName },
-) => (
+) => {
-  <div className={`form-group ${className}`}>
+  const forId = useRef<string>(id ?? uuid());
-    <label htmlFor={id} className="create-server__label">
+
-      {children}:
+  return (
-    </label>
+    <div className={`form-group ${className ?? ''}`}>
-    <input
+      <label htmlFor={forId.current} className={labelClassName ?? ''}>
-      className="form-control"
+        {children}:
-      type={type}
+      </label>
-      id={id}
+      <input
-      value={value}
+        className="form-control"
-      required={required}
+        type={type ?? 'text'}
-      placeholder={placeholder}
+        id={forId.current}
-      onChange={(e) => onChange(e.target.value)}
+        value={value}
-    />
+        required={required ?? true}
-  </div>
+        placeholder={placeholder}
-);
+        onChange={(e) => onChange(e.target.value)}
+      />
+    </div>
+  );
+};