diff --git a/src/components/missionManifest/missionManifest.scss b/src/components/missionManifest/missionManifest.scss index 800116a..8cf4177 100644 --- a/src/components/missionManifest/missionManifest.scss +++ b/src/components/missionManifest/missionManifest.scss @@ -6,7 +6,7 @@ justify-content: center; align-items: center; column-gap: 20px; - padding: 20px 20px; + padding: 15px; background-color: $blocks-color; min-height: 100%; &__img { diff --git a/src/components/roverFilter/RoverFilter.js b/src/components/roverFilter/RoverFilter.js index 697138a..c91c23d 100644 --- a/src/components/roverFilter/RoverFilter.js +++ b/src/components/roverFilter/RoverFilter.js @@ -10,7 +10,7 @@ const RoverFilter = () => { const manifest = useSelector(state => state.manifest); const { selectedRover } = useSelector(state => state.form); - const disabled = manifest.manifestLoadingStatus === "loading" + const disabled = manifest.manifestLoadingStatus === "loading"; const onRadioChange = (e) => { dispatch(roverFilterChanged(e.target.value)); @@ -23,19 +23,43 @@ const RoverFilter = () => {

Select rover

diff --git a/src/components/welcomeBlock/WelcomeBlock.js b/src/components/welcomeBlock/WelcomeBlock.js index c066d2a..7d632b4 100644 --- a/src/components/welcomeBlock/WelcomeBlock.js +++ b/src/components/welcomeBlock/WelcomeBlock.js @@ -1,19 +1,29 @@ +import { useDispatch } from 'react-redux'; +import { roverFilterChanged } from '../../slices/formSlice'; + import './welcomeBlock.scss'; const WelcomeBlock = () => { + + const dispatch = useDispatch(); + + const onPerseveranceClick = () => { + dispatch(roverFilterChanged("perseverance")); + } + return (

Dear friend!

Here you can see the photos from the surface of Mars!
- For any issues contact me on GitHub! + For any issues contact me on GitHub!
diff --git a/src/components/welcomeBlock/welcomeBlock.scss b/src/components/welcomeBlock/welcomeBlock.scss index 2aa3523..f7d041b 100644 --- a/src/components/welcomeBlock/welcomeBlock.scss +++ b/src/components/welcomeBlock/welcomeBlock.scss @@ -9,6 +9,7 @@ height: 100%; background: $blocks-color; padding: 20px; + user-select: none; &__title { text-align: center; } @@ -26,6 +27,7 @@ position: relative; margin-left: 20px; span { + cursor: pointer; display: inline-block; border-bottom: 1.5px solid #fff; } diff --git a/src/styles/bgstars.scss b/src/styles/bgstars.scss index 968d46e..3516ed4 100644 --- a/src/styles/bgstars.scss +++ b/src/styles/bgstars.scss @@ -14,7 +14,7 @@ $shadows-big: multiple-box-shadow(350); html { height: 100%; - background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%); + background: #090A0F; } #stars { @@ -22,11 +22,11 @@ html { height: 1px; background: transparent; box-shadow: $shadows-small; - animation: animStar 200s linear infinite; + animation: animStar 250s linear infinite; &:after { content: " "; position: absolute; - top: 2000px; + top: 100%; width: 1px; height: 1px; background: transparent; @@ -39,11 +39,11 @@ html { height: 2px; background: transparent; box-shadow: $shadows-medium; - animation : animStar 250s linear infinite; + animation : animStar 300s linear infinite; &:after { content: " "; position: absolute; - top: 2000px; + top: 100%; width: 2px; height: 2px; background: transparent; @@ -56,12 +56,9 @@ html { height: 3px; background: transparent; box-shadow: $shadows-big; - animation: animStar 300s linear infinite; + animation: animStar 350s linear infinite; } - - - @keyframes animStar { from { transform: translateY(0px); diff --git a/src/styles/style.scss b/src/styles/style.scss index 1815bc6..851379a 100644 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -59,6 +59,7 @@ body { .button { color: #fff; + user-select: none; background-color: $btn-color; text-align: center; font-weight: 700; @@ -73,8 +74,10 @@ body { } .App { + user-select: none; max-width: 1150px; min-height: 100vh; + max-height: min-content; margin: 0 auto; padding: 20px; color: #fff; @@ -84,7 +87,7 @@ body { transition: padding 1s; display: grid; column-gap: 20px; - grid-template-columns: calc(45% - 5px) calc(55% - 15px); + grid-template-columns: calc(46% - 5px) calc(54% - 15px); } }