From beb3041d99ee75ff99fe52908446437a05335077 Mon Sep 17 00:00:00 2001
From: Moritz Stueckler <moritz.stueckler@gmail.com>
Date: Fri, 4 Jun 2021 15:40:03 +0200
Subject: [PATCH] feat: add styling for selectinput
---
src/components/CreatableSelect.tsx | 7 ++++++-
src/components/Form/AddPoiForm.tsx | 2 ++
src/components/Form/SelectInput.tsx | 2 +-
3 files changed, 9 insertions(+), 2 deletions(-)
diff --git a/src/components/CreatableSelect.tsx b/src/components/CreatableSelect.tsx
index bfaa4f9..9889345 100644
--- a/src/components/CreatableSelect.tsx
+++ b/src/components/CreatableSelect.tsx
@@ -5,7 +5,12 @@ import Creatable from 'react-select/creatable';
const CreatableSelect = <OptionType, isMulti extends boolean>(props: NamedProps<OptionType, isMulti>): JSX.Element => {
const customStyles: StylesConfig<OptionType, isMulti> = {
- control: (provided) => ({ ...provided, border: '0', borderRadius: '0.5em' }),
+ control: (provided) => ({
+ ...provided,
+ border: '0',
+ borderRadius: '0.5em',
+ boxShadow: 'none',
+ }),
multiValue: (provided) => ({ ...provided, borderRadius: '999px', padding: '0 3px' }),
multiValueRemove: (provided) => ({
...provided,
diff --git a/src/components/Form/AddPoiForm.tsx b/src/components/Form/AddPoiForm.tsx
index 61c0aa9..60c0e4c 100644
--- a/src/components/Form/AddPoiForm.tsx
+++ b/src/components/Form/AddPoiForm.tsx
@@ -161,6 +161,7 @@ const AddPoiForm: React.FC = () => {
<SelectInput
label={'Kategorie'}
required
+ placeholder={'Auswählen...'}
name={'category'}
options={categoryOptions}
onChange={(selectedOption) =>
@@ -174,6 +175,7 @@ const AddPoiForm: React.FC = () => {
label={'Verhältnis zum Fab City Hamburg e.V.'}
required
name={'relationStatus'}
+ placeholder={'Auswählen...'}
options={relationStatusOptions}
onChange={(selectedOption) =>
setFormData((prev) => ({
diff --git a/src/components/Form/SelectInput.tsx b/src/components/Form/SelectInput.tsx
index 4895e29..bf82cbe 100644
--- a/src/components/Form/SelectInput.tsx
+++ b/src/components/Form/SelectInput.tsx
@@ -26,7 +26,7 @@ const SelectInput = <OptionType, isMulti extends boolean>({
<CreatableSelect
name={name}
value={value}
- className="form-input form-input-custom"
+ className="p-0 form-input form-input-custom"
onChange={onChange}
{...inputProps}
/>
--
GitLab