remove new basicTabs

ui/src/components/AdminSettings/AdminSettings.tsx

@@ -1,13 +1,15 @@
-import BasicTabs from "../UI/BasicTab/BasicTabs";
-import Tab from "../UI/BasicTab/Tab";
+import { useState } from "react";
+import Tabs from "../UI/Tabs"
 
-const AdminSettings: React.FC = () => {
+const AdminSettings: React.FC<any> = ({color}) => {
+    var TABS = [
+        {tab:"USERS"}, {tab:"WORKSPACE"}
+    ];
+    
+    const [currentTab, setCurrentTab] = useState(TABS[0].tab);
     return (
-      <div style={{overflowY:"auto", height:"100%", backgroundColor:"white",color:"$494677",borderRadius:"4px",padding:"10px",position:"relative",display: 'inline-block',}}>
-        <BasicTabs>
-            <Tab title="USERS">USERS</Tab>
-            <Tab title="WORKSPACE">WORKSPACE</Tab>
-        </BasicTabs>
+        <div style={{padding:" 0 1rem"}}>
+        <Tabs tabs={TABS} currentTab={currentTab} color={color} onChange={setCurrentTab} leftAligned/>
     </div>
     )
   }

ui/src/components/Header/EntHeader.tsx

@@ -11,6 +11,7 @@ import Api from "../../helpers/api";
 import {toast} from "react-toastify";
 import {useSetRecoilState} from "recoil";
 import entPageAtom, {Page} from "../../recoil/entPage";
+import AdminSettings from "../AdminSettings/AdminSettings";
 
 const api = Api.getInstance();
 
@@ -44,7 +45,8 @@ export const EntHeader: React.FC<EntHeaderProps> = ({isFirstLogin, setIsFirstLog
             <img className="headerIcon" alt="settings" src={settingImg} style={{marginRight: 25}} onClick={() => setIsSettingsModalOpen(true)}/>
             <ProfileButton/>
         </div>
-        <SettingsModal isOpen={isSettingsModalOpen} onClose={onSettingsModalClose} isFirstLogin={isFirstLogin}/>
+        {/* <SettingsModal isOpen={isSettingsModalOpen} onClose={onSettingsModalClose} isFirstLogin={isFirstLogin}/> */}
+        {/* <AdminSettings isOpen={isSettingsModalOpen} onClose={onSettingsModalClose}/> */}
     </div>;
 }
 

ui/src/components/UI/BasicTab/BasicTabs.tsx

@@ -1,37 +0,0 @@
-import React, { ReactElement, useState } from "react";
-import TabTitle from "./TabTitle";
-import styles from '../style/BasicTabs.module.sass'
-
-
-type Props = {
-  children: ReactElement[]
-}
-
-const Tabs: React.FC<Props> = ({ children }) => {
-  const [selectedTab, setSelectedTab] = useState(0);
-
-  return (
-    <div>
-      <ul style={{"display":"flex","justifyContent":"space-between", listStyleType:"none"}}>
-        {children.map((item, index) => {
-          <TabTitle
-            key={index}
-            title={item.props.title}
-            index={index}
-            setSelectedTab={setSelectedTab}
-          />
-          {<span style={{    
-            cursor: "unset",
-            height: "20px",
-            margin: "0 20px",
-            borderRight: "1px solid #303f9f",
-            verticalAlign: "middle"
-            }}></span>}
-    })}
-      </ul>
-      {children[selectedTab]}
-    </div>
-  )
-}
-
-export default Tabs

ui/src/components/UI/BasicTab/Tab.tsx

@@ -1,11 +0,0 @@
-import React from 'react'
-
-type Props = {
-  title: string
-}
-
-const Tab: React.FC<Props> = ({ children }) => {
-  return <div >{children}</div>
-}
-
-export default Tab

ui/src/components/UI/BasicTab/TabTitle.tsx

@@ -1,29 +0,0 @@
-import React, { useCallback } from "react"
-
-type Props = {
-  title: string
-  index: number
-  setSelectedTab: (index: number) => void
-}
-
-const TabTitle: React.FC<Props> = ({ title, setSelectedTab, index }) => {
-
-  const onClick = useCallback(() => {
-    setSelectedTab(index)
-  }, [setSelectedTab, index])
-
-  return (
-    <li style={{color: "rgb(32,92,245" ,cursor:"pointer"}}>
-      <div onClick={onClick}>{title}</div>
-      <span style={{    
-              cursor: "unset",
-              height: "20px",
-              margin: "0 20px",
-              borderRight: "1px solid #303f9f",
-              verticalAlign: "middle"
-          }}></span>
-    </li>
-  )
-}
-
-export default TabTitle

ui/src/components/UI/style/BasicTabs.module.sass

@@ -1,33 +0,0 @@
-@import '../../../variables.module'
-    
-.root
-    height: 40%
-    paddingTop: 15px
-
-.tab
-    display: 'inline-block'
-    textTransform: 'uppercase'
-    color: $blue-color
-    cursor: 'pointer'
-
-.tabsAlignLeft
-    textAlign: 'left'
-
-.active
-    color: $font-color
-    cursor: 'unset'
-    borderBottom: "2px solid " + $font-color
-    paddingBottom: 6
-
-    &.dark
-
-.disabled
-
-.highlight
-
-.separator
-    borderRight: "1px solid " + 'black'
-    height: 20
-    verticalAlign: 'middle'
-    margin: '0 20px'
-    cursor: 'unset'