Add Styling In All Doctor Page

Atril33 · Oct 1, 2023 · c4e31f0 · c4e31f0
1 parent 1be3963
commit c4e31f0
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 40 deletions.
diff --git a/src/routes/Doctors.jsx b/src/routes/Doctors.jsx
@@ -66,35 +66,33 @@ const Doctors = () => {
   return (
     <>
       <div className="doctor-container">
-        <div className="doctor-small-container">
-          <button type="button" onClick={backArrow}>
-            <img src={farwordIcon} alt="Farword Icon" className="forward-button retrun-back-btn" />
-          </button>
-          <div className="doctor-list-container">
-            <div className="doctor-text-container">
+        <button type="button" onClick={backArrow} className="p-2 w-7 h-7 bg-[#4ecca3] self-center rounded-s-full">
+          <img src={farwordIcon} alt="Farword Icon" className="retrun-back-btn" />
+        </button>
+        <div className="doctor-list-container">
+          <div className="doctor-text-container">
 
-              <h2 className="doctor-title-text">Meet Our Physicians</h2>
-              <p className="doctor-paragraph-text">Please select a doctor for an appointment</p>
-            </div>
+            <h2 className="doctor-title-text">Meet Our Physicians</h2>
+            <p className="doctor-paragraph-text">Please select a doctor for an appointment</p>
+          </div>
 
-            <div className="doctors-listing">
-              {finalDoctorsData.map((item) => (
-                <Link to={`/doctor/${item.id}`} className="doctor-box" key={item.id}>
-                  <img src="https://t3.ftcdn.net/jpg/02/60/04/08/360_F_260040863_fYxB1SnrzgJ9AOkcT0hoe7IEFtsPiHAD.jpg" className="doctor-image" alt={item.name} />
-                  <h3 className="doctor-name">{item.name}</h3>
-                  <div className="social-icon-container">
-                    <img src={facebookIcon} alt="Facebook Icon" className="social-icon" />
-                    <img src={twitterIcon} alt="Twitter Icon" className="social-icon" />
-                    <img src={linkedinIcon} alt="Linkedin Icon" className="social-icon" />
-                  </div>
-                </Link>
-              ))}
-            </div>
+          <div className="doctors-listing">
+            {finalDoctorsData.map((item) => (
+              <Link to={`/doctor/${item.id}`} className="doctor-box" key={item.id}>
+                <img src="https://t3.ftcdn.net/jpg/02/60/04/08/360_F_260040863_fYxB1SnrzgJ9AOkcT0hoe7IEFtsPiHAD.jpg" className="doctor-image" alt={item.name} />
+                <h3 className="doctor-name">{item.name}</h3>
+                <div className="social-icon-container">
+                  <img src={facebookIcon} alt="Facebook Icon" className="social-icon" />
+                  <img src={twitterIcon} alt="Twitter Icon" className="social-icon" />
+                  <img src={linkedinIcon} alt="Linkedin Icon" className="social-icon" />
+                </div>
+              </Link>
+            ))}
           </div>
-          <button type="button" onClick={forwardArrow}>
-            <img src={farwordIcon} alt="Farword Icon" className="forward-button" />
-          </button>
         </div>
+        <button type="button" onClick={forwardArrow} className="p-2 w-7 h-7 bg-[#4ecca3] self-center rounded-s-full">
+          <img src={farwordIcon} alt="Farword Icon" className="w-5" />
+        </button>
       </div>
     </>
   );

diff --git a/src/styles/style.css b/src/styles/style.css
@@ -9,10 +9,7 @@
   width: 100%;
   height: auto;
   display: flex;
-}
-
-.doctor-small-container {
-  display: flex;
+  justify-content: center;
 }
 
 .doctor-list-container {
@@ -47,8 +44,7 @@
 }
 
 .doctors-listing {
-  width: 90%;
-  max-width: 1000px;
+  width: 100%;
   height: auto;
   display: flex;
   align-items: center;
@@ -62,7 +58,8 @@
 .doctor-box {
   width: calc(33.33% - 10px);
   height: auto;
-  background: #fff;
+  background: transparent;
+  border: 1px solid #f3eeee;
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
@@ -110,13 +107,6 @@
   transform: rotate(180deg);
 }
 
-.forward-button {
-  padding: 10px;
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  background: #4ecca3;
-}
-
 @media screen and (max-width: 1100px) {
   .doctors-listing {
     max-width: 800px;
@@ -141,6 +131,5 @@
   .doctor-container {
     width: 100%;
     display: flex;
-    flex-direction: column;
   }
 }