Fix vertical styling in Register component (#25)

- Disable left and right button at start and end.

* Center align register page heading

Author: ram2091999

src/app/components/Authentication/Register.tsx

@@ -436,7 +436,11 @@ export class Register extends React.Component<RegisterInterfaces.Props, Register
         </div>
         <Row>
           <div
-            className={classnames(authStyles['left-arrow'])}
+            className={
+              currentStep === RegisterInterfaces.Steps.USER_DETAILS
+                ? classnames(authStyles['left-arrow-disable'])
+                : classnames(authStyles['left-arrow'])
+            }
             onClick={() => {
               if (currentStep !== RegisterInterfaces.Steps.USER_DETAILS) {
                 this.handleStepChange(currentStep, currentStep - 1);
@@ -483,7 +487,11 @@ export class Register extends React.Component<RegisterInterfaces.Props, Register
             </li>
           </ul>
           <div
-            className={classnames(authStyles['right-arrow'])}
+            className={
+              currentStep === RegisterInterfaces.Steps.OTHERS
+                ? classnames(authStyles['right-arrow-disable'])
+                : classnames(authStyles['right-arrow'])
+            }
             onClick={() => {
               if (currentStep !== RegisterInterfaces.Steps.OTHERS) {
                 this.handleStepChange(currentStep, currentStep + 1);

src/app/components/ReactTour.tsx

@@ -218,10 +218,11 @@ export default class ReactTour extends React.Component<
     return (
       <Tour
         accentColor={'#5b5656'}
-        className="helper"
         isOpen={isTourOpen}
         maskClassName="mask"
+        disableInteraction
         onRequestClose={this.closeTour}
+        highlightedMaskClassName={classnames(styles['mask-highlight'])}
         rounded={5}
         steps={tourConfig}
       />

src/app/styles/Authentication.module.css

@@ -8,14 +8,14 @@
   z-index: 10;
 }
 
-.loginRoot,.registerRoot {
+.loginRoot,
+.registerRoot {
   max-width: 100%;
   overflow-x: hidden;
   user-select: none;
   text-align: center;
 }
 
-
 .Authentication .customBtn:focus,
 .buttonPanel:focus {
   outline: none;
@@ -261,6 +261,15 @@
   bottom: 5px;
   cursor: pointer;
 }
+.left-arrow-disable {
+  position: relative;
+  left: 30%;
+  border-radius: 50%;
+  color: grey;
+  font-size: 30px;
+  bottom: 5px;
+}
+
 .right-arrow {
   position: relative;
   right: 30%;
@@ -270,6 +279,14 @@
   font-size: 30px;
   cursor: pointer;
 }
+.right-arrow-disable {
+  position: relative;
+  right: 30%;
+  bottom: 5px;
+  border-radius: 50%;
+  color: grey;
+  font-size: 30px;
+}
 
 .left-arrow:active,
 .left-arrow:focus {
@@ -458,11 +475,11 @@
 }
 
 .register-h1 {
-  margin-top: 30px;
+  margin-top: 6%;
 }
 
 .main-register-form {
-  margin-top: 20px;
+  margin-top: 1%;
 }
 
 .error-row {

src/app/styles/ReactTour.module.css

@@ -6,3 +6,7 @@
 .tour-mask {
   background-color: red;
 }
+
+.mask-highlight {
+  background-color: red;
+}