s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Search design implemented

Browse Source
This commit is contained in:
mattyl006 2022-07-07 12:38:56 +02:00
parent 0ae5146d24
commit cd9126e8f3
6 changed files with 57 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/filters_ico.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<line y1="0.5" x2="14" y2="0.5" stroke="#343434"/>
<line x1="2" y1="5.5" x2="12" y2="5.5" stroke="#343434"/>
<line x1="4" y1="10.5" x2="10" y2="10.5" stroke="#343434"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 272 B

3
src/assets/loop_ico.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.543 17.3302L14.8672 12.6549C15.9305 11.0765 16.4551 9.10448 16.1742 7.00315C15.6953 3.42892 12.7656 0.520244 9.18749 0.0672841C3.86755 -0.605808 -0.605907 3.86715 0.0672989 9.18651C0.520426 12.7658 3.42981 15.6975 7.00482 16.174C9.10639 16.4548 11.0791 15.9305 12.6572 14.8672L17.333 19.5424C17.9431 20.1525 18.9326 20.1525 19.5428 19.5424C20.1524 18.9316 20.1524 17.9395 19.543 17.3302ZM3.08981 8.12412C3.08981 5.36738 5.33279 3.12465 8.08983 3.12465C10.8469 3.12465 13.0898 5.36738 13.0898 8.12412C13.0898 10.8809 10.8469 13.1236 8.08983 13.1236C5.33279 13.1236 3.08981 10.8816 3.08981 8.12412Z" fill="#343434"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 731 B

44
src/components/elements/Search.js Normal file
View File

@ -0,0 +1,44 @@
import React from "react";
import {FlexRow, Svg} from "../../utils/containers";
import loopIco from '../../assets/loop_ico.svg';
import filtersIco from '../../assets/filters_ico.svg';
import styled from "styled-components";
import {Body} from "../../utils/fonts";
const SearchStyle = styled(FlexRow)`
width: 100%;
height: 44px;
border-radius: 22px;
box-shadow: ${({theme}) => theme.shadow};
padding: 0 12px;
div {
width: 20px;
height: 20px;
margin-right: 12px;
}
button {
cursor: pointer;
margin-left: 12px;
width: 14px;
height: 20px;
}
input {
width: calc(100% - 24px - 34px);
color: ${({theme}) => theme.colors.dark05};
}
`;
const Search = () => {
return (
<SearchStyle>
<Svg src={loopIco}/>
<Body as='input'/>
<Svg as='button' src={filtersIco}/>
</SearchStyle>
);
}
export default Search;

4
src/pages/Challenges.js
View File

@ -1,15 +1,17 @@
import React from "react";
import {H1} from "../utils/fonts";
import {FlexColumn} from "../utils/containers";
import Search from "../components/elements/Search";
const Challenges = () => {
return (
<FlexColumn as='main' alignmentY='flex-start' width='100%'
minHeight='100vh' padding='90px 0 32px 0'>
<FlexColumn maxWidth='452px' alignmentX='flex-start' width='80%'>
<H1 as='h1'>
<H1 as='h1' margin='0 0 20px 0'>
Challenges
</H1>
<Search/>
</FlexColumn>
</FlexColumn>
);

1
src/utils/colors.js
View File

@ -2,6 +2,7 @@ const colors = {
white: '#FCFCFC',
green: '#1B998B',
dark: '#343434',
dark05: 'rgba(52, 52, 52, 0.5)',
};
export default colors;

1
src/utils/theme.js
View File

@ -5,6 +5,7 @@ const theme = {
overMobile: '768px',
mobile: '(max-width: 768px)',
desktop: '(min-width: 769px)',
shadow: '1px 2px 4px rgba(52, 52, 52, 0.25)',
navShadow: '0 1px 2px rgba(52, 52, 52, 0.25)'
};