fix(notifications): UI updates for notification integrations feature (#431)

* chore(input): update font size for tiny size

* chore(colors): update color for placeholder

* v2.8.8

Author: burbuli8ra

Diff for: package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "2.8.7",
+  "version": "2.8.8",
   "description": "netdata UI kit",
   "main": "./lib/index.js",
   "files": [

Diff for: src/components/input/input.js

@@ -105,7 +105,7 @@ export const TextInput = ({
     <StyledContainer className={className}>
       <StyledLabel disabled={disabled}>
         {label && (
-          <LabelRow>
+          <LabelRow size={size}>
             <span>{label}</span>
           </LabelRow>
         )}
@@ -128,6 +128,7 @@ export const TextInput = ({
             iconRight={iconRight}
             type="text"
             value={value}
+            size={size}
             ref={inputRef}
             {...props}
           />

Diff for: src/components/input/styled.js

@@ -29,14 +29,14 @@ export const StyledInput = styled.input.attrs({ round: true })`
   flex-grow: 0;
   ${({ iconLeft }) => iconLeft && "padding-left: 0"};
   ${({ iconRight }) => iconRight && "padding-right: 0"};
-  font-size: 14px;
+  font-size: ${({ size }) => (size === "tiny" ? "12px" : "14px")};
   line-height: 18px;
   color: ${({ disabled }) => (disabled ? getColor("placeholder") : getColor("textDescription"))};
   background: ${({ disabled }) =>
     disabled ? getColor("mainBackgroundDisabled") : getColor("mainBackground")};
 
   &::placeholder {
-    font-size: 14px;
+    font-size: ${({ size }) => (size === "tiny" ? "12px" : "14px")};
     line-height: 18px;
     color: ${getColor("placeholder")};
     opacity: 1;
@@ -58,7 +58,7 @@ export const LabelRow = styled(Flex).attrs({
 })`
   font-style: normal;
   font-weight: bold;
-  font-size: 14px;
+  font-size: ${({ size }) => (size === "tiny" ? "12px" : "14px")};
   line-height: 18px;
   margin-bottom: 4px;
 `

Diff for: src/theme/default/colors.js

@@ -48,7 +48,7 @@ const appColors = {
   sectionHeaderBackground: rawColors.neutral.limedSpruce,
   sectionTitle: rawColors.neutral.bluebayoux,
   sectionDescription: rawColors.neutral.regentgrey,
-  placeholder: rawColors.neutral.iron,
+  placeholder: rawColors.neutral.regentgrey,
   key: rawColors.neutral.regentgrey,
   panel: rawColors.neutral.limedSpruce,
   panelBg: rawColors.neutral.blackhaze,