Markup Referral score page + menu changes #221

SOURC3XYZ · Oct 6, 2022 · 8fbfcae · 8fbfcae
1 parent 0e6f3c3
commit 8fbfcae
Show file tree

Hide file tree

Showing 6 changed files with 217 additions and 6 deletions.
diff --git a/ui/front/src/apps/web/components/app.container.tsx b/ui/front/src/apps/web/components/app.container.tsx
@@ -25,6 +25,7 @@ import styles from './app.module.scss';
 import { Lendos } from './lendos';
 import { Header } from './header';
 import { routesData } from './routes';
+import ReferralProgramm from "@components/shared/referral-programm/referralProgramm";
 
 function Main() {
   const { isApiConnected, isOnLending, connectBeamApi } = useWebMain();
@@ -108,6 +109,10 @@ function Main() {
           path="/onboarding"
           element={<OnboardingStep />}
         />
+        <Route
+            path="/referral-programm"
+            element={<ReferralProgramm />}
+        />
         <Route
           path="/download"
           element={<DownloadPage />}

diff --git a/ui/front/src/components/shared/git-auth/onboarding/step3/step3.tsx b/ui/front/src/components/shared/git-auth/onboarding/step3/step3.tsx
@@ -16,7 +16,7 @@ function Step3(props: any) {
             Help others to bring their
             {' '}
             <span className={styles.drop}>
-              reputation
+              reputation&nbsp;
               <span className={styles.color}>on-chain</span>
             </span>
           </h1>

diff --git a/ui/front/src/components/shared/git-auth/onboarding/stepStart/stepStart.module.scss b/ui/front/src/components/shared/git-auth/onboarding/stepStart/stepStart.module.scss
@@ -92,6 +92,7 @@
       }
       .color{
         color: #FF791F;
+        cursor: pointer;
       }
       &:nth-child(1){
         margin-bottom: 28px;

diff --git a/ui/front/src/components/shared/git-auth/onboarding/stepStart/stepStart.tsx b/ui/front/src/components/shared/git-auth/onboarding/stepStart/stepStart.tsx
@@ -18,11 +18,11 @@ function stepStart(props: any) {
         </div>
         <h1>
           <span className={styles.indent}>
-            {`${github_profile.name || github_login} , thank you ` }
+            {`${github_profile.name || github_login}, thank you ` }
           </span>
           <span className={styles.drop}>
-            for joining
-            <a href="@components/shared/git-auth/onboarding/stepHead/stepHead#">SOURC3</a>
+            for joining&nbsp;
+             <a href="@components/shared/git-auth/onboarding/stepHead/stepHead#">SOURC3</a>
             {' '}
             and
           </span>
@@ -47,11 +47,11 @@ function stepStart(props: any) {
         <p>
           To enjoy the best SOURC3 experience, complete the following 3 steps:
           <span className={styles.drop}>
-            <span className={styles.color}>future proof your reputation, join the community</span>
+            <span className={styles.color} onClick={() => props.onClickHandler(2)}>future proof your reputation, join the community</span>
             {' '}
             and
             {' '}
-            <span className={styles.color}>spread the word.</span>
+            <span className={styles.color} onClick={() => props.onClickHandler(3)}>spread the word.</span>
           </span>
         </p>
       </div>

diff --git a/ui/front/src/components/shared/referral-programm/referralProgramm.module.scss b/ui/front/src/components/shared/referral-programm/referralProgramm.module.scss
@@ -0,0 +1,151 @@
+.section{
+  max-width: 960px;
+  width: 100%;
+  margin: 40px auto 0 auto;
+  h1{
+    font-family: 'PublicSans-Black', serif;
+    font-style: normal;
+    font-weight: 900;
+    font-size: 24px;
+    line-height: 28px;
+    color: #000000;
+    margin-bottom: 40px;
+  }
+  .content{
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    .text{
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      width: 320px;
+      margin-top: 15px;
+      h4{
+        font-family: 'PublicSans-ExtraBold', serif;
+        font-style: normal;
+        font-weight: 800;
+        font-size: 18px;
+        line-height: 20px;
+        color: #000000;
+        margin: 0;
+      }
+      p{
+        font-family: 'PublicSans-Regular', serif;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 25px;
+        color: #000000;
+        margin: 24px 0;
+      }
+      button{
+        width: 320px;
+        height: 36px;
+        background: #FF791F;
+        font-family: 'PublicSans-ExtraBold', serif;
+        font-style: normal;
+        font-weight: 800;
+        font-size: 14px;
+        line-height: 20px;
+        text-align: center;
+        color: #FFFFFF;
+        padding: 0;
+      }
+    }
+    .table{
+      border: 1px solid #DEDEDE;
+      border-radius: 8px;
+      width: 600px;
+      .title{
+        height: 48px;
+        display: flex;
+        align-items: center;
+        background: rgba(0, 0, 0, 0.03);
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        h4{
+          width: 300px;
+          font-family: 'PublicSans-Bold', serif;
+          font-style: normal;
+          font-weight: 700;
+          font-size: 14px;
+          line-height: 16px;
+          color: #000000;
+          opacity: 0.5;
+          margin: 0;
+          padding-left: 16px;
+        }
+      }
+      .date{
+        min-height: 143px;
+        height: 100%;
+        padding: 16px;
+        .empty{
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          height: 100%;
+          p{
+            font-family: 'PublicSans-Regular', serif;
+            font-style: italic;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 16px;
+            color: #000000;
+            opacity: 0.3;
+            margin-bottom: 0;
+          }
+        }
+        .info{
+          display: flex;
+          align-items: center;
+          margin-bottom: 24px;
+          &:nth-last-child(1){
+            margin-bottom: 0;
+          }
+          p{
+            width: 300px;
+            font-family: 'PublicSans-Regular', serif;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 16px;
+            color: #000000;
+            margin: 0;
+            &:nth-child(2){
+              padding-left: 16px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media only screen and (max-width: 920px) {
+  .table{
+    margin-top: 40px;
+  }
+}
+@media only screen and (max-width: 768px) {
+  .table{
+    max-width: 600px;
+    width: 100%;
+    .title{
+      h4{
+        max-width: 300px;
+        width: 100% !important;
+      }
+    }
+    .info{
+      p{
+        max-width: 300px;
+        width: 100% !important;
+        &:nth-child(2){
+          padding-left: 22px !important;
+        }
+      }
+    }
+  }
+
+}
diff --git a/ui/front/src/components/shared/referral-programm/referralProgramm.tsx b/ui/front/src/components/shared/referral-programm/referralProgramm.tsx
@@ -0,0 +1,54 @@
+
+import styles from './referralProgramm.module.scss'
+import {NavButton} from "@components/shared";
+import React from "react";
+
+function ReferralProgramm() {
+    return (
+        <div className={styles.section}>
+            <h1>Referral program</h1>
+            <div className={styles.content}>
+                <div className={styles.text}>
+                    <h4>You have 50 referral points</h4>
+                    <p>Your referral score will entitle you to future benefits and airdrops. Use your SOURC3 referral link to spread the Web3 word.</p>
+                    <NavButton
+                        name="Copy referral link"
+                    />
+                </div>
+                <div className={styles.table}>
+                    <div className={styles.title}>
+                        <h4>Activation date</h4>
+                        <h4>Referral points</h4>
+                    </div>
+                    <div className={styles.date}>
+                        {/*<div className={styles.empty}>*/}
+                        {/*    <p>No one have used your referral link so far</p>*/}
+                        {/*</div>*/}
+
+                        <div className={styles.info}>
+                            <p>11 Oct 2022, 4:56 PM</p>
+                            <p>10</p>
+                        </div>
+                        <div className={styles.info}>
+                            <p>11 Oct 2022, 4:56 PM</p>
+                            <p>10</p>
+                        </div>
+                        <div className={styles.info}>
+                            <p>11 Oct 2022, 4:56 PM</p>
+                            <p>10</p>
+                        </div>
+                        <div className={styles.info}>
+                            <p>11 Oct 2022, 4:56 PM</p>
+                            <p>10</p>
+                        </div>
+                        <div className={styles.info}>
+                            <p>11 Oct 2022, 4:56 PM</p>
+                            <p>10</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+export default ReferralProgramm;