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 (
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);
}
}