kj
/
webtrigon-job-portal
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

created form input component

develop
Ajay_S 3 years ago
parent
3138f627d9
commit
2ce558c5c8
18 changed files with 234 additions and 582 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -0
      src/App.scss
  2. +3
    -6
      src/App.tsx
  3. +3
    -0
      src/assets/icons/user.svg
  4. +8
    -11
      src/common/styles/global.scss
  5. +0
    -142
      src/components/JobDescriptionModal.module.scss
  6. +0
    -59
      src/components/JobDescriptionModal.tsx
  7. +0
    -116
      src/components/JobsCard.module.scss
  8. +0
    -51
      src/components/JobsCard.tsx
  9. +64
    -0
      src/components/button/Button.module.scss
  10. +49
    -0
      src/components/button/Button.tsx
  11. +49
    -0
      src/components/formInput/Input.module.scss
  12. +32
    -0
      src/components/formInput/Input.tsx
  13. +0
    -10
      src/pages/ConnectWithUs.tsx
  14. +0
    -3
      src/pages/WorkWithUs.module.scss
  15. +0
    -27
      src/pages/WorkWithUs.tsx
  16. +0
    -0
      src/pages/connectWithUs/ConnectWithUs.module.scss
  17. +23
    -0
      src/pages/connectWithUs/ConnectWithUs.tsx
  18. +2
    -157
      src/theme/variables.scss

+ 1
- 0
src/App.scss View File

@@ -1,3 +1,4 @@
@import '/src/common/styles/global.scss';

/* Theme variables */
@import '/src/theme/variables.scss';

+ 3
- 6
src/App.tsx View File

@@ -1,7 +1,6 @@
import { Redirect, Route } from 'react-router-dom';
import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import WorkWithUs from './pages/WorkWithUs';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';
@@ -20,7 +19,8 @@ import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

import './App.scss';
import ConnectWithUs from './pages/ConnectWithUs';
import ConnectWithUs from './pages/connectWithUs/ConnectWithUs';


setupIonicReact();

@@ -28,14 +28,11 @@ const App: React.FC = () => (
<IonApp>
<IonReactRouter>
<IonRouterOutlet>
<Route exact path="/WorkWithUs">
<WorkWithUs />
</Route>
<Route exact path="/ConnectWithUs">
<ConnectWithUs />
</Route>
<Route exact path="/">
<Redirect to="/WorkWithUs" />
<Redirect to="/ConnectWithUs" />
</Route>
</IonRouterOutlet>
</IonReactRouter>


+ 3
- 0
src/assets/icons/user.svg View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="11.089" height="11.089" viewBox="0 0 11.089 11.089">
<path id="user" d="M11.544,11.544a2.772,2.772,0,1,1,2.772-2.772A2.772,2.772,0,0,1,11.544,11.544Zm0,2.079c2.208,0,4.189.4,5.544,2.123v1.342H6V15.747C7.355,14.019,9.336,13.624,11.544,13.624Z" transform="translate(-6 -6)" fill="#afafaf"/>
</svg>

+ 8
- 11
src/common/styles/global.scss View File

@@ -1,15 +1,12 @@
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&family=Poppins:wght@100&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600&family=Poppins:wght@200;300;400;500;600&display=swap');
:root {
/* font size */
font-size: 62.5%;
}

body {
font-family: 'Poppins', sans-serif;
/* box-sizing */
box-sizing: border-box;
}

/* margin and padding */
margin: 0;
padding: 0;
}
h1,h2,h3,h4,h5,h6 {
font-family: 'Oswald', sans-serif;
}

+ 0
- 142
src/components/JobDescriptionModal.module.scss View File

@@ -1,142 +0,0 @@
.tempDiv {
background-color: black;
height: 100vh;
width: 100vw;
.descriptionModal {
position: absolute;
left: 0;
// top: 20%;
top: calc(100vh - 56rem);
background-color: #FFFFFF;
// height: 80vh;
// height: 80%;
height: 56rem;
width: 100vw;
border-radius: 3rem 3rem 0rem 0rem;
display: flex;
flex-direction: column;
justify-content: space-between;

.iconHolder {
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 2.5rem;

.developerIcon {
background-color: #F2F2F2;
border-radius: 2.5rem;
width: 5rem;
height: 5rem;
svg {
margin-left: 1.4rem;
margin-top: 1.2rem;
width: 2.8rem;
height: 2.8rem;
}
}
}

.roleHeader {
text-align: center;
// margin: 2rem 0;
h3 {
color: #676767;
font-size: 2.1rem;
margin: 0;
font-family: 'Oswald', sans-serif;
font-weight: 600;
letter-spacing: 0.1rem;
margin-bottom: 0.4rem;
}

div {
color: #A3A3A3;
font-size: 1.4rem;
font-weight: 600;
}
}

.jd {
display: flex;
justify-content: center;

button {
width: 16rem;
height: 4.5rem;
border-radius: 1rem;
font-size: 1.4rem;
font-weight: 600;
}

.requirement {
background-color: #DAF3F5;
color: #6CB3B9;
}

.description {
background-color: #EDEDED;
color: #A3A3A3;
margin-left: 2rem;
}
}

.qualification {
width: 95%;
overflow-y: scroll;
max-height: 28.2rem;
h4 {
font-family: 'Oswald', sans-serif;
color: #747474;
font-size: 1.8rem;
font-weight: 600;
margin-left: 2.8rem;
}

ul {
list-style: none;

li {
color: #A3A3A3;
font-weight: 600;
font-size: 1.4rem;
line-height: 1.6;
margin-left: 1.8rem;
position: relative;
&::before {
content: "";
position: absolute;
background: #BEBEBE;
width: 0.8rem;
height: 0.8rem;
border-radius: 50%;
left: -3rem;
top: 0.7rem;
}
}
}
}

.applyBtn {
display: flex;
justify-content: center;
// margin-bottom: 2rem;
background-color: #FFFFFF;
box-shadow: 0rem -0.2rem 2.5rem #0000001C;
height: 7.7rem;
button {
width: 30rem;
height: 4rem;
background-color: #33CE93;
border-radius: 2.5rem;
color: #FFFFFF;
font-size: 1.6rem;
font-weight: 600;
align-self: center;
}
}
}
}

+ 0
- 59
src/components/JobDescriptionModal.tsx View File

@@ -1,59 +0,0 @@
import styles from './JobDescriptionModal.module.scss'

import { ReactComponent as BackIcon } from '../assets/icons/back-2.svg';
import { ReactComponent as ShareIcon } from '../assets/icons/share.svg';
import { ReactComponent as DeveloperIcon } from '../assets/icons/Developer.svg';


interface Props { }

const JobDescriptionModal: React.FC<Props> = (props) => {
return (
<div className={styles.tempDiv}>
<div className={styles.descriptionModal}>
<div className={styles.iconHolder}>
<div className={styles.backIcon}>
<BackIcon />
</div>
<div className={styles.developerIcon}>
<DeveloperIcon />
</div>
<div className={styles.shareIcon}>
<ShareIcon />
</div>
</div>
<div className={styles.roleHeader}>
<h3>Software Developer</h3>
<div>Full stack developer</div>
</div>
<div className={styles.jd}>
<button className={styles.requirement}>Min Requirement</button>
<button className={styles.description}>Job Description</button>
</div>
<div className={styles.qualification}>
<h4>Minimum Qualification:</h4>

<ul>
<li>Lorem, ipsum dolor sit amet consectetur elit.</li>
<li>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Lorem, ipsum dolor sit amet consectetur elit.</li>
<li>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Lorem, ipsum dolor sit amet consectetur elit.</li>
<li>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Lorem, ipsum dolor sit amet consectetur elit.</li>
<li>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</li>
</ul>

</div>
<div className={styles.applyBtn}>
<button>Apply Now!</button>
</div>
</div>
</div>

)
}

export default JobDescriptionModal;

+ 0
- 116
src/components/JobsCard.module.scss View File

@@ -1,116 +0,0 @@
.jobsCard {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
background-color: #FFFFFF;
box-shadow: 0rem 0rem 0.6rem #00000029;
width: 34rem;
height: 32rem;
border-radius: 2.5rem;
margin-left: 1.5rem;
margin-top: 5rem;
.jobsCardHeader {
display: flex;
align-items: center;
justify-content: space-evenly;
width: 90%;
border-bottom: 0.1rem solid #EFEFEF;
height: 8rem;

.developerIcon {
background-color: #F2F2F2;
border-radius: 2.5rem;
width: 5rem;
height: 5rem;

svg {
margin-left: 1.5rem;
margin-top: 1.2rem;
width: 2.5rem;
height: 2.5rem;
}
}
.jobRole {
text-align: left;
width: 20rem;
h3 {
font-size: 2.1rem;
color: #5C5A5A;
margin: 0;
font-family: 'Oswald', sans-serif;
font-weight: 600;
letter-spacing: 0.1rem;
margin-bottom: 0.4rem;
}
div {
color: #C1C1C1;
font-size: 1.2rem;
text-transform: uppercase;
}
}

.shareIcon {
svg {
width: 1.5rem;
height: 1.5rem;
}
}
}

.jobsCardDetails {
width: 90%;
font-size: 1.3rem;
color: #868686;
height: 60%;
display: flex;
flex-direction: column;
justify-content: space-between;
// margin-left: 4rem;

.openPosition {
display: flex;
align-items: center;
margin-left: 2rem;

span {
margin-left: 2.5rem;
}
}

.experience {
display: flex;
align-items: center;
margin-left: 2rem;
span {
margin-left: 1.4rem;
}
}

.location {
display: flex;
align-items: center;
margin-left: 2rem;
span {
margin-left: 2.5rem;
}
}

button {
width: 30rem;
height: 4.5rem;
border: 0.1rem solid #2CC38C;
color: #2CC38C;
background-color: transparent;
border-radius: 2.7rem;
font-size: 1.4rem;
font-weight: 600;
}
}
}

+ 0
- 51
src/components/JobsCard.tsx View File

@@ -1,51 +0,0 @@
import styles from './JobsCard.module.scss';

import { ReactComponent as ShareIcon } from '../assets/icons/share.svg';
import { ReactComponent as ChairIcon } from '../assets/icons/officechair.svg';
import { ReactComponent as InfiniteIcon } from '../assets/icons/infinite.svg';
import { ReactComponent as PinIcon } from '../assets/icons/pin.svg';

interface Props {
role: string;
team: string;
openPosition: string;
experience: string;
location: string;
icon: JSX.Element,

}
const JobsCard: React.FC<Props> = (props: Props) => {
return (
<div className={styles.jobsCard}>
<header className={styles.jobsCardHeader}>
<div className={styles.developerIcon}>
{props.icon}
</div>
<div className={styles.jobRole}>
<h3>{props.role}</h3>
<div>{props.team}</div>
</div>
<div className={styles.shareIcon}>
<ShareIcon />
</div>
</header>
<section className={styles.jobsCardDetails}>
<div className={styles.openPosition}>
<ChairIcon />
<span>{props.openPosition}</span>
</div>
<div className={styles.experience}>
<InfiniteIcon />
<span>{props.experience}</span>
</div>
<div className={styles.location}>
<PinIcon />
<span>{props.location}</span>
</div>
<button>Show more details</button>
</section>
</div>
);
}

export default JobsCard;

+ 64
- 0
src/components/button/Button.module.scss View File

@@ -0,0 +1,64 @@
$steam: #DDDDDD;

.CommonButton {

display: inline-flex;
align-items: center;
justify-content: center;
position: relative;

span {
font-weight: 600;
color: white;
}

&:disabled {
opacity: 0.5;
pointer-events: none;
background-color: $steam;
border-color: $steam;
font-weight: 600;
}
}

.Small {
height: 3rem;
min-width: 3rem;
font-size: 1.2rem;
border-radius: 1.5rem;
}

.Medium {
height: 4rem;
min-width: 15rem;
margin-top: 1.2rem;
margin-bottom: 1.2rem;
border-radius: 2.5rem;
span {
font-size: 1.2rem;
font-weight: 600;
}
}

.Large {
height: 4rem;
min-width: 35rem;
font-size: 1.6rem;
border-radius: 2.5rem;
margin: 2rem 2rem;
}

.Primary {
background-color: var(--primary-button-color);
color: white;
border-color: var(--primary-button-color);
}

.Secondary {
background-color: transparent;
border-color: var(--primary-button-color);
color: var(--primary-button-color);
}

+ 49
- 0
src/components/button/Button.tsx View File

@@ -0,0 +1,49 @@
import styles from './Button.module.scss';

interface Props {
text: string;
isDisabled?: boolean;
type?: 'primary' | 'secondary';
size?: 'small' | 'medium' | 'large';
}

const Button: React.FC<Props> = (props) => {

const getButtonClass = () => {
let buttonType, buttonSize;

if (props.type) {
switch (props.type) {
case 'primary': buttonType = styles.Primary; break;
case 'secondary': buttonType = styles.Secondary; break;
default: buttonType = styles.Primary;
}
} else {
buttonType = styles.Primary;
}

if (props.size) {
switch (props.size) {
case 'small': buttonSize = styles.Small; break;
case 'medium': buttonSize = styles.Medium; break;
case 'large': buttonSize = styles.Large; break;
default: buttonSize = styles.Medium;
}
} else {
buttonSize = styles.Medium;
}

return styles.CommonButton + ' ' + buttonType + ' ' + buttonSize;

}

return (
<button type="button"
className={getButtonClass()}
disabled={props.isDisabled} >
{props.text && <span className={styles.text}> {props.text} </span>}
</button>
);
}

export default Button;

+ 49
- 0
src/components/formInput/Input.module.scss View File

@@ -0,0 +1,49 @@
$clouded-vision: #D1D1D1;

.inputContainer {
display: flex;
// align-items: center;
flex-direction: column;
// margin-top: 5rem;
// margin-left: 1.5rem;
position: relative;

.icon {
position: absolute;
left: 2rem;
top: 1.2rem;
}

}

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

ion-input {
position: relative;
border: 0.1rem solid $clouded-vision;
box-shadow: inset 0rem 0rem 0.5rem $clouded-vision;
border-radius: 2.5rem;
font-size: 1.4rem !important;
--color: #696969 !important;
font-weight: 400 !important;
width: 25rem !important;

input {
--padding-start: 4rem;
--placeholder-color: $clouded-vision;
}
}

ion-item {
width: 34rem;
}

ion-label {
color: #696969;
font-size: 1.4rem;
margin-left: 4rem;
margin-bottom: 0.8rem;
}

+ 32
- 0
src/components/formInput/Input.tsx View File

@@ -0,0 +1,32 @@
import styles from './Input.module.scss';
import { IonIcon, IonInput, IonItem, IonLabel } from '@ionic/react';

interface Props {
placeholder?: string;
type?: "text" | "email" | "password" | "number";
icon?: string;
text?: string;
}

const Input: React.FC<Props> = (props) => {
return (
<div className={styles.inputContainer}>
{props.text &&
<IonLabel>{props.text}</IonLabel>
}

<IonItem lines='none'>
<div className={styles.icon}>
{props.icon &&
<IonIcon src={props.icon}></IonIcon>
}
</div>
<IonInput type={props.type ? props.type : "text"}
placeholder={props.placeholder ? props.placeholder : ""}></IonInput>
</IonItem>

</div>
)
}

export default Input;

+ 0
- 10
src/pages/ConnectWithUs.tsx View File

@@ -1,10 +0,0 @@
import styles from './WorkWithUs.module.scss';

const ConnectWithUs = () => {
return (
<div>
</div>
)
}

export default ConnectWithUs;

+ 0
- 3
src/pages/WorkWithUs.module.scss View File

@@ -1,3 +0,0 @@
// IonContent {
// --background-color: black;
// }

+ 0
- 27
src/pages/WorkWithUs.tsx View File

@@ -1,27 +0,0 @@
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import JobsCard from '../components/JobsCard';
import { ReactComponent as DeveloperIcon } from '../assets/icons/Developer.svg';

import styles from './WorkWithUs.module.scss';
import JobDescriptionModal from '../components/JobDescriptionModal';

const WorkWithUs: React.FC = () => {
return (
<IonPage>
<IonContent fullscreen>
{/* <JobsCard
role='Software Developer'
team='engineering'
openPosition='4 Open Position'
experience='Minimum 3 years Experience'
location='Montreal, Canada'
icon={<DeveloperIcon />} /> */}

{/* <JobDescriptionModal /> */}

</IonContent>
</IonPage>
);
};

export default WorkWithUs;

src/pages/ConnectWithUs.module.scss → src/pages/connectWithUs/ConnectWithUs.module.scss View File


+ 23
- 0
src/pages/connectWithUs/ConnectWithUs.tsx View File

@@ -0,0 +1,23 @@
import Button from '../../components/button/Button';
import styles from './ConnectWithUs.module.scss';

import { IonButton } from '@ionic/react';
import userIcon from '../../assets/icons/user.svg';

import Input from '../../components/formInput/Input';

const ConnectWithUs: React.FC = () => {
return (
<div className='connectWithUs'>

<Input
icon={userIcon}
placeholder="Enter Your Name"
text='Name' />

{/* <IonButton shape="round" color='success' expand='block'>Success</IonButton> */}
</div>
)
}

export default ConnectWithUs;

+ 2
- 157
src/theme/variables.scss View File

@@ -76,163 +76,8 @@ http://ionicframework.com/docs/theming/ */
--ion-color-light-contrast-rgb: 0, 0, 0;
--ion-color-light-shade: #d7d8da;
--ion-color-light-tint: #f5f6f9;
}

@media (prefers-color-scheme: dark) {
/*
* Dark Colors
* -------------------------------------------
*/
// button color
--primary-button-color: #33CE93;

body {
--ion-color-primary: #428cff;
--ion-color-primary-rgb: 66, 140, 255;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255, 255, 255;
--ion-color-primary-shade: #3a7be0;
--ion-color-primary-tint: #5598ff;

--ion-color-secondary: #50c8ff;
--ion-color-secondary-rgb: 80, 200, 255;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255, 255, 255;
--ion-color-secondary-shade: #46b0e0;
--ion-color-secondary-tint: #62ceff;

--ion-color-tertiary: #6a64ff;
--ion-color-tertiary-rgb: 106, 100, 255;
--ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
--ion-color-tertiary-shade: #5d58e0;
--ion-color-tertiary-tint: #7974ff;

--ion-color-success: #2fdf75;
--ion-color-success-rgb: 47, 223, 117;
--ion-color-success-contrast: #000000;
--ion-color-success-contrast-rgb: 0, 0, 0;
--ion-color-success-shade: #29c467;
--ion-color-success-tint: #44e283;

--ion-color-warning: #ffd534;
--ion-color-warning-rgb: 255, 213, 52;
--ion-color-warning-contrast: #000000;
--ion-color-warning-contrast-rgb: 0, 0, 0;
--ion-color-warning-shade: #e0bb2e;
--ion-color-warning-tint: #ffd948;

--ion-color-danger: #ff4961;
--ion-color-danger-rgb: 255, 73, 97;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255, 255, 255;
--ion-color-danger-shade: #e04055;
--ion-color-danger-tint: #ff5b71;

--ion-color-dark: #f4f5f8;
--ion-color-dark-rgb: 244, 245, 248;
--ion-color-dark-contrast: #000000;
--ion-color-dark-contrast-rgb: 0, 0, 0;
--ion-color-dark-shade: #d7d8da;
--ion-color-dark-tint: #f5f6f9;

--ion-color-medium: #989aa2;
--ion-color-medium-rgb: 152, 154, 162;
--ion-color-medium-contrast: #000000;
--ion-color-medium-contrast-rgb: 0, 0, 0;
--ion-color-medium-shade: #86888f;
--ion-color-medium-tint: #a2a4ab;

--ion-color-light: #222428;
--ion-color-light-rgb: 34, 36, 40;
--ion-color-light-contrast: #ffffff;
--ion-color-light-contrast-rgb: 255, 255, 255;
--ion-color-light-shade: #1e2023;
--ion-color-light-tint: #383a3e;
}

/*
* iOS Dark Theme
* -------------------------------------------
*/

.ios body {
--ion-background-color: #000000;
--ion-background-color-rgb: 0, 0, 0;

--ion-text-color: #ffffff;
--ion-text-color-rgb: 255, 255, 255;

--ion-color-step-50: #0d0d0d;
--ion-color-step-100: #1a1a1a;
--ion-color-step-150: #262626;
--ion-color-step-200: #333333;
--ion-color-step-250: #404040;
--ion-color-step-300: #4d4d4d;
--ion-color-step-350: #595959;
--ion-color-step-400: #666666;
--ion-color-step-450: #737373;
--ion-color-step-500: #808080;
--ion-color-step-550: #8c8c8c;
--ion-color-step-600: #999999;
--ion-color-step-650: #a6a6a6;
--ion-color-step-700: #b3b3b3;
--ion-color-step-750: #bfbfbf;
--ion-color-step-800: #cccccc;
--ion-color-step-850: #d9d9d9;
--ion-color-step-900: #e6e6e6;
--ion-color-step-950: #f2f2f2;

--ion-item-background: #000000;

--ion-card-background: #1c1c1d;
}

.ios ion-modal {
--ion-background-color: var(--ion-color-step-100);
--ion-toolbar-background: var(--ion-color-step-150);
--ion-toolbar-border-color: var(--ion-color-step-250);
}


/*
* Material Design Dark Theme
* -------------------------------------------
*/

.md body {
--ion-background-color: #121212;
--ion-background-color-rgb: 18, 18, 18;

--ion-text-color: #ffffff;
--ion-text-color-rgb: 255, 255, 255;

--ion-border-color: #222222;

--ion-color-step-50: #1e1e1e;
--ion-color-step-100: #2a2a2a;
--ion-color-step-150: #363636;
--ion-color-step-200: #414141;
--ion-color-step-250: #4d4d4d;
--ion-color-step-300: #595959;
--ion-color-step-350: #656565;
--ion-color-step-400: #717171;
--ion-color-step-450: #7d7d7d;
--ion-color-step-500: #898989;
--ion-color-step-550: #949494;
--ion-color-step-600: #a0a0a0;
--ion-color-step-650: #acacac;
--ion-color-step-700: #b8b8b8;
--ion-color-step-750: #c4c4c4;
--ion-color-step-800: #d0d0d0;
--ion-color-step-850: #dbdbdb;
--ion-color-step-900: #e7e7e7;
--ion-color-step-950: #f3f3f3;

--ion-item-background: #1e1e1e;

--ion-toolbar-background: #1f1f1f;

--ion-tab-bar-background: #1f1f1f;

--ion-card-background: #1e1e1e;
}
}

Write Preview
Loading…
Cancel
Save