From f441004057a6b6a72bc517e19625ec1070f49f49 Mon Sep 17 00:00:00 2001 From: Ahmed Ibrahim Date: Wed, 6 Sep 2023 08:09:27 +0300 Subject: [PATCH 1/7] feat(search): revamp the search input (add clear buttton & search by change) --- .vscode/settings.json | 4 ++ src/assets/close-icon-revamp.svg | 3 ++ src/assets/search-icon.svg | 3 ++ src/components/DesktopTableRevamp.js | 11 +++-- src/components/SearchRevamp.js | 68 ++++++++++++++++++++-------- 5 files changed, 66 insertions(+), 23 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 src/assets/close-icon-revamp.svg create mode 100644 src/assets/search-icon.svg diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..1306e96 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "javascript.validate.enable": false, + "editor.formatOnSave": true +} \ No newline at end of file diff --git a/src/assets/close-icon-revamp.svg b/src/assets/close-icon-revamp.svg new file mode 100644 index 0000000..ae73095 --- /dev/null +++ b/src/assets/close-icon-revamp.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/search-icon.svg b/src/assets/search-icon.svg new file mode 100644 index 0000000..1e25f10 --- /dev/null +++ b/src/assets/search-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/DesktopTableRevamp.js b/src/components/DesktopTableRevamp.js index e434c38..50973ee 100644 --- a/src/components/DesktopTableRevamp.js +++ b/src/components/DesktopTableRevamp.js @@ -95,6 +95,11 @@ const Table = styled.table` } `; +const Message = styled.h1` + font-weight: 400; + padding: 20px 0px; +`; + type Props = {| data: ?Array, delegateFunction: (DelegationProps, ?number) => void, @@ -119,15 +124,15 @@ function DesktopTableRevamp({ const isResolved = status === 'resolved'; if (isResolved && data != null && data.length <= 0) { - return

No results found.

; + return No results found.; } if (isLoading) { - return

Loading..

; + return Loading...; } if (isRejected) { - return

Oops! something wrong happened. Try again!

; + return Oops! something wrong happened. Try again!; } const tableTheads = [ diff --git a/src/components/SearchRevamp.js b/src/components/SearchRevamp.js index 2a7d237..68e9d6b 100644 --- a/src/components/SearchRevamp.js +++ b/src/components/SearchRevamp.js @@ -3,9 +3,12 @@ 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; `; const SearchInput = styled.input` height: 40px; @@ -27,23 +30,39 @@ const SearchInput = styled.input` ::placeholder { color: #6b7384; } + + :focus { + outline: 2px solid #242838; + } `; -const InputBtn = styled.button` - position: relative; - z-index: 10; - height: 40px; - margin: 0; - margin-right: -38px; +const SearchBtn = styled.button` + position: absolute; + top: 50%; + left: 0px; + transform: translateY(-50%); + padding: 0px 8px; + background: transparent; + outline: none; border: none; - -moz-appearance: none; - -webkit-appearance: none; - appearance: none; - padding: 10px; + display: flex; + align-items: center; + justify-content: center; + 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; - i { - color: #6b7384; - } `; type Props = {| @@ -54,10 +73,6 @@ const SearchRevamp = ({ filter }: Props): Node => { const [prevSearch, setPrevSearch] = useState(''); const [searchValue, setSearchValue] = useState(''); - const handleSearchInputChanges = (e) => { - setSearchValue(e.target.value); - }; - const callSearchFunction = (e) => { e.preventDefault(); @@ -67,17 +82,30 @@ const SearchRevamp = ({ filter }: Props): Node => { } }; + const handleSearchInputChanges = (e) => { + setSearchValue(e.target.value); + callSearchFunction(e); + }; + return (
- - - + + Search + + { + setSearchValue(''); + callSearchFunction(e); + }} + > + Clear Input + ); }; From b321897a08387b23457ef3f0d889719d31392309 Mon Sep 17 00:00:00 2001 From: Ahmed Ibrahim Date: Wed, 6 Sep 2023 08:20:29 +0300 Subject: [PATCH 2/7] feat(layout): remove max width & fit the content in the whole screen --- src/components/layout/LayoutRevamp.js | 22 ++++++++++++++++++++++ src/containers/HomeRevamp.js | 6 +++--- 2 files changed, 25 insertions(+), 3 deletions(-) create mode 100644 src/components/layout/LayoutRevamp.js diff --git a/src/components/layout/LayoutRevamp.js b/src/components/layout/LayoutRevamp.js new file mode 100644 index 0000000..f7fd4c8 --- /dev/null +++ b/src/components/layout/LayoutRevamp.js @@ -0,0 +1,22 @@ +// @flow + +import React from 'react'; +import type { Node } from 'react'; +import styled from 'styled-components'; + +const Container = styled.div` + width: 100%; +`; +const Background = styled.div` + background-color: #ffffff; +`; + +function LayoutRevamp({ children }: {| children?: ?Node |}): Node { + return ( + + {children} + + ); +} + +export default LayoutRevamp; diff --git a/src/containers/HomeRevamp.js b/src/containers/HomeRevamp.js index eeef66e..3ae1d36 100644 --- a/src/containers/HomeRevamp.js +++ b/src/containers/HomeRevamp.js @@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react'; import type { Node } from 'react'; import styled from 'styled-components'; -import Layout from '../components/layout/Layout'; +import LayoutRevamp from '../components/layout/LayoutRevamp'; import Alert from '../components/Alert'; import { SendFirstAdapool, YoroiCallback } from '../API/yoroi'; @@ -286,7 +286,7 @@ function Home(props: HomeProps): Node { const filteredPools = filterPools(rowDataSorted || rowData, totalAda); return ( - + Stake pools ({status === 'resolved' ? filteredPools?.length : '...'}) @@ -346,7 +346,7 @@ function Home(props: HomeProps): Node { - + ); } From cd3df8cb3485de02dc5667e45301a4ee673709eb Mon Sep 17 00:00:00 2001 From: Ahmed Ibrahim Date: Wed, 6 Sep 2023 08:55:22 +0300 Subject: [PATCH 3/7] feat(table): add new sorting icons --- src/assets/arrow-select-down.svg | 14 ++++---------- src/assets/arrow-sorting-up.svg | 12 ++++-------- src/assets/arrows-ascending.svg | 4 ++++ src/assets/arrows-descending.svg | 4 ++++ src/assets/arrows-idle.svg | 4 ++++ src/components/DesktopTableRevamp.js | 10 ++++++++-- src/components/common/Button.js | 24 +++++++++++++++++------- src/components/common/Label.js | 27 +++++++++++++++++++++++++-- src/components/common/Tooltip.js | 14 ++++++++------ src/components/layout/LayoutRevamp.js | 1 + 10 files changed, 79 insertions(+), 35 deletions(-) create mode 100644 src/assets/arrows-ascending.svg create mode 100644 src/assets/arrows-descending.svg create mode 100644 src/assets/arrows-idle.svg diff --git a/src/assets/arrow-select-down.svg b/src/assets/arrow-select-down.svg index 32b667b..48d6852 100644 --- a/src/assets/arrow-select-down.svg +++ b/src/assets/arrow-select-down.svg @@ -1,10 +1,4 @@ - - - - icon/arrow - Created with Sketch. - - - - - \ No newline at end of file + + + + diff --git a/src/assets/arrow-sorting-up.svg b/src/assets/arrow-sorting-up.svg index 6f7c1bd..b15a37d 100644 --- a/src/assets/arrow-sorting-up.svg +++ b/src/assets/arrow-sorting-up.svg @@ -1,8 +1,4 @@ - - - \ No newline at end of file + + + + diff --git a/src/assets/arrows-ascending.svg b/src/assets/arrows-ascending.svg new file mode 100644 index 0000000..6b297af --- /dev/null +++ b/src/assets/arrows-ascending.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/arrows-descending.svg b/src/assets/arrows-descending.svg new file mode 100644 index 0000000..48d6852 --- /dev/null +++ b/src/assets/arrows-descending.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/arrows-idle.svg b/src/assets/arrows-idle.svg new file mode 100644 index 0000000..b15a37d --- /dev/null +++ b/src/assets/arrows-idle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/DesktopTableRevamp.js b/src/components/DesktopTableRevamp.js index 50973ee..d2223b4 100644 --- a/src/components/DesktopTableRevamp.js +++ b/src/components/DesktopTableRevamp.js @@ -188,8 +188,14 @@ function DesktopTableRevamp({ {tableTheads.map(({ label, value, textInfo, id }) => ( - -