steckbriefe

src/App/App.css

@@ -747,8 +747,17 @@ img .middle{
   overflow-x: hidden;
   height: 270px !important;
 }
-.briefbutton{
-  
+.frontbutton, .backbutton{
+  background-color: var(--mediumpurple) !important;
+  color: var(--background) !important;
+  padding: 5px;
+  border-radius: 10px;
+  margin: auto;
+ 
+}
+.parent-button{
+  display: flex;
+  align-items: center !important;
 }
 
 .spin {

src/contents/team.tsx

@@ -100,7 +100,7 @@ function createSteckbriefe(data: Array<SteckbriefInterface>){
     // Conditional head of
     var headof = <></>; 
     if(data[index].headof){
-      var headof = <div className="">Head of: {data[index].headof} <br/> </div>; 
+      var headof = <><div className="">Head of: {data[index].headof} </div> <br/></>; 
     }
     // Jobs
     var jobs = ""; 
@@ -140,13 +140,14 @@ function createSteckbriefe(data: Array<SteckbriefInterface>){
     let namerow = <div className="row"><div className="team-name"> {data[index].title} {data[index].vorname} {data[index].nachname} <span className="pronouns"> {data[index].pronouns} </span> </div>  <div className="col"> <a href={data[index].linkedinurl}> <img className="team-socials" src="https://static.igem.wiki/teams/5247/design/icons/linkedin.png" /> </a></div> </div>; 
     let frontparagraph = <div className={"row " + frontbriefclass}> <p>"As an international student, iGEM offers me a unique opportunity to not only expand and deepen my scientific experience by working with a research team but also to enhance my social communication skills within my scientific field",</p> </div> ; 
     let facts = <div className={frontbriefclass}><div className="">Age: {data[index].age} </div> <br/> {headof} <div>Part of: {jobs}</div> <br/> <div className=""> Major: {data[index].studiengang} </div> <br/> <div className=""> Scientific interests: {data[index].scientificinterests} </div> </div>; 
-    let backbutton =  <div className={backbriefclass + " briefbutton"} style={{display: "none"}}><button onClick={flipBack(thename)} >Click me</button></div>
+    let backbutton =  <div className={backbriefclass} style={{display: "none"}}>   <div className="parent-button"><button onClick={flipBack(thename)} className="frontbutton">Click me</button></div></div>
     let funfactlist = <div className={backbriefclass} style={{display: "none"}}><b>Funfacts: </b><ul> {funfacts}</ul></div>
     let favmusic = <><h6>Favourite music:</h6><p>{data[index].favmusic}</p></>
     let hobbielist = <><h6>Hobbies:</h6> <p> {hobbs} </p></>
     let backparagraph = <div className={"row "+backbriefclass} style={{display: "none"}}>{favmusic}{hobbielist}</div> 
     let paragraphs = <div className="steckbody"> {frontparagraph} {backparagraph} </div>
-    let frontbutton =  <button onClick={flip(thename)} className={frontbriefclass+ " briefbutton"}>Click me</button>
+    let frontbutton =  <div className={frontbriefclass}> <div className="parent-button"><button onClick={flip(thename)} className="frontbutton">Click me</button></div></div>
+    
     let hole = 
             <div> 
               <div className="row steckbrief"> {picture}