kj
/
webtrigon-job-portal
1
0
複製 0
程式碼 問題管理 0 合併請求 0 版本發佈 0 Wiki Activity

6 次程式碼提交
67c9938c9b ... 695c7d5678

作者 SHA1 備註 提交日期
  Ajay_S 695c7d5678 completed techinical interview page and time slot page 3 年之前
  Ajay_S 1a903e36af completed preliminary round results page 3 年之前
  Ajay_S eed212f393 partially created questions component 3 年之前
  Ajay_S e17c3d971f partially completed quiz page functionality 3 年之前
  Ajay_S a09ac91883 soft coded interviewround and skill info data 3 年之前
  Ajay_S a59ed2686d partially created quiz and options component 3 年之前
共有 22 個文件被更改，包括 1170 次插入 和 89 次删除
分割檢視
Diff Options
Show Stats
  1. +17
    -2
      src/App.tsx
  2. +3
    -0
      src/assets/icons/close-filled.svg
  3. +105
    -0
      src/assets/icons/desktop-particles.svg
  4. +101
    -0
      src/assets/icons/good_job.svg
  5. +4
    -0
      src/common/styles/global.scss
  6. +2
    -2
      src/components/stepsHeader/StepHeader.tsx
  7. +89
    -0
      src/components/timeSlot/TimeSlot.module.scss
  8. +57
    -0
      src/components/timeSlot/TimeSlot.tsx
  9. +40
    -0
      src/pages/Quiz/Options.module.scss
  10. +36
    -0
      src/pages/Quiz/Options.tsx
  11. +40
    -0
      src/pages/Quiz/Question.module.scss
  12. +33
    -0
      src/pages/Quiz/Question.tsx
  13. +115
    -0
      src/pages/Quiz/Quiz.module.scss
  14. +57
    -0
      src/pages/Quiz/Quiz.tsx
  15. +82
    -67
      src/pages/interviewRounds/InterviewRounds.tsx
  16. +0
    -1
      src/pages/interviewRounds/Steps.module.scss
  17. +1
    -1
      src/pages/preliminaryRound/PreliminaryRound.tsx
  18. +133
    -0
      src/pages/preliminaryRoundResults/PreliminaryRoundResults.module.scss
  19. +57
    -0
      src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx
  20. +131
    -16
      src/pages/skillInformationStep/SkillInformationStep.tsx
  21. +38
    -0
      src/pages/technicalInterview/TechnicalInterview.module.scss
  22. +29
    -0
      src/pages/technicalInterview/TechnicalInterview.tsx

+ 17
- 2
src/App.tsx 查看文件

@@ -19,10 +19,13 @@ import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

import './App.scss';
import ConnectWithUs from './pages/connectWithUs/ConnectWithUs';
import InterviewRounds from './pages/interviewRounds/InterviewRounds';
import SkillInformationStep from './pages/skillInformationStep/SkillInformationStep';
import PreliminaryRound from './pages/preliminaryRound/PreliminaryRound';
import Quiz from './pages/Quiz/Quiz';
import PreliminaryRoundResults from './pages/preliminaryRoundResults/PreliminaryRoundResults';
import TechnicalInterview from './pages/technicalInterview/TechnicalInterview';
import TimeSlot from './components/timeSlot/TimeSlot';



@@ -38,9 +41,21 @@ const App: React.FC = () => (
<Route exact path="/skillInformationStep">
<SkillInformationStep />
</Route>
<Route exact path="/PreliminaryRound">
<Route exact path="/quiz">
<Quiz />
</Route>
<Route exact path="/preliminaryRound">
<PreliminaryRound />
</Route>
<Route exact path="/preliminaryRoundResults">
<PreliminaryRoundResults />
</Route>
<Route exact path="/technicalInterview">
<TechnicalInterview />
</Route>
<Route exact path="/timeSlot">
<TimeSlot />
</Route>
<Route exact path="/">
<Redirect to="/interviewRounds" />
</Route>


+ 3
- 0
src/assets/icons/close-filled.svg 查看文件

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path id="close-filled" d="M11.25,2.25a9,9,0,1,0,9,9A8.945,8.945,0,0,0,11.25,2.25Zm3.471,13.5L11.25,12.279,7.779,15.75,6.75,14.721l3.471-3.471L6.75,7.779,7.779,6.75l3.471,3.471L14.721,6.75,15.75,7.779,12.279,11.25l3.471,3.471Z" transform="translate(-2.25 -2.25)" fill="#d13232"/>
</svg>

+ 105
- 0
src/assets/icons/desktop-particles.svg 查看文件

@@ -0,0 +1,105 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1372.384" height="684.949" viewBox="0 0 1372.384 684.949">
<g id="Group_4325" data-name="Group 4325" transform="translate(6.384 -91.801)">
<g id="Ellipse_14" data-name="Ellipse 14" transform="translate(199 194.552) rotate(-180)" fill="none" stroke="#626262" stroke-width="5" opacity="0.15">
<circle cx="13.5" cy="13.5" r="13.5" stroke="none"/>
<circle cx="13.5" cy="13.5" r="11" fill="none"/>
</g>
<g id="Ellipse_105" data-name="Ellipse 105" transform="translate(488 662.552) rotate(-180)" fill="none" stroke="#626262" stroke-width="5" opacity="0.15">
<circle cx="13.5" cy="13.5" r="13.5" stroke="none"/>
<circle cx="13.5" cy="13.5" r="11" fill="none"/>
</g>
<g id="Ellipse_17" data-name="Ellipse 17" transform="translate(256 414.552) rotate(-180)" fill="none" stroke="#313131" stroke-width="5">
<circle cx="8.5" cy="8.5" r="8.5" stroke="none"/>
<circle cx="8.5" cy="8.5" r="6" fill="none"/>
</g>
<path id="Polygon_1" data-name="Polygon 1" d="M10.5,0,21,19H0Z" transform="translate(448.042 262.052) rotate(-137)" fill="#626262"/>
<path id="Polygon_22" data-name="Polygon 22" d="M10.5,0,21,19H0Z" transform="translate(53.042 580.941) rotate(-137)" fill="#626262"/>
<path id="Polygon_3" data-name="Polygon 3" d="M5.362,0l5.362,9.7H0Z" transform="translate(187.358 469.552) rotate(-137)" fill="#626262"/>
<path id="Polygon_23" data-name="Polygon 23" d="M5.362,0l5.362,9.7H0Z" transform="translate(146.843 623.851) rotate(-137)" fill="#626262"/>
<path id="Polygon_2" data-name="Polygon 2" d="M10.855,0,21.71,19.642H0Z" transform="translate(427.82 552.723) rotate(-137)" fill="#2e2e2e"/>
<path id="Polygon_24" data-name="Polygon 24" d="M10.855,0,21.71,19.642H0Z" transform="translate(427.82 757.78) rotate(-137)" fill="#2e2e2e"/>
<rect id="Rectangle_40" data-name="Rectangle 40" width="15" height="15" transform="matrix(-0.883, 0.469, -0.469, -0.883, 172, 277.796)" fill="#383838"/>
<rect id="Rectangle_296" data-name="Rectangle 296" width="8.483" height="8.483" transform="matrix(-0.883, 0.469, -0.469, -0.883, 388.5, 665.796)" fill="#383838"/>
<rect id="Rectangle_41" data-name="Rectangle 41" width="14.685" height="14.685" transform="translate(435.696 169.606) rotate(115)" fill="#383838"/>
<rect id="Rectangle_297" data-name="Rectangle 297" width="14.685" height="14.685" transform="translate(129.444 668.901) rotate(115)" fill="#383838"/>
<rect id="Rectangle_43" data-name="Rectangle 43" width="9.685" height="9.685" transform="translate(278.583 593.532) rotate(115)" fill="#383838"/>
<rect id="Rectangle_42" data-name="Rectangle 42" width="14.685" height="14.685" transform="translate(425.938 425) rotate(115)" fill="#383838"/>
<rect id="Rectangle_301" data-name="Rectangle 301" width="14.685" height="14.685" transform="translate(312.521 234.634) rotate(115)" fill="#383838"/>
<rect id="Rectangle_299" data-name="Rectangle 299" width="14.685" height="14.685" transform="translate(235.938 760.057) rotate(115)" fill="#383838"/>
<rect id="Rectangle_298" data-name="Rectangle 298" width="14.685" height="14.685" transform="translate(298.098 502.258) rotate(115)" fill="#383838"/>
<rect id="Rectangle_300" data-name="Rectangle 300" width="14.685" height="14.685" transform="translate(298.098 707.315) rotate(115)" fill="#383838"/>
<circle id="Ellipse_15" data-name="Ellipse 15" cx="5" cy="5" r="5" transform="translate(402 295.552) rotate(-180)" fill="#383838"/>
<circle id="Ellipse_107" data-name="Ellipse 107" cx="5" cy="5" r="5" transform="translate(288.583 105.185) rotate(-180)" fill="#383838"/>
<circle id="Ellipse_106" data-name="Ellipse 106" cx="5" cy="5" r="5" transform="translate(7 614.441) rotate(-180)" fill="#383838"/>
<circle id="Ellipse_16" data-name="Ellipse 16" cx="8" cy="8" r="8" transform="translate(142 209.552) rotate(-180)" fill="#383838"/>
<circle id="Ellipse_18" data-name="Ellipse 18" cx="16.5" cy="16.5" r="16.5" transform="translate(139 502.552) rotate(-180)" fill="#383838"/>
<circle id="Ellipse_104" data-name="Ellipse 104" cx="6.5" cy="6.5" r="6.5" transform="translate(266 658.552) rotate(-180)" fill="#383838"/>
<g id="Ellipse_14-2" data-name="Ellipse 14" transform="translate(1050 674)" fill="none" stroke="#626262" stroke-width="5" opacity="0.15">
<circle cx="13.5" cy="13.5" r="13.5" stroke="none"/>
<circle cx="13.5" cy="13.5" r="11" fill="none"/>
</g>
<g id="Ellipse_105-2" data-name="Ellipse 105" transform="translate(1339 206)" fill="none" stroke="#626262" stroke-width="5" opacity="0.15">
<circle cx="13.5" cy="13.5" r="13.5" stroke="none"/>
<circle cx="13.5" cy="13.5" r="11" fill="none"/>
</g>
<g id="Ellipse_17-2" data-name="Ellipse 17" transform="translate(1117 454)" fill="none" stroke="#313131" stroke-width="5">
<circle cx="8.5" cy="8.5" r="8.5" stroke="none"/>
<circle cx="8.5" cy="8.5" r="6" fill="none"/>
</g>
<path id="Polygon_1-2" data-name="Polygon 1" d="M10.5,0,21,19H0Z" transform="translate(1310.684 620.822) rotate(-43)" fill="#626262"/>
<path id="Polygon_22-2" data-name="Polygon 22" d="M10.5,0,21,19H0Z" transform="translate(915.684 301.933) rotate(-43)" fill="#626262"/>
<path id="Polygon_3-2" data-name="Polygon 3" d="M5.362,0l5.362,9.7H0Z" transform="translate(1057.515 406.314) rotate(-43)" fill="#626262"/>
<path id="Polygon_23-2" data-name="Polygon 23" d="M5.362,0l5.362,9.7H0Z" transform="translate(1017 252.015) rotate(-43)" fill="#626262"/>
<path id="Polygon_2-2" data-name="Polygon 2" d="M10.855,0,21.71,19.642H0Z" transform="translate(1289.942 330.635) rotate(-43)" fill="#2e2e2e"/>
<path id="Polygon_24-2" data-name="Polygon 24" d="M10.855,0,21.71,19.642H0Z" transform="translate(1289.942 125.578) rotate(-43)" fill="#2e2e2e"/>
<rect id="Rectangle_40-2" data-name="Rectangle 40" width="15" height="15" transform="matrix(-0.883, -0.469, 0.469, -0.883, 1042.958, 604)" fill="#383838"/>
<rect id="Rectangle_296-2" data-name="Rectangle 296" width="8.483" height="8.483" transform="matrix(-0.883, -0.469, 0.469, -0.883, 1262.518, 210.246)" fill="#383838"/>
<rect id="Rectangle_41-2" data-name="Rectangle 41" width="14.685" height="14.685" transform="translate(1300.387 705.152) rotate(-115)" fill="#383838"/>
<rect id="Rectangle_297-2" data-name="Rectangle 297" width="14.685" height="14.685" transform="translate(994.135 205.857) rotate(-115)" fill="#383838"/>
<rect id="Rectangle_43-2" data-name="Rectangle 43" width="9.685" height="9.685" transform="translate(1147.805 279.113) rotate(-115)" fill="#383838"/>
<rect id="Rectangle_42-2" data-name="Rectangle 42" width="14.685" height="14.685" transform="translate(1290.629 449.758) rotate(-115)" fill="#383838"/>
<rect id="Rectangle_301-2" data-name="Rectangle 301" width="14.685" height="14.685" transform="translate(1177.212 640.124) rotate(-115)" fill="#383838"/>
<rect id="Rectangle_299-2" data-name="Rectangle 299" width="14.685" height="14.685" transform="translate(1100.629 114.701) rotate(-115)" fill="#383838"/>
<rect id="Rectangle_298-2" data-name="Rectangle 298" width="14.685" height="14.685" transform="translate(1162.789 372.5) rotate(-115)" fill="#383838"/>
<rect id="Rectangle_300-2" data-name="Rectangle 300" width="14.685" height="14.685" transform="translate(1162.789 167.443) rotate(-115)" fill="#383838"/>
<circle id="Ellipse_15-2" data-name="Ellipse 15" cx="5" cy="5" r="5" transform="translate(1270 573)" fill="#383838"/>
<circle id="Ellipse_107-2" data-name="Ellipse 107" cx="5" cy="5" r="5" transform="translate(1156.583 763.366)" fill="#383838"/>
<circle id="Ellipse_106-2" data-name="Ellipse 106" cx="5" cy="5" r="5" transform="translate(875 254.111)" fill="#383838"/>
<circle id="Ellipse_16-2" data-name="Ellipse 16" cx="8" cy="8" r="8" transform="translate(1004 659)" fill="#383838"/>
<circle id="Ellipse_18-2" data-name="Ellipse 18" cx="10" cy="10" r="10" transform="translate(984 366)" fill="#383838"/>
<circle id="Ellipse_104-2" data-name="Ellipse 104" cx="6.5" cy="6.5" r="6.5" transform="translate(1131 210)" fill="#383838"/>
<g id="Ellipse_14-3" data-name="Ellipse 14" transform="translate(623.5 674)" fill="none" stroke="#626262" stroke-width="5" opacity="0.15">
<circle cx="13.5" cy="13.5" r="13.5" stroke="none"/>
<circle cx="13.5" cy="13.5" r="11" fill="none"/>
</g>
<g id="Ellipse_105-3" data-name="Ellipse 105" transform="translate(912.5 206)" fill="none" stroke="#626262" stroke-width="5" opacity="0.15">
<circle cx="13.5" cy="13.5" r="13.5" stroke="none"/>
<circle cx="13.5" cy="13.5" r="11" fill="none"/>
</g>
<g id="Ellipse_17-3" data-name="Ellipse 17" transform="translate(690.5 454)" fill="none" stroke="#313131" stroke-width="5">
<circle cx="8.5" cy="8.5" r="8.5" stroke="none"/>
<circle cx="8.5" cy="8.5" r="6" fill="none"/>
</g>
<path id="Polygon_1-3" data-name="Polygon 1" d="M10.5,0,21,19H0Z" transform="translate(884.184 620.822) rotate(-43)" fill="#626262"/>
<path id="Polygon_22-3" data-name="Polygon 22" d="M10.5,0,21,19H0Z" transform="translate(489.184 301.933) rotate(-43)" fill="#626262"/>
<path id="Polygon_3-3" data-name="Polygon 3" d="M5.362,0l5.362,9.7H0Z" transform="translate(631.015 406.314) rotate(-43)" fill="#626262"/>
<path id="Polygon_23-3" data-name="Polygon 23" d="M5.362,0l5.362,9.7H0Z" transform="translate(590.5 252.015) rotate(-43)" fill="#626262"/>
<path id="Polygon_2-3" data-name="Polygon 2" d="M10.855,0,21.71,19.642H0Z" transform="translate(863.442 330.635) rotate(-43)" fill="#2e2e2e"/>
<path id="Polygon_24-3" data-name="Polygon 24" d="M10.855,0,21.71,19.642H0Z" transform="translate(863.442 125.578) rotate(-43)" fill="#2e2e2e"/>
<rect id="Rectangle_40-3" data-name="Rectangle 40" width="15" height="15" transform="matrix(-0.883, -0.469, 0.469, -0.883, 616.458, 604)" fill="#383838"/>
<rect id="Rectangle_296-3" data-name="Rectangle 296" width="8.483" height="8.483" transform="matrix(-0.883, -0.469, 0.469, -0.883, 836.018, 210.246)" fill="#383838"/>
<rect id="Rectangle_41-3" data-name="Rectangle 41" width="14.685" height="14.685" transform="translate(873.887 705.152) rotate(-115)" fill="#383838"/>
<rect id="Rectangle_297-3" data-name="Rectangle 297" width="14.685" height="14.685" transform="translate(567.635 205.857) rotate(-115)" fill="#383838"/>
<rect id="Rectangle_43-3" data-name="Rectangle 43" width="9.685" height="9.685" transform="translate(721.305 279.113) rotate(-115)" fill="#383838"/>
<rect id="Rectangle_42-3" data-name="Rectangle 42" width="14.685" height="14.685" transform="translate(864.129 449.758) rotate(-115)" fill="#383838"/>
<rect id="Rectangle_301-3" data-name="Rectangle 301" width="14.685" height="14.685" transform="translate(750.712 640.124) rotate(-115)" fill="#383838"/>
<rect id="Rectangle_299-3" data-name="Rectangle 299" width="14.685" height="14.685" transform="translate(674.129 114.701) rotate(-115)" fill="#383838"/>
<rect id="Rectangle_298-3" data-name="Rectangle 298" width="14.685" height="14.685" transform="translate(736.289 372.5) rotate(-115)" fill="#383838"/>
<rect id="Rectangle_300-3" data-name="Rectangle 300" width="14.685" height="14.685" transform="translate(736.289 167.443) rotate(-115)" fill="#383838"/>
<circle id="Ellipse_15-3" data-name="Ellipse 15" cx="5" cy="5" r="5" transform="translate(843.5 573)" fill="#383838"/>
<circle id="Ellipse_106-3" data-name="Ellipse 106" cx="5" cy="5" r="5" transform="translate(448.5 254.111)" fill="#383838"/>
<circle id="Ellipse_16-3" data-name="Ellipse 16" cx="8" cy="8" r="8" transform="translate(577.5 659)" fill="#383838"/>
<circle id="Ellipse_18-3" data-name="Ellipse 18" cx="10" cy="10" r="10" transform="translate(557.5 366)" fill="#383838"/>
<circle id="Ellipse_104-3" data-name="Ellipse 104" cx="6.5" cy="6.5" r="6.5" transform="translate(704.5 210)" fill="#383838"/>
</g>
</svg>

+ 101
- 0
src/assets/icons/good_job.svg 查看文件

@@ -0,0 +1,101 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="135.372" height="120.185" viewBox="0 0 135.372 120.185">
<defs>
<clipPath id="clip-path">
<path id="Path_4379" data-name="Path 4379" d="M637.263,106.61s-3.088,42.013,42.174,43.042,54.706-59.557,27.041-84.386c-14.3-12.836-44.661-8.947-55.6,2.2C642.27,76.231,637.691,90.008,637.263,106.61Z" transform="translate(-637.218 -57.23)" fill="none"/>
</clipPath>
</defs>
<g id="Group_3632" data-name="Group 3632" transform="matrix(0.966, -0.259, 0.259, 0.966, -575.481, 152.895)">
<g id="Group_3630" data-name="Group 3630" transform="translate(591.18 17.174)">
<g id="Group_3626" data-name="Group 3626" transform="translate(24.801 21.578)">
<g id="Group_3625" data-name="Group 3625" clip-path="url(#clip-path)">
<g id="Group_3624" data-name="Group 3624" transform="translate(20.003 10.856)">
<g id="Group_3620" data-name="Group 3620">
<g id="Group_3604" data-name="Group 3604" transform="translate(7.537)">
<g id="Group_3599" data-name="Group 3599" transform="translate(0 24.618)">
<g id="Group_3597" data-name="Group 3597">
<path id="Path_4365" data-name="Path 4365" d="M738.713,163.448c-1.09-.241-7.513-6.887-10.09-14.592a16.733,16.733,0,0,0,1.135-4.685c.828-9.187-11.96-20.9-11.96-20.9s-11.5-2.3-24.849,9.166,6.543,22.588,6.543,22.588l-5.513,6.174s3.046,2.453,10.944,1.748L712.5,178.8S739.858,163.7,738.713,163.448Z" transform="translate(-688.34 -123.081)" fill="#ea9649"/>
</g>
<g id="Group_3598" data-name="Group 3598" transform="translate(17.337 32.992)">
<path id="Path_4366" data-name="Path 4366" d="M753.559,191.7c-.723-.159-3.792-3.139-6.53-7.375l-26.506,8.456,6.82,14.271S754.7,191.952,753.559,191.7Z" transform="translate(-720.523 -184.323)" fill="#d68041"/>
</g>
</g>
<g id="Group_3603" data-name="Group 3603" transform="translate(16.428)">
<g id="Group_3600" data-name="Group 3600" transform="translate(0.473 0.206)">
<path id="Path_4367" data-name="Path 4367" d="M742.047,128.791s7.874-11.715-.77-25.878,2.7-21.989-6.774-24.8-12.021,12-6.587,23.292c0,0-13.273,7.879-6.054,21.967S739.075,132.459,742.047,128.791Z" transform="translate(-719.712 -77.764)" fill="#ffa94d"/>
</g>
<g id="Group_3602" data-name="Group 3602">
<g id="Group_3601" data-name="Group 3601">
<path id="Path_4368" data-name="Path 4368" d="M738.142,82.823a5.4,5.4,0,0,0-.428-2.231,3.884,3.884,0,0,0-.635-.925,4.486,4.486,0,0,0-.882-.694,8.122,8.122,0,0,0-2.09-.86,7.906,7.906,0,0,0-2.221-.3,5.423,5.423,0,0,0-2.146.453,5.886,5.886,0,0,0-1.79,1.248,8.37,8.37,0,0,0-1.283,1.8,12.188,12.188,0,0,0-.834,2.075,15.839,15.839,0,0,0-.484,2.2,19.144,19.144,0,0,0-.208,2.25c-.034.754-.014,1.509.017,2.264.017.377.052.754.077,1.131l.125,1.127.172,1.122.217,1.114.26,1.1.3,1.093.346,1.08.388,1.065.43,1.048.474,1.028.181.393-.371.236a17.76,17.76,0,0,0-2.417,1.883,19.719,19.719,0,0,0-2.1,2.256,17.675,17.675,0,0,0-1.7,2.554,15.121,15.121,0,0,0-1.181,2.82,13.849,13.849,0,0,0-.535,3,14.855,14.855,0,0,0,.426,4.568c.106.5.275.991.43,1.483s.368.964.549,1.447l.656,1.4a31.035,31.035,0,0,0,1.55,2.717,20.813,20.813,0,0,0,1.865,2.485,15.263,15.263,0,0,0,2.279,2.084,10.415,10.415,0,0,0,2.709,1.447,9.813,9.813,0,0,0,6.09.12,11.992,11.992,0,0,0,2.849-1.286,10.767,10.767,0,0,0,2.418-2.009,11.334,11.334,0,0,1-5.172,3.592,10.713,10.713,0,0,1-3.161.576,9.35,9.35,0,0,1-3.2-.465,10.993,10.993,0,0,1-2.9-1.452,15.993,15.993,0,0,1-2.444-2.119,21.662,21.662,0,0,1-2-2.525,28.589,28.589,0,0,1-1.653-2.744c-.247-.5-.474-.971-.7-1.463-.194-.5-.421-.993-.587-1.508s-.348-1.024-.465-1.554a15.765,15.765,0,0,1-.492-4.849,14.793,14.793,0,0,1,.546-3.222,16.686,16.686,0,0,1,3.027-5.739,20.818,20.818,0,0,1,2.232-2.354,18.616,18.616,0,0,1,2.593-1.98l-.19.629-.481-1.069-.436-1.088-.392-1.1-.347-1.118-.3-1.131-.259-1.142-.214-1.151-.168-1.159-.119-1.165c-.023-.39-.056-.779-.07-1.17-.024-.781-.016-1.563.037-2.344a20.028,20.028,0,0,1,.277-2.332,16.728,16.728,0,0,1,.565-2.286,12.906,12.906,0,0,1,.94-2.172,8.99,8.99,0,0,1,1.434-1.905,6.434,6.434,0,0,1,2-1.319,5.783,5.783,0,0,1,2.349-.4c.2.012.4.011.594.033l.59.093a11.493,11.493,0,0,1,1.132.286,8.394,8.394,0,0,1,2.121.98,4.694,4.694,0,0,1,.893.767,3.735,3.735,0,0,1,.617,1A5.463,5.463,0,0,1,738.142,82.823Z" transform="translate(-718.834 -77.382)" fill="#d68041"/>
</g>
</g>
</g>
</g>
<g id="Group_3619" data-name="Group 3619" transform="translate(0 23.563)">
<g id="Group_3609" data-name="Group 3609" transform="translate(0.381 0.489)">
<g id="Group_3605" data-name="Group 3605" transform="translate(1.169)">
<path id="Path_4369" data-name="Path 4369" d="M703.681,124.918s-1.753-4.11-14.151-2.525-14.3,10.033-10.645,12.282S708.9,135.13,703.681,124.918Z" transform="translate(-677.226 -122.029)" fill="#ffb564"/>
</g>
<g id="Group_3606" data-name="Group 3606" transform="translate(0 10.956)">
<path id="Path_4370" data-name="Path 4370" d="M705.085,144.071s-2.166-3.2-17.356-.832c-15.558,2.422-13.874,10.618-10.127,12.713S710.727,154.057,705.085,144.071Z" transform="translate(-675.057 -142.368)" fill="#ffb564"/>
</g>
<g id="Group_3607" data-name="Group 3607" transform="translate(4.957 20.212)">
<path id="Path_4371" data-name="Path 4371" d="M708.826,162.3s-1.39-4.737-12.813-1.772c-14.231,3.7-12.956,9.915-9.456,11.872S713.1,169,708.826,162.3Z" transform="translate(-684.258 -159.549)" fill="#ffb564"/>
</g>
<g id="Group_3608" data-name="Group 3608" transform="translate(10.761 27.327)">
<path id="Path_4372" data-name="Path 4372" d="M716.747,175.185s-1.229-4.187-11.325-1.566c-12.578,3.266-11.451,8.764-8.358,10.493S720.528,181.11,716.747,175.185Z" transform="translate(-695.033 -172.756)" fill="#ffb564"/>
</g>
</g>
<g id="Group_3618" data-name="Group 3618">
<g id="Group_3611" data-name="Group 3611" transform="translate(1.245)">
<g id="Group_3610" data-name="Group 3610">
<path id="Path_4373" data-name="Path 4373" d="M699.314,132.46l.5-.268c.324-.175.78-.454,1.341-.836a8.032,8.032,0,0,0,1.757-1.652,6.749,6.749,0,0,0,.39-.591,4.7,4.7,0,0,0,.291-.68,3.788,3.788,0,0,0,.206-1.548,5.009,5.009,0,0,0-.424-1.658l-.2-.41c-.03-.06-.068-.151-.105-.214a1.575,1.575,0,0,0-.107-.149,3.3,3.3,0,0,0-.641-.614,9.033,9.033,0,0,0-3.735-1.417,22.28,22.28,0,0,0-4.407-.3,41.829,41.829,0,0,0-4.595.338,23.438,23.438,0,0,0-4.469.928,15.914,15.914,0,0,0-3.964,1.839,9.873,9.873,0,0,0-2.876,2.81,5.83,5.83,0,0,0-.992,3.372,3.411,3.411,0,0,0,1.3,2.583l.133.1.14.08a1.72,1.72,0,0,0,.294.144,5.27,5.27,0,0,0,.582.207c.389.114.757.192,1.091.256.67.116,1.2.2,1.567.236l.559.062-.563-.006c-.367-.009-.907-.019-1.592-.093-.343-.039-.722-.09-1.133-.179a5.368,5.368,0,0,1-.644-.178,1.943,1.943,0,0,1-.326-.131c-.058-.027-.094-.041-.17-.081l-.157-.1a3.548,3.548,0,0,1-1.116-1.151,4.165,4.165,0,0,1-.553-1.7,6.287,6.287,0,0,1,.925-3.825,10.191,10.191,0,0,1,3.022-3.16,15.874,15.874,0,0,1,4.17-2.036,24.388,24.388,0,0,1,4.65-1,42.656,42.656,0,0,1,4.712-.309,21.544,21.544,0,0,1,4.589.406,9.4,9.4,0,0,1,4.038,1.705,4.029,4.029,0,0,1,.756.789,2.034,2.034,0,0,1,.162.258c.041.079.061.14.1.225l.2.462a5.626,5.626,0,0,1,.376,1.892,4.473,4.473,0,0,1-1.18,3.081,8.348,8.348,0,0,1-1.945,1.58,12.416,12.416,0,0,1-1.427.719Z" transform="translate(-676.66 -121.122)" fill="#d68041"/>
</g>
</g>
<g id="Group_3613" data-name="Group 3613" transform="translate(0 11.083)">
<g id="Group_3612" data-name="Group 3612">
<path id="Path_4374" data-name="Path 4374" d="M704.45,143.965l-.015-.019-.069-.065a2.711,2.711,0,0,0-.443-.3,7.457,7.457,0,0,0-2.1-.728,21.878,21.878,0,0,0-3.552-.4,43.531,43.531,0,0,0-4.682.129c-1.716.117-3.572.35-5.527.636a32.986,32.986,0,0,0-6.009,1.373,17.051,17.051,0,0,0-2.954,1.289,9.712,9.712,0,0,0-2.558,1.981,5.293,5.293,0,0,0-1.378,2.835,4.582,4.582,0,0,0,.689,3.049,4.741,4.741,0,0,0,1.062,1.186,3.928,3.928,0,0,0,.656.423,3.5,3.5,0,0,0,.732.223,16.951,16.951,0,0,0,3.335.22,49.189,49.189,0,0,0,6.59-.6,44.449,44.449,0,0,0,11.27-3.129,14.814,14.814,0,0,0,3.882-2.447,4.958,4.958,0,0,0,1.693-2.867,4.083,4.083,0,0,0-.294-2.105,4.519,4.519,0,0,0-.244-.527Zm.628-.384.1.2a5.094,5.094,0,0,1,.276.593,4.558,4.558,0,0,1-.261,4.185,7.087,7.087,0,0,1-1.313,1.6,15.523,15.523,0,0,1-4.076,2.583,45.135,45.135,0,0,1-11.466,3.2,49.933,49.933,0,0,1-6.7.618,17.64,17.64,0,0,1-3.5-.232,4.251,4.251,0,0,1-.915-.284,4.669,4.669,0,0,1-.8-.51,5.5,5.5,0,0,1-1.238-1.379,5.356,5.356,0,0,1-.8-3.563,6.059,6.059,0,0,1,1.57-3.245,10.455,10.455,0,0,1,2.757-2.137,17.81,17.81,0,0,1,3.082-1.342,33.708,33.708,0,0,1,6.144-1.4c1.972-.286,3.844-.519,5.584-.636a44.149,44.149,0,0,1,4.763-.125,22.6,22.6,0,0,1,3.682.416,8.148,8.148,0,0,1,2.31.811,3.348,3.348,0,0,1,.571.4,1.939,1.939,0,0,1,.156.158l.053.065Z" transform="translate(-674.349 -141.696)" fill="#d68041"/>
</g>
</g>
<g id="Group_3615" data-name="Group 3615" transform="translate(5.093 21.15)">
<g id="Group_3614" data-name="Group 3614">
<path id="Path_4375" data-name="Path 4375" d="M686.6,164.907a9.579,9.579,0,0,0-1.52,1.735,4.573,4.573,0,0,0-.761,2.082,3.56,3.56,0,0,0,.464,2.074,4.363,4.363,0,0,0,1.511,1.5l.231.138.235.092a.848.848,0,0,0,.253.074l.234.048a7.9,7.9,0,0,0,1.091.089,18.041,18.041,0,0,0,2.267-.1c.76-.071,1.517-.191,2.274-.309s1.511-.268,2.261-.434c1.5-.335,2.988-.722,4.451-1.184q1.1-.345,2.17-.757c.719-.263,1.424-.561,2.114-.884A21.924,21.924,0,0,0,705.884,168a10.465,10.465,0,0,0,1.777-1.358,4.046,4.046,0,0,0,1.127-1.8,2.826,2.826,0,0,0-.335-2.059l-.017-.031-.005-.019a1.943,1.943,0,0,0-.175-.391,3.461,3.461,0,0,0-.25-.379,1.576,1.576,0,0,0-.15-.173l-.156-.17a3.159,3.159,0,0,0-.349-.307,2.14,2.14,0,0,0-.379-.275l-.4-.252a1.384,1.384,0,0,0-.211-.107l-.216-.1-.435-.2.457.146.23.073a1.517,1.517,0,0,1,.227.082l.437.21a2.285,2.285,0,0,1,.419.249,3.529,3.529,0,0,1,.4.29l.183.166a1.744,1.744,0,0,1,.178.173,3.832,3.832,0,0,1,.313.392,2.219,2.219,0,0,1,.253.462l-.023-.05a3.186,3.186,0,0,1,.573,2.384,4.582,4.582,0,0,1-1.169,2.18,11.24,11.24,0,0,1-1.846,1.556,18.392,18.392,0,0,1-2.06,1.194c-.707.356-1.426.684-2.157.976s-1.472.558-2.218.8a41.149,41.149,0,0,1-4.549,1.217,33.973,33.973,0,0,1-4.668.681,18.325,18.325,0,0,1-2.386.038,8.539,8.539,0,0,1-1.222-.161,3.854,3.854,0,0,1-.63-.2l-.133-.06-.066-.03-.033-.015-.016-.008-.043-.022-.009-.005-.262-.172a4.789,4.789,0,0,1-1.654-1.845,3.934,3.934,0,0,1-.368-2.429,4.922,4.922,0,0,1,1.014-2.169A8.137,8.137,0,0,1,686.6,164.907Z" transform="translate(-683.803 -160.383)" fill="#d68041"/>
</g>
</g>
<g id="Group_3617" data-name="Group 3617" transform="translate(11.009 27.919)">
<g id="Group_3616" data-name="Group 3616">
<path id="Path_4376" data-name="Path 4376" d="M695.532,179.008a4,4,0,0,0-.48,1.8,3.066,3.066,0,0,0,.494,1.716,4.046,4.046,0,0,0,1.266,1.237,2.307,2.307,0,0,0,.374.191l.224.085c.069.017.133.024.2.037a2.985,2.985,0,0,0,.419.059,3.85,3.85,0,0,0,.451.033,13.7,13.7,0,0,0,1.851-.068c.62-.067,1.242-.134,1.861-.238s1.237-.212,1.85-.345,1.229-.261,1.837-.418c1.219-.3,2.422-.669,3.609-1.07q.889-.305,1.755-.664c.575-.242,1.146-.491,1.7-.772.276-.14.553-.28.816-.44s.529-.315.781-.487.488-.36.735-.538a6.365,6.365,0,0,0,.647-.614,2.928,2.928,0,0,0,.805-1.471,2.426,2.426,0,0,0-.317-1.622l-.026-.049,0-.02a2.3,2.3,0,0,0-.09-.221c-.038-.079-.09-.154-.134-.233a4.169,4.169,0,0,0-.336-.437c-.133-.13-.279-.25-.419-.378a1.447,1.447,0,0,0-.234-.162l-.244-.153a2.287,2.287,0,0,0-.514-.264l-.538-.229c-.374-.113-.755-.214-1.138-.324l.59.079c.2.029.4.048.594.085l.577.177a2.45,2.45,0,0,1,.566.219l.275.135a1.7,1.7,0,0,1,.27.148c.167.121.341.237.5.367a4.672,4.672,0,0,1,.438.461c.063.088.132.17.19.264a2.1,2.1,0,0,1,.156.317l-.031-.068a3.044,3.044,0,0,1,.539,2.007,3.556,3.556,0,0,1-.877,1.889,7.562,7.562,0,0,1-1.472,1.362c-.267.2-.538.382-.819.549s-.561.337-.847.493a24.548,24.548,0,0,1-3.559,1.556c-.608.215-1.219.423-1.84.6s-1.241.345-1.868.491-1.254.29-1.888.4-1.27.214-1.911.291-1.284.143-1.931.171a14.567,14.567,0,0,1-1.961-.036,4.454,4.454,0,0,1-.5-.064,2.965,2.965,0,0,1-.517-.115c-.088-.026-.182-.051-.264-.081l-.216-.1a2.986,2.986,0,0,1-.455-.277,4.2,4.2,0,0,1-1.313-1.526,3.408,3.408,0,0,1-.35-1.947A3.728,3.728,0,0,1,695.532,179.008Z" transform="translate(-694.786 -172.948)" fill="#d68041"/>
</g>
</g>
</g>
</g>
</g>
<g id="Group_3623" data-name="Group 3623" transform="translate(21.71 57.658)">
<g id="Group_3621" data-name="Group 3621">
<path id="Path_4377" data-name="Path 4377" d="M714.65,200.08l35.656-15.668,10.479,16.73-35.371,19.816Z" transform="translate(-714.65 -184.412)" fill="#22689e"/>
</g>
<g id="Group_3622" data-name="Group 3622" transform="translate(4.115 4.427)">
<path id="Path_4378" data-name="Path 4378" d="M756.6,192.63,722.29,211.854l6.649,12.9,35.371-19.816Z" transform="translate(-722.29 -192.63)" fill="#1e5d87"/>
</g>
</g>
</g>
</g>
</g>
<g id="Group_3629" data-name="Group 3629">
<g id="Group_3627" data-name="Group 3627">
<path id="Path_4380" data-name="Path 4380" d="M654.836,69.379l-5.13-6.925c9.039-13.48,5.334-33.457-9.481-42.14-11.559-6.775-33.974-1.63-41.391,6.336-5.831,6.264-8.315,15.311-7.505,25.761,0,0,.552,26.621,34.437,23.232,8.787-.879,15.488-4.145,20.211-8.725Z" transform="translate(-591.18 -17.174)" fill="#ff8255"/>
</g>
<g id="Group_3628" data-name="Group 3628" transform="translate(6.213 11.76)">
<path id="Path_4381" data-name="Path 4381" d="M627.382,46.149a3.454,3.454,0,0,1-.194,1.573,3.806,3.806,0,0,1-.876,1.4,3.437,3.437,0,0,1-1.386.869,3.808,3.808,0,0,1-.772.175,4.059,4.059,0,0,1-1.835-.213,4.277,4.277,0,0,1-1.594-1,4.033,4.033,0,0,1-1-1.6,3.893,3.893,0,0,1-.163-.773,4.246,4.246,0,0,1,1.16-3.408,3.905,3.905,0,0,1,1.568-.993,4.786,4.786,0,0,1,.878-.187,4.945,4.945,0,0,1,1.453.046,2.933,2.933,0,0,1,1.2.476l-.934,1.885a1.591,1.591,0,0,0-.655-.277,2.512,2.512,0,0,0-.79-.034,2.3,2.3,0,0,0-.476.109,1.649,1.649,0,0,0-.894.769,1.92,1.92,0,0,0-.248,1.195,1.9,1.9,0,0,0,.84,1.373,1.652,1.652,0,0,0,1.163.306,1.6,1.6,0,0,0,.307-.067,2.107,2.107,0,0,0,.658-.368.884.884,0,0,0,.357-.529l-1.947-.145.22-1.966,3.623.3A2.832,2.832,0,0,1,627.382,46.149Z" transform="translate(-610.472 -40.367)" fill="#fff"/>
<path id="Path_4382" data-name="Path 4382" d="M638.126,45.023a2.017,2.017,0,0,1,.7.457l-.548,1.743a1,1,0,0,0-.894-.331.983.983,0,0,0-.815.511,2.673,2.673,0,0,0-.172,1.381l.235,2.055-1.991.228-.653-5.705,1.991-.227.057.492a2.218,2.218,0,0,1,.612-.477,2.02,2.02,0,0,1,.717-.228A1.6,1.6,0,0,1,638.126,45.023Z" transform="translate(-617.141 -41.729)" fill="#fff"/>
<path id="Path_4383" data-name="Path 4383" d="M647.5,44.634a3,3,0,0,1,.982,2.047q.026.225.029.343l-3.784.476a1.552,1.552,0,0,0,.426.542.83.83,0,0,0,.569.19,1.276,1.276,0,0,0,1.184-.645l1.581.264a2.065,2.065,0,0,1-.432.965,2.808,2.808,0,0,1-.876.735,3.02,3.02,0,0,1-1.113.355,1.68,1.68,0,0,1-.216.014,2.749,2.749,0,0,1-1.419-.326,3.113,3.113,0,0,1-1.124-1.01,3.215,3.215,0,0,1-.543-1.477,2.13,2.13,0,0,1-.017-.248,2.419,2.419,0,0,1,.289-1.312,2.666,2.666,0,0,1,.929-.985,3.191,3.191,0,0,1,1.372-.471A2.743,2.743,0,0,1,647.5,44.634Zm-2.912,1.559,1.809-.2a.733.733,0,0,0-.306-.454.851.851,0,0,0-.5-.137A.98.98,0,0,0,644.585,46.193Z" transform="translate(-621.177 -41.338)" fill="#fff"/>
<path id="Path_4384" data-name="Path 4384" d="M658.275,48.216l-.068-.5a2.233,2.233,0,0,1-.672.478,2.654,2.654,0,0,1-.86.25,2.36,2.36,0,0,1-1.351-.242,2.817,2.817,0,0,1-1.073-.945,3.056,3.056,0,0,1-.519-1.415,3.011,3.011,0,0,1,.2-1.509,2.725,2.725,0,0,1,2.246-1.7,2.237,2.237,0,0,1,.8.048,1.526,1.526,0,0,1,.639.318l-.053-.461,1.777-.2.9,5.656Zm-.923-1.814a1.229,1.229,0,0,0,.355-.5,1.283,1.283,0,0,0,.08-.622,1.021,1.021,0,0,0-.367-.7.954.954,0,0,0-.745-.214,1.173,1.173,0,0,0-.786.426,1.059,1.059,0,0,0-.263.833,1.08,1.08,0,0,0,.218.528,1.236,1.236,0,0,0,.456.381.926.926,0,0,0,1.053-.131Z" transform="translate(-626.237 -40.541)" fill="#fff"/>
<path id="Path_4385" data-name="Path 4385" d="M670.071,45a2.242,2.242,0,0,1-.773.874,2.788,2.788,0,0,1-1.208.393,1.95,1.95,0,0,1-1.512-.332,2.251,2.251,0,0,1-.665-1.544,8.1,8.1,0,0,1-.039-.82l.009-1.248-.846.1-.268-1.683,1.132-.151.007-1.27,1.895-.314,0,1.344,1.2-.159.4,1.722L667.8,42.1l0,.976a2.715,2.715,0,0,0,.011.28,1.226,1.226,0,0,0,.238.656.493.493,0,0,0,.456.2.933.933,0,0,0,.457-.172,1.8,1.8,0,0,0,.4-.469Z" transform="translate(-631.339 -39.005)" fill="#fff"/>
<path id="Path_4386" data-name="Path 4386" d="M616.572,79.354A7.8,7.8,0,0,1,617,81.205a7.584,7.584,0,0,1-.5,3.777,7.135,7.135,0,0,1-2.229,2.972,6.827,6.827,0,0,1-3.505,1.4,8.406,8.406,0,0,1-3.106-.247,8.708,8.708,0,0,1-2.927-1.378,6.511,6.511,0,0,1-2.013-2.271l4.1-3.466a2.248,2.248,0,0,0,1.041,1.152,2.513,2.513,0,0,0,1.535.32,1.873,1.873,0,0,0,1.392-.815,2.469,2.469,0,0,0,.376-1.743,5.356,5.356,0,0,0-.2-.806L608.8,73.874l-5.884.486.184-4.7,12.484-.812.9,4.366-2.04.179Z" transform="translate(-602.714 -52.77)" fill="#fff"/>
<path id="Path_4387" data-name="Path 4387" d="M635.068,90.689a7.584,7.584,0,0,1-3.023-2.45,7.355,7.355,0,0,1-1.412-3.572,6.365,6.365,0,0,1,.693-3.879,7.342,7.342,0,0,1,2.552-2.726,7.942,7.942,0,0,1,3.353-1.214,8.711,8.711,0,0,1,4.06.406,6.266,6.266,0,0,1,2.894,2.144,7.26,7.26,0,0,1,1.348,3.593,7.538,7.538,0,0,1-.544,3.9,7.176,7.176,0,0,1-2.374,2.987,7.476,7.476,0,0,1-3.652,1.408A7.242,7.242,0,0,1,635.068,90.689Zm5.294-4.833a2.634,2.634,0,0,0,.5-2.038,3.044,3.044,0,0,0-.917-1.929,2.521,2.521,0,0,0-2.127-.586,2.665,2.665,0,0,0-1.877,1.017,2.7,2.7,0,0,0-.555,2.044,2.616,2.616,0,0,0,1.043,1.874,2.925,2.925,0,0,0,2.176.54A2.533,2.533,0,0,0,640.362,85.856Z" transform="translate(-615.569 -56.428)" fill="#fff"/>
<path id="Path_4388" data-name="Path 4388" d="M670.238,68.3a8.1,8.1,0,0,1,3.677,5.828,8.524,8.524,0,0,1-.375,3.735,6.914,6.914,0,0,1-1.832,2.926,4.847,4.847,0,0,1-2.793,1.322,7.378,7.378,0,0,1-2.56-.162,6.466,6.466,0,0,1-2.194-.927l.17,1.479-5.151.589-2.393-20.919,5.234-1.027.884,8.194a7.1,7.1,0,0,1,4.424-1.79A4.641,4.641,0,0,1,670.238,68.3Zm-2.214,8.951a3.1,3.1,0,0,0,.908-1.188,2.725,2.725,0,0,0-.831-3.289,2.648,2.648,0,0,0-2.011-.613,2.79,2.79,0,0,0-1.9,1.06,2.611,2.611,0,0,0-.068,3.379,3.241,3.241,0,0,0,1.194.961,2.58,2.58,0,0,0,1.419.253A2.479,2.479,0,0,0,668.024,77.255Z" transform="translate(-627.658 -49.22)" fill="#fff"/>
<path id="Path_4389" data-name="Path 4389" d="M687.009,60.523l5.785-.662,1.4,13.165-5.179.806ZM690.681,80.1a3.242,3.242,0,0,1-1.282-1.031,3.09,3.09,0,0,1-.6-1.523,2.767,2.767,0,0,1,.668-2.231,3.355,3.355,0,0,1,2.242-1.1,2.961,2.961,0,0,1,2.2.511,2.708,2.708,0,0,1,1.026,1.957,3.389,3.389,0,0,1-.614,2.465,2.835,2.835,0,0,1-2.042,1.21A2.983,2.983,0,0,1,690.681,80.1Z" transform="translate(-641.599 -48.626)" fill="#fff"/>
</g>
</g>
</g>
</g>
</svg>

+ 4
- 0
src/common/styles/global.scss 查看文件

@@ -16,3 +16,7 @@ ion-button {
font-family: 'Poppins', sans-serif;
}

ion-label {
font-family: 'Poppins', sans-serif !important;
}


+ 2
- 2
src/components/stepsHeader/StepHeader.tsx 查看文件

@@ -1,7 +1,7 @@
import styles from './StepHeader.module.scss';

import { IonHeader, IonIcon } from '@ionic/react';
import { close } from 'ionicons/icons'
import { closeOutline } from 'ionicons/icons'

interface Props {
stepNumber: number;
@@ -15,7 +15,7 @@ const StepHeader: React.FC<Props> = (props) => {
<div className={styles.step}>Step {props.stepNumber}</div>
<h3 className={styles.roundName}>{props.roundName}</h3>
</div>
<IonIcon icon={close}></IonIcon>
<IonIcon icon={closeOutline}></IonIcon>
</header>
)
}


+ 89
- 0
src/components/timeSlot/TimeSlot.module.scss 查看文件

@@ -0,0 +1,89 @@
.header {
background-color: #FCFCFC;
display: flex;
align-items: center;
height: 12vh;

ion-icon {
color: black;
width: 2.8rem;
height: 2.8rem;
margin-left: 2rem;
}

h4 {
color: #4A4A4A;
font-size: 2.4rem;
font-weight: 300;
letter-spacing: 0.024rem;
margin-left: 4rem;
}
}

.month {
color: #959595;
font-size: 1.6rem;
margin-top: 3.5rem;
margin-left: 3rem;
}

.dateSlotHolder {
display: flex;
align-items: center;
justify-content: space-evenly;
margin-top: 4rem;

.date {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 7rem;
height: 7rem;
border: 1px solid #EFEFEF;
border-radius: 25px;
color: lighten($color: #959595, $amount: 15%);
font-size: 1.8rem;
font-weight: 600;
.day {
font-size: 1.4rem;
font-weight: 200;
}
}
}

.timeSlotHolder {
width: 90%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 2rem;
margin: 0 auto;
margin-top: 4rem;

.time {
display: flex;
align-items: center;
justify-content: center;
width: 15.5rem;
height: 5rem;
border: 1px solid #EFEFEF;
border-radius: 25px;
color: lighten($color: #959595, $amount: 10%);
font-size: 1.6rem;
}
}

.timeSlotButton {
text-decoration: none;

ion-button {
margin-top: 28vh;
margin-bottom: 0;
}
}

.active {
color: #33CE93;
box-shadow: 0px 0px 10px #00000039;
}

+ 57
- 0
src/components/timeSlot/TimeSlot.tsx 查看文件

@@ -0,0 +1,57 @@
import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react";
import styles from "./TimeSlot.module.scss";
import { chevronBack } from 'ionicons/icons'
import { Link } from "react-router-dom";

interface OwnProps {

}

const TimeSlot: React.FC = () => {
return (
<IonPage>
<header className={styles.header}>
<IonIcon icon={chevronBack} />
<h4>Find a Slot</h4>
</header>

<IonContent>
<div className={styles.month}>
April-May
</div>

<div className={styles.dateSlotHolder}>
<div className={styles.date}>
<div className={styles.day}>Tue</div>
<div>27</div>
</div>
<div className={styles.date}>
<div className={styles.day}>Sat</div>
<div>29</div>
</div>
<div className={styles.date}>
<div className={styles.day}>Mon</div>
<div>01</div>
</div>
<div className={styles.date}>
<div className={styles.day}>Wed</div>
<div>03</div>
</div>
</div>

<div className={styles.timeSlotHolder}>
<div className={styles.time}>11:00 AM - 1:00 pm</div>
<div className={styles.time}>1:00 PM - 3:00 pm</div>
<div className={styles.time}>3:00 PM - 5:00 pm</div>
</div>

<Link to="/" className={styles.timeSlotButton}>
<IonButton shape="round" expand='block'>Confirm for Apr 29, 2021, 11:00 AM</IonButton>
</Link>
</IonContent>

</IonPage>
)
}

export default TimeSlot;

+ 40
- 0
src/pages/Quiz/Options.module.scss 查看文件

@@ -0,0 +1,40 @@
.optionHolder {
ion-list {
ion-radio-group {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
height: 40vh;

ion-item {
width: 99%;
margin: 0 auto;
--background: white;
border: 1px solid #DBDBDB;
border-radius: 25px;

ion-label {
--color: #626262;
font-size: 1.2rem !important;
font-weight: 200;
}
ion-radio {
--color-checked: var(--primary-button-color);
margin-left: 1.5rem;
}
}

.highlighted {
box-shadow: 0px 0px 10px #00000029;

ion-radio {
--color: var(--primary-button-color);
}
}
}
}


}

+ 36
- 0
src/pages/Quiz/Options.tsx 查看文件

@@ -0,0 +1,36 @@
import { IonItem, IonLabel, IonList, IonRadio, IonRadioGroup } from '@ionic/react';
import { useState } from 'react';
import styles from './Options.module.scss';

interface OwnProps {
options: string[];
isSelected: (option: string) => void;
}

const Options: React.FC<OwnProps> = (props) => {

const [selected, setSelected] = useState<string>("null");

if (selected !== "null") props.isSelected(selected);

const options = props.options.map((option, key) => {
return (
<IonItem lines='none' key={key} className={(option === selected) ? styles.highlighted : ""}>
<IonLabel>{option}</IonLabel>
<IonRadio mode='md' slot="start" value={option} />
</IonItem>
);
});

return (
<div className={styles.optionHolder}>
<IonList>
<IonRadioGroup onIonChange={e => setSelected(e.detail.value)}>
{options}
</IonRadioGroup>
</IonList>
</div>
);
}

export default Options;

+ 40
- 0
src/pages/Quiz/Question.module.scss 查看文件

@@ -0,0 +1,40 @@
section {

.questionHolder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
text-align: center;
color: white;
width: 90%;
margin: 0 auto;
height: 27vh;
background-image: url("../../assets/icons/desktop-particles.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 150% 150%;

.questionNumber {
font-size: 1.3rem;
font-weight: 600;
}
.question {
font-size: 1.8rem;
font-weight: 300;
}

.quizTimer {
.border {
width: 6rem;
height: 6rem;
border-radius: 50%;
border: 0.2rem solid #6BD534;
.time {
margin-top: 1.8rem;
font-size: 1.4rem;
}
}
}
}
}

+ 33
- 0
src/pages/Quiz/Question.tsx 查看文件

@@ -0,0 +1,33 @@
import { useState } from "react";
import styles from "./Question.module.scss";


interface OwnProp {
questionNumber: number;
question: string;
timeLimit: number;
}

const Question: React.FC<OwnProp> = (props) => {

return (
<section>
<div className={styles.questionHolder}>

<div className={styles.questionNumber}>Question {props.questionNumber}</div>

<div className={styles.question}>
{props.question}
</div>

<div className={styles.quizTimer}>
<div className={styles.border}>
<div className={styles.time}>01:00</div>
</div>
</div>
</div>
</section>
);
}

export default Question;

+ 115
- 0
src/pages/Quiz/Quiz.module.scss 查看文件

@@ -0,0 +1,115 @@
.quizContainer {
.upfold {
height: 40vh;
background-color: #151515;
position: relative;

&::after {
content: "";
display: block;
width: 0;
height: 0;
border-left: 68vw solid #262626;
border-right: 75vw solid white;
border-top: 3rem solid transparent;
position: absolute;
bottom: 0;
left: 0;
}

.header {
display: flex;
align-items: center;
justify-content: space-between;
width: 54.5%;
margin-left: auto;
height: 10vh;

h4 {
color: white;
font-size: 2.4rem;
font-weight: 200;
letter-spacing: 0.024rem;
margin-top: 0;
align-self: flex-end;
}

ion-icon {
color: white;
margin-right: 3rem;
width: 3rem;
height: 4rem;
align-self: flex-end;

}
}

// .questionHolder {
// display: flex;
// flex-direction: column;
// align-items: center;
// justify-content: space-between;
// text-align: center;
// color: white;
// width: 90%;
// margin: 0 auto;
// height: 27vh;
// background-image: url("../../assets/icons/desktop-particles.svg");
// background-position: center;
// background-repeat: no-repeat;
// background-size: 150% 150%;

// .questionNumber {
// font-size: 1.3rem;
// font-weight: 600;
// }
// .question {
// font-size: 1.8rem;
// font-weight: 300;
// }

// .quizTimer {
// .border {
// width: 6rem;
// height: 6rem;
// border-radius: 50%;
// border: 0.2rem solid #6BD534;
// .time {
// margin-top: 1.8rem;
// font-size: 1.4rem;
// }
// }
// }
// }
}

.quizOptions {
height: 60vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;

.options {
width: 90%;
margin: 0 auto;
}
.button {
text-decoration: none;
width: 100%;
ion-button {
--background: #DDDDDD;
width: 90%;
margin: 0 auto;
}
}

.active {
ion-button {
--background: var(--primary-button-color);
}
}
}

}

+ 57
- 0
src/pages/Quiz/Quiz.tsx 查看文件

@@ -0,0 +1,57 @@
import styles from './Quiz.module.scss';

import { IonButton, IonCheckbox, IonIcon, IonItem, IonLabel, IonPage, IonRadio } from '@ionic/react';
import Options from './Options';
import { closeOutline } from 'ionicons/icons'
import { Link } from 'react-router-dom';
import { useState } from 'react';
import Question from './Question';


const options: string[] = [
"System.out.println(“Hello, how are you?”);",
"println('Hello, how are you?');",
"out.print(Hello, how are you?);",
"System.out.println(Hello, how are you?);"
];

const Quiz: React.FC = () => {

const [selected, setSelected] = useState<boolean>(false);

const isSelected = (option: string) => {

if (option !== "null") {
setSelected(true);
}
}

return (
<div className={styles.quizContainer}>
<div className={styles.upfold}>
<header className={styles.header}>
<h4 className={styles.heading}>Quiz</h4>
<IonIcon icon={closeOutline} />
</header>

<Question question='How would you correctly display, “Hello, how are you?”?'
questionNumber={1}
timeLimit={1} />

</div>

<div className={styles.quizOptions}>
<div className={styles.options}>
<Options options={options} isSelected={isSelected} />
</div>

<Link to="/" className={styles.button + " " + (selected ? styles.active : "")}>
<IonButton shape="round" expand='block'>Next</IonButton>
</Link>
</div>

</div>
);
}

export default Quiz;

+ 82
- 67
src/pages/interviewRounds/InterviewRounds.tsx 查看文件

@@ -13,85 +13,100 @@ import closingDocs from '../../assets/icons/Closing_Docs.svg';
import joiningLetter from '../../assets/icons/Joining_Letter.svg';
import Celebrations from '../../assets/icons/Celebrations.svg';

interface stepDetail {
stepNumber: number;
stepName: string;
descriptionImage: string;
buttonText: string;
isUnlocked: boolean;
}

const InterviewRounds: React.FC = () => {

const [step, setStep] = useState(1);
let steps: stepDetail[] = [
{
stepNumber: 1,
stepName: "Skill Information",
descriptionImage: skillInfo,
buttonText: "Let's start now",
isUnlocked: true
},
{
stepNumber: 2,
stepName: "Preliminary Round",
descriptionImage: preliminaryRound,
buttonText: "Let's do this",
isUnlocked: false
},
{
stepNumber: 3,
stepName: "Technical Interview",
descriptionImage: technicalInterview,
buttonText: "Schedule meeting",
isUnlocked: false
},
{
stepNumber: 4,
stepName: "Assignment",
descriptionImage: assignment,
buttonText: "Show details",
isUnlocked: false
},
{
stepNumber: 5,
stepName: "Final Interview",
descriptionImage: finalInterview,
buttonText: "Schedule meeting",
isUnlocked: false
},
{
stepNumber: 6,
stepName: "Closing Docs",
descriptionImage: closingDocs,
buttonText: "Upload docs",
isUnlocked: false
},
{
stepNumber: 7,
stepName: "Joining Letter",
descriptionImage: joiningLetter,
buttonText: "Show details",
isUnlocked: false
},
{
stepNumber: 8,
stepName: "Celebrations",
descriptionImage: Celebrations,
buttonText: "Join Workex",
isUnlocked: false
},
];

const [stepNo, setStep] = useState(1);

const setDescription = (stepNumbera: number) => {
setStep(stepNumbera);
}

const stepsList = steps.map((step, key) => {
return (
<Steps
key={key}
stepNumber={step.stepNumber}
roundName={step.stepName}
isUnlocked={step.isUnlocked}
descriptionImage={step.descriptionImage}
buttonText={step.buttonText}
setDescription={setDescription}
showDescription={(stepNo === step.stepNumber) ? true : false} />
);
});

return (
<IonPage>
<Header />
<IonContent>
<Steps
// descriptionimage stepnumber round name and button text and isUnlocked store in an array of obj use map and render it
stepNumber={1}
roundName="Skill Information"
isUnlocked={true}
descriptionImage={skillInfo}
buttonText="Let's start now!"
setDescription={setDescription}
showDescription={(step === 1) ? true : false} />
<Steps
stepNumber={2}
roundName="Preliminary Round"
isUnlocked={false}
descriptionImage={preliminaryRound}
buttonText="Let's do this"
setDescription={setDescription}
showDescription={(step === 2) ? true : false} />
<Steps
stepNumber={3}
roundName="Technical Interview"
isUnlocked={false}
descriptionImage={technicalInterview}
buttonText="Schedule meeting"
setDescription={setDescription}
showDescription={(step === 3) ? true : false} />
<Steps
stepNumber={4}
roundName="Assignment"
isUnlocked={false}
descriptionImage={assignment}
buttonText="Show details"
setDescription={setDescription}
showDescription={(step === 4) ? true : false} />
<Steps
stepNumber={5}
roundName="Final Interview"
isUnlocked={false}
descriptionImage={finalInterview}
buttonText="Schedule meeting"
setDescription={setDescription}
showDescription={(step === 5) ? true : false} />
<Steps
stepNumber={6}
roundName="Closing Docs"
isUnlocked={false}
descriptionImage={closingDocs}
buttonText="Upload docs"
setDescription={setDescription}
showDescription={(step === 6) ? true : false} />
<Steps
stepNumber={7}
roundName="Joining Letter"
isUnlocked={false}
descriptionImage={joiningLetter}
buttonText="Show details"
setDescription={setDescription}
showDescription={(step === 7) ? true : false} />
<Steps
stepNumber={8}
roundName="Celebrations"
isUnlocked={false}
descriptionImage={Celebrations}
buttonText="Join workex"
setDescription={setDescription}
showDescription={(step === 8) ? true : false} />

{stepsList}
</IonContent>
</IonPage>
)


+ 0
- 1
src/pages/interviewRounds/Steps.module.scss 查看文件

@@ -1,5 +1,4 @@
ion-item {
// background-color: #F7F7F7;
--background: #F7F7F7;
width: 100vw;
border-bottom: 0.2rem solid #ffffff;


+ 1
- 1
src/pages/preliminaryRound/PreliminaryRound.tsx 查看文件

@@ -38,7 +38,7 @@ const PreliminaryRound: React.FC = () => {
</div>
</div>

<IonButton shape="round" expand='block'>Done!</IonButton>
<IonButton shape="round" expand='block'>Start quiz</IonButton>

<div className={styles.wish}>All the best!</div>
</div>


+ 133
- 0
src/pages/preliminaryRoundResults/PreliminaryRoundResults.module.scss 查看文件

@@ -0,0 +1,133 @@
ion-content {
.quizResultsContainer {
height: 88vh;
.upfold {
height: 50vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
text-align: center;
padding-bottom: 2rem;
ion-icon {
height: 17rem;
width: 12rem;
}

.score {
h5 {
color: #363636;
font-size: 2.4rem;
font-weight: 300;
letter-spacing: 0.024rem;
}
.result {
font-size: 4.4rem;
font-weight: 600;
letter-spacing: 0.044rem;
opacity: 0.7;
}
}
.description {
color: #868686;
font-size: 1.4rem;
line-height: 1.2;
width: 90%;
}
}
.quizResults {
height: 38vh;
background-color: #151515;
display: flex;
flex-direction: column;
justify-content: space-around;
background-image: url("../../assets/icons/desktop-particles-2.svg");
background-repeat: no-repeat;
background-position: 25% 30%;
border-top-right-radius: 75%;

&::before {
position: absolute;
content:" ";
top: 57%;
right: 0;
left: 0;
bottom: 0;
background-color: #151515;
height: 30vh;
transform: skewY(3deg);
z-index: -1;
}

h5 {
color: #BCBCBC;
font-size: 2.4rem;
font-weight: 300;
letter-spacing: 0.024rem;
margin-left: 2rem;
}

.resultsHolder {
margin-left: 2rem;
.correct{
display: flex;
color: #E5E5E5;
font-size: 1.4rem;
font-weight: 600;

div {
margin-left: 2rem;
}
ion-icon {
color: #209787;
}
}
.wrong {
display: flex;
color: #E5E5E5;
font-size: 1.4rem;
font-weight: 600;
margin: 2rem 0;

div {
margin-left: 2rem;
}
ion-icon {
color: #D13232;
}
}
}


.buttonHolder {

display: flex;
align-items: center;
justify-content: space-evenly;
margin: 1rem 0;

ion-button {
width: 15rem;
--background: transparent;
color: var(--primary-button-color);
--border-color: var(--primary-button-color);
--border-width: 0.1rem;
--border-style: solid;
margin: 0;
font-size: 1.4rem;
font-weight: 600;


}

.goToNextStep {
width: 15rem;
color: white;
--background: var(--primary-button-color);
}
}
}
}
}

+ 57
- 0
src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx 查看文件

@@ -0,0 +1,57 @@
import styles from "./PreliminaryRoundResults.module.scss"

import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react";
import StepHeader from "../../components/stepsHeader/StepHeader";

import checkIcon from "../../assets/icons/check-circle-fill.svg";
import closeIcon from "../../assets/icons/close-filled.svg";
import goodJobIcon from "../../assets/icons/good_job.svg";

import { closeCircle, checkmarkCircle } from "ionicons/icons";
import { Link } from "react-router-dom";

const PreliminaryRoundResults: React.FC = () => {
return (
<IonPage>
<StepHeader stepNumber={2} roundName="Preliminary Round" />
<IonContent>
<div className={styles.quizResultsContainer}>
<div className={styles.upfold}>
<IonIcon src={goodJobIcon} />
<div className={styles.score}>
<h5>You have scored</h5>
<h5 className={styles.result}>85%</h5>
</div>
<p className={styles.description}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
</p>
</div>
<div className={styles.quizResults}>
<h5>Quiz Results</h5>
<div className={styles.resultsHolder}>
<div className={styles.correct}>
<IonIcon icon={checkmarkCircle} />
<div>17 Questions</div>
</div>
<div className={styles.wrong}>
<IonIcon icon={closeCircle} />
<div>3 Questions</div>
</div>
</div>
<div className={styles.buttonHolder}>
<Link to="/" >
<IonButton shape="round">Goto Dashboard</IonButton>
</Link>
<Link to="/interviewRounds" >
<IonButton shape="round" class={styles.goToNextStep}>Goto Next Step</IonButton>
</Link>
</div>
</div>
</div>
</IonContent>
</IonPage >

)
}

export default PreliminaryRoundResults;

+ 131
- 16
src/pages/skillInformationStep/SkillInformationStep.tsx 查看文件

@@ -6,7 +6,7 @@ import SkillsCard from './SkillsCard';
import reactIcon from '../../assets/images/React.png';
import angularIcon from '../../assets/images/Angular.png';
import ionicIcon from '../../assets/images/IonicFramework.png';
import reactNative from '../../assets/images/ReactNative.png';
import reactNativeIcon from '../../assets/images/ReactNative.png';
import vueIcon from '../../assets/images/VueJS.png';
import nodeJSIcon from '../../assets/images/NodeJS.png';
import ExpressJSICon from '../../assets/images/ExpressJS.png';
@@ -19,6 +19,10 @@ import DevOpsIcon from '../../assets/images/DevOps.png';
import { useState } from 'react';
import { Link } from 'react-router-dom';

interface skill {
name: string;
icon: string;
}

const SkillInformationStep: React.FC = () => {

@@ -34,9 +38,85 @@ const SkillInformationStep: React.FC = () => {
setSkills(newSkills);
}

const skillsArr = [
{
frontEnd: [
{
name: "React JS/TS",
icon: reactIcon,
},
{
name: "Angular8+",
icon: angularIcon,
}, {
name: "Ionic FrameWork",
icon: ionicIcon,
}, {
name: "React Native",
icon: reactNativeIcon,
}, {
name: "VueJS",
icon: vueIcon,
}
],

backEnd: [
{
name: "NodeJS",
icon: nodeJSIcon,
},
{
name: "ExpressJS",
icon: ExpressJSICon,
},
{
name: "Django FrameWork",
icon: DjangoIcon,
}
],

Database: [
{
name: "MySql",
icon: MySqlIcon,
},
{
name: "MongoDB",
icon: MongoDBIcon,
},
{
name: "PostgreSQL",
icon: postgreSqlIcon,
},
],
Beneficial: [
{
name: "Firebase",
icon: FirebaseIcon,
},
{
name: "DevOps (Docker / Kubernetes)",
icon: DevOpsIcon,
}
]
}
];
const frontEndSkills: skill[] = [];
const backendSkills: skill[] = [];
const database: skill[] = [];
const beneficial: skill[] = [];

skillsArr.forEach(skill => {
frontEndSkills.push(...skill.frontEnd);
backendSkills.push(...skill.backEnd);
database.push(...skill.Database);
beneficial.push(...skill.Beneficial);
});



return (
<IonPage>

<StepHeader
stepNumber={1}
roundName="Skill Information" />
@@ -55,11 +135,18 @@ const SkillInformationStep: React.FC = () => {
<h5 className={styles.heading}>Front-end:</h5>

<div className={styles.skills}>
<SkillsCard name='React JS/TS' icon={reactIcon} isHighlighted={skills.includes("React JS/TS")} toggleSkills={toggleSkill} />
<SkillsCard name='Angular8+' icon={angularIcon} isHighlighted={skills.includes("Angular8+")} toggleSkills={toggleSkill} />
<SkillsCard name='Ionic FrameWork' icon={ionicIcon} isHighlighted={skills.includes("Ionic FrameWork")} toggleSkills={toggleSkill} />
<SkillsCard name='React Native' icon={reactNative} isHighlighted={skills.includes("React Native")} toggleSkills={toggleSkill} />
<SkillsCard name='VueJS' icon={vueIcon} isHighlighted={skills.includes("VueJS")} toggleSkills={toggleSkill} />
{
frontEndSkills.map((skill, index) => {
return (
<SkillsCard
key={index}
name={skill.name}
icon={skill.icon}
isHighlighted={skills.includes(skill.name)}
toggleSkills={toggleSkill} />
);
})
}
</div>

</div>
@@ -69,9 +156,18 @@ const SkillInformationStep: React.FC = () => {
<h5 className={styles.heading}>Back-end:</h5>

<div className={styles.skills}>
<SkillsCard name='NodeJS' icon={nodeJSIcon} isHighlighted={skills.includes("NodeJS")} toggleSkills={toggleSkill} />
<SkillsCard name='ExpressJS' icon={ExpressJSICon} isHighlighted={skills.includes("ExpressJS")} toggleSkills={toggleSkill} />
<SkillsCard name='Django FrameWork' icon={DjangoIcon} isHighlighted={skills.includes("Django FrameWork")} toggleSkills={toggleSkill} />
{
backendSkills.map((skill, index) => {
return (
<SkillsCard
key={index}
name={skill.name}
icon={skill.icon}
isHighlighted={skills.includes(skill.name)}
toggleSkills={toggleSkill} />
);
})
}
</div>

</div>
@@ -79,13 +175,22 @@ const SkillInformationStep: React.FC = () => {
<div className={styles.skillsCard}>

<h5 className={styles.heading}>Database:</h5>

<div className={styles.skills}>
<SkillsCard name='MySql' icon={MySqlIcon} isHighlighted={skills.includes("MySql")} toggleSkills={toggleSkill} />
<SkillsCard name='MongoDB' icon={MongoDBIcon} isHighlighted={skills.includes("MongoDB")} toggleSkills={toggleSkill} />
<SkillsCard name='PostgreSQL' icon={postgreSqlIcon} isHighlighted={skills.includes("PostgreSQL")} toggleSkills={toggleSkill} />
{
database.map((skill, index) => {
return (
<SkillsCard
key={index}
name={skill.name}
icon={skill.icon}
isHighlighted={skills.includes(skill.name)}
toggleSkills={toggleSkill} />
);
})
}
</div>


</div>

<div className={styles.skillsCard}>
@@ -93,8 +198,18 @@ const SkillInformationStep: React.FC = () => {
<h5 className={styles.heading}>Beneficial:</h5>

<div className={styles.skills}>
<SkillsCard name='Firebase' isHighlighted={skills.includes("Firebase")} icon={FirebaseIcon} toggleSkills={toggleSkill} />
<SkillsCard name='DevOps (Docker / Kubernetes)' isHighlighted={skills.includes("DevOps (Docker / Kubernetes)")} icon={DevOpsIcon} toggleSkills={toggleSkill} />
{
beneficial.map((skill, index) => {
return (
<SkillsCard
key={index}
name={skill.name}
icon={skill.icon}
isHighlighted={skills.includes(skill.name)}
toggleSkills={toggleSkill} />
);
})
}
</div>

</div>


+ 38
- 0
src/pages/technicalInterview/TechnicalInterview.module.scss 查看文件

@@ -0,0 +1,38 @@
ion-content {
.description {
ion-icon {
width: 15rem;
height: 10rem;
width: 95%;
margin: 0 auto;
margin-top: 4rem;
}

h4 {
color: #363636;
text-align: center;
font-size: 2.4rem;
font-weight: 300;
letter-spacing: 0.024rem;
margin-top: 3rem;
}
p {
color: #868686;
font-size: 1.4rem;
text-align: center;
width: 90%;
margin: 0 auto;
margin-top: 2rem;
line-height: 1.8;
}
}

.techinicalInterviewBtn {
text-decoration: none;
ion-button {
margin-top: 38vh;
margin-bottom: 0;
}
}
}

+ 29
- 0
src/pages/technicalInterview/TechnicalInterview.tsx 查看文件

@@ -0,0 +1,29 @@
import styles from "./TechnicalInterview.module.scss";

import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react";
import StepHeader from "../../components/stepsHeader/StepHeader";
import techinicalInterview from "../../assets/icons/Technical_Interview.svg";
import { Link } from "react-router-dom";


const TechnicalInterview: React.FC = () => {
return (
<IonPage>
<StepHeader stepNumber={3} roundName="Technical Interview" />
<IonContent>
<div className={styles.description}>
<IonIcon src={techinicalInterview} />
<h4>You seem interesting! Let's meet.</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
</p>
</div>
<Link to="/" className={styles.techinicalInterviewBtn}>
<IonButton shape="round" expand='block'>Find a slot</IonButton>
</Link>
</IonContent>
</IonPage>
);
}

export default TechnicalInterview;

Write Preview
Loading…
取消
儲存