update input and select

Emurgo · Aug 19, 2024 · c144e0e · c144e0e
1 parent fbc7973
commit c144e0e
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 66 deletions.
diff --git a/src/components/SearchRevamp.js b/src/components/SearchRevamp.js
@@ -3,39 +3,37 @@
 import React, { useState } from 'react';
 import type { Node } from 'react';
 import styled from 'styled-components';
-import closeIcon from '../assets/close-icon-revamp.svg';
 import searchIcon from '../assets/search-icon.svg';
 
 const Form = styled.form`
   display: flex;
   position: relative;
   margin-right: 1px;
 `;
-const SearchInput = styled.input`
-  height: 40px;
-  background-color: #fff;
-  display: block;
-  font-size: 14px;
-  line-height: 22px;
-  color: #2b2c32;
-  line-height: 1.3;
-  padding: 9px 16px 9px 38px;
-  width: 322px;
-  margin: 0;
-  border: 1px solid #a7afc0;
-  border-radius: 8px;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-  outline: none;
-  ::placeholder {
-    color: #6b7384;
-  }
+const SearchInput = styled('input')(({ isDark }) => ({
+  height: '40px',
+  backgroundColor:isDark ? 'transparent': '#fff',
+  display: 'block',
+  fontSize: '14px',
+  lineHeight: '1.3',  // Adjusted to match the duplicate property
+  color:isDark ? '#E1E6F5' :  '#2b2c32',
+  padding: '9px 16px 9px 38px',
+  width: '322px',
+  margin: 0,
+  border: '1px solid #a7afc0',
+  borderRadius: '8px',
+  MozAppearance: 'none',
+  WebkitAppearance: 'none',
+  appearance: 'none',
+  outline: 'none',
+  '::placeholder': {
+    color: '#6b7384',
+  },
+  ':focus': {
+    outline: '1px solid #242838',
+  },
+}));
 
-  :focus {
-    outline: 1px solid #242838;
-  }
-`;
 const SearchBtn = styled.button`
   position: absolute;
   top: 50%;
@@ -51,26 +49,32 @@ const SearchBtn = styled.button`
   cursor: pointer;
 `;
 
-const ClearBtn = styled.button`
-  position: absolute;
-  top: 50%;
-  right: 0px;
-  transform: translateY(-50%);
-  padding: 0px 8px;
-  background: transparent;
-  outline: none;
-  border: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-`;
+const ClearBtn = styled('div')(() => ({
+  position: 'absolute',
+  top: '50%',
+  right: '0px',
+  transform: 'translateY(-50%)',
+  padding: '0px 8px',
+  background: 'transparent',
+  outline: 'none',
+  border: 'none',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  cursor: 'pointer',
+  '& svg': {
+    '& path': {
+      fill: '#7C85A3',
+    },
+  },
+}));
 
 type Props = {|
   filter: Function,
+  isDark?: boolean,
 |};
 
-const SearchRevamp = ({ filter }: Props): Node => {
+const SearchRevamp = ({ filter,isDark }: Props): Node => {
   const [prevSearch, setPrevSearch] = useState('');
   const [searchValue, setSearchValue] = useState('');
 
@@ -98,6 +102,7 @@ const SearchRevamp = ({ filter }: Props): Node => {
         onChange={handleSearchInputChanges}
         placeholder="Search stake pool"
         type="text"
+        isDark={isDark}
       />
       {searchValue.length > 0 &&   
       <ClearBtn
@@ -106,7 +111,9 @@ const SearchRevamp = ({ filter }: Props): Node => {
           callSearchFunction(e);
         }}
       >
-        <img src={closeIcon} alt="Clear Input" />
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M19.7071 5.70711C20.0976 5.31658 20.0976 4.68342 19.7071 4.29289C19.3166 3.90237 18.6834 3.90237 18.2929 4.29289L12 10.5858L5.70711 4.29289C5.31658 3.90237 4.68342 3.90237 4.29289 4.29289C3.90237 4.68342 3.90237 5.31658 4.29289 5.70711L10.5858 12L4.29289 18.2929C3.90237 18.6834 3.90237 19.3166 4.29289 19.7071C4.68342 20.0976 5.31658 20.0976 5.70711 19.7071L12 13.4142L18.2929 19.7071C18.6834 20.0976 19.3166 20.0976 19.7071 19.7071C20.0976 19.3166 20.0976 18.6834 19.7071 18.2929L13.4142 12L19.7071 5.70711Z" fill="black" />
+        </svg>
       </ClearBtn>
       }
 

diff --git a/src/components/SortSelect.js b/src/components/SortSelect.js
@@ -20,31 +20,31 @@ const WrapperSelectInput = styled.div`
   }
 `;
 
-const SelectInput = styled.select`
-  height: 40px;
-  display: block;
-  font-size: 14px;
-  line-height: 22px;
-  color: #2b2c32;
-  line-height: 1.3;
-  padding: 0.6em 1.4em 0.5em 0.8em;
-  width: 322px;
-  margin: 0;
-  border: none;
-  border-radius: 8px;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-  background-color: #f0f3f5;
-  background-image: url(${arrowDownIcon});
-  background-repeat: no-repeat, repeat;
-  background-position: right 0.7em top 50%, 0 0;
-  background-size: 24px auto, 100%;
-`;
+const SelectInput = styled('select')(({ isDark }) => ({
+  height: '40px',
+  display: 'block',
+  fontSize: '14px',
+  lineHeight: '1.3', // Adjusted to match the duplicate property
+  color:isDark ? '#7C85A3' :'#2b2c32',
+  padding: '0.6em 1.4em 0.5em 0.8em',
+  width: '322px',
+  margin: 0,
+  border:isDark ? '1px solid #a7afc0' : 'none',
+  borderRadius: '8px',
+  MozAppearance: 'none',
+  WebkitAppearance: 'none',
+  appearance: 'none',
+  backgroundColor: isDark ? 'transparent' : '#f0f3f5',
+  backgroundImage: `url(${arrowDownIcon})`,
+  backgroundRepeat: 'no-repeat, repeat',
+  backgroundPosition: 'right 0.7em top 50%, 0 0',
+  backgroundSize: '24px auto, 100%',
+}));
 
 type Props = {|
   filter: Function,
   isRevamp?: boolean,
+  isDark?: boolean,
 |};
 
 export const sortingSelectData = [
@@ -63,7 +63,7 @@ export const sortingSelectDataRevamp = [
   { label: 'Blocks', value: Sorting.BLOCKS },
 ];
 
-function SortSelect({ filter, isRevamp = true }: Props): React$Node {
+function SortSelect({ filter, isRevamp = true, isDark }: Props): React$Node {
   const [selectValue, setSelectValue] = React.useState<SortingEnum>('score');
 
   const handleChange = (e) => {
@@ -74,7 +74,7 @@ function SortSelect({ filter, isRevamp = true }: Props): React$Node {
   return (
     <WrapperSelectInput>
       <label htmlFor="sort">Sort by:</label>
-      <SelectInput name="" id="sort" value={selectValue} onChange={handleChange}>
+      <SelectInput name="" id="sort" value={selectValue} onChange={handleChange} isDark={isDark}>
         {(isRevamp ? sortingSelectDataRevamp : sortingSelectData).map(({ value, label }) => (
           <option key={value} value={value}>
             {label}

diff --git a/src/containers/HomeRevamp.js b/src/containers/HomeRevamp.js
@@ -280,9 +280,9 @@ function Home(props: HomeProps): Node {
         <Title>Stake pools ({status === 'resolved' ? filteredPools?.length : '...'})</Title>
         <Alert title={alertText} />
         <Header>
-          <SearchRevamp filter={filterSearch} />
+          <SearchRevamp filter={filterSearch} isDark={isDark} />
           <MobileOnly>
-            <SortSelect filter={filterSelect} />
+            <SortSelect filter={filterSelect} isDark={isDark} />
           </MobileOnly>
           {/* <ColorButton type="button" onClick={() => setOpenModal(true)}> */}
           {/*  Colors meaning */}