Input fields, links and icons CSS
This commit is contained in:
parent
3b057fa31d
commit
4bfae91c76
4 changed files with 95 additions and 12 deletions
|
|
@ -6,6 +6,17 @@ import './ArtistSearch.scss'
|
|||
|
||||
const spotifyApi = new SpotifyWebApi()
|
||||
|
||||
const searchIcon = (
|
||||
<svg viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<title>Layer 2</title>
|
||||
<circle fillOpacity="0" id="svg_2" r="14.22443" cy="15.72443" cx="15.72443" strokeWidth="3" stroke="#cccccc" fill="#000000"/>
|
||||
<line stroke="#cccccc" id="svg_4" y2="30.20002" x2="29.72541" y1="26.64045" x1="26.16584" fillOpacity="0" strokeLinecap="null" strokeLinejoin="null" strokeDasharray="null" strokeWidth="3" fill="none"/>
|
||||
<line id="svg_6" y2="29.96271" x2="29.72541" y1="40.64143" x1="40.87873" fillOpacity="0" strokeLinecap="null" strokeLinejoin="null" strokeDasharray="null" strokeWidth="6" stroke="#cccccc" fill="none"/>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
function ArtistSearch({ props }) {
|
||||
let [search, setSearch] = useState(null)
|
||||
let [artists, setArtists] = useState(null)
|
||||
|
|
@ -23,7 +34,7 @@ function ArtistSearch({ props }) {
|
|||
|
||||
// Search artists
|
||||
useEffect(() => {
|
||||
if (search && search.length > 2) {
|
||||
if (search && search.length > 0) {
|
||||
spotifyApi.searchArtists(search)
|
||||
.then(function(data) {
|
||||
setArtists(data.artists.items)
|
||||
|
|
@ -31,6 +42,9 @@ function ArtistSearch({ props }) {
|
|||
console.error(err);
|
||||
})
|
||||
}
|
||||
else {
|
||||
setArtists(null)
|
||||
}
|
||||
}, [search])
|
||||
|
||||
// Load search term from props
|
||||
|
|
@ -59,7 +73,10 @@ function ArtistSearch({ props }) {
|
|||
<div className="spotify">
|
||||
<h1>Artist search</h1>
|
||||
|
||||
<input placeholder='Search for an artist' onChange={handleChange} />
|
||||
<div className='search-field'>
|
||||
<input placeholder='Search for an artist...' onChange={handleChange} />
|
||||
{searchIcon}
|
||||
</div>
|
||||
|
||||
{artists && (
|
||||
<div className='artists'>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,48 @@
|
|||
.spotify {
|
||||
text-align: center;
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
max-width: 60em;
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
.search-field {
|
||||
border: solid thin #b6b6b6;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
width: 31em;
|
||||
height: 3em;
|
||||
margin: 2em auto;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
input {
|
||||
border: none;
|
||||
font-size: 15pt;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: -1px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
|
||||
&::placeholder {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 30px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
max-width: 60em;
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 10pt 14pt;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,23 @@
|
|||
import React from 'react'
|
||||
import './Login.scss'
|
||||
|
||||
const spotify = (
|
||||
<svg viewBox="0 0 130 130" xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<title>Layer 1</title>
|
||||
<g fill="none" fillRule="evenodd" id="svg_1">
|
||||
<path d="m100.80815,56.12191c-20.41728,-12.11868 -54.09513,-13.23295 -73.58586,-7.32065c-3.12984,0.94872 -6.43968,-0.81718 -7.38816,-3.94531c-0.94848,-3.12965 0.81687,-6.43542 3.94897,-7.38641c22.37399,-6.7877 59.56742,-5.47688 83.07219,8.46817c2.81593,1.67065 3.73946,5.30452 2.07016,8.11364c-1.67005,2.81366 -5.30891,3.74121 -8.11729,2.07056l-0.00001,0zm-0.66863,17.94933c-1.43179,2.32304 -4.47086,3.05103 -6.79214,1.62529c-17.02197,-10.45784 -42.9781,-13.48694 -63.11628,-7.37733c-2.61172,0.78845 -5.37018,-0.68338 -6.16285,-3.2884c-0.78737,-2.6103 0.68602,-5.36196 3.29245,-6.15572c23.00556,-6.97668 51.60367,-3.59757 71.15415,8.41073c2.32128,1.42875 3.05194,4.46767 1.62466,6.78542l0.00001,0.00002zm-7.75045,17.23798c-1.13757,1.86494 -3.56853,2.45004 -5.42767,1.31309c-14.87466,-9.08578 -33.59616,-11.1382 -55.64417,-6.10432c-2.12463,0.48684 -4.24169,-0.8444 -4.72652,-2.96711c-0.48709,-2.12346 0.83957,-4.23938 2.96873,-4.72394c24.128,-5.51316 44.82514,-3.14024 61.52035,7.05605c1.86141,1.13619 2.44759,3.56658 1.30927,5.42622l0.00001,0.00001zm-29.04815,-91.30922c-34.98182,0 -63.34092,28.34217 -63.34092,63.30495c0,34.96507 28.3591,63.30649 63.34092,63.30649c34.98257,0 63.34015,-28.34142 63.34015,-63.30649c0,-34.96279 -28.35758,-63.30495 -63.34015,-63.30495l0,0z" id="svg_5" strokeWidth="0" fill="#3dd466"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
function Login() {
|
||||
return (
|
||||
<div className='login'>
|
||||
<h1>Touch Tunes</h1>
|
||||
|
||||
<a href='http://localhost:8888/login' className='App-link'> Login to Spotify </a>
|
||||
<a href='http://localhost:8888/login' className='App-link'>Login{spotify}</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,25 @@
|
|||
.login {
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
a {
|
||||
width: 150px;
|
||||
border: solid thin #b6b6b6;
|
||||
border-radius: 5px;
|
||||
text-decoration: none;
|
||||
padding: 14px 148px;
|
||||
position: relative;
|
||||
color: black;
|
||||
font-size: 16pt;
|
||||
|
||||
svg {
|
||||
width: 35px;
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue