fix(lib): fix labels (#278)

* fix labels * more lables * and the rest of the lables * updated snapshots * fix linting
2025-12-12 23:36:00 +00:00 · 2025-07-04 08:36:11 +02:00 · 2025-07-04 08:36:11 +02:00 · 12aba6a67e
commit 12aba6a67e
parent 045ec726eb
15 changed files with 268 additions and 266 deletions
--- a/lib/src/Components/Input/InputLabel.tsx
+++ b/lib/src/Components/Input/InputLabel.tsx
@ -0,0 +1,9 @@
+export const InputLabel = ({ label }: { label: string }) => {
+  return (
+    <label className='tw:label tw:pb-1'>
+      <span className='tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1'>
+        {label}:
+      </span>
+    </label>
+  )
+}
--- a/lib/src/Components/Input/RichTextEditor.tsx
+++ b/lib/src/Components/Input/RichTextEditor.tsx
@ -10,6 +10,7 @@ import { StarterKit } from '@tiptap/starter-kit'
 import { useEffect } from 'react'
 import { Markdown } from 'tiptap-markdown'

+import { InputLabel } from './InputLabel'
 import { TextEditorMenu } from './TextEditorMenu'

 interface RichTextEditorProps {
@ -27,7 +28,6 @@ interface RichTextEditorProps {
 */
 export function RichTextEditor({
  labelTitle,
-  labelStyle,
  containerStyle,
  defaultValue,
  placeholder,
@ -88,13 +88,7 @@ export function RichTextEditor({
    <div
      className={`tw:form-control tw:w-full tw:flex tw:flex-col tw:min-h-0 ${containerStyle ?? ''}`}
    >
-      {labelTitle ? (
-        <label className='tw:label tw:pb-1'>
-          <span className={`tw:label-text tw:text-base-content ${labelStyle ?? ''}`}>
-            {labelTitle}
-          </span>
-        </label>
-      ) : null}
+      {labelTitle ? <InputLabel label={labelTitle} /> : null}
      <div
        className={`editor-wrapper tw:border-base-content/20 tw:rounded-box tw:border tw:flex tw:flex-col tw:flex-1 tw:min-h-0`}
      >
--- a/lib/src/Components/Input/TextAreaInput.tsx
+++ b/lib/src/Components/Input/TextAreaInput.tsx
@ -1,8 +1,9 @@
 import { useEffect, useRef, useState } from 'react'

+import { InputLabel } from './InputLabel'
+
 interface TextAreaProps {
  labelTitle?: string
-  labelStyle?: string
  containerStyle?: string
  dataField?: string
  inputStyle?: string
@ -18,7 +19,6 @@ interface TextAreaProps {
 export function TextAreaInput({
  labelTitle,
  dataField,
-  labelStyle,
  containerStyle,
  inputStyle,
  defaultValue,
@ -43,13 +43,7 @@ export function TextAreaInput({

  return (
    <div className={`tw:form-control tw:w-full ${containerStyle ?? ''}`}>
-      {labelTitle ? (
-        <label className='tw:label'>
-          <span className={`tw:label-text tw:text-base-content ${labelStyle ?? ''}`}>
-            {labelTitle}
-          </span>
-        </label>
-      ) : null}
+      {labelTitle ? <InputLabel label={labelTitle} /> : null}
      <textarea
        required={required}
        ref={ref}
--- a/lib/src/Components/Input/TextInput.tsx
+++ b/lib/src/Components/Input/TextInput.tsx
@ -1,8 +1,9 @@
 import { useEffect, useState } from 'react'

+import { InputLabel } from './InputLabel'
+
 interface InputTextProps {
  labelTitle?: string
-  labelStyle?: string
  type?: string
  dataField?: string
  containerStyle?: string
@ -20,7 +21,6 @@ interface InputTextProps {
 */
 export function TextInput({
  labelTitle,
-  labelStyle,
  type,
  dataField,
  containerStyle,
@ -48,13 +48,7 @@ export function TextInput({

  return (
    <div className={`tw:form-control ${containerStyle ?? ''}`}>
-      {labelTitle ? (
-        <label className='tw:label'>
-          <span className={`tw:label-text tw:text-base-content ${labelStyle ?? ''}`}>
-            {labelTitle}
-          </span>
-        </label>
-      ) : null}
+      {labelTitle ? <InputLabel label={labelTitle} /> : null}
      <input
        required={required}
        pattern={pattern}
--- a/lib/src/Components/Input/snapshots/TextAreaInput.spec.tsx.snap
+++ b/lib/src/Components/Input/snapshots/TextAreaInput.spec.tsx.snap
@ -5,12 +5,13 @@ exports[`<TextAreaInput /> > labelTitle > sets label 1`] = `
  class="tw:form-control tw:w-full "
 >
  <label
-    class="tw:label"
+    class="tw:label tw:pb-1"
  >
    <span
-      class="tw:label-text tw:text-base-content "
+      class="tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1"
    >
      My Title
+      :
    </span>
  </label>
  <textarea
--- a/lib/src/Components/Input/snapshots/TextInput.spec.tsx.snap
+++ b/lib/src/Components/Input/snapshots/TextInput.spec.tsx.snap
@ -5,12 +5,13 @@ exports[`<TextInput /> > labelTitle > sets label 1`] = `
  class="tw:form-control "
 >
  <label
-    class="tw:label"
+    class="tw:label tw:pb-1"
  >
    <span
-      class="tw:label-text tw:text-base-content "
+      class="tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1"
    >
      My Title
+      :
    </span>
  </label>
  <input
--- a/lib/src/Components/Input/index.tsx
+++ b/lib/src/Components/Input/index.tsx
@ -1,2 +1,4 @@
 export { TextAreaInput } from './TextAreaInput'
 export { TextInput } from './TextInput'
+export { InputLabel } from './InputLabel'
+export { RichTextEditor } from './RichTextEditor'
--- a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx
+++ b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx
@ -6,7 +6,6 @@ import type { Item } from '#types/Item'
 export interface StartEndInputProps {
  item?: Item
  showLabels?: boolean
-  labelStyle?: string
  updateStartValue?: (value: string) => void
  updateEndValue?: (value: string) => void
  containerStyle?: string
@ -18,7 +17,6 @@ export interface StartEndInputProps {
 export const PopupStartEndInput = ({
  item,
  showLabels = true,
-  labelStyle,
  updateStartValue,
  updateEndValue,
  containerStyle,
@ -31,7 +29,6 @@ export const PopupStartEndInput = ({
        dataField='start'
        inputStyle='tw:text-sm tw:px-2'
        labelTitle={showLabels ? 'Start' : ''}
-        labelStyle={labelStyle}
        defaultValue={item && item.start ? item.start.substring(0, 10) : ''}
        autocomplete='one-time-code'
        updateFormValue={updateStartValue}
@ -42,7 +39,6 @@ export const PopupStartEndInput = ({
        dataField='end'
        inputStyle='tw:text-sm tw:px-2'
        labelTitle={showLabels ? 'End' : ''}
-        labelStyle={labelStyle}
        defaultValue={item && item.end ? item.end.substring(0, 10) : ''}
        autocomplete='one-time-code'
        updateFormValue={updateEndValue}
--- a/lib/src/Components/Profile/Subcomponents/ContactInfoForm.tsx
+++ b/lib/src/Components/Profile/Subcomponents/ContactInfoForm.tsx
@ -1,4 +1,4 @@
-import { TextInput } from '#components/Input'
+import { InputLabel, TextInput } from '#components/Input'

 import type { FormState } from '#types/FormState'

@ -12,12 +12,7 @@ export const ContactInfoForm = ({
  return (
    <div className='tw:mt-2 tw:space-y-2'>
      <div>
-        <label
-          htmlFor='email'
-          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
-        >
-          Email-Adresse (Kontakt):
-        </label>
+        <InputLabel label='Email-Adresse (Kontakt)' />
        <TextInput
          placeholder='Email'
          type='email'
@ -33,12 +28,7 @@ export const ContactInfoForm = ({
      </div>

      <div>
-        <label
-          htmlFor='telephone'
-          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
-        >
-          Telefonnummer (Kontakt):
-        </label>
+        <InputLabel label='Telefonnummer (Kontakt)' />
        <TextInput
          placeholder='Telefonnummer'
          type='tel'
--- a/lib/src/Components/Profile/Subcomponents/CrowdfundingForm.tsx
+++ b/lib/src/Components/Profile/Subcomponents/CrowdfundingForm.tsx
@ -1,4 +1,4 @@
-import { TextInput } from '#components/Input'
+import { TextInput, InputLabel } from '#components/Input'

 import type { FormState } from '#types/FormState'

@ -12,12 +12,7 @@ export const CrowdfundingForm = ({
  return (
    <div className='tw:mt-4 tw:space-y-4'>
      <div>
-        <label
-          htmlFor='OpenCollectiveSlug'
-          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
-        >
-          Open Collective Slug:
-        </label>
+        <InputLabel label='Open Collective Slug' />
        <TextInput
          placeholder='Open Collective Slug'
          type='text'
--- a/lib/src/Components/Profile/Subcomponents/GalleryForm.tsx
+++ b/lib/src/Components/Profile/Subcomponents/GalleryForm.tsx
@ -5,6 +5,7 @@ import { useDropzone } from 'react-dropzone'
 import { BiSolidImage } from 'react-icons/bi'

 import { useAppState } from '#components/AppShell/hooks/useAppState'
+import { InputLabel } from '#components/Input/InputLabel'
 import DialogModal from '#components/Templates/DialogModal'
 import { getImageDimensions } from '#utils/getImageDimensions'

@ -13,6 +14,7 @@ import type { FormState } from '#types/FormState'
 interface Props {
  state: FormState
  setState: React.Dispatch<React.SetStateAction<FormState>>
+  hideInputLabel?: boolean
 }

 const compressionOptions = {
@ -21,7 +23,7 @@ const compressionOptions = {
  useWebWorker: true,
 }

-export const GalleryForm = ({ state, setState }: Props) => {
+export const GalleryForm = ({ state, setState, hideInputLabel = false }: Props) => {
  const appState = useAppState()

  const [imageSelectedToDelete, setImageSelectedToDelete] = useState<number | null>(null)
@ -96,8 +98,9 @@ export const GalleryForm = ({ state, setState }: Props) => {
  }

  return (
-    <>
-      <div className='tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4 tw:my-4'>
+    <div className='tw:mt-3'>
+      {!hideInputLabel && <InputLabel label='Media' />}
+      <div className='tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4'>
        {images.map((image, index) => (
          <div key={index} className='tw:relative'>
            <img
@ -161,6 +164,6 @@ export const GalleryForm = ({ state, setState }: Props) => {
          </div>
        </div>
      </DialogModal>
-    </>
+    </div>
  )
 }
--- a/lib/src/Components/Profile/Subcomponents/GroupSubheaderForm.tsx
+++ b/lib/src/Components/Profile/Subcomponents/GroupSubheaderForm.tsx
@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 import { useEffect } from 'react'

+import { InputLabel } from '#components/Input'
 import ComboBoxInput from '#components/Input/ComboBoxInput'

 import type { FormState } from '#types/FormState'
@ -51,12 +52,7 @@ export const GroupSubheaderForm = ({
  return (
    <div className='tw:grid tw:grid-cols-1 tw:@sm:grid-cols-2 tw:gap-2'>
      <div>
-        <label
-          htmlFor='status'
-          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
-        >
-          Gruppenstatus:
-        </label>
+        <InputLabel label='Gruppenstatus' />
        <ComboBoxInput
          id='status'
          options={groupStates || []}
@ -70,12 +66,7 @@ export const GroupSubheaderForm = ({
        />
      </div>
      <div>
-        <label
-          htmlFor='groupType'
-          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
-        >
-          Gruppenart:
-        </label>
+        <InputLabel label='Gruppenart' />
        <ComboBoxInput
          id='groupType'
          options={groupTypes?.map((gt) => gt.groupTypes_id.name) || []}
--- a/lib/src/Components/Profile/Subcomponents/ProfileTextForm.tsx
+++ b/lib/src/Components/Profile/Subcomponents/ProfileTextForm.tsx
@ -4,7 +4,7 @@

 import { useEffect, useState } from 'react'

-import { RichTextEditor } from '#components/Input/RichTextEditor'
+import { InputLabel, RichTextEditor } from '#components/Input'

 import { MarkdownHint } from './MarkdownHint'

@ -13,11 +13,9 @@ import type { FormState } from '#types/FormState'
 export const ProfileTextForm = ({
  state,
  setState,
-  // Is this really used?
  dataField,
  heading,
  size,
-  hideInputLabel,
 }: {
  state: FormState
  setState: React.Dispatch<React.SetStateAction<FormState>>
@ -36,15 +34,10 @@ export const ProfileTextForm = ({

  return (
    <div
-      className={`tw:max-h-124 tw:md:max-h-full tw:flex tw:flex-col tw:mt-2 ${size === 'full' ? 'tw:flex-1 tw:min-h-42' : 'tw:h-28 tw:flex-none'}`}
+      className={`tw:max-h-124 tw:md:max-h-full tw:flex tw:flex-col tw:mt-3 ${size === 'full' ? 'tw:flex-1 tw:min-h-42' : 'tw:h-30 tw:flex-none'}`}
    >
      <div className='tw:flex tw:justify-between tw:items-center'>
-        <label
-          htmlFor='nextAppointment'
-          className='tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1'
-        >
-          {heading || 'Text'}:
-        </label>
+        <InputLabel label={heading || 'Text'} />
        <MarkdownHint />
      </div>
      <RichTextEditor
@ -58,7 +51,6 @@ export const ProfileTextForm = ({
          }))
        }
        showMenu={size === 'full'}
-        labelStyle={hideInputLabel ? 'tw:hidden' : ''}
        containerStyle={size === 'full' ? 'tw:flex-1' : 'tw:h-24 tw:flex-none'}
      />
    </div>
--- a/lib/src/Components/Profile/Subcomponents/snapshots/GalleryForm.spec.tsx.snap
+++ b/lib/src/Components/Profile/Subcomponents/snapshots/GalleryForm.spec.tsx.snap
@ -3,99 +3,113 @@
 exports[`GalleryForm > with previous images > renders 1`] = `
 <div>
  <div
-    class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4 tw:my-4"
+    class="tw:mt-3"
  >
-    <div
-      class="tw:relative"
+    <label
+      class="tw:label tw:pb-1"
    >
-      <img
-        alt="Gallery image 1"
-        class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg "
-        src="undefined1.jpg"
-      />
-      <button
-        class="tw:m-2 tw:bg-red-500 tw:text-white tw:p-2 tw:rounded-full tw:absolute tw:top-0 tw:right-0 tw:hover:bg-red-600 tw:cursor-pointer"
-        type="button"
+      <span
+        class="tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1"
      >
-        <svg
-          aria-hidden="true"
-          class="tw:h-5 tw:w-5"
-          data-slot="icon"
-          data-testid="trash"
-          fill="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            clip-rule="evenodd"
-            d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </button>
-    </div>
+        Media
+        :
+      </span>
+    </label>
    <div
-      class="tw:relative"
+      class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4"
    >
-      <img
-        alt="Gallery image 2"
-        class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg "
-        src="undefined2.jpg"
-      />
-      <button
-        class="tw:m-2 tw:bg-red-500 tw:text-white tw:p-2 tw:rounded-full tw:absolute tw:top-0 tw:right-0 tw:hover:bg-red-600 tw:cursor-pointer"
-        type="button"
+      <div
+        class="tw:relative"
      >
-        <svg
-          aria-hidden="true"
-          class="tw:h-5 tw:w-5"
-          data-slot="icon"
-          data-testid="trash"
-          fill="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
+        <img
+          alt="Gallery image 1"
+          class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg "
+          src="undefined1.jpg"
+        />
+        <button
+          class="tw:m-2 tw:bg-red-500 tw:text-white tw:p-2 tw:rounded-full tw:absolute tw:top-0 tw:right-0 tw:hover:bg-red-600 tw:cursor-pointer"
+          type="button"
        >
-          <path
-            clip-rule="evenodd"
-            d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </button>
-    </div>
-    <div
-      class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-base-content/50 tw:w-full tw:h-full tw:cursor-pointer tw:card tw:card-body tw:border tw:border-current/50 tw:border-dashed tw:bg-base-200"
-      role="presentation"
-      tabindex="0"
-    >
-      <input
-        accept="image/jpeg,image/png"
-        data-testid="gallery-upload-input"
-        multiple=""
-        style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
-        tabindex="-1"
-        type="file"
-      />
-      <div>
-        <svg
-          class="tw:h-16 tw:w-16 tw:m-auto tw:mb-2"
-          fill="currentColor"
-          height="1em"
-          stroke="currentColor"
-          stroke-width="0"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
+          <svg
+            aria-hidden="true"
+            class="tw:h-5 tw:w-5"
+            data-slot="icon"
+            data-testid="trash"
+            fill="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="tw:relative"
+      >
+        <img
+          alt="Gallery image 2"
+          class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg "
+          src="undefined2.jpg"
+        />
+        <button
+          class="tw:m-2 tw:bg-red-500 tw:text-white tw:p-2 tw:rounded-full tw:absolute tw:top-0 tw:right-0 tw:hover:bg-red-600 tw:cursor-pointer"
+          type="button"
        >
-          <path
-            d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-13.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5.5 10h-7l4-5 1.5 2 3-4 5.5 7h-7z"
-          />
-        </svg>
-        <span
-          class="tw:text-center"
-        >
-          Upload Image
-        </span>
+          <svg
+            aria-hidden="true"
+            class="tw:h-5 tw:w-5"
+            data-slot="icon"
+            data-testid="trash"
+            fill="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-base-content/50 tw:w-full tw:h-full tw:cursor-pointer tw:card tw:card-body tw:border tw:border-current/50 tw:border-dashed tw:bg-base-200"
+        role="presentation"
+        tabindex="0"
+      >
+        <input
+          accept="image/jpeg,image/png"
+          data-testid="gallery-upload-input"
+          multiple=""
+          style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+          tabindex="-1"
+          type="file"
+        />
+        <div>
+          <svg
+            class="tw:h-16 tw:w-16 tw:m-auto tw:mb-2"
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-13.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5.5 10h-7l4-5 1.5 2 3-4 5.5 7h-7z"
+            />
+          </svg>
+          <span
+            class="tw:text-center"
+          >
+            Upload Image
+          </span>
+        </div>
      </div>
    </div>
  </div>
@ -105,77 +119,91 @@ exports[`GalleryForm > with previous images > renders 1`] = `
 exports[`GalleryForm > with uploading images > renders 1`] = `
 <div>
  <div
-    class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4 tw:my-4"
+    class="tw:mt-3"
  >
-    <div
-      class="tw:relative"
+    <label
+      class="tw:label tw:pb-1"
    >
-      <img
-        alt="Gallery image 1"
-        class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg tw:opacity-50"
-        src="blob-url-placeholder"
-      />
      <span
-        class="tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto"
-      />
-    </div>
+        class="tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1"
+      >
+        Media
+        :
+      </span>
+    </label>
    <div
-      class="tw:relative"
+      class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4"
    >
-      <img
-        alt="Gallery image 2"
-        class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg tw:opacity-50"
-        src="blob-url-placeholder"
-      />
-      <span
-        class="tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto"
-      />
-    </div>
-    <div
-      class="tw:relative"
-    >
-      <img
-        alt="Gallery image 3"
-        class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg tw:opacity-50"
-        src="blob-url-placeholder"
-      />
-      <span
-        class="tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto"
-      />
-    </div>
-    <div
-      class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-base-content/50 tw:w-full tw:h-full tw:cursor-pointer tw:card tw:card-body tw:border tw:border-current/50 tw:border-dashed tw:bg-base-200"
-      role="presentation"
-      tabindex="0"
-    >
-      <input
-        accept="image/jpeg,image/png"
-        data-testid="gallery-upload-input"
-        multiple=""
-        style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
-        tabindex="-1"
-        type="file"
-      />
-      <div>
-        <svg
-          class="tw:h-16 tw:w-16 tw:m-auto tw:mb-2"
-          fill="currentColor"
-          height="1em"
-          stroke="currentColor"
-          stroke-width="0"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-13.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5.5 10h-7l4-5 1.5 2 3-4 5.5 7h-7z"
-          />
-        </svg>
+      <div
+        class="tw:relative"
+      >
+        <img
+          alt="Gallery image 1"
+          class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg tw:opacity-50"
+          src="blob-url-placeholder"
+        />
        <span
-          class="tw:text-center"
-        >
-          Upload Image
-        </span>
+          class="tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto"
+        />
+      </div>
+      <div
+        class="tw:relative"
+      >
+        <img
+          alt="Gallery image 2"
+          class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg tw:opacity-50"
+          src="blob-url-placeholder"
+        />
+        <span
+          class="tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto"
+        />
+      </div>
+      <div
+        class="tw:relative"
+      >
+        <img
+          alt="Gallery image 3"
+          class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg tw:opacity-50"
+          src="blob-url-placeholder"
+        />
+        <span
+          class="tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto"
+        />
+      </div>
+      <div
+        class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-base-content/50 tw:w-full tw:h-full tw:cursor-pointer tw:card tw:card-body tw:border tw:border-current/50 tw:border-dashed tw:bg-base-200"
+        role="presentation"
+        tabindex="0"
+      >
+        <input
+          accept="image/jpeg,image/png"
+          data-testid="gallery-upload-input"
+          multiple=""
+          style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+          tabindex="-1"
+          type="file"
+        />
+        <div>
+          <svg
+            class="tw:h-16 tw:w-16 tw:m-auto tw:mb-2"
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-13.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5.5 10h-7l4-5 1.5 2 3-4 5.5 7h-7z"
+            />
+          </svg>
+          <span
+            class="tw:text-center"
+          >
+            Upload Image
+          </span>
+        </div>
      </div>
    </div>
  </div>
@ -185,41 +213,55 @@ exports[`GalleryForm > with uploading images > renders 1`] = `
 exports[`GalleryForm > without previous images > renders 1`] = `
 <div>
  <div
-    class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4 tw:my-4"
+    class="tw:mt-3"
  >
-    <div
-      class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-base-content/50 tw:w-full tw:h-full tw:cursor-pointer tw:card tw:card-body tw:border tw:border-current/50 tw:border-dashed tw:bg-base-200"
-      role="presentation"
-      tabindex="0"
+    <label
+      class="tw:label tw:pb-1"
    >
-      <input
-        accept="image/jpeg,image/png"
-        data-testid="gallery-upload-input"
-        multiple=""
-        style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
-        tabindex="-1"
-        type="file"
-      />
-      <div>
-        <svg
-          class="tw:h-16 tw:w-16 tw:m-auto tw:mb-2"
-          fill="currentColor"
-          height="1em"
-          stroke="currentColor"
-          stroke-width="0"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-13.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5.5 10h-7l4-5 1.5 2 3-4 5.5 7h-7z"
-          />
-        </svg>
-        <span
-          class="tw:text-center"
-        >
-          Upload Image
-        </span>
+      <span
+        class="tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1"
+      >
+        Media
+        :
+      </span>
+    </label>
+    <div
+      class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4"
+    >
+      <div
+        class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-base-content/50 tw:w-full tw:h-full tw:cursor-pointer tw:card tw:card-body tw:border tw:border-current/50 tw:border-dashed tw:bg-base-200"
+        role="presentation"
+        tabindex="0"
+      >
+        <input
+          accept="image/jpeg,image/png"
+          data-testid="gallery-upload-input"
+          multiple=""
+          style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+          tabindex="-1"
+          type="file"
+        />
+        <div>
+          <svg
+            class="tw:h-16 tw:w-16 tw:m-auto tw:mb-2"
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-13.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5.5 10h-7l4-5 1.5 2 3-4 5.5 7h-7z"
+            />
+          </svg>
+          <span
+            class="tw:text-center"
+          >
+            Upload Image
+          </span>
+        </div>
      </div>
    </div>
  </div>
--- a/lib/src/Components/Profile/Templates/TabsForm.tsx
+++ b/lib/src/Components/Profile/Templates/TabsForm.tsx
@ -44,7 +44,6 @@ export const TabsForm = ({
                  <PopupStartEndInput
                    item={item}
                    showLabels={true}
-                    labelStyle={'tw:text-base-content/50'}
                    updateEndValue={(e) =>
                      setState((prevState) => ({
                        ...prevState,
@ -62,7 +61,6 @@ export const TabsForm = ({

                <RichTextEditor
                  labelTitle='About'
-                  labelStyle={'tw:text-base-content/50'}
                  placeholder='about ...'
                  defaultValue={item?.text ? item.text : ''}
                  updateFormValue={(v) =>