Modify mentoring interface slightly

camille-readbean · Jul 16, 2023 · 50d9d38 · 50d9d38
1 parent cb7e1a8
commit 50d9d38
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 20 deletions.
diff --git a/frontend/src/Pages/Mentoring/CreateMentorPosting.js b/frontend/src/Pages/Mentoring/CreateMentorPosting.js
@@ -43,8 +43,8 @@ function CreateMentorPosting() {
   };
 
   return (
-    <div className="flex h-screen bg-gray-100 items-center justify-center flex">
-      <section className="w-96 p-6 shadow-lg bg-white rounded-md">
+    <div className="flex h-full bg-gray-100 items-center justify-center">
+      <section className="w-full sm:max-w-lg p-6 m-5 shadow-lg bg-white rounded-md">
         <UnauthenticatedTemplate>
           <Unauthenticated />
         </UnauthenticatedTemplate>
@@ -53,8 +53,7 @@ function CreateMentorPosting() {
           <center className='text-slate-500 py-2'>
             This lets people know your interest in mentoring a particular subject <br/>
             Only your name is shared, your email is not revealed till you accept a mentee <br/>
-            When a mentee acepts, they can give you their contact details so you can communicate <br/>
-            in real life
+            When a mentee acepts, they can give you their contact details so you can communicate in real life
           </center>
           <hr className="my-3"></hr>
 

diff --git a/frontend/src/Pages/Mentoring/CreateMentorRequest.js b/frontend/src/Pages/Mentoring/CreateMentorRequest.js
@@ -43,8 +43,8 @@ function CreateMentorRequest() {
   };
 
   return (
-    <div className="flex h-screen bg-gray-100 items-center justify-center flex">
-      <section className="w-96 p-6 shadow-lg bg-white rounded-md">
+    <div className="flex h-screen bg-gray-100 items-center justify-center">
+      <section className="w-full sm:max-w-lg p-6 m-5 shadow-lg bg-white rounded-md">
         <UnauthenticatedTemplate>
           <Unauthenticated />
         </UnauthenticatedTemplate>

diff --git a/frontend/src/Pages/Mentoring/MentoringMainPage.js b/frontend/src/Pages/Mentoring/MentoringMainPage.js
@@ -201,8 +201,8 @@ function MentoringMainPage() {
     <>
       <AuthenticatedTemplate>
         <Container>
-          <Box sx={{minHeight: 10 + 'em', padding: 10 + 'px', marginBottom: 5 + 'px'}}>
-            <h1 className='text-2xl'>Pending / Accepted mentor-mentee matches</h1>
+          <Box sx={{minHeight: 10 + 'em', padding: 10 + 'px', marginBottom: 5 + 'px'}} className="bg-slate-50 rounded-md my-2">
+            <h1 className='text-2xl font-semibold'>Pending / Accepted mentor-mentee matches</h1>
             <Tabs value={matchesTabValue} onChange={handleChangeMatchesTabValue} centered variant="fullWidth">
               <Tab label="Matches as mentor" id='full-width-user-matches-tab-0'/>
               <Tab label="Matches as mentee" id='full-width-user-matches-tab-1'/>
@@ -263,8 +263,8 @@ function MentoringMainPage() {
 
           <hr className='divide-y-4'></hr>
 
-          <Box sx={{minHeight: 10 + 'em', padding: 10 + 'px', marginBottom: 5 + 'px'}}>
-            <h1 className='text-2xl mr-4 c-1/10'>Your mentoring posts / requests</h1>
+          <Box sx={{minHeight: 10 + 'em', padding: 10 + 'px', marginBottom: 5 + 'px'}} className="bg-slate-50 rounded-md my-2">
+            <h1 className='text-2xl mr-4 c-1/10 font-semibold'>Your mentoring posts / requests</h1>
             <Tabs value={mentoringPostsValue} onChange={handleChangeMentoringPostsTabValue} centered variant="fullWidth">
               <Tab label="Posts as mentor" id='full-width-user-posts-tab-0'/>
               <Tab label="Requests for mentor" id='full-width-user-posts-tab-1'/>
@@ -329,8 +329,8 @@ function MentoringMainPage() {
             </div> 
           </Box>
 
-          <Box sx={{ bgcolor: '#eff2ef', minHeight: 10 + 'em', padding: 10 + 'px'}}>
-            <h2 className='text-2xl mr-4 c-1/10'>Find mentors or mentees</h2>
+          <Box sx={{ minHeight: 10 + 'em', padding: 10 + 'px'}} className="bg-slate-50 rounded-md my-2">
+            <h2 className='text-2xl mr-4 c-1/10 font-semibold'>Find mentors or mentees</h2>
             <p className='text-slate-500 py-2'>Posts in the community</p>
             <Select
               options={searchResults}

diff --git a/frontend/src/Pages/Mentoring/RequestMentee.js b/frontend/src/Pages/Mentoring/RequestMentee.js
@@ -48,8 +48,8 @@ function RequestMentee() {
   };
 
   return (
-    <div className="flex h-screen bg-gray-100 items-center justify-center flex">
-      <section className="w-96 p-6 shadow-lg bg-white rounded-md">
+    <div className="flex h-screen bg-gray-100 items-center justify-center">
+      <section className="w-full sm:max-w-lg p-6 m-5 shadow-lg bg-white rounded-md">
         <UnauthenticatedTemplate>
           <Unauthenticated />
         </UnauthenticatedTemplate>

diff --git a/frontend/src/Pages/Mentoring/RequestMentor.js b/frontend/src/Pages/Mentoring/RequestMentor.js
@@ -48,8 +48,8 @@ function RequestMentee() {
   };
 
   return (
-    <div className="flex h-screen bg-gray-100 items-center justify-center flex">
-      <section className="w-96 p-6 shadow-lg bg-white rounded-md">
+    <div className="flex h-screen bg-gray-100 items-center justify-center">
+      <section className="w-full sm:max-w-lg p-6 m-5 shadow-lg bg-white rounded-md">
         <UnauthenticatedTemplate>
           <Unauthenticated />
         </UnauthenticatedTemplate>

diff --git a/frontend/src/Pages/Mentoring/UpdateMentorPosting.js b/frontend/src/Pages/Mentoring/UpdateMentorPosting.js
@@ -67,8 +67,8 @@ function UpdateMentorPosting() {
   };
 
   return (
-    <div className="flex h-screen bg-gray-100 items-center justify-center flex">
-      <section className="w-96 p-6 shadow-lg bg-white rounded-md">
+    <div className="flex h-screen bg-gray-100 items-center justify-center">
+      <section className="w-full sm:max-w-lg p-6 m-5 shadow-lg bg-white rounded-md">
         <UnauthenticatedTemplate>
           <Unauthenticated />
         </UnauthenticatedTemplate>

diff --git a/frontend/src/Pages/Mentoring/UpdateMentorRequest.js b/frontend/src/Pages/Mentoring/UpdateMentorRequest.js
@@ -67,8 +67,8 @@ function UpdateMentorRequest() {
   };
 
   return (
-    <div className="flex h-screen bg-gray-100 items-center justify-center flex">
-      <section className="w-96 p-6 shadow-lg bg-white rounded-md">
+    <div className="flex h-screen bg-gray-100 items-center justify-center">
+      <section className="w-full sm:max-w-lg p-6 m-5 shadow-lg bg-white rounded-md">
         <UnauthenticatedTemplate>
           <Unauthenticated />
         </UnauthenticatedTemplate>