beautify

Author: TAN0013\Tandin Wangchen

frontend/src/Home/aboutUs.js

@@ -1,6 +1,5 @@
 import React, {Component} from 'react';
 import './styles/aboutus.css'
-import profilepic from "./images/profilepic.jpg";
 import img from './images/ab2.png'
 import img1 from './images/ab1.png'
 
@@ -20,7 +19,7 @@ class AboutUs extends Component {
                                     <p className="aboutus_titles"><h1> About us </h1></p>
                                     <p className="about_content">
                                     We are a leading non-state degree awarding institute approved by the University Grants Commission (UGC) under the Universities Act. We are members of the Association of Commonwealth Universities (ACU), as well as the International Association of Universities (IAU). We are also the first Sri Lankan institute to be accredited by the Institution of Engineering & Technology, UK.
-                                    SLIIT was established in 1999. We opened our doors to 400 students in Metro Campus in Colombo. Currently, we offer both undergraduate and postgraduate courses and accommodate over 9000 students, including international students from various regions in the world. More than 9000 alumni have graduated from our faculties. We take great pride in producing graduates who make meaningful contributions to their communities and professions.
+                                    Taprobane was established in 1999. We opened our doors to 400 students in Metro Campus in Colombo. Currently, we offer both undergraduate and postgraduate courses and accommodate over 9000 students, including international students from various regions in the world. More than 9000 alumni have graduated from our faculties. We take great pride in producing graduates who make meaningful contributions to their communities and professions.
                                     </p>
                                 </div>
                             </div>

frontend/src/components/Profile.js

@@ -1,39 +1,48 @@
 import React from "react";
 import AuthService from "../services/auth.service";
+import img from './images/profile.png'
 
 const Profile = () => {
   const currentUser = AuthService.getCurrentUser();
   return (
-    <div className="container">
-      <header className="jumbotron">
-        
-          <center><h1>Profile</h1></center>
-          <h3>
-          <strong>UserName: </strong>{currentUser.username}
-          </h3>
-      </header>
-
-      <header className="jumbotron">
-      <p>
-        <strong>Token:</strong> {currentUser.accessToken.substring(0, 20)} ...{" "}
-        {currentUser.accessToken.substr(currentUser.accessToken.length - 20)}
-      </p>
-      <p>
-        <strong>Id:</strong> {currentUser.id}
-      </p>
-      <p>
-        <strong>Email:</strong> {currentUser.email}
-      </p>
-      <p>
-        <strong>Phone Number:</strong> +94 {currentUser.number}
-      </p>
-      <strong>Authorities:</strong>
-      <ul>
-        {currentUser.roles &&
-          currentUser.roles.map((role, index) => <li key={index}>{role}</li>)}
-      </ul>
-      </header>
+    <div className="container mt-4 shadow p-3 mb-5 bg-body rounded">
+                    <div className="p-3 row">
+                        <div className="col-md-6">
+                            <img src={img} height="400px" alt="" className="mt-0 ml-5"/>
+                        </div>
+                        
+                        <div className="col-md-6">
+                            <div className="container">
+                                <div className="col-sm-12 col-md-9">
+                                    <p className="aboutus_titles"><br/><br/>
+                                      <h1> Profile </h1>
+                                    </p>
+                                    <p className="con">
+                                      <p>
+                                        <strong>Token:</strong> {currentUser.accessToken.substring(0, 20)} ...{" "}
+                                        {currentUser.accessToken.substr(currentUser.accessToken.length - 20)}
+                                      </p>
+                                      <p>
+                                        <strong>Id:</strong> {currentUser.id}
+                                      </p>
+                                      <p>
+                                        <strong>Email:</strong> {currentUser.email}
+                                      </p>
+                                      <p>
+                                        <strong>Phone Number:</strong> +94 {currentUser.number}
+                                      </p>
+                                      <strong>Authorities:</strong>
+                                      <ul>
+                                        {currentUser.roles &&
+                                          currentUser.roles.map((role, index) => <li key={index}>{role}</li>)}
+                                      </ul>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
     </div>
+    
   );
 };