kj
/
webtrigon-job-portal
1
0
Bifurcation 0
Code Tickets 0 Demandes d'ajout 0 Versions 0 Wiki Activité
Parcourir la source

added classnames for ion components

develop
Ajay_S il y a 3 ans
Parent
b0c56eb76e
révision
04b19535f5
18 fichiers modifiés avec 266 ajouts et 256 suppressions
Vue séparée
Option de Diff
Voir les Statistiques Télécharger le Fichier Patch Télécharger le Fichier des Différences
  1. +30
    -28
      src/components/formInput/Input.module.scss
  2. +1
    -1
      src/components/formInput/Input.tsx
  3. +77
    -75
      src/components/timeSlot/TimeSlot.module.scss
  4. +1
    -1
      src/components/timeSlot/TimeSlot.tsx
  5. +1
    -1
      src/pages/FinalInterview/FInalInterview.module.scss
  6. +1
    -1
      src/pages/FinalInterview/FinalInterview.tsx
  7. +68
    -64
      src/pages/FinalInterview/FinalInterviewResult.module.scss
  8. +1
    -1
      src/pages/FinalInterview/FinalInterviewResult.tsx
  9. +1
    -1
      src/pages/Quiz/Options.module.scss
  10. +1
    -1
      src/pages/Quiz/Options.tsx
  11. +1
    -1
      src/pages/closingDocs/ClosingDocs.tsx
  12. +1
    -1
      src/pages/interviewRounds/StepDescreption.tsx
  13. +77
    -75
      src/pages/preliminaryRound/PreliminaryRound.module.scss
  14. +1
    -1
      src/pages/preliminaryRound/PreliminaryRound.tsx
  15. +1
    -1
      src/pages/preliminaryRoundResults/PreliminaryRoundResults.module.scss
  16. +1
    -1
      src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx
  17. +1
    -1
      src/pages/technicalInterview/TechnicalInterview.module.scss
  18. +1
    -1
      src/pages/technicalInterview/TechnicalInterview.tsx

+ 30
- 28
src/components/formInput/Input.module.scss Voir le fichier

@@ -14,36 +14,38 @@ $dim-grey: #696969;
border-radius: 2.5rem;
}

}

ion-icon {
width: 1.5rem;
height: 1.5rem;
}

ion-input {
font-size: 1.4rem !important;
--color: #696969 !important;
font-weight: 400 !important;
width: 25rem !important;

input {
--padding-start: 1rem;
ion-icon {
width: 1.5rem;
height: 1.5rem;
}
ion-input {
font-size: 1.4rem !important;
--color: #696969 !important;
font-weight: 400 !important;
width: 25rem !important;
input {
--padding-start: 1rem;
}
}
.inputHolder {
border-radius: 2.5rem;
width: 32rem;
height: 4rem;
margin: 0.2rem;
}
ion-label {
margin: 0;
margin-left: 0.8rem;
--color: #696969 !important;
font-size: 1.4rem !important;
}
}

ion-item {
border-radius: 2.5rem;
width: 32rem;
height: 4rem;
margin: 0.2rem;

}

ion-label {
margin: 0;
margin-left: 0.8rem;
--color: #696969 !important;
font-size: 1.4rem !important;
}



+ 1
- 1
src/components/formInput/Input.tsx Voir le fichier

@@ -12,7 +12,7 @@ const Input: React.FC<Props> = (props) => {
return (
<div className={styles.inputContainer}>
<div className={styles.inputHolder}>
<IonItem lines='none'>
<IonItem lines='none' className={styles.inputHolder}>
{props.icon &&
<IonIcon src={props.icon}></IonIcon>
}


+ 77
- 75
src/components/timeSlot/TimeSlot.module.scss Voir le fichier

@@ -20,88 +20,90 @@
}
}

.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;
}
.timeSlotContent {
.month {
color: #959595;
font-size: 1.6rem;
margin-top: 3.5rem;
margin-left: 3rem;
}
}

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

.time {
.dateSlotHolder {
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;
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;
}
}
}
}

.timeSlotButton {
text-decoration: none;

ion-button {
.timeSlotHolder {
width: 90%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 2rem;
margin: 0 auto;
margin-top: 18vh;
margin-bottom: 0;
--background: #DDDDDD;
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;
}
}
}

.active {
box-shadow: 0px 0px 10px #00000039;
div {
color: #33CE93;
.timeSlotButton {
text-decoration: none;
ion-button {
width: 90%;
margin: 0 auto;
margin-top: 18vh;
margin-bottom: 0;
--background: #DDDDDD;
}
}
}

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

.buttonActive {
ion-button {
--background: var(--primary-button-color);
.active {
box-shadow: 0px 0px 10px #00000039;
div {
color: #33CE93;
}
}
}
.activeTime {
color: #33CE93 !important;
box-shadow: 0px 0px 10px #00000039;
}
.buttonActive {
ion-button {
--background: var(--primary-button-color);
}
}
}

+ 1
- 1
src/components/timeSlot/TimeSlot.tsx Voir le fichier

@@ -69,7 +69,7 @@ const TimeSlot: React.FC<OwnProps> = (props) => {
<h4>Find a Slot</h4>
</header>

<IonContent>
<IonContent className={styles.timeSlotContent}>
<div className={styles.month}>
{props.month}
</div>


+ 1
- 1
src/pages/FinalInterview/FInalInterview.module.scss Voir le fichier

@@ -1,4 +1,4 @@
ion-content {
.finalInterviewContent {
display: fixed;
height: 100vh;
width: 100vw;


+ 1
- 1
src/pages/FinalInterview/FinalInterview.tsx Voir le fichier

@@ -48,7 +48,7 @@ const FinalInterview: React.FC = () => {
return (
<IonPage>
<StepHeader roundName="Final Interview" stepNumber={5} />
<IonContent>
<IonContent className={styles.finalInterviewContent}>
<div className={styles.description}>
<IonIcon src={finalInterview} />
{


+ 68
- 64
src/pages/FinalInterview/FinalInterviewResult.module.scss Voir le fichier

@@ -1,75 +1,79 @@
.finalInterviewResults {

.description {
.icon {
margin-top: 4rem;
display: flex;
justify-content: center;
ion-icon {
width: 10rem;
height: 10rem;
}
}
.finalInterviewResultsContent {

.stepDescription {
h4 {
color: #363636;
text-align: center;
font-size: 2.4rem;
font-weight: 300;
letter-spacing: 0.024rem;
margin-top: 3rem;
.description {
.icon {
margin-top: 4rem;
display: flex;
justify-content: center;
ion-icon {
width: 10rem;
height: 10rem;
}
}
p {
color: #868686;
font-size: 1.4rem;
text-align: center;
width: 90%;
margin: 0 auto;
margin-top: 2rem;
line-height: 1.8;
.stepDescription {
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;
}
}
}
}

.buttonHolder {
display: flex;
justify-content: space-around;
align-items: center;
width: 95%;
margin: 0 auto;
margin-top: 22rem;
a {
text-decoration: none;
}

.dashboardButton {
width: 18rem;
ion-button {
margin: 0;
--border-style: solid;
--border-width: 0.1rem;
--border-color: var(--primary-button-color);
--background: transparent;
--color: var(--primary-button-color);
font-size: 1.6rem;
font-weight: 600;
.buttonHolder {
display: flex;
justify-content: space-around;
align-items: center;
width: 95%;
margin: 0 auto;
margin-top: 22rem;
a {
text-decoration: none;
}
}

.nextStepButton {
width: 18rem;

margin-left: 1rem;
ion-button {

font-size: 1.6rem;
font-weight: 600;
--background: var(--primary-button-color);

.dashboardButton {
width: 18rem;
ion-button {
margin: 0;
--border-style: solid;
--border-width: 0.1rem;
--border-color: var(--primary-button-color);
--background: transparent;
--color: var(--primary-button-color);
font-size: 1.6rem;
font-weight: 600;
}
}
.nextStepButton {
width: 18rem;
margin-left: 1rem;
ion-button {
font-size: 1.6rem;
font-weight: 600;
--background: var(--primary-button-color);
}
}
}
}
}

+ 1
- 1
src/pages/FinalInterview/FinalInterviewResult.tsx Voir le fichier

@@ -11,7 +11,7 @@ const FinalInterviewResult: React.FC = () => {
<IonPage className={styles.finalInterviewResults}>
<StepHeader roundName="Final Interview" stepNumber={5} />

<IonContent>
<IonContent className={styles.finalInterviewResultsContent}>

<div className={styles.description}>
<div className={styles.icon}>


+ 1
- 1
src/pages/Quiz/Options.module.scss Voir le fichier

@@ -7,7 +7,7 @@
justify-content: space-around;
height: 40vh;

ion-item {
.options {
width: 99%;
margin: 0 auto;
--background: white;


+ 1
- 1
src/pages/Quiz/Options.tsx Voir le fichier

@@ -15,7 +15,7 @@ const Options: React.FC<OwnProps> = (props) => {

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


+ 1
- 1
src/pages/closingDocs/ClosingDocs.tsx Voir le fichier

@@ -16,7 +16,7 @@ const ClosingDocs: React.FC = () => {
return (
<IonPage>
<StepHeader roundName="Closing Docs" stepNumber={6} />
<IonContent>
<IonContent className={styles.closingDocsContent}>
<div className={styles.closingDocs} >

<IonIcon src={closingDocsImg} className={styles.closingDocsImg} />


+ 1
- 1
src/pages/interviewRounds/StepDescreption.tsx Voir le fichier

@@ -44,7 +44,7 @@ const StepsDescription: React.FC<Props> = (props) => {
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

<Link to="/" className={styles.button}>
<Link to={props.link} className={styles.button}>
<IonButton shape="round" expand='block'>{props.buttonText}</IonButton>
</Link>



+ 77
- 75
src/pages/preliminaryRound/PreliminaryRound.module.scss Voir le fichier

@@ -1,90 +1,92 @@
.roundDescription {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: space-around;
height: 44.5vh;
width: 90%;
margin: 0 auto;
ion-icon {
width: 8rem;
height: 8rem;
padding-top: 2rem;
}
.preliminaryRoundContent{
.roundDescription {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: space-around;
height: 44.5vh;
width: 90%;
margin: 0 auto;
ion-icon {
width: 8rem;
height: 8rem;
padding-top: 2rem;
}

.heading {
color: #363636;
font-weight: 300;
font-size: 2.4rem;
}
.heading {
color: #363636;
font-weight: 300;
font-size: 2.4rem;
}

.description {
color: #868686;
font-size: 1.4rem;
line-height: 2.8rem;
.description {
color: #868686;
font-size: 1.4rem;
line-height: 2.8rem;

}
}
}

.quizDescription {
height: 44vh;
display: flex;
flex-direction: column;
justify-content: space-around;
background-color: #151515;
background-image: url("../../assets/icons/desktop-particles-2.svg");
background-repeat: no-repeat;
background-position: 25% 30%;
border-top-right-radius: 75%;
.quizDescription {
height: 44vh;
display: flex;
flex-direction: column;
justify-content: space-around;
background-color: #151515;
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: 50%;
right: 0;
left: 0;
bottom: 0;
background-color: #151515;
height: 30vh;
transform: skewY(5deg);
z-index: -1;
}
&::before {
position: absolute;
content:" ";
top: 50%;
right: 0;
left: 0;
bottom: 0;
background-color: #151515;
height: 30vh;
transform: skewY(5deg);
z-index: -1;
}

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

.description {
margin-left: 2rem;
.textHolder {
display: flex;
margin-bottom: 2rem;
.text {
color: #E5E5E5;
font-size: 1.4rem;
font-weight: 600;
margin-left: 2rem;
.description {
margin-left: 2rem;
.textHolder {
display: flex;
margin-bottom: 2rem;
.text {
color: #E5E5E5;
font-size: 1.4rem;
font-weight: 600;
margin-left: 2rem;
}
}
}
}

ion-button {
--background: var(--primary-button-color);
font-weight: 500;
font-family: 'Poppins', sans-serif;
width: 90%;
margin: 0 auto;
}
ion-button {
--background: var(--primary-button-color);
font-weight: 500;
font-family: 'Poppins', sans-serif;
width: 90%;
margin: 0 auto;
}

.wish {
color: #E5E5E5;
font-size: 1.8rem;
text-align: center;
.wish {
color: #E5E5E5;
font-size: 1.8rem;
text-align: center;
}
}
}

+ 1
- 1
src/pages/preliminaryRound/PreliminaryRound.tsx Voir le fichier

@@ -11,7 +11,7 @@ const PreliminaryRound: React.FC = () => {
return (
<IonPage>
<StepHeader stepNumber={2} roundName="Preliminary Round" />
<IonContent>
<IonContent className={styles.preliminaryRoundContent}>
<div className={styles.roundDescription}>

<IonIcon src={preliminaryRound}></IonIcon>


+ 1
- 1
src/pages/preliminaryRoundResults/PreliminaryRoundResults.module.scss Voir le fichier

@@ -1,4 +1,4 @@
ion-content {
.preliminaryRoundResultsContent {
.quizResultsContainer {
height: 88vh;
.upfold {


+ 1
- 1
src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx Voir le fichier

@@ -12,7 +12,7 @@ const PreliminaryRoundResults: React.FC = () => {
return (
<IonPage>
<StepHeader stepNumber={2} roundName="Preliminary Round" />
<IonContent>
<IonContent className={styles.preliminaryRoundResultsContent}>
<div className={styles.quizResultsContainer}>
<div className={styles.upfold}>
<IonIcon src={goodJobIcon} />


+ 1
- 1
src/pages/technicalInterview/TechnicalInterview.module.scss Voir le fichier

@@ -1,4 +1,4 @@
ion-content {
.techinicalInterviewContent {
display: fixed;
height: 100vh;
width: 100vw;


+ 1
- 1
src/pages/technicalInterview/TechnicalInterview.tsx Voir le fichier

@@ -48,7 +48,7 @@ const TechnicalInterview: React.FC = () => {
return (
<IonPage>
<StepHeader stepNumber={3} roundName="Technical Interview" />
<IonContent>
<IonContent className={styles.techinicalInterviewContent}>
<div className={styles.description}>
<IonIcon src={techinicalInterview} />
{


Écrire Aperçu
Chargement…
Annuler
Enregistrer