ux: make search placeholder text darker

Author: mvidalgarcia

reana-ui/src/components/Search.js

@@ -13,6 +13,8 @@ import { unstable_batchedUpdates } from "react-dom";
 import { Input } from "semantic-ui-react";
 import debounce from "lodash/debounce";
 
+import styles from "./Search.module.scss";
+
 const TYPING_DELAY = 1000;
 
 export default function Search({ search }) {
@@ -22,6 +24,7 @@ export default function Search({ search }) {
       fluid
       icon="search"
       placeholder="Search..."
+      className={styles.input}
       onChange={(_, data) => handleChange(data.value)}
     />
   );

reana-ui/src/components/Search.module.scss

@@ -0,0 +1,21 @@
+/*
+  -*- coding: utf-8 -*-
+
+  This file is part of REANA.
+  Copyright (C) 2022 CERN.
+
+  REANA is free software; you can redistribute it and/or modify it
+  under the terms of the MIT License; see LICENSE file for more details.
+*/
+
+@import "@palette";
+
+:global(.ui.input).input {
+  :global(input)::placeholder {
+    color: $gray;
+  }
+
+  :global(input):focus::placeholder {
+    color: darken($gray, 30%);
+  }
+}