diff --git a/webapp/src/components/cardDetail/cardDetail.scss b/webapp/src/components/cardDetail/cardDetail.scss index 76c76101e..12f40ee4b 100644 --- a/webapp/src/components/cardDetail/cardDetail.scss +++ b/webapp/src/components/cardDetail/cardDetail.scss @@ -94,7 +94,7 @@ min-height: 32px; .Switch { - margin-left: 8px; + margin: 4px 0 0 8px; width: 40px; height: 24px; box-sizing: border-box; diff --git a/webapp/src/properties/multiperson/multiperson.scss b/webapp/src/properties/multiperson/multiperson.scss index ce70ee464..75dfdab32 100644 --- a/webapp/src/properties/multiperson/multiperson.scss +++ b/webapp/src/properties/multiperson/multiperson.scss @@ -39,13 +39,20 @@ } .react-select__value-container--is-multi { + gap: 4px; display: inline-flex; + .react-select__multi-value__label { + padding-left: 4px; + } + .react-select__multi-value { background: rgba(var(--center-channel-color-rgb), 0.08); border-radius: 24px; display: inline-flex; color: rgb(var(--center-channel-color-rgb)); + margin: 0; + align-items: center; .MultiPerson-item, .react-select__multi-value__label { @@ -59,6 +66,13 @@ color: rgba(var(--center-channel-color-rgb), 0.56); margin: 6px; border-radius: 100%; + margin-left: 0; + padding: 0; + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; &:hover { background: rgba(var(--center-channel-color-rgb), 0.26); diff --git a/webapp/src/properties/person/person.scss b/webapp/src/properties/person/person.scss index 40fbe8b11..7a9f98be8 100644 --- a/webapp/src/properties/person/person.scss +++ b/webapp/src/properties/person/person.scss @@ -23,6 +23,10 @@ } } + .react-select__input { + margin-left: -5px !important; + } + .react-select__menu { background: rgba(var(--center-channel-bg-rgb), 1); box-shadow: var(--elevation-4); @@ -41,7 +45,7 @@ display: flex; align-items: center; height: 40px; - padding: 0 40px 0 20px; + padding: 0 40px 0 10px; &:hover { background: rgba(var(--center-channel-color-rgb), 0.08);