Move files into correct place in asset directory, and refactored Header
This commit is contained in:
parent
64a3bedde1
commit
81a2b7cb69
@ -1,6 +1,6 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import './App.css';
|
import './App.css';
|
||||||
import Header from 'components/Header';
|
import Header from 'components/Header/Header';
|
||||||
import Pokedex from 'features/Pokedex';
|
import Pokedex from 'features/Pokedex';
|
||||||
import Filters from 'features/Filters';
|
import Filters from 'features/Filters';
|
||||||
import InfoDialog from 'features/InfoDialog';
|
import InfoDialog from 'features/InfoDialog';
|
||||||
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
BIN
src/assets/images/pokedex.png
Normal file
BIN
src/assets/images/pokedex.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 13 KiB |
@ -1,14 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import logo from 'assets/poke_logo.png';
|
|
||||||
|
|
||||||
const Header = () => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div className="poke__logos">
|
|
||||||
<img src={logo} alt="Poke Logo" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Header;
|
|
12
src/components/Header/Header.css
Normal file
12
src/components/Header/Header.css
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
.poke__logos {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poke__logo {
|
||||||
|
margin-top: 10px;
|
||||||
|
width: 15vw;
|
||||||
|
-webkit-filter: drop-shadow(5px 0px 0px rgba(0,0,0,0.6));
|
||||||
|
filter: drop-shadow(5px 0px 0px rgba(0,0,0,0.6));
|
||||||
|
}
|
18
src/components/Header/Header.tsx
Normal file
18
src/components/Header/Header.tsx
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import logo from 'assets/images/pokedex.png';
|
||||||
|
import './Header.css';
|
||||||
|
|
||||||
|
const Header = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="app__header">
|
||||||
|
<div className="poke__logo noselect">
|
||||||
|
<img src={logo} alt="Poke Logo" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Header;
|
1
src/components/Header/index.ts
Normal file
1
src/components/Header/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { default } from './Header';
|
@ -3,7 +3,7 @@ html {
|
|||||||
--cardborder: #fff;
|
--cardborder: #fff;
|
||||||
--pokenumber: hsl(228, 28%, 20%);
|
--pokenumber: hsl(228, 28%, 20%);
|
||||||
--info: #fff;
|
--info: #fff;
|
||||||
--bggradient: url('assets/bg.png');
|
--bggradient: url('assets/images/bg.png');
|
||||||
--bgcolor: none;
|
--bgcolor: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -147,7 +147,7 @@ html[data-theme='dark'] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.dialog__bg {
|
.dialog__bg {
|
||||||
background-image: url('assets/bg.png');
|
background-image: url('assets/images/bg.png');
|
||||||
background-repeat: repeat;
|
background-repeat: repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
html {
|
html {
|
||||||
--toggle: hsl(230deg 17% 85%);
|
--toggle: hsl(230deg 17% 85%);
|
||||||
--bggradient: url('assets/bg.png');
|
--bggradient: url('assets/images/bg.png');
|
||||||
--bgcolor: none;
|
--bgcolor: none;
|
||||||
--colorPrimary: #000;
|
--colorPrimary: #000;
|
||||||
--filterHeading: #000;
|
--filterHeading: #000;
|
||||||
@ -38,7 +38,7 @@ body {
|
|||||||
sans-serif;
|
sans-serif;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
background-image: url('assets/bg.png');
|
background-image: url('assets/images/bg.png');
|
||||||
background-size: initial;
|
background-size: initial;
|
||||||
background-repeat: repeat;
|
background-repeat: repeat;
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user