From 1170829b95ddd9a081b2e46a73ca47d9d2f7ecd3 Mon Sep 17 00:00:00 2001
From: amir-kedis <amir.kedis@gmail.com>
Date: Sun, 24 Dec 2023 15:52:45 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20captain=20profile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../captain-profile/CaptainProfile.jsx        |  4 +-
 .../captain-profile/CaptainProfile.scss       | 50 +++++++++++++++++++
 2 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/captain-profile/CaptainProfile.scss

diff --git a/client/src/components/captain-profile/CaptainProfile.jsx b/client/src/components/captain-profile/CaptainProfile.jsx
index d9e976bd..8cbf4309 100644
--- a/client/src/components/captain-profile/CaptainProfile.jsx
+++ b/client/src/components/captain-profile/CaptainProfile.jsx
@@ -1,6 +1,7 @@
 import { useSelector } from "react-redux";
 import Button from "../common/Button";
 import PageTitle from "../common/PageTitle";
+import "./CaptainProfile.scss";
 
 export default function CaptainProfile() {
   const { userInfo } = useSelector((state) => state.auth);
@@ -42,7 +43,8 @@ export default function CaptainProfile() {
               : "لا يوجد"}
           </p>
         </div>
-        <Button className="captain-profile__info__btn Button--medium Button--success">
+        {/* TODO: Add the route for The Button Later */}
+        <Button className="captain-profile__info__btn Button--medium Button--primary">
           تعديل الصفحة الشخصية
         </Button>
       </div>
diff --git a/client/src/components/captain-profile/CaptainProfile.scss b/client/src/components/captain-profile/CaptainProfile.scss
new file mode 100644
index 00000000..49d97e97
--- /dev/null
+++ b/client/src/components/captain-profile/CaptainProfile.scss
@@ -0,0 +1,50 @@
+.captain-profile {
+  &__avatar {
+    display: flex;
+    justify-content: center;
+    margin-block: 1rem;
+
+    img {
+      border-radius: 50%;
+    }
+  }
+
+  &__name,
+  &__type {
+    text-align: center;
+    margin-bottom: 1rem;
+  }
+
+  &__type {
+    color: var(--primary-100);
+  }
+
+  &__info {
+    width: 90vw;
+    margin-inline: auto;
+    padding: 20px;
+    background-color: var(--primary-900);
+    border-radius: 30px;
+
+    h4 {
+      text-align: center;
+      margin-bottom: 1rem;
+    }
+
+    &__item {
+      direction: rtl;
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      margin-bottom: 2rem;
+
+      h6 {
+        color: var(--primary-200);
+      }
+    }
+    &__btn {
+      margin-inline: auto;
+      display: block;
+    }
+  }
+}