[#140654507] #12 Styling vacancy

assets/css/custom.css

@@ -100,22 +100,32 @@ font-size: 30px;
 }
 
 .coverLetter{
-  margin-top:15px;
+  margin-top:30px;
+
 }
 
 .linkCV{
   float: right;
-  margin-top: 10px;
+  margin-top: 30px;
+  margin-bottom: 10px;
 }
 
 .registerForm{
-  width: 800px;
   margin: 0 auto;
   padding:50px;
   background-color: #3B8686;
 
 }
 
+item{
+  color:black;
+}
+
+textarea{
+  width: 800px !important;
+  height: 160px !important;
+}
+
 .register{
   background-color:#3B8686;
 
@@ -142,4 +152,8 @@ input.active:invalid {
 
 card .formRegis{
   margin-top: 100px;
+}
+
+itemLowongan{
+  color: black;
 }
\ No newline at end of file

assets/js/Dashboard.jsx

@@ -11,7 +11,7 @@ export default class Dashboard extends React.Component {
 
   render = () => (
     <div>
-      <TopMenu color="blue" />
+      <TopMenu  />
       {this.props.children}
     </div>
   )

assets/js/components/Lowongan.jsx

@@ -16,20 +16,21 @@ export default class Lowongan extends React.Component {
         <Item >
           {image}
           <Item.Content verticalAlign="middle">
-            <Item.Header>{this.props.header}</Item.Header>
+            <Item.Header>
+
+                {this.props.header}
+
+            </Item.Header>
             <Item.Description>{this.props.content}</Item.Description>
-            <Item.Extra>
+            <Item.Content>
 
-                <h3>{ this.props.data.data1 }</h3>
-                <h4>PT. Koding Kuat </h4>
-                <h5> JL.Kali deres utara no.1 </h5>
-                <h5> Jakarta Barat, DKI Jakarta</h5>
+                    <h3>{ this.props.data.data1 }</h3>
+                    <h4>PT. Koding Kuat </h4>
+                    <h5> JL.Kali deres utara no.1 Jakarta Barat, DKI Jakarta</h5>
 
-                <ModalPendaftaran id={1} data={ { header: 'Deskripsi Lowongan', description: 'Lorem ipsum dolor sit amet, consectetur' +
-                ' adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim ' +
-                'veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.' } } buttonTitle="Daftar"  />
+                <ModalPendaftaran id={1} data={ { header: 'Deskripsi Lowongan', description: 'Lorem ipsum dolor sit amet'} } buttonTitle="Daftar"  />
 
-            </Item.Extra>
+            </Item.Content>
           </Item.Content>
         </Item>
 

assets/js/components/ModalPendaftaran.jsx

@@ -46,26 +46,28 @@ export default class ModalPendaftaran extends React.Component {
     >
 
       <Modal.Header>{this.props.data.header}</Modal.Header>
-      <Modal.Content image>
-        <div className="image">
-          <Icon name="right arrow" />
-        </div>
+
+      <Modal.Content>
+
         <Modal.Description>
           <Modal.Header> <h3> Deskripsi Lowongan </h3></Modal.Header>
           {this.props.data.description}
 
-          <div className="linkCV">
+        </Modal.Description>
+
+          <div className="coverLetter">
+
+            <div className="linkCV">
             <a> your latest CV </a>
           </div>
 
-          <div className="coverLetter">
             <h5> Write your Cover Letter </h5>
-            <Form>
-              <TextArea placeholder="Tell us more" onChange={this.handleChange} />
+            <Form >
+              <TextArea placeholder="Tell us more" size='big' />
             </Form>
+
           </div>
 
-        </Modal.Description>
       </Modal.Content>
       <Modal.Actions>
         <ModalAlert

assets/js/components/TopMenu.jsx

@@ -6,19 +6,19 @@ import Server from '../lib/Server';
 export default class TopMenu extends React.Component {
   state = { activeItem: 'home' };
 
-  handleItemClick = (e, { name2 }) => this.setState({ activeItem: name })
-
+    handleItemClick = (e, { name }) => this.setState({ activeItem: name })
   render() {
-      const { activeItem } = this.state
+    const { activeItem } = this.state;
+
     return (
-      <Menu pointing secondary>
+      <Menu color='blue' pointing secondary>
         <Image as="a" size="small" src="/assets/img/logo.png" href="/" />
         <Menu.Menu position="right">
-          <Menu.Item as={Link} to="/lowongan" name="home" />
-          <Menu.Item as={Link} to="/profile" name="profil" />
+          <Menu.Item as={Link} to="/lowongan" name='home'  active={activeItem === 'home'} onClick={this.handleItemClick} />
+          <Menu.Item as={Link} to="/profile" name='profil' active={activeItem === 'profil'} onClick={this.handleItemClick}/>
           {Server.isLoggedIn() ?
-            <Menu.Item as={Link} href="/api/api-auth/logout/?next=/" name="logout" /> :
-            <Menu.Item as={Link} to="/login" name="login" />
+            <Menu.Item as={Link} href="/api/api-auth/logout/?next=/" name='logout' active={activeItem === 'logout'} onClick={this.handleItemClick}/> :
+            <Menu.Item as={Link} to="/login" name='login' active={activeItem === 'login'} onClick={this.handleItemClick} />
                 }
         </Menu.Menu>
       </Menu>

assets/js/components/VacancyList.jsx

@@ -15,6 +15,7 @@ export default class VacancyList extends React.Component {
   }
 
   render = () => (
+
      <Item.Group relaxed>
       {/*<Item.Group relaxed>*/}
         { this.generateVacancies() }