From b6f3c564e15056d7b58d92d0ee0194824b2b0532 Mon Sep 17 00:00:00 2001
From: zuba2033 <saitman9999@gmail.com>
Date: Thu, 21 Sep 2023 22:09:32 +0300
Subject: [PATCH] style fixes

---
 .../missionManifest/missionManifest.scss      |  2 +-
 src/components/roverFilter/RoverFilter.js     | 34 ++++++++++++++++---
 src/components/welcomeBlock/WelcomeBlock.js   | 14 ++++++--
 src/components/welcomeBlock/welcomeBlock.scss |  2 ++
 src/styles/bgstars.scss                       | 15 ++++----
 src/styles/style.scss                         |  5 ++-
 6 files changed, 54 insertions(+), 18 deletions(-)

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 = () => {
             <h2 className={titleClassList}>Select rover</h2>
             <div className="roverFilter__inputs">
                 <label className="roverFilter__input">
-                    <input disabled={disabled} type="radio" name="rover-choise" id="curiosity" value="curiosity" onChange={onRadioChange}/>
+                    <input disabled={disabled} 
+                        checked={selectedRover === "curiosity"} 
+                        type="radio" 
+                        name="rover-choise" 
+                        id="curiosity" 
+                        value="curiosity" 
+                        onChange={onRadioChange}/>
                     <span htmlFor="curiosity">Curiosity</span>
                 </label>
                 <label  className="roverFilter__input">
-                    <input disabled={disabled} type="radio" name="rover-choise" id="opportunity" value="opportunity" onChange={onRadioChange}/>
+                    <input disabled={disabled} 
+                        checked={selectedRover === "opportunity"} 
+                        type="radio" 
+                        name="rover-choise" 
+                        id="opportunity" 
+                        value="opportunity" 
+                        onChange={onRadioChange}/>
                     <span>Opportunity</span>
                 </label>
                 <label className="roverFilter__input">
-                    <input disabled={disabled} type="radio" name="rover-choise" id="spirit" value="spirit" onChange={onRadioChange}/>
+                    <input disabled={disabled}
+                        checked={selectedRover === "spirit"} 
+                        type="radio"
+                        name="rover-choise"
+                        id="spirit"
+                        value="spirit" 
+                        onChange={onRadioChange}/>
                     <span>Spirit</span>
                 </label>
                 <label className="roverFilter__input">
-                    <input disabled={disabled} type="radio" name="rover-choise" id="perseverance" value="perseverance" onChange={onRadioChange}/>
+                    <input disabled={disabled}
+                        checked={selectedRover === "perseverance"} 
+                        type="radio" 
+                        name="rover-choise" 
+                        id="perseverance" 
+                        value="perseverance" 
+                        onChange={onRadioChange}/>
                     <span >Perseverance</span>
                 </label>
             </div>
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 (
         <header className="welcomeBlock">
                 <h1 className="welcomeBlock__title">Dear friend!</h1>
                 <div className="welcomeBlock__text">
                     Here you can see the photos from the surface of Mars!
                     <ul className="welcomeBlock__list">
-                        <li>Choose rover. The <span>Perseverance</span> is recommended!</li>
+                        <li>Choose rover. The <span onClick={() => onPerseveranceClick()}>Perseverance</span> is recommended!</li>
                         <li>Choose sol (Martian day). Or click random</li>
                         <li>Load the gallery</li>
                         <li>Open the slider when the gallery is loaded!</li>
                     </ul>
                     <div className="welcomeBlock__contacts">
-                        For any issues contact me on <a href="https://github.com/zuba2033/mars-photos/issues">GitHub!</a>
+                        For any issues contact me on <a href="https://github.com/zuba2033/mars-photos/issues" rel="noreferrer" target="_blank">GitHub!</a>
                     </div>
                 </div>
         </header>
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);
     }
 }