Fix styles on the Search by name and address page according to the de…

…sign (#471) Fixed styles on the Search by name and address page according to the design: - changed border color in Country Select from blue to purple - made border radius:0 - fixed placeholder opacity - removed unnecessary changes and classes <img width="400" alt="Screenshot 2024-12-30 at 15 04 50" src="https://github.com/user-attachments/assets/f4cc7d7f-02fc-49ff-a8ea-84e732e35726" /> <img width="400" alt="Screenshot 2024-12-30 at 15 05 12" src="https://github.com/user-attachments/assets/e9cf37db-2041-4cbb-a37d-33d5dcac72d7" /> --------- Co-authored-by: Inessa Druzhkova <[email protected]>
opensupplyhub · Dec 30, 2024 · d8bd12a · d8bd12a
1 parent cdec06e
commit d8bd12a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 12 deletions.
diff --git a/src/react/src/components/Contribute/SearchByNameAndAddressTab.jsx b/src/react/src/components/Contribute/SearchByNameAndAddressTab.jsx
@@ -10,7 +10,7 @@ import Typography from '@material-ui/core/Typography';
 import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import StyledSelect from '../Filters/StyledSelect';
-
+import COLOURS from '../../util/COLOURS';
 import { makeSearchByNameAddressTabStyles } from '../../util/styles';
 
 import { countryOptionsPropType } from '../../util/propTypes';
@@ -25,15 +25,23 @@ const InputHelperText = ({ classes }) => (
     </span>
 );
 
-const defaultCountryOption = {
-    label: "What's the country?",
-    value: '',
-};
-
 const selectStyles = {
     control: provided => ({
         ...provided,
         height: '56px',
+        borderRadius: '0',
+        '&:focus,&:active,&:focus-within': {
+            borderColor: COLOURS.PURPLE,
+            boxShadow: `inset 0 0 0 1px ${COLOURS.PURPLE}`,
+            transition: 'box-shadow 0.2s',
+        },
+        '&:hover': {
+            borderColor: 'black',
+        },
+    }),
+    placeholder: provided => ({
+        ...provided,
+        opacity: 0.7,
     }),
 };
 
@@ -46,7 +54,7 @@ const SearchByNameAndAddressTab = ({
 }) => {
     const [inputName, setInputName] = useState('');
     const [inputAddress, setInputAddress] = useState('');
-    const [inputCountry, setInputCountry] = useState(defaultCountryOption);
+    const [inputCountry, setInputCountry] = useState(null);
     const [nameTouched, setNameTouched] = useState(false);
     const [addressTouched, setAddressTouched] = useState(false);
 
@@ -61,7 +69,7 @@ const SearchByNameAndAddressTab = ({
         setInputAddress(event.target.value);
     };
     const handleCountryChange = event => {
-        setInputCountry(event || defaultCountryOption);
+        setInputCountry(event);
     };
 
     const handleSearch = () => {
@@ -163,9 +171,6 @@ const SearchByNameAndAddressTab = ({
                             }`,
                             notchedOutline: classes.notchedOutlineStyles,
                         },
-                        inputProps: {
-                            type: 'text',
-                        },
                     }}
                     helperText={
                         addressTouched &&
@@ -186,7 +191,7 @@ const SearchByNameAndAddressTab = ({
                     options={countriesData || []}
                     value={inputCountry}
                     onChange={handleCountryChange}
-                    className={`basic-multi-select notranslate ${classes.selectStyles}`}
+                    className={classes.selectStyles}
                     styles={selectStyles}
                     placeholder="What's the country?"
                     isMulti={false}

diff --git a/src/react/src/util/COLOURS.js b/src/react/src/util/COLOURS.js
@@ -25,4 +25,6 @@ export default {
     NAVIGATION: '#FCCF3F',
     PALE_LIGHT_YELLOW: '#FFF2CE',
     ACCENT_GREY: '#E7E8EA',
+
+    PURPLE: '#8428FA',
 };