✨ feat: captain profile

CMP26Projects · Dec 24, 2023 · 1170829 · 1170829
1 parent e4aba27
commit 1170829
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 1 deletion.
diff --git 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
@@ -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;
+    }
+  }
+}