Separation between roles in employeeComponent & made employees wrap

varianter · Nov 15, 2024 · 0263b14 · 0263b14
1 parent bac66f9
commit 0263b14
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 53 deletions.
diff --git a/src/components/employeeComponent/employeeComponent.module.css b/src/components/employeeComponent/employeeComponent.module.css
@@ -101,6 +101,22 @@
 
 }
 
+.peopleConsultantRole{
+    display: flex;
+    flex-direction: row;
+    overflow: visible;
+    align-self: stretch;
+}
+
+.peopleConsultantRoleDot::after {
+    content: "·";
+    margin: 0 0.5rem
+}
+
+.peopleConsultantRoleDot:last-child:after{
+    content: "";
+    margin: 0;
+}
 /*-------------Email_PhoneNR----------------*/
 
 .peopleContactInfo{

diff --git a/src/components/employeeComponent/employeeComponent.tsx b/src/components/employeeComponent/employeeComponent.tsx
@@ -37,12 +37,18 @@ export default function EmployeeComponent({
         <div className={styles.peopleConsultantInfoWrapper}>
           <div className={styles.peopleConsultantInfo}>
             <p className={styles.peopleConsultantName}>{consultant.name}</p>
+            <div className={styles.peopleConsultantRole}>
 
             {consultant.competences.map((competence) => (
-              <Text type="labelRegular" key={competence}>
-                {competence}
+                <>
+                <Text className={styles.peopleConsultantRoleDot} type="labelRegular" key={competence}>
+                {competence} 
+
               </Text>
+              </>
             ))}
+
+            </div>
           </div>
 
           <div className={styles.peopleContactInfo}>

diff --git a/src/components/sections/employees/employees.module.css b/src/components/sections/employees/employees.module.css
@@ -3,19 +3,21 @@
   flex-direction: column;
   align-items: center;
   margin: 5rem 0;
+  flex-wrap: wrap;
+
 }
 
 .header {
-  grid-column: 1 / -1;
   color: var(--primary-black);
   font-size: 48px;
   font-weight: 600;
+  align-self: flex-start;
+
 }
 
 .employeeCountWrapper {
   width: 100%;
-  grid-column: 1 / -1;
-  margin-bottom: -24px;
+
 }
 
 .employeeCount {
@@ -28,63 +30,18 @@
 }
 
 .employees {
-  max-width: 1400px;
-  width: 100%;
-  text-wrap: wrap;
-  column-gap: 12px;
-  row-gap: 52px;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, 225px);
-  justify-content: center;
-  padding: 1rem;
-}
-
-.employee {
   display: flex;
   flex-direction: column;
+  max-width: 1400px;
   width: 100%;
-  gap: 1rem;
-}
-
-.employeeImage {
-  display: flex;
-  flex-direction: column;
+  text-wrap: wrap;
   align-items: center;
-  background-color: var(--primary-black);
-  border-radius: 12px;
-  height: 150px;
-  padding: 1rem;
-  position: relative;
-}
-
-.employeeInfo {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.employeeName {
-  color: var(--primary-black);
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.employeeRole {
-  color: var(--primary-grey);
-}
-
-.employeeEmail,
-.employeeTelephone {
-  color: var(--primary-black);
-  font-size: 16px;
-  font-weight: 300;
+  gap: 0.5rem;
 }
 
 .peopleContainer {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   justify-content: center;
-
-
 }