no message

assets/css/custom.css

@@ -244,7 +244,29 @@ card .formRegis{
   margin-right: 10%;
 }
 
+.ui.segment.biodata-section{
+  background-color: #343838;
+}
+
+.ui.segment.biodata-section h2{
+  color: white;
+}
 
+.ui.segment.biodata-section h3{
+  color: white;
+}
+
+.ui.segment.biodata-section h5{
+  color: white;
+}
+
+.transkrip{
+  color: white;
+}
+
+.ui.segment.biodata-section b{
+  color: white;
+}
 .admin-bar{
   margin: 0;
   padding: 0 10px 0 0;

assets/js/ProfilePage.jsx

 import React from 'react';
-import { Segment, Image, Header, Icon, Checkbox, Container, Button, Form } from 'semantic-ui-react';
+import { Segment, Image, Header, Icon, Checkbox, Container, Button, Form, Grid, Card } from 'semantic-ui-react';
 import Server from './lib/Server';
 import ModalAlert from './components/ModalAlert';
 
@@ -78,7 +78,7 @@ export default class ProfilePage extends React.Component {
       }
     });
     Server.submit(`/profiles/students/${this.state.id}/`, submitForm, 'PATCH').then(() => {
-      this.modalAlert.open('Profil berhasil diperbaharui', 'Silakan periksa kembali profil anda' );
+      this.modalAlert.open('Profil berhasil diperbaharui', 'Silakan periksa kembali profil anda');
     }, error => error.then((r) => {
       this.modalAlert.open('Pembaharuan profil gagal', r.error);
     }));
@@ -134,7 +134,7 @@ export default class ProfilePage extends React.Component {
             <Form.Field>
               <Checkbox
                 onChange={this.handleCheckbox}
-                checked={ this.state.show_transcript ? true : false }
+                checked={!!this.state.show_transcript}
                 label="Ijinkan perusahaan tempat saya mendaftar untuk melihat transkrip akademik saya"
                 name="show_transcript"
               />
@@ -152,28 +152,96 @@ export default class ProfilePage extends React.Component {
     const defaultPicture = 'http://semantic-ui.com/images/wireframe/square-image.png';
     return (
       <div className="profilePage">
-        <Segment className="biodata-section">
-          <Header as="h2" icon textAlign="center">
-            <Image src={this.state.photo ? this.state.photo : defaultPicture} size="small" shape="circular" />
-          </Header>
-          <Container textAlign="center" className="profile-biodata">
-            <div className="biodata">
-              <h3> { this.state.name } </h3>
-              <h5> { this.state.major }, { this.state.batch } </h5>
-              <h5> { this.state.email } </h5>
-              <h5> { this.state.phone_number } </h5>
-              <h5> { this.state.cityOfBirth}, { this.state.dateOfBirth } </h5>
-            </div>
-            <div className="button-profile">
-              <a href={this.state.resume ? this.state.resume : '#'} ><Button primary size="small">Resume</Button></a>
-              { this.state.show_transcript &&
-                <Button primary size="small">Transkrip</Button>
+        <Segment className="biodata-section" >
+          <Grid>
+            <Grid.Column width={3}>
+              <Header as="h2" icon textAlign="center">
+                <Image src={this.state.photo ? this.state.photo : defaultPicture} size="small" shape="circular" />
+              </Header>
+            </Grid.Column>
+
+            <Grid.Column width={6}>
+              <Container textAlign="left" className="profile-biodata">
+                <div className="biodata">
+
+                <Segment.Group basic   >
+                  <Segment  basic>
+                    <Grid>
+                      <Grid.Column width={2}>
+                        <Icon color="teal" name="users" size="big"/>
+                      </Grid.Column>
+                      <Grid.Column width={11}>
+                        <h2> { this.state.name } </h2>
+                      </Grid.Column>
+                    </Grid>
+                  </Segment>
+
+                  <Segment basic>
+                    <Grid>
+                      <Grid.Column width={2}>
+                        <Icon color="teal" name="university" size="big"/>
+                      </Grid.Column>
+                      <Grid.Column width={13}>
+                        <h3> { this.state.major }, { this.state.batch } </h3>
+                      </Grid.Column>
+                    </Grid>
+                  </Segment>
+
+                  <Segment  basic>
+                    <Grid>
+                      <Grid.Column width={2}>
+                        <Icon color="teal" name="mail" size="big"/>
+                      </Grid.Column>
+                      <Grid.Column width={13}>
+                       <h3> { this.state.email } </h3>
+                      </Grid.Column>
+                    </Grid>
+                  </Segment>
+
+
+                </Segment.Group>
+
+                </div>
+              </Container>
+
+            </Grid.Column >
+
+            <Grid.Column width={5}>
+              <Segment.Group>
+              <Segment  basic>
+                    <Grid>
+                      <Grid.Column width={2}>
+                        <Icon color="teal" name="phone" size="big"/>
+                      </Grid.Column>
+                      <Grid.Column width={13}>
+                        <h3> { this.state.phone_number }</h3>
+                      </Grid.Column>
+                    </Grid>
+                  </Segment>
+
+                  <Segment  basic>
+                    <Grid>
+                      <Grid.Column width={2}>
+                        <Icon color="teal" name="gift" size="big" />
+                      </Grid.Column>
+                      <Grid.Column width={13}>
+                       <h3> { this.state.cityOfBirth}, { this.state.dateOfBirth } </h3>
+                      </Grid.Column>
+                    </Grid>
+                  </Segment>
+              </Segment.Group>
+
+              <div className="button-profile">
+                  <a href={this.state.resume ? this.state.resume : '#'} ><Button primary size="small">Resume</Button></a>
+                  { this.state.show_transcript &&
+                  <Button primary size="small">Transkrip</Button>
               }
-            </div>
-            <div>
-              Bagikan Transkrip: <b>{ this.state.bagikanTranskrip }</b>
-            </div>
-          </Container>
+                </div>
+              <div>
+              <b> Bagikan Transkrip : { this.state.bagikanTranskrip }</b>
+                </div>
+            </Grid.Column>
+          </Grid>
         </Segment >
         { this.updateForm(this.props.route.own) }
       </div>