change mealTags Styling

client/src/components/Meals/SelectMealTags.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { ListItemText, useTheme } from '@material-ui/core';
+import { alpha, ListItemText, useTheme } from '@material-ui/core';
 import CreatableSelect from 'react-select/creatable';
 import ReactSelect from 'react-select';
 import { arrayOf, bool, func, object, string } from "prop-types";
@@ -14,7 +14,7 @@ import { reactSelectTheme } from "./meals.util";
 const SelectMealTags = (props) => {
   const { t } = useTranslation();
   const muiTheme = useTheme();
-  const { typography } = muiTheme;
+  const { typography, palette } = muiTheme;
 
   const {
     updateTags,
@@ -32,7 +32,7 @@ const SelectMealTags = (props) => {
   const [allTags, setAllTags] = useState([]);
 
   useEffect(() => {
-    if(own) {
+    if (own) {
       if (user) {
         const userId = user.sub;
         getSettingsOfUser(userId, (settings) => {
@@ -71,6 +71,31 @@ const SelectMealTags = (props) => {
       ...provided,
       fontSize: typography.body1.fontSize,
     }),
+    noOptionsMessage: (provided, state) => ({
+      ...provided,
+      fontSize: typography.body1.fontSize,
+    }),
+    placeholder: (provided, state) => ({
+      ...provided,
+      paddingLeft: '5px',
+    }),
+    valueContainer: (provided, state) => ({
+      ...provided,
+      padding: '3px',
+    }),
+    multiValueLabel: (provided, state) => ({
+      ...provided,
+      fontSize: '1rem',
+      paddingRight: '6px',
+      borderRight: '1px dotted ' + alpha(palette.text.primary, 0.5),
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0,
+    }),
+    multiValueRemove: (provided, state) => ({
+      ...provided,
+      paddingLeft: '5px',
+      paddingRight: '5px',
+    }),
   }
 
   const commonProps = {
@@ -92,7 +117,7 @@ const SelectMealTags = (props) => {
     // getNewOptionData is necessary because otherwise the new option will be an object with identical label and value attributes
     return <CreatableSelect {...commonProps} getNewOptionData={(value) => value} noOptionsMessage={() => t('Type to add Tags')} />;
   } else {
-    return <ReactSelect {...commonProps} noOptionsMessage={() => t('No results')}/>;
+    return <ReactSelect {...commonProps} noOptionsMessage={() => t('No results')} />;
   }
 }