Merge pull request #20 from spknetwork/improve-onboard-mobile-styles

fixed mobile styles

src/common/components/onboard-friend/index.scss

@@ -9,7 +9,12 @@
       padding: 2rem;
       border-radius: 1rem;
       color: $steel-grey;
-      word-break: break-all
+      word-break: break-all;
+
+      @media (max-width: 470px) {
+        width: 90%;
+        margin-top: 100px;
+      }
     }
 
     .friend-details{
@@ -54,4 +59,12 @@
       color: rgb(175, 221, 50);
       animation: blink 2s infinite;
     }
-
+
+    .operation-amount{
+      display: flex;
+      margin-top: 3px;
+
+      @media (max-width: 470px) {
+        flex-wrap: wrap;
+      }
+    }

src/common/components/onboard-friend/index.tsx

@@ -46,7 +46,7 @@ const OnboardFriend = (props: Props | any) => {
   const [step, setStep] = useState("confirm");
   const [msg, setMsg] = useState("");
   const [token, setToken] = useState(0)
-  const [rcAmount, setRcAmount] = useState(5)
+  const [rcAmount, setRcAmount] = useState(30)
   const [isChecked, setChecked] = useState(true);
   const [commentAmount, setCommentAmount] = useState(0);
   const [voteAmount, setVoteAmount] = useState(0);
@@ -229,12 +229,11 @@ const OnboardFriend = (props: Props | any) => {
             ...props,
           })
         : NavBar({ ...props })}
-      <div className={`${containerClasses} mt-5`}>
-        { !activeUser ? <div>
-          {<>
-          <div className="onboard">
+      <div className={`${containerClasses} d-flex align-items-center justify-content-center mt-5`}>
+        { !activeUser ? <div className="d-flex justify-content-center">
+          <div className="onboard w-100">
           {step=== "confirm" && <>
-            <h5>{_t("onboard.creating-for-a-friend")}</h5>
+            <h5 className="text-center">{_t("onboard.creating-for-a-friend")}</h5>
             <div className="friend-details">
             {urlInfo && (
               <div className="friend-details">
@@ -309,7 +308,6 @@ const OnboardFriend = (props: Props | any) => {
             <Button onClick={()=> setStep("confirm")}>{_t("onboard.try-again")}</Button>
           </>}
         </div>
-          </>}
         </div> :
         <div className="onboard">
           {step=== "confirm" && <>
@@ -350,7 +348,7 @@ const OnboardFriend = (props: Props | any) => {
                       onChange={(e: any) => setRcAmount(Number(e.target.value))}
                     />
                   </InputGroup>
-                  <div className="operation-amount d-flex mt-3">
+                  <div className="operation-amount">
                     <span className="operations">Posts/Comment: {commentAmount} |</span>
                     <span className="operations">Votes: {voteAmount} |</span>
                     <span className="operations">Transfers: {transferAmount} |</span>

src/common/i18n/locales/en-US.json

@@ -164,10 +164,11 @@
     "learn-more": "Learn more about benefits in our <a href=\"https://starterkit.tech/faqs#how-to-join\">FAQ</a>",
     "username": "Pick a username",
     "email": "Enter your email address",
-    "ref": "Referred user (optional)",
+    "referral": "Enter your referral/account creator",
     "submit": "Continue",
     "validation-username": "Username is required.",
     "validation-email": "Email is required.",
+    "validation-referral": "Referral is required.",
     "success": "We've sent an email to {{email}}.",
     "success-2": "Follow instructions to complete signup process.",
     "login-text-1": "Do you have an account?",

src/common/pages/_sign-up.scss

@@ -5,7 +5,7 @@
   align-items: center;
   margin: auto;
 
-  @media (max-width: $md-break) {
+  @media (max-width: 470px) {
     flex-direction: column;
     align-items: center;
   }
@@ -28,6 +28,12 @@
         border-radius: 1rem;
         color: $steel-grey;
         word-break: break-all;
+        // background-color: red;
+
+        @media (max-width: 470px) {
+          margin-top: 100px;
+          width: 100%;
+        }
 
         .account-details{
           display: flex;
@@ -193,11 +199,16 @@
   }
 }
 
-.wrapper{
+.signup-wrapper{
   display: flex;
   justify-self: center;
   align-items: center;
   width: 100%;
+
+  @media (max-width: 470px) {
+    flex-direction: column;
+    align-items: center;
+  }
 
   .account-types{
     flex: 1;
@@ -224,6 +235,10 @@
         padding: 10px;
         cursor: pointer;
 
+        @media (max-width: 470px) {
+          width: 300px;
+        }
+
         span{
           font-size: 18px;
           font-weight: bold;
@@ -238,9 +253,13 @@
 }
 
 .link-wrap{
-  // background-color: red;
   display: flex;
   align-items: center;
   flex-direction: row;
   gap: 30px;
+
+  @media (max-width: 470px) {
+    flex-direction: column;
+    align-items: center;
+  }
 }

src/common/pages/sign-up.tsx

@@ -204,8 +204,8 @@ const SignUpPage = (props: Props | any) => {
             ...props,
           })
         : NavBar({ ...props })}
-      <div className={`sign-up-page-container ${containerClasses}`}>
-        <div className="wrapper">
+      <div className={`sign-up-page ${containerClasses}`}>
+        <div className="signup-wrapper">
            {step  === 1 && <div className="account-types align-self-center d-flex">
               <h3>Sign up with</h3>
               <div 
@@ -281,7 +281,7 @@ const SignUpPage = (props: Props | any) => {
                                 onChange={emailChanged}
                                 required={true}
                                 onInvalid={(e: any) =>
-                                  handleInvalid(e, "sign-up.", "validation-username")
+                                  handleInvalid(e, "sign-up.", "validation-email")
                                 }
                                 onInput={handleOnInput}
                               />