hp select buttons

src/App/App.css

@@ -793,6 +793,17 @@ svg{
   width: fit-content !important;
 }
 
+.All{
+  background-color: white;
+}
+button.tabbutton.Patient.active, button.tabbutton.All.active, 
+button.tabbutton.Industry.active, button.tabbutton.Academia.active, 
+button.tabbutton.Medical.active{
+  border-color: black;
+}
+
+
+
 .Patient{
   background-color: var(--accen-secondary);
 }
@@ -806,7 +817,7 @@ svg{
 }
 
 .Industry{
-  background-color: var(--text-primary);
+  background-color: var(--mediumpurple);
 }
 
 .timelineolli {
@@ -2441,4 +2452,13 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 
 .tabtabs, .tabbys{
   display: none;
-}
\ No newline at end of file
+}
+
+.tabbutton{
+  padding: 5px;
+  border-radius: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  margin-left: 5px;
+  margin-right: 5px;
+}

src/components/Buttons.tsx

@@ -79,13 +79,35 @@ export function HPButtonrow(){
   return(
       <>
       <div className="align-items-center bottom-buttons">
-          <button className="active" onClick={openTab({cityName: "All", cla: "tabtabs", weg:"tabbys"})}> All</button>
-          <button  onClick={openTab({cityName: "Patient", cla: "tabtabs", weg:"tabbys"})}> Patients</button>
-          <button  onClick={openTab({cityName: "Academia", cla: "tabtabs", weg:"tabbys"})}> Academia</button>
-          <button  onClick={openTab({cityName: "Medical", cla: "tabtabs", weg:"tabbys"})}> Medical professionals</button>
-          <button  onClick={openTab({cityName: "Industry", cla: "tabtabs", weg:"tabbys"})}> Industry</button>
+          <TabButton classy="active" type="All" name="All" opentype="tabtabs" closing="tabbys"/>
+          <TabButton classy="active"  type="Patient" name="Patients" opentype="tabtabs" closing="tabbys"/>
+          <TabButton classy="active"  type="Medical" name="Medical Professionals" opentype="tabtabs" closing="tabbys"/>
+          <TabButton classy="active"  type="Academia" name="Academia" opentype="tabtabs" closing="tabbys"/>
+          <TabButton classy="active"  type="Industry" name="Industry" opentype="tabtabs" closing="tabbys"/>
+          
       </div>
       </>
   )
 }
 
+
+interface TabButtonProps{
+  classy?: string, 
+  closing: string, 
+  opentype: string
+  /* children?: React.ReactNode,  */
+  /* onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void,  */
+  name: string,
+  type: string
+}
+export function TabButton({classy, name, closing, opentype, type}:TabButtonProps){
+  if (!classy){
+    classy = ""
+  }
+  let classname = "tabbutton " + type + " " + classy; 
+  return(
+    <>
+    <button className={classname} onClick={openTab({cityName: type, cla: opentype, weg: closing })}> {name}</button>
+    </>
+  )
+}
\ No newline at end of file

src/contents/human-practices.tsx

@@ -99,6 +99,10 @@ let tabtabs = [
   {
     node: <TimeHori tab="Medical Professional" ></TimeHori>,
     eid: "Medical"
+  },
+  {
+    node: <TimeHori tab="Industry" ></TimeHori>,
+    eid: "Industry"
   }
 
 ]
@@ -122,7 +126,7 @@ export function openTab({cityName, cla, weg}:{cityName: string, cla: string, weg
   for (i = 0; i < tabcontent.length; i++) {
     (tabcontent[i] as HTMLElement).style.display = "none";
   }
-  tablinks = document.getElementsByClassName("tablinks");
+  tablinks = document.getElementsByClassName("tabbutton");
   for (i = 0; i < tablinks.length; i++) {
     tablinks[i].className = tablinks[i].className.replace(" active", "");
   }