fix style

CodeAcademyBerlin · Jul 11, 2023 · c902f0e · c902f0e
1 parent 25475ac
commit c902f0e
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 55 deletions.
diff --git a/apps/codac-community/src/components/community/Mentor.tsx b/apps/codac-community/src/components/community/Mentor.tsx
@@ -1,11 +1,15 @@
 import { Card, SkeletonCards } from "codac-ui";
+import defaultAvatar from "../../../public/defaultAvatar.png";
 
 import { useGetMentor } from "#/graphql/hooks";
 
 export const Mentor = ({ id }: { id: string }) => {
   const { mentor, loading, error } = useGetMentor(id);
   console.log(mentor);
 
+    const avatarUrl = mentor?.attributes?.user?.data?.attributes?.avatar?.data?.attributes?.url ?? ""
+    const imageUrl = avatarUrl || defaultAvatar;
+
   return (
     <div className="flex justify-center">
       {loading && <SkeletonCards number={3} isLoading={loading} />}
@@ -16,10 +20,11 @@ export const Mentor = ({ id }: { id: string }) => {
             {mentor.attributes && (
               <div className="">
                 <Card
-                  image={mentor.attributes.user?.data.attributes.avatar?.data.attributes.url ?? ""}
+                  image={imageUrl}
                   title={mentor.attributes.user?.data.attributes.username}
                   github={mentor?.attributes?.github ?? ""}
                   linkdin={mentor?.attributes?.linkedin ?? ""}
+                  email={mentor.attributes.user?.data.attributes.email}
                 />
               </div>
             )}

diff --git a/apps/codac-community/src/components/community/MentorList.tsx b/apps/codac-community/src/components/community/MentorList.tsx
@@ -15,7 +15,7 @@ const MentorList = () => {
       <div className="flex justify-center">
         {loading && <SkeletonCards number={3} isLoading={loading} />}
         {error && <div>something is wrong</div>}
-        <div className="flex justify-center grid-cols-5 flex-wrap ">
+        <div className="flex justify-center grid-cols-2 flex-wrap ">
           {mentors &&
             mentors.map((mentor: MentorEntity) => {
               const avatarUrl =

diff --git a/apps/codac-community/src/components/community/StudentCard.tsx b/apps/codac-community/src/components/community/StudentCard.tsx
@@ -15,8 +15,6 @@ export const StudentCard = (props: CardStudentProp) => {
 
   return (
     <div>
-
-
       <div className=" flex grid-cols-5 flex-wrap justify-center">
         {student.attributes && (
           <div className="relative">

diff --git a/apps/codac-community/src/graphql/queries/mentors.ts b/apps/codac-community/src/graphql/queries/mentors.ts
@@ -47,7 +47,6 @@ export const GetMentorIdDocument = gql`
           github
           linkedin
           createdAt
-
           user {
             data {
               attributes {

diff --git a/apps/codac-community/src/styles.css b/apps/codac-community/src/styles.css
@@ -3,12 +3,15 @@
 @tailwind utilities;
 .card {
   border-radius: 12px 12px 12px 12px;
-  background: #00897b;
+  background: #17141d;
   transition: 0.2s;
   min-width: 20rem;
   max-width: 17rem;
   margin-right: 1rem;
   margin-block: 1rem;
+  border-left: 3px solid #508484;
+  transition: ease-in-out 0.1s;
+  border-bottom: 1px solid #508484;
 }
 .mentorListCard {
   border-radius: 20px 16px 10px 10px;
@@ -18,29 +21,31 @@
   max-width: 10rem;
   max-height: 10rem;
   margin-block: 1rem;
+  border-left: 3px solid #00897b;
+  transition: ease-in-out 0.1s;
+  border-bottom: 1px solid #00897b;
 }
 
 .card:hover {
   transition: ease-in-out 0.1s;
 
 }
-.mentorListCard:hover {
-  border-left: 3px solid #508484;
-  transition: ease-in-out 0.1s;
-  border-bottom: 1px solid #508484;
-}
-.imageBorderMentor {
-  border-bottom: 3px solid #508484;
-}
-.imageBorderCohort{
-  border-bottom: 3px solid #ffff;
+.avatarBorder {
+  border-bottom: 3px solid #00897b;
 }
+
 .cardCohort {
+  border-radius: 20px 16px 10px 10px;
   background: #17141d;
-  box-shadow: -1rem 0 3rem #000;
-  border-radius: 12px 12px 12px 12px;
+  transition: 0.2s;
+  min-width: 20rem;
+  margin-block: 1rem;
+  border-left: 3px solid #00897b;
+  transition: ease-in-out 0.1s;
+  border-bottom: 1px solid #00897b;
 }
 
+
 .card:hover {
   transform: translateY(-1rem);
 }

diff --git a/packages/codac-ui/src/components/cards/card-list.tsx b/packages/codac-ui/src/components/cards/card-list.tsx
@@ -37,11 +37,11 @@ export const CardList = ({
                 src={image}
                 width={160}
                 height={200}
-                className="imageborder filter-grayscale block h-24 w-24 rounded-full "
+                className="avatarBorder filter-grayscale block h-24 w-24 rounded-full "
                 alt={title}
               />
             )}
-            <div className="flex flex-col ml-6">
+            <div className="ml-6 flex flex-col">
               <div className="group-hover:text-codac-cyan truncate text-sm font-medium italic text-white">
                 {title}
               </div>
@@ -51,33 +51,6 @@ export const CardList = ({
             </div>
           </div>
         </Link>
-        <div className="flex justify-center  text-white">
-          {github && (
-            <Link href={github}>
-              <svg
-                fill="white"
-                xmlns="http://www.w3.org/2000/svg"
-                height="1.2em"
-                viewBox="0 0 496 512 "
-              >
-                <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
-              </svg>
-            </Link>
-          )}
-
-          {linkdin && (
-            <Link href={linkdin}>
-              <svg
-                fill="white"
-                xmlns="http://www.w3.org/2000/svg"
-                height="1.2em"
-                viewBox="0 0 448 512"
-              >
-                <path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z" />
-              </svg>
-            </Link>
-          )}
-        </div>
       </article>
     </section>
   );

diff --git a/packages/codac-ui/src/components/cards/card-tag.tsx b/packages/codac-ui/src/components/cards/card-tag.tsx
@@ -1,5 +1,5 @@
 export const CardTag = ({ tag }: { tag: string }) => {
   return (
-    <div className="rounded bg-teal-500 px-2 text-xs font-medium leading-5 text-black">{tag}</div>
+    <div className="bg-primary rounded px-2 text-xs font-medium leading-5 text-black">{tag}</div>
   );
 };
diff --git a/packages/codac-ui/src/components/cards/card.stories.tsx b/packages/codac-ui/src/components/cards/card.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Card } from "./card";
+
+const meta = {
+  component: Card,
+} satisfies Meta<typeof Card>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+
+  },
+};
diff --git a/packages/codac-ui/src/components/cards/card.tsx b/packages/codac-ui/src/components/cards/card.tsx
@@ -7,10 +7,19 @@ export interface CohortCardProps {
   startDate?: string;
   github?: string;
   linkdin?: string;
+  course?: string;
+  email?: string;
 }
 
-export const Card = ({ image, title = "", startDate = "", github = "",
-  linkdin = "" }: CohortCardProps) => {
+export const Card = ({
+  image,
+  title = "",
+  startDate = "",
+  github = "",
+  linkdin = "",
+  course = "",
+  email = ""
+}: CohortCardProps) => {
   return (
     <div className="cardCohort m-20 flex justify-center p-12 ">
       <div>
@@ -29,8 +38,12 @@ export const Card = ({ image, title = "", startDate = "", github = "",
         <div>
           <div className="p-8 text-lg font-medium text-white"></div>
         </div>
-        <h3 className="p-8 text-lg font-medium italic  text-white"> {title}</h3>
-        <div>{startDate && <p className="m-8 text-lg text-white">Start date {startDate}</p>}</div>
+        <h3 className="text-md p-8 font-medium italic  text-white"> {title}</h3>
+        <div>{startDate && <p className="text-md m-8 text-white">Start date {startDate}</p>}</div>
+        <div className="group-hover:text-codac-cyan truncate text-sm font-medium text-white">
+          {course}
+        </div>
+        <h3>{email}</h3>
         <div className="flex justify-center gap-2 text-white">
           {github && (
             <Link href={github}>

diff --git a/packages/codac-ui/src/components/cards/cohorts-card.tsx b/packages/codac-ui/src/components/cards/cohorts-card.tsx
@@ -31,7 +31,11 @@ export const Cohorts = ({
     <section className="card-list flex">
       <article className="card bg-dark rounded-xl shadow-lg transition duration-200">
         <header className="card-header">
-          <div>{startDate && <p className="text-center text-ms m-8 text-white">Start date {startDate}</p>}</div>
+          <div>
+            {startDate && (
+              <p className="text-sm m-8 text-center text-white">Start date {startDate}</p>
+            )}
+          </div>
         </header>
         <Link href={href} className="">
           <div className="card-content m-6 flex items-center ">
@@ -40,7 +44,7 @@ export const Cohorts = ({
                 src={image}
                 width={160}
                 height={200}
-                className="imageBorderCohort filter-grayscale block h-24 w-24 rounded-full "
+                className="avatarBorder filter-grayscale block h-24 w-24 rounded-full "
                 alt={title}
               />
             )}
@@ -78,7 +82,7 @@ export const Cohorts = ({
         </div>
 
         <div className="">{rating != undefined && <CardRating rating={rating} />}</div>
-        <div className="m-8 flex">{tag != undefined && <CardTag tag={tag} />}</div>
+        <div className="ml-32 flex">{tag != undefined && <CardTag tag={tag} />}</div>
         <div className="group-hover:text-codac-cyan m-6 truncate text-sm font-medium text-white">
           {course}
         </div>