diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/Chip.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/Chip.jsx index 957686b4c3a..3c110a190d2 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/Chip.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/Chip.jsx @@ -34,10 +34,12 @@ class Chip extends Component { render() { return (
+
{this.props.content.value}
- +
+
) } diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/chip.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/chip.css index 7d8962b2871..fcb4a8a5265 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/chip.css +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/chip.css @@ -22,46 +22,49 @@ * (-12px-{text (Roboto-Regular 13px)}-4px-{close button}-4px-) */ .chip { - display: flex; + margin-right: 5px; height: 32px; background-color: #f1f1f1; border-radius: 16px; - padding: 3px; border: 10px; } +.chip-content { + display: flex; + margin: 4px 4px 4px 12px; +} + .chip-text { - padding-top: 4px; + height: 24px; font-family: "Roboto-Regular"; font-size: 13px; font-weight: 400; color: rgba(0, 0, 0, 0.87); line-height: 20px; - padding-left: 12px; - padding-right: 4px; + padding-top: 4px; + margin-right: 4px; user-select: none; white-space: nowrap; } .chip-close-btn { - padding-left: 7px; - padding-bottom: 6px; - border-radius: 50%; + align-content: center; + padding-left: 4px; + padding-top: 1px; display: inline-block; height: 24px; width: 24px; user-select: none; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; cursor: pointer; - margin-right: 4px; } .chip-close-btn i { - font-size: 10px; + color: #a9a9a9; color: rgba(0, 0, 0, 0.258824); fill: rgba(0, 0, 0, 0.258824); } -.chip-close-btn:hover { - background-color: #e1e1e1; +.chip-close-btn i:hover { + color: #959595; } \ No newline at end of file