From acd4c4c9450360e338544309de1036f26170a02f Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Fri, 4 Aug 2023 11:06:35 +0200
Subject: [PATCH 01/28] add tab component

---
 src/Components/Tabs.jsx | 76 +++++++++++++++++++++++++++++++++++++++++
 src/FixtureContext.jsx  |  1 +
 2 files changed, 77 insertions(+)
 create mode 100644 src/Components/Tabs.jsx

diff --git a/src/Components/Tabs.jsx b/src/Components/Tabs.jsx
new file mode 100644
index 000000000..6054cb859
--- /dev/null
+++ b/src/Components/Tabs.jsx
@@ -0,0 +1,76 @@
+import React, {useState} from 'react'
+import {styled} from '@mui/material/styles'
+import Tabs from '@mui/material/Tabs'
+import Tab from '@mui/material/Tab'
+import Box from '@mui/material/Box'
+
+
+const CustomTabs = styled(Tabs)({
+  'borderBottom': '1px solid #e8e8e8',
+  '& .MuiTabs-indicator': {
+    backgroundColor: '#1890ff',
+  },
+})
+
+
+const CustomTab = styled((props) => <Tab disableRipple {...props}/>)(({theme}) => ({
+  'textTransform': 'none',
+  'minWidth': 0,
+  [theme.breakpoints.up('sm')]: {
+    minWidth: 0,
+  },
+  'fontWeight': theme.typography.fontWeightRegular,
+  'marginRight': theme.spacing(1),
+  'color': 'rgba(0, 0, 0, 0.85)',
+  'fontFamily': [
+    '-apple-system',
+    'BlinkMacSystemFont',
+    '"Segoe UI"',
+    'Roboto',
+    '"Helvetica Neue"',
+    'Arial',
+    'sans-serif',
+    '"Apple Color Emoji"',
+    '"Segoe UI Emoji"',
+    '"Segoe UI Symbol"',
+  ].join(','),
+  '&:hover': {
+    color: '#40a9ff',
+    opacity: 1,
+  },
+  '&.Mui-selected': {
+    color: '#1890ff',
+    fontWeight: theme.typography.fontWeightMedium,
+  },
+  '&.Mui-focusVisible': {
+    backgroundColor: '#d1eaff',
+  },
+}))
+
+
+/**
+ * Styled Tabs copnent.
+ *
+ * @property {Array} tabs array of tabs
+ * @return {React.Component}
+ */
+export default function BldrsTabs({tabs, actionCb}) {
+  const [value, setValue] = useState(0)
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue)
+  }
+
+  return (
+    <Box sx={{width: '100%'}}>
+      <Box sx={{bgcolor: '#fff'}}>
+        <CustomTabs value={value} onChange={handleChange} aria-label="ant example">
+          <CustomTab label="Tab 1"/>
+          <CustomTab label="Tab 2"/>
+          <CustomTab label="Tab 3"/>
+        </CustomTabs>
+        <Box sx={{p: 3}}/>
+      </Box>
+    </Box>
+  )
+}
diff --git a/src/FixtureContext.jsx b/src/FixtureContext.jsx
index 157c54380..a94330407 100644
--- a/src/FixtureContext.jsx
+++ b/src/FixtureContext.jsx
@@ -8,6 +8,7 @@ import Styles from './Styles'
 
 /**
  * Mirrors the context setup for Share.
+ *
  * @param {object} props
  * @return {React.Component}
  */

From 6ee81cb732f41ab0002408bbacaf1919d81caf79 Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Fri, 4 Aug 2023 11:57:55 +0200
Subject: [PATCH 02/28] add tabs component to the library

---
 package.json                                  |  2 +-
 public/index.html                             |  1 +
 src/Components/Library/BldrsTabs.fixture.jsx  | 11 ++++
 .../{Tabs.jsx => Library/BldrsTabs.jsx}       | 55 +++++++++----------
 src/theme/Typography.js                       |  1 +
 5 files changed, 39 insertions(+), 31 deletions(-)
 create mode 100644 src/Components/Library/BldrsTabs.fixture.jsx
 rename src/Components/{Tabs.jsx => Library/BldrsTabs.jsx} (52%)

diff --git a/package.json b/package.json
index 183002abd..c5c7b2ab2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r689",
+  "version": "1.0.0-r683",
   "main": "src/index.jsx",
   "license": "MIT",
   "homepage": "https://github.com/bldrs-ai/Share",
diff --git a/public/index.html b/public/index.html
index 8e80c0518..b0134cdd7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,6 +15,7 @@
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&amp;display=swap" />
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600&amp;display=swap"
     rel="stylesheet">
+  <link href="https://api.fontshare.com/v2/css?f[]=satoshi@700,500,300,400&display=swap" rel="stylesheet">
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 
diff --git a/src/Components/Library/BldrsTabs.fixture.jsx b/src/Components/Library/BldrsTabs.fixture.jsx
new file mode 100644
index 000000000..80621dbad
--- /dev/null
+++ b/src/Components/Library/BldrsTabs.fixture.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import FixtureContext from '../../FixtureContext'
+import BldrsTabs from './BldrsTabs'
+
+
+const tabNames = ['Explore Model', 'Open Model', 'Save Model']
+export default (
+  <FixtureContext>
+    <BldrsTabs tabNames={tabNames}/>
+  </FixtureContext>
+)
diff --git a/src/Components/Tabs.jsx b/src/Components/Library/BldrsTabs.jsx
similarity index 52%
rename from src/Components/Tabs.jsx
rename to src/Components/Library/BldrsTabs.jsx
index 6054cb859..a190ac319 100644
--- a/src/Components/Tabs.jsx
+++ b/src/Components/Library/BldrsTabs.jsx
@@ -1,16 +1,17 @@
+/* eslint-disable no-magic-numbers */
 import React, {useState} from 'react'
 import {styled} from '@mui/material/styles'
+import Box from '@mui/material/Box'
 import Tabs from '@mui/material/Tabs'
 import Tab from '@mui/material/Tab'
-import Box from '@mui/material/Box'
 
 
-const CustomTabs = styled(Tabs)({
-  'borderBottom': '1px solid #e8e8e8',
+const CustomTabs = styled(Tabs)(({theme}) => ({
+  'borderBottom': `1px solid ${theme.palette.primary.main}`,
   '& .MuiTabs-indicator': {
-    backgroundColor: '#1890ff',
+    backgroundColor: theme.palette.secondary.main,
   },
-})
+}))
 
 
 const CustomTab = styled((props) => <Tab disableRipple {...props}/>)(({theme}) => ({
@@ -19,42 +20,34 @@ const CustomTab = styled((props) => <Tab disableRipple {...props}/>)(({theme}) =
   [theme.breakpoints.up('sm')]: {
     minWidth: 0,
   },
-  'fontWeight': theme.typography.fontWeightRegular,
-  'marginRight': theme.spacing(1),
-  'color': 'rgba(0, 0, 0, 0.85)',
-  'fontFamily': [
-    '-apple-system',
-    'BlinkMacSystemFont',
-    '"Segoe UI"',
-    'Roboto',
-    '"Helvetica Neue"',
-    'Arial',
-    'sans-serif',
-    '"Apple Color Emoji"',
-    '"Segoe UI Emoji"',
-    '"Segoe UI Symbol"',
-  ].join(','),
+  'fontSize': '1em',
+  'fontWeight': theme.typography.fontWeight,
+  'marginRight': theme.spacing(0),
+  'color': theme.palette.primary.contrastText,
+  'fontFamily': theme.typography.fontFamily,
   '&:hover': {
-    color: '#40a9ff',
-    opacity: 1,
+    color: theme.palette.secondary.main,
   },
   '&.Mui-selected': {
-    color: '#1890ff',
-    fontWeight: theme.typography.fontWeightMedium,
+    color: theme.palette.secondary.main,
+    fontWeight: theme.typography.fontWeight,
   },
   '&.Mui-focusVisible': {
-    backgroundColor: '#d1eaff',
+    backgroundColor: 'green',
+  },
+  '@media (max-width: 700px)': {
+    fontSize: '.7em',
   },
 }))
 
 
 /**
- * Styled Tabs copnent.
+ * Styled Tabs component.
  *
  * @property {Array} tabs array of tabs
  * @return {React.Component}
  */
-export default function BldrsTabs({tabs, actionCb}) {
+export default function BldrsTabs({tabNames, actionCb}) {
   const [value, setValue] = useState(0)
 
   const handleChange = (event, newValue) => {
@@ -65,9 +58,11 @@ export default function BldrsTabs({tabs, actionCb}) {
     <Box sx={{width: '100%'}}>
       <Box sx={{bgcolor: '#fff'}}>
         <CustomTabs value={value} onChange={handleChange} aria-label="ant example">
-          <CustomTab label="Tab 1"/>
-          <CustomTab label="Tab 2"/>
-          <CustomTab label="Tab 3"/>
+          {tabNames.map((tabName) => {
+            return (
+              <CustomTab key={tabName} label={tabName}/>
+            )
+          })}
         </CustomTabs>
         <Box sx={{p: 3}}/>
       </Box>
diff --git a/src/theme/Typography.js b/src/theme/Typography.js
index 93e3723f1..38443c642 100644
--- a/src/theme/Typography.js
+++ b/src/theme/Typography.js
@@ -13,6 +13,7 @@ export function getTypography() {
     fontFamily: fontFamily,
     fontSize: fontSize,
     letterSpacing: letterSpacing,
+    fontWeight: fontWeight,
     lineHeight: lineHeight,
     h1: {fontSize: '1.3em', fontWeight},
     h2: {fontSize: '1.2em', fontWeight},

From 6e620fcb036f630cb007c551b3d3ac1908ebaf55 Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Fri, 4 Aug 2023 13:42:10 +0200
Subject: [PATCH 03/28] comments

---
 src/Components/Library/BldrsTabs.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/Library/BldrsTabs.jsx b/src/Components/Library/BldrsTabs.jsx
index a190ac319..3b32c34df 100644
--- a/src/Components/Library/BldrsTabs.jsx
+++ b/src/Components/Library/BldrsTabs.jsx
@@ -57,7 +57,7 @@ export default function BldrsTabs({tabNames, actionCb}) {
   return (
     <Box sx={{width: '100%'}}>
       <Box sx={{bgcolor: '#fff'}}>
-        <CustomTabs value={value} onChange={handleChange} aria-label="ant example">
+        <CustomTabs value={value} onChange={handleChange}>
           {tabNames.map((tabName) => {
             return (
               <CustomTab key={tabName} label={tabName}/>

From 9ecefdf5503f1d7cc273920a9d6b1d22c9acc609 Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Fri, 4 Aug 2023 13:48:13 +0200
Subject: [PATCH 04/28] comments

---
 public/index.html                    | 1 -
 src/Components/Library/BldrsTabs.jsx | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/public/index.html b/public/index.html
index b0134cdd7..8e80c0518 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,7 +15,6 @@
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&amp;display=swap" />
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600&amp;display=swap"
     rel="stylesheet">
-  <link href="https://api.fontshare.com/v2/css?f[]=satoshi@700,500,300,400&display=swap" rel="stylesheet">
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 
diff --git a/src/Components/Library/BldrsTabs.jsx b/src/Components/Library/BldrsTabs.jsx
index 3b32c34df..0d4eafb76 100644
--- a/src/Components/Library/BldrsTabs.jsx
+++ b/src/Components/Library/BldrsTabs.jsx
@@ -44,7 +44,7 @@ const CustomTab = styled((props) => <Tab disableRipple {...props}/>)(({theme}) =
 /**
  * Styled Tabs component.
  *
- * @property {Array} tabs array of tabs
+ * @property {Array<string>} tabs array of tabs
  * @return {React.Component}
  */
 export default function BldrsTabs({tabNames, actionCb}) {

From 779ccfa16464ee56f2fc71de761dca0eebdc5ecc Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Fri, 4 Aug 2023 14:23:00 +0200
Subject: [PATCH 05/28] add callback

---
 package.json                                 | 2 +-
 src/Components/Library/BldrsTabs.fixture.jsx | 6 +++++-
 src/Components/Library/BldrsTabs.jsx         | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index c5c7b2ab2..b3b4edda5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r683",
+  "version": "1.0.0-r686",
   "main": "src/index.jsx",
   "license": "MIT",
   "homepage": "https://github.com/bldrs-ai/Share",
diff --git a/src/Components/Library/BldrsTabs.fixture.jsx b/src/Components/Library/BldrsTabs.fixture.jsx
index 80621dbad..c6a2608d7 100644
--- a/src/Components/Library/BldrsTabs.fixture.jsx
+++ b/src/Components/Library/BldrsTabs.fixture.jsx
@@ -3,9 +3,13 @@ import FixtureContext from '../../FixtureContext'
 import BldrsTabs from './BldrsTabs'
 
 
+const callback = (value) => {
+  alert(value)
+}
+
 const tabNames = ['Explore Model', 'Open Model', 'Save Model']
 export default (
   <FixtureContext>
-    <BldrsTabs tabNames={tabNames}/>
+    <BldrsTabs tabNames={tabNames} actionCb={callback}/>
   </FixtureContext>
 )
diff --git a/src/Components/Library/BldrsTabs.jsx b/src/Components/Library/BldrsTabs.jsx
index 0d4eafb76..5c5747944 100644
--- a/src/Components/Library/BldrsTabs.jsx
+++ b/src/Components/Library/BldrsTabs.jsx
@@ -52,8 +52,8 @@ export default function BldrsTabs({tabNames, actionCb}) {
 
   const handleChange = (event, newValue) => {
     setValue(newValue)
+    actionCb(newValue)
   }
-
   return (
     <Box sx={{width: '100%'}}>
       <Box sx={{bgcolor: '#fff'}}>

From fc5df122671ca8ffe70a897f42781c4ca5447276 Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Fri, 4 Aug 2023 14:58:13 +0200
Subject: [PATCH 06/28] fix the boxes

---
 src/Components/Library/BldrsTabs.jsx | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/Components/Library/BldrsTabs.jsx b/src/Components/Library/BldrsTabs.jsx
index 5c5747944..692767932 100644
--- a/src/Components/Library/BldrsTabs.jsx
+++ b/src/Components/Library/BldrsTabs.jsx
@@ -56,16 +56,13 @@ export default function BldrsTabs({tabNames, actionCb}) {
   }
   return (
     <Box sx={{width: '100%'}}>
-      <Box sx={{bgcolor: '#fff'}}>
-        <CustomTabs value={value} onChange={handleChange}>
-          {tabNames.map((tabName) => {
-            return (
-              <CustomTab key={tabName} label={tabName}/>
-            )
-          })}
-        </CustomTabs>
-        <Box sx={{p: 3}}/>
-      </Box>
+      <CustomTabs value={value} onChange={handleChange}>
+        {tabNames.map((tabName) => {
+          return (
+            <CustomTab key={tabName} label={tabName}/>
+          )
+        })}
+      </CustomTabs>
     </Box>
   )
 }

From 57fdc452e31516e7747e67df02ba94b226316bd2 Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Fri, 4 Aug 2023 15:01:03 +0200
Subject: [PATCH 07/28] chnages

---
 .../Library/BldrsDialogTabs.fixture.jsx       | 23 +++++++
 src/Components/Library/BldrsDialogTabs.jsx    | 60 +++++++++++++++++++
 src/Components/Library/BldrsTabs.jsx          |  2 +-
 3 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 src/Components/Library/BldrsDialogTabs.fixture.jsx
 create mode 100644 src/Components/Library/BldrsDialogTabs.jsx

diff --git a/src/Components/Library/BldrsDialogTabs.fixture.jsx b/src/Components/Library/BldrsDialogTabs.fixture.jsx
new file mode 100644
index 000000000..e4d6d1af4
--- /dev/null
+++ b/src/Components/Library/BldrsDialogTabs.fixture.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import FixtureContext from '../../FixtureContext'
+import BldrsDialogTabs from './BldrsDialogTabs'
+import AttentionIcon from '../../assets/icons/Attention.svg'
+
+
+export default (
+  <FixtureContext>
+    <BldrsDialogTabs
+      icon={<AttentionIcon className='icon-share'/>}
+      headerText={'Here\'s the thing!'}
+      isDialogDisplayed={true}
+      // eslint-disable-next-line no-empty-function
+      setIsDialogDisplayed={() => {}}
+      content={'What you should know about doing the thing'}
+      actionTitle={'Do do the thing?'}
+      actionCb={() => {
+        alert('You did the thing')
+      }}
+      tabNames={['Tab 1', 'Tab 2', 'Tab 3']}
+    />
+  </FixtureContext>
+)
diff --git a/src/Components/Library/BldrsDialogTabs.jsx b/src/Components/Library/BldrsDialogTabs.jsx
new file mode 100644
index 000000000..2279603ab
--- /dev/null
+++ b/src/Components/Library/BldrsDialogTabs.jsx
@@ -0,0 +1,60 @@
+import React from 'react'
+import DialogActions from '@mui/material/DialogActions'
+import DialogContent from '@mui/material/DialogContent'
+import DialogTitle from '@mui/material/DialogTitle'
+import MuiDialog from '@mui/material/Dialog'
+import {RectangularButton, CloseButton} from '../Buttons'
+import Tabs from './BldrsTabs'
+import {assertDefined} from '../../utils/assert'
+
+
+/**
+ * A generic base dialog component.
+ *
+ * @property {object} icon Leading icon above header description
+ * @property {string} headerText Short message describing the operation
+ * @property {boolean} isDialogDisplayed React var
+ * @property {Function} setIsDialogDisplayed React setter
+ * @property {React.ReactElement} content Content of the dialog
+ * @property {string} actionTitle Title for the action button
+ * @property {Function} actionCb Callback for action button
+ * @property {React.ReactElement} [actionIcon] Optional icon for the action button
+ * @property {Array<string>} tabNames Array of tabs name
+ * @return {React.Component}
+ */
+export default function Dialog({
+  icon,
+  headerText,
+  isDialogDisplayed,
+  setIsDialogDisplayed,
+  content,
+  actionTitle,
+  actionCb,
+  actionIcon,
+  tabNames,
+}) {
+  assertDefined(
+      icon, headerText, isDialogDisplayed, setIsDialogDisplayed, content,
+      actionTitle, actionCb)
+  const close = () => setIsDialogDisplayed(false)
+  return (
+    <MuiDialog
+      open={isDialogDisplayed}
+      onClose={close}
+      PaperProps={{variant: 'control'}}
+    >
+      <CloseButton onClick={close}/>
+      <DialogTitle>
+        {icon}<br/>
+        {headerText}
+      </DialogTitle>
+      <DialogContent>
+        <Tabs tabNames={tabNames}/>
+        {content}
+      </DialogContent>
+      <DialogActions>
+        <RectangularButton title={actionTitle} icon={actionIcon} onClick={actionCb}/>
+      </DialogActions>
+    </MuiDialog>
+  )
+}
diff --git a/src/Components/Library/BldrsTabs.jsx b/src/Components/Library/BldrsTabs.jsx
index 692767932..36dfe6f57 100644
--- a/src/Components/Library/BldrsTabs.jsx
+++ b/src/Components/Library/BldrsTabs.jsx
@@ -56,7 +56,7 @@ export default function BldrsTabs({tabNames, actionCb}) {
   }
   return (
     <Box sx={{width: '100%'}}>
-      <CustomTabs value={value} onChange={handleChange}>
+      <CustomTabs value={value} onChange={handleChange} centered variant="fullWidth">
         {tabNames.map((tabName) => {
           return (
             <CustomTab key={tabName} label={tabName}/>

From 5629c6a83b81990f4c11c561920a74f062ff9495 Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Sat, 5 Aug 2023 06:31:35 +0200
Subject: [PATCH 08/28] add tabs dialog

---
 package.json                                  |  2 +-
 src/Components/Dialog.jsx                     |  2 +-
 .../Library/BldrsDialogTabs.fixture.jsx       | 23 -----
 src/Components/Library/BldrsTabs.fixture.jsx  | 15 ---
 src/Components/Library/DialogTabs.fixture.jsx | 94 +++++++++++++++++++
 .../{BldrsDialogTabs.jsx => DialogTabs.jsx}   | 27 +++---
 src/Components/Library/Panel.jsx              | 21 +++++
 src/Components/Library/Tabs.fixture.jsx       | 29 ++++++
 src/Components/Library/Tabs.jsx               | 73 ++++++++++++++
 .../Library/{BldrsTabs.jsx => TabsSimple.jsx} | 12 +--
 src/theme/Components.js                       |  6 ++
 11 files changed, 246 insertions(+), 58 deletions(-)
 delete mode 100644 src/Components/Library/BldrsDialogTabs.fixture.jsx
 delete mode 100644 src/Components/Library/BldrsTabs.fixture.jsx
 create mode 100644 src/Components/Library/DialogTabs.fixture.jsx
 rename src/Components/Library/{BldrsDialogTabs.jsx => DialogTabs.jsx} (70%)
 create mode 100644 src/Components/Library/Panel.jsx
 create mode 100644 src/Components/Library/Tabs.fixture.jsx
 create mode 100644 src/Components/Library/Tabs.jsx
 rename src/Components/Library/{BldrsTabs.jsx => TabsSimple.jsx} (82%)

diff --git a/package.json b/package.json
index b3b4edda5..183002abd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r686",
+  "version": "1.0.0-r689",
   "main": "src/index.jsx",
   "license": "MIT",
   "homepage": "https://github.com/bldrs-ai/Share",
diff --git a/src/Components/Dialog.jsx b/src/Components/Dialog.jsx
index 66d9e3df9..2b073f610 100644
--- a/src/Components/Dialog.jsx
+++ b/src/Components/Dialog.jsx
@@ -45,7 +45,7 @@ export default function Dialog({
         {icon}<br/>
         {headerText}
       </DialogTitle>
-      <DialogContent>{content}</DialogContent>
+      <DialogContent sx={{border: '1px solid red'}}>{content}</DialogContent>
       <DialogActions>
         <RectangularButton title={actionTitle} icon={actionIcon} onClick={actionCb}/>
       </DialogActions>
diff --git a/src/Components/Library/BldrsDialogTabs.fixture.jsx b/src/Components/Library/BldrsDialogTabs.fixture.jsx
deleted file mode 100644
index e4d6d1af4..000000000
--- a/src/Components/Library/BldrsDialogTabs.fixture.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react'
-import FixtureContext from '../../FixtureContext'
-import BldrsDialogTabs from './BldrsDialogTabs'
-import AttentionIcon from '../../assets/icons/Attention.svg'
-
-
-export default (
-  <FixtureContext>
-    <BldrsDialogTabs
-      icon={<AttentionIcon className='icon-share'/>}
-      headerText={'Here\'s the thing!'}
-      isDialogDisplayed={true}
-      // eslint-disable-next-line no-empty-function
-      setIsDialogDisplayed={() => {}}
-      content={'What you should know about doing the thing'}
-      actionTitle={'Do do the thing?'}
-      actionCb={() => {
-        alert('You did the thing')
-      }}
-      tabNames={['Tab 1', 'Tab 2', 'Tab 3']}
-    />
-  </FixtureContext>
-)
diff --git a/src/Components/Library/BldrsTabs.fixture.jsx b/src/Components/Library/BldrsTabs.fixture.jsx
deleted file mode 100644
index c6a2608d7..000000000
--- a/src/Components/Library/BldrsTabs.fixture.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react'
-import FixtureContext from '../../FixtureContext'
-import BldrsTabs from './BldrsTabs'
-
-
-const callback = (value) => {
-  alert(value)
-}
-
-const tabNames = ['Explore Model', 'Open Model', 'Save Model']
-export default (
-  <FixtureContext>
-    <BldrsTabs tabNames={tabNames} actionCb={callback}/>
-  </FixtureContext>
-)
diff --git a/src/Components/Library/DialogTabs.fixture.jsx b/src/Components/Library/DialogTabs.fixture.jsx
new file mode 100644
index 000000000..5b6a0c6fa
--- /dev/null
+++ b/src/Components/Library/DialogTabs.fixture.jsx
@@ -0,0 +1,94 @@
+import React from 'react'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Typography'
+import FixtureContext from '../../FixtureContext'
+import DialogTabs from './DialogTabs'
+import AttentionIcon from '../../assets/icons/Attention.svg'
+import Panel from './Panel'
+
+
+const tabList = [
+  {
+    name: 'Explore',
+    content:
+    <Panel
+      content={
+        <Box sx={{textAlign: 'left'}}>
+          <Typography variant='h4'>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          </Typography>
+        </Box>
+      }
+    />,
+  },
+  {
+    name: 'Open',
+    content:
+    <Panel
+      content={
+        <Box sx={{textAlign: 'left'}}>
+          <Typography variant='h4'>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          </Typography>
+        </Box>
+      }
+    />,
+  },
+  {
+    name: 'Save',
+    content:
+    <Panel
+      content={
+        <Box sx={{textAlign: 'left'}}>
+          <Typography variant='h4'>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          </Typography>
+        </Box>
+      }
+    />,
+  },
+]
+export default (
+  <FixtureContext>
+    <DialogTabs
+      icon={<AttentionIcon className='icon-share'/>}
+      headerText={'Here\'s the thing!'}
+      isDialogDisplayed={true}
+      // eslint-disable-next-line no-empty-function
+      setIsDialogDisplayed={() => {}}
+      content={'What you should know about doing the thing'}
+      actionTitle={'Do do the thing?'}
+      actionCb={() => {
+        alert('You did the thing')
+      }}
+      tabList={tabList}
+    />
+  </FixtureContext>
+)
diff --git a/src/Components/Library/BldrsDialogTabs.jsx b/src/Components/Library/DialogTabs.jsx
similarity index 70%
rename from src/Components/Library/BldrsDialogTabs.jsx
rename to src/Components/Library/DialogTabs.jsx
index 2279603ab..2b9bfe85f 100644
--- a/src/Components/Library/BldrsDialogTabs.jsx
+++ b/src/Components/Library/DialogTabs.jsx
@@ -2,9 +2,11 @@ import React from 'react'
 import DialogActions from '@mui/material/DialogActions'
 import DialogContent from '@mui/material/DialogContent'
 import DialogTitle from '@mui/material/DialogTitle'
+import Typography from '@mui/material/Typography'
 import MuiDialog from '@mui/material/Dialog'
 import {RectangularButton, CloseButton} from '../Buttons'
-import Tabs from './BldrsTabs'
+import Tabs from './Tabs'
+import TabsSimple from './TabsSimple'
 import {assertDefined} from '../../utils/assert'
 
 
@@ -19,7 +21,7 @@ import {assertDefined} from '../../utils/assert'
  * @property {string} actionTitle Title for the action button
  * @property {Function} actionCb Callback for action button
  * @property {React.ReactElement} [actionIcon] Optional icon for the action button
- * @property {Array<string>} tabNames Array of tabs name
+ * @property {Array<object>} tabList Array of tabs name and tab content
  * @return {React.Component}
  */
 export default function Dialog({
@@ -27,15 +29,14 @@ export default function Dialog({
   headerText,
   isDialogDisplayed,
   setIsDialogDisplayed,
-  content,
   actionTitle,
   actionCb,
   actionIcon,
-  tabNames,
+  tabList,
 }) {
   assertDefined(
-      icon, headerText, isDialogDisplayed, setIsDialogDisplayed, content,
-      actionTitle, actionCb)
+      icon, headerText, isDialogDisplayed, setIsDialogDisplayed,
+      actionTitle, actionCb, tabList)
   const close = () => setIsDialogDisplayed(false)
   return (
     <MuiDialog
@@ -44,15 +45,17 @@ export default function Dialog({
       PaperProps={{variant: 'control'}}
     >
       <CloseButton onClick={close}/>
-      <DialogTitle>
+      <DialogTitle >
         {icon}<br/>
-        {headerText}
+        <Typography variant={'h4'}>{headerText}</Typography>
       </DialogTitle>
-      <DialogContent>
-        <Tabs tabNames={tabNames}/>
-        {content}
+      <DialogContent sx={{border: '1px solid lightGray', padding: '10px'}}>
+        <TabsSimple tabList={['Explore', 'Open', 'Save']}/>
       </DialogContent>
-      <DialogActions>
+      <DialogContent sx={{border: '1px solid lightGray', padding: '0px'}}>
+        <Tabs tabList={tabList}/>
+      </DialogContent>
+      <DialogActions sx={{border: '1px solid lightGray'}} disableSpacing>
         <RectangularButton title={actionTitle} icon={actionIcon} onClick={actionCb}/>
       </DialogActions>
     </MuiDialog>
diff --git a/src/Components/Library/Panel.jsx b/src/Components/Library/Panel.jsx
new file mode 100644
index 000000000..6039f87ba
--- /dev/null
+++ b/src/Components/Library/Panel.jsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import Box from '@mui/material/Box'
+
+/**
+ * Styled Tabs component.
+ *
+ * @property {React.Component} content component that is injected into a panel
+ * @return {React.Component}
+ */
+export default function Panel({content}) {
+  return (
+    <Box sx={{
+      width: '100%',
+      margin: '1em 0em 0em 0em',
+      borderRadius: '.3em',
+    }}
+    >
+      {content}
+    </Box>
+  )
+}
diff --git a/src/Components/Library/Tabs.fixture.jsx b/src/Components/Library/Tabs.fixture.jsx
new file mode 100644
index 000000000..ff07d8bf4
--- /dev/null
+++ b/src/Components/Library/Tabs.fixture.jsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import FixtureContext from '../../FixtureContext'
+import Tabs from './Tabs'
+
+
+const callback = (value) => {
+  alert(value)
+}
+
+const tabList = [
+  {
+    name: 'name1',
+    content: <div>hello1</div>,
+  },
+  {
+    name: 'name2',
+    content: <div>hello2</div>,
+  },
+  {
+    name: 'name3',
+    content: <div>hello3</div>,
+  },
+]
+
+export default (
+  <FixtureContext>
+    <Tabs tabList={tabList} actionCb={callback}/>
+  </FixtureContext>
+)
diff --git a/src/Components/Library/Tabs.jsx b/src/Components/Library/Tabs.jsx
new file mode 100644
index 000000000..fba8dca8f
--- /dev/null
+++ b/src/Components/Library/Tabs.jsx
@@ -0,0 +1,73 @@
+/* eslint-disable no-magic-numbers */
+import React, {useState} from 'react'
+import {styled} from '@mui/material/styles'
+import Box from '@mui/material/Box'
+import Tabs from '@mui/material/Tabs'
+import Tab from '@mui/material/Tab'
+
+
+const CustomTabs = styled(Tabs)(({theme}) => ({
+  // 'borderBottom': `1px solid ${theme.palette.primary.main}`,
+  '& .MuiTabs-indicator': {
+    backgroundColor: theme.palette.secondary.main,
+  },
+}))
+
+
+const CustomTab = styled((props) => <Tab disableRipple {...props}/>)(({theme}) => ({
+  'textTransform': 'none',
+  'minWidth': 0,
+  [theme.breakpoints.up('sm')]: {
+    minWidth: 0,
+  },
+  'fontSize': '.9em',
+  'fontWeight': theme.typography.fontWeight,
+  'marginRight': theme.spacing(0),
+  'color': theme.palette.primary.contrastText,
+  'fontFamily': theme.typography.fontFamily,
+  '&:hover': {
+    color: theme.palette.secondary.main,
+  },
+  '&.Mui-selected': {
+    color: theme.palette.secondary.main,
+    fontWeight: theme.typography.fontWeight,
+  },
+  '&.Mui-focusVisible': {
+    backgroundColor: 'green',
+  },
+  '@media (max-width: 700px)': {
+    fontSize: '.7em',
+  },
+}))
+
+
+/**
+ * Styled Tabs component.
+ *
+ * @property {Array<object>} tabList array of Tab objects containing names and content components
+ * @return {React.Component}
+ */
+export default function BldrsTabs({tabList, actionCb}) {
+  const [value, setValue] = useState(0)
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue)
+    actionCb(newValue)
+  }
+  return (
+    <Box sx={{width: '100%'}}>
+      <CustomTabs value={value} onChange={handleChange} centered variant="fullWidth">
+        {tabList.map((tab) => {
+          return (
+            <CustomTab key={tab.name} label={tab.name}/>
+          )
+        })}
+      </CustomTabs>
+      {tabList.map((tab, i) => {
+        return (
+          value === i && tab.content
+        )
+      })}
+    </Box>
+  )
+}
diff --git a/src/Components/Library/BldrsTabs.jsx b/src/Components/Library/TabsSimple.jsx
similarity index 82%
rename from src/Components/Library/BldrsTabs.jsx
rename to src/Components/Library/TabsSimple.jsx
index 36dfe6f57..93d2f3fd4 100644
--- a/src/Components/Library/BldrsTabs.jsx
+++ b/src/Components/Library/TabsSimple.jsx
@@ -7,7 +7,7 @@ import Tab from '@mui/material/Tab'
 
 
 const CustomTabs = styled(Tabs)(({theme}) => ({
-  'borderBottom': `1px solid ${theme.palette.primary.main}`,
+  // 'borderBottom': `1px solid ${theme.palette.primary.main}`,
   '& .MuiTabs-indicator': {
     backgroundColor: theme.palette.secondary.main,
   },
@@ -20,7 +20,7 @@ const CustomTab = styled((props) => <Tab disableRipple {...props}/>)(({theme}) =
   [theme.breakpoints.up('sm')]: {
     minWidth: 0,
   },
-  'fontSize': '1em',
+  'fontSize': '.9em',
   'fontWeight': theme.typography.fontWeight,
   'marginRight': theme.spacing(0),
   'color': theme.palette.primary.contrastText,
@@ -44,10 +44,10 @@ const CustomTab = styled((props) => <Tab disableRipple {...props}/>)(({theme}) =
 /**
  * Styled Tabs component.
  *
- * @property {Array<string>} tabs array of tabs
+ * @property {Array<string>} tabList array of Tab strings composed of tab names
  * @return {React.Component}
  */
-export default function BldrsTabs({tabNames, actionCb}) {
+export default function BldrsTabs({tabList, actionCb}) {
   const [value, setValue] = useState(0)
 
   const handleChange = (event, newValue) => {
@@ -57,9 +57,9 @@ export default function BldrsTabs({tabNames, actionCb}) {
   return (
     <Box sx={{width: '100%'}}>
       <CustomTabs value={value} onChange={handleChange} centered variant="fullWidth">
-        {tabNames.map((tabName) => {
+        {tabList.map((tab) => {
           return (
-            <CustomTab key={tabName} label={tabName}/>
+            <CustomTab key={tab} label={tab}/>
           )
         })}
       </CustomTabs>
diff --git a/src/theme/Components.js b/src/theme/Components.js
index c9d2d6834..43222940f 100644
--- a/src/theme/Components.js
+++ b/src/theme/Components.js
@@ -55,6 +55,12 @@ export function getComponentOverrides(palette) {
         },
       },
     },
+    MuiDialog: {
+      styleOverrides: {
+        root: {
+        },
+      },
+    },
     MuiPaper: {
       styleOverrides: {
         root: {

From 88820d6d57c842c55649c65532a7764e5ca254b1 Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Fri, 4 Aug 2023 14:54:01 +0200
Subject: [PATCH 09/28] add tabs to a dialog

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 183002abd..71c3386ad 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r689",
+  "version": "1.0.0-r690",
   "main": "src/index.jsx",
   "license": "MIT",
   "homepage": "https://github.com/bldrs-ai/Share",

From 51a849ff65cd2373e1b887909ee9757f236dc3b4 Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Wed, 9 Aug 2023 14:38:14 +0200
Subject: [PATCH 10/28] reworked the dialog

---
 package.json                                  |   2 +-
 src/Components/Dialog.jsx                     |   2 +-
 src/Components/Library/DialogTabs.fixture.jsx | 135 +++++++++---------
 src/Components/Library/DialogTabs.jsx         |  33 +++--
 src/Components/Library/Panel.jsx              |   1 -
 src/Components/Library/Tabs.fixture.jsx       |  29 ----
 src/Components/Library/Tabs.jsx               |  55 +------
 src/Components/Library/TabsSimple.jsx         |  68 ---------
 src/Styles.jsx                                |   4 +-
 src/theme/Components.js                       |  46 +++++-
 src/theme/Theme.jsx                           |   2 +-
 11 files changed, 142 insertions(+), 235 deletions(-)
 delete mode 100644 src/Components/Library/Tabs.fixture.jsx
 delete mode 100644 src/Components/Library/TabsSimple.jsx

diff --git a/package.json b/package.json
index 71c3386ad..308077c63 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r690",
+  "version": "1.0.0-r691",
   "main": "src/index.jsx",
   "license": "MIT",
   "homepage": "https://github.com/bldrs-ai/Share",
diff --git a/src/Components/Dialog.jsx b/src/Components/Dialog.jsx
index 2b073f610..66d9e3df9 100644
--- a/src/Components/Dialog.jsx
+++ b/src/Components/Dialog.jsx
@@ -45,7 +45,7 @@ export default function Dialog({
         {icon}<br/>
         {headerText}
       </DialogTitle>
-      <DialogContent sx={{border: '1px solid red'}}>{content}</DialogContent>
+      <DialogContent>{content}</DialogContent>
       <DialogActions>
         <RectangularButton title={actionTitle} icon={actionIcon} onClick={actionCb}/>
       </DialogActions>
diff --git a/src/Components/Library/DialogTabs.fixture.jsx b/src/Components/Library/DialogTabs.fixture.jsx
index 5b6a0c6fa..3013c3935 100644
--- a/src/Components/Library/DialogTabs.fixture.jsx
+++ b/src/Components/Library/DialogTabs.fixture.jsx
@@ -7,74 +7,73 @@ import AttentionIcon from '../../assets/icons/Attention.svg'
 import Panel from './Panel'
 
 
-const tabList = [
-  {
-    name: 'Explore',
-    content:
-    <Panel
-      content={
-        <Box sx={{textAlign: 'left'}}>
-          <Typography variant='h4'>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-          </Typography>
-        </Box>
-      }
-    />,
-  },
-  {
-    name: 'Open',
-    content:
-    <Panel
-      content={
-        <Box sx={{textAlign: 'left'}}>
-          <Typography variant='h4'>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-          </Typography>
-        </Box>
-      }
-    />,
-  },
-  {
-    name: 'Save',
-    content:
-    <Panel
-      content={
-        <Box sx={{textAlign: 'left'}}>
-          <Typography variant='h4'>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-          </Typography>
-        </Box>
-      }
-    />,
-  },
+const tabList = ['Explore', 'Open', 'Save']
+
+const contentList = [
+  <Panel
+    key={1}
+    content={
+      <Box sx={{textAlign: 'left'}}>
+        <Typography variant='h4'>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </Typography>
+      </Box>
+    }
+  />,
+  <Panel
+    key={2}
+    content={
+      <Box sx={{textAlign: 'left'}}>
+        <Typography variant='h4'>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </Typography>
+      </Box>
+    }
+  />,
+  <Panel
+    key={3}
+    content={
+      <Box sx={{textAlign: 'left'}}>
+        <Typography variant='h4'>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </Typography>
+      </Box>
+    }
+  />,
 ]
+
+const headerTextList = ['Explore Sample Projects', 'Open Project', 'Save Project']
+
+
+// const contentList = ['one', 'two', 'three']
+
 export default (
   <FixtureContext>
     <DialogTabs
@@ -89,6 +88,8 @@ export default (
         alert('You did the thing')
       }}
       tabList={tabList}
+      contentList={contentList}
+      headerTextList={headerTextList}
     />
   </FixtureContext>
 )
diff --git a/src/Components/Library/DialogTabs.jsx b/src/Components/Library/DialogTabs.jsx
index 2b9bfe85f..1f5f43ec0 100644
--- a/src/Components/Library/DialogTabs.jsx
+++ b/src/Components/Library/DialogTabs.jsx
@@ -1,45 +1,48 @@
-import React from 'react'
+import React, {useState} from 'react'
 import DialogActions from '@mui/material/DialogActions'
 import DialogContent from '@mui/material/DialogContent'
 import DialogTitle from '@mui/material/DialogTitle'
 import Typography from '@mui/material/Typography'
 import MuiDialog from '@mui/material/Dialog'
-import {RectangularButton, CloseButton} from '../Buttons'
 import Tabs from './Tabs'
-import TabsSimple from './TabsSimple'
+import {RectangularButton, CloseButton} from '../Buttons'
 import {assertDefined} from '../../utils/assert'
 
 
 /**
  * A generic base dialog component.
  *
- * @property {object} icon Leading icon above header description
- * @property {string} headerText Short message describing the operation
+ * @property {React.ReactElement} icon Leading icon above header description
+ * @property {Array<string>} headerText Short array of messages describing the current opeation
  * @property {boolean} isDialogDisplayed React var
  * @property {Function} setIsDialogDisplayed React setter
  * @property {React.ReactElement} content Content of the dialog
  * @property {string} actionTitle Title for the action button
  * @property {Function} actionCb Callback for action button
  * @property {React.ReactElement} [actionIcon] Optional icon for the action button
- * @property {Array<object>} tabList Array of tabs name and tab content
+ * @property {Array<string>} tabList Array of tabs name and tab content
+ * @property {Array<React.ReactElement>} contentLis Array of components coresponding to the tabs
  * @return {React.Component}
  */
 export default function Dialog({
   icon,
-  headerText,
+  headerTextList = ['loading'],
   isDialogDisplayed,
   setIsDialogDisplayed,
   actionTitle,
   actionCb,
   actionIcon,
-  tabList,
+  tabList = ['loading'],
+  contentList = ['loading'],
 }) {
   assertDefined(
-      icon, headerText, isDialogDisplayed, setIsDialogDisplayed,
+      icon, headerTextList, isDialogDisplayed, setIsDialogDisplayed,
       actionTitle, actionCb, tabList)
   const close = () => setIsDialogDisplayed(false)
+  const [currentTab, setCurrentTab] = useState(0)
   return (
     <MuiDialog
+      maxWidth={'xs'}
       open={isDialogDisplayed}
       onClose={close}
       PaperProps={{variant: 'control'}}
@@ -47,15 +50,15 @@ export default function Dialog({
       <CloseButton onClick={close}/>
       <DialogTitle >
         {icon}<br/>
-        <Typography variant={'h4'}>{headerText}</Typography>
+        <Typography variant={'h4'}>{headerTextList[currentTab]}</Typography>
       </DialogTitle>
-      <DialogContent sx={{border: '1px solid lightGray', padding: '10px'}}>
-        <TabsSimple tabList={['Explore', 'Open', 'Save']}/>
+      <DialogContent sx={{height: '70px'}}>
+        <Tabs tabList={tabList} actionCb={setCurrentTab}/>
       </DialogContent>
-      <DialogContent sx={{border: '1px solid lightGray', padding: '0px'}}>
-        <Tabs tabList={tabList}/>
+      <DialogContent >
+        {contentList[currentTab] || 'loading' }
       </DialogContent>
-      <DialogActions sx={{border: '1px solid lightGray'}} disableSpacing>
+      <DialogActions disableSpacing>
         <RectangularButton title={actionTitle} icon={actionIcon} onClick={actionCb}/>
       </DialogActions>
     </MuiDialog>
diff --git a/src/Components/Library/Panel.jsx b/src/Components/Library/Panel.jsx
index 6039f87ba..81910fa44 100644
--- a/src/Components/Library/Panel.jsx
+++ b/src/Components/Library/Panel.jsx
@@ -11,7 +11,6 @@ export default function Panel({content}) {
   return (
     <Box sx={{
       width: '100%',
-      margin: '1em 0em 0em 0em',
       borderRadius: '.3em',
     }}
     >
diff --git a/src/Components/Library/Tabs.fixture.jsx b/src/Components/Library/Tabs.fixture.jsx
deleted file mode 100644
index ff07d8bf4..000000000
--- a/src/Components/Library/Tabs.fixture.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react'
-import FixtureContext from '../../FixtureContext'
-import Tabs from './Tabs'
-
-
-const callback = (value) => {
-  alert(value)
-}
-
-const tabList = [
-  {
-    name: 'name1',
-    content: <div>hello1</div>,
-  },
-  {
-    name: 'name2',
-    content: <div>hello2</div>,
-  },
-  {
-    name: 'name3',
-    content: <div>hello3</div>,
-  },
-]
-
-export default (
-  <FixtureContext>
-    <Tabs tabList={tabList} actionCb={callback}/>
-  </FixtureContext>
-)
diff --git a/src/Components/Library/Tabs.jsx b/src/Components/Library/Tabs.jsx
index fba8dca8f..19856439f 100644
--- a/src/Components/Library/Tabs.jsx
+++ b/src/Components/Library/Tabs.jsx
@@ -1,53 +1,15 @@
-/* eslint-disable no-magic-numbers */
 import React, {useState} from 'react'
-import {styled} from '@mui/material/styles'
 import Box from '@mui/material/Box'
-import Tabs from '@mui/material/Tabs'
+import MuiTabs from '@mui/material/Tabs'
 import Tab from '@mui/material/Tab'
 
-
-const CustomTabs = styled(Tabs)(({theme}) => ({
-  // 'borderBottom': `1px solid ${theme.palette.primary.main}`,
-  '& .MuiTabs-indicator': {
-    backgroundColor: theme.palette.secondary.main,
-  },
-}))
-
-
-const CustomTab = styled((props) => <Tab disableRipple {...props}/>)(({theme}) => ({
-  'textTransform': 'none',
-  'minWidth': 0,
-  [theme.breakpoints.up('sm')]: {
-    minWidth: 0,
-  },
-  'fontSize': '.9em',
-  'fontWeight': theme.typography.fontWeight,
-  'marginRight': theme.spacing(0),
-  'color': theme.palette.primary.contrastText,
-  'fontFamily': theme.typography.fontFamily,
-  '&:hover': {
-    color: theme.palette.secondary.main,
-  },
-  '&.Mui-selected': {
-    color: theme.palette.secondary.main,
-    fontWeight: theme.typography.fontWeight,
-  },
-  '&.Mui-focusVisible': {
-    backgroundColor: 'green',
-  },
-  '@media (max-width: 700px)': {
-    fontSize: '.7em',
-  },
-}))
-
-
 /**
  * Styled Tabs component.
  *
- * @property {Array<object>} tabList array of Tab objects containing names and content components
+ * @property {Array<string>} tabList array of Tab strings composed of tab names
  * @return {React.Component}
  */
-export default function BldrsTabs({tabList, actionCb}) {
+export default function Tabs({tabList, actionCb}) {
   const [value, setValue] = useState(0)
 
   const handleChange = (event, newValue) => {
@@ -56,18 +18,13 @@ export default function BldrsTabs({tabList, actionCb}) {
   }
   return (
     <Box sx={{width: '100%'}}>
-      <CustomTabs value={value} onChange={handleChange} centered variant="fullWidth">
+      <MuiTabs value={value} onChange={handleChange} centered variant="fullWidth">
         {tabList.map((tab) => {
           return (
-            <CustomTab key={tab.name} label={tab.name}/>
+            <Tab key={tab} label={tab}/>
           )
         })}
-      </CustomTabs>
-      {tabList.map((tab, i) => {
-        return (
-          value === i && tab.content
-        )
-      })}
+      </MuiTabs>
     </Box>
   )
 }
diff --git a/src/Components/Library/TabsSimple.jsx b/src/Components/Library/TabsSimple.jsx
deleted file mode 100644
index 93d2f3fd4..000000000
--- a/src/Components/Library/TabsSimple.jsx
+++ /dev/null
@@ -1,68 +0,0 @@
-/* eslint-disable no-magic-numbers */
-import React, {useState} from 'react'
-import {styled} from '@mui/material/styles'
-import Box from '@mui/material/Box'
-import Tabs from '@mui/material/Tabs'
-import Tab from '@mui/material/Tab'
-
-
-const CustomTabs = styled(Tabs)(({theme}) => ({
-  // 'borderBottom': `1px solid ${theme.palette.primary.main}`,
-  '& .MuiTabs-indicator': {
-    backgroundColor: theme.palette.secondary.main,
-  },
-}))
-
-
-const CustomTab = styled((props) => <Tab disableRipple {...props}/>)(({theme}) => ({
-  'textTransform': 'none',
-  'minWidth': 0,
-  [theme.breakpoints.up('sm')]: {
-    minWidth: 0,
-  },
-  'fontSize': '.9em',
-  'fontWeight': theme.typography.fontWeight,
-  'marginRight': theme.spacing(0),
-  'color': theme.palette.primary.contrastText,
-  'fontFamily': theme.typography.fontFamily,
-  '&:hover': {
-    color: theme.palette.secondary.main,
-  },
-  '&.Mui-selected': {
-    color: theme.palette.secondary.main,
-    fontWeight: theme.typography.fontWeight,
-  },
-  '&.Mui-focusVisible': {
-    backgroundColor: 'green',
-  },
-  '@media (max-width: 700px)': {
-    fontSize: '.7em',
-  },
-}))
-
-
-/**
- * Styled Tabs component.
- *
- * @property {Array<string>} tabList array of Tab strings composed of tab names
- * @return {React.Component}
- */
-export default function BldrsTabs({tabList, actionCb}) {
-  const [value, setValue] = useState(0)
-
-  const handleChange = (event, newValue) => {
-    setValue(newValue)
-    actionCb(newValue)
-  }
-  return (
-    <Box sx={{width: '100%'}}>
-      <CustomTabs value={value} onChange={handleChange} centered variant="fullWidth">
-        {tabList.map((tab) => {
-          return (
-            <CustomTab key={tab} label={tab}/>
-          )
-        })}
-      </CustomTabs>
-    </Box>
-  )
-}
diff --git a/src/Styles.jsx b/src/Styles.jsx
index 642e2773e..39102c1ff 100644
--- a/src/Styles.jsx
+++ b/src/Styles.jsx
@@ -26,7 +26,7 @@ export default function Styles({theme}) {
         },
         '.MuiDialog-paper': {
           textAlign: 'center',
-          padding: '1em 0.5em',
+          padding: '0.5em',
         },
         '.MuiDialog-paper > .MuiButtonBase-root': {
           position: 'absolute',
@@ -65,7 +65,7 @@ export default function Styles({theme}) {
           height: '12px',
         },
         '*::-webkit-scrollbar': {
-          width: '10px',
+          width: '2px',
           background: theme.palette.secondary.background,
         },
         '*::-webkit-scrollbar-thumb': {
diff --git a/src/theme/Components.js b/src/theme/Components.js
index 43222940f..fc9df405e 100644
--- a/src/theme/Components.js
+++ b/src/theme/Components.js
@@ -2,7 +2,7 @@
  * @param {object} Mui color palette.
  * @return {object} Mui component overrides.
  */
-export function getComponentOverrides(palette) {
+export function getComponentOverrides(palette, typography) {
   return {
     MuiTreeItem: {
       styleOverrides: {
@@ -61,6 +61,14 @@ export function getComponentOverrides(palette) {
         },
       },
     },
+    MuiDialogContent: {
+      styleOverrides: {
+        root: {
+          height: '240px',
+          padding: '0px 10px',
+        },
+      },
+    },
     MuiPaper: {
       styleOverrides: {
         root: {
@@ -81,6 +89,42 @@ export function getComponentOverrides(palette) {
         },
       ],
     },
+    MuiTab: {
+      styleOverrides: {
+        root: {
+          'textTransform': 'none',
+          'minWidth': 0,
+          'fontSize': '.9em',
+          'fontWeight': typography.fontWeight,
+          'marginRight': 0,
+          'color': palette.primary.contrastText,
+          'fontFamily': typography.fontFamily,
+          '&:hover': {
+            color: palette.secondary.main,
+          },
+          '&.Mui-selected': {
+            color: palette.secondary.main,
+            fontWeight: typography.fontWeight,
+          },
+          '&.Mui-focusVisible': {
+            backgroundColor: 'green',
+          },
+          '@media (max-width: 700px)': {
+            fontSize: '.7em',
+          },
+        },
+      },
+    },
+    MuiTabs: {
+      styleOverrides: {
+        root: {
+          '& .MuiTabs-indicator': {
+            backgroundColor: palette.secondary.main,
+          },
+        },
+      },
+    },
+
     MuiCardActions: {
       styleOverrides: {
         root: {
diff --git a/src/theme/Theme.jsx b/src/theme/Theme.jsx
index 215dfa79e..4d3f98649 100644
--- a/src/theme/Theme.jsx
+++ b/src/theme/Theme.jsx
@@ -53,7 +53,7 @@ function loadTheme(mode, setMode, themeChangeListeners) {
   // https://mui.com/customization/dark-mode/
   const activePalette = mode === Themes.Day ? day : night
   const theme = {
-    components: getComponentOverrides(activePalette),
+    components: getComponentOverrides(activePalette, getTypography()),
     typography: getTypography(),
     shape: {borderRadius: 8},
     palette: activePalette,

From fc80c6d8dc7152284ffc70b6409490e16830ef88 Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Wed, 9 Aug 2023 14:41:43 +0200
Subject: [PATCH 11/28]  organize component props

---
 package.json                          | 2 +-
 src/Components/Library/DialogTabs.jsx | 9 ++++-----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 308077c63..13a988a9c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r691",
+  "version": "1.0.0-r692",
   "main": "src/index.jsx",
   "license": "MIT",
   "homepage": "https://github.com/bldrs-ai/Share",
diff --git a/src/Components/Library/DialogTabs.jsx b/src/Components/Library/DialogTabs.jsx
index 1f5f43ec0..aa4702757 100644
--- a/src/Components/Library/DialogTabs.jsx
+++ b/src/Components/Library/DialogTabs.jsx
@@ -14,26 +14,25 @@ import {assertDefined} from '../../utils/assert'
  *
  * @property {React.ReactElement} icon Leading icon above header description
  * @property {Array<string>} headerText Short array of messages describing the current opeation
+ * @property {Array<string>} tabList Array of tabs name and tab content
+ * @property {Array<React.ReactElement>} contentList Array of components coresponding to the tabs
  * @property {boolean} isDialogDisplayed React var
  * @property {Function} setIsDialogDisplayed React setter
- * @property {React.ReactElement} content Content of the dialog
  * @property {string} actionTitle Title for the action button
  * @property {Function} actionCb Callback for action button
  * @property {React.ReactElement} [actionIcon] Optional icon for the action button
- * @property {Array<string>} tabList Array of tabs name and tab content
- * @property {Array<React.ReactElement>} contentLis Array of components coresponding to the tabs
  * @return {React.Component}
  */
 export default function Dialog({
   icon,
   headerTextList = ['loading'],
+  tabList = ['loading'],
+  contentList = ['loading'],
   isDialogDisplayed,
   setIsDialogDisplayed,
   actionTitle,
   actionCb,
   actionIcon,
-  tabList = ['loading'],
-  contentList = ['loading'],
 }) {
   assertDefined(
       icon, headerTextList, isDialogDisplayed, setIsDialogDisplayed,

From 678cc575dca888863d2de53334c79cfa05c5c8cf Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Wed, 9 Aug 2023 15:18:38 +0200
Subject: [PATCH 12/28] edit component

---
 package.json                                  |  2 +-
 src/Components/DialogTabs.fixture.jsx         | 79 +++++++++++++++
 src/Components/{Library => }/DialogTabs.jsx   |  0
 src/Components/Library/DialogTabs.fixture.jsx | 95 -------------------
 src/Components/Library/Panel.jsx              | 20 ----
 src/Components/{Library => }/Tabs.jsx         |  0
 6 files changed, 80 insertions(+), 116 deletions(-)
 create mode 100644 src/Components/DialogTabs.fixture.jsx
 rename src/Components/{Library => }/DialogTabs.jsx (100%)
 delete mode 100644 src/Components/Library/DialogTabs.fixture.jsx
 delete mode 100644 src/Components/Library/Panel.jsx
 rename src/Components/{Library => }/Tabs.jsx (100%)

diff --git a/package.json b/package.json
index 13a988a9c..d31f54307 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r692",
+  "version": "1.0.0-r693",
   "main": "src/index.jsx",
   "license": "MIT",
   "homepage": "https://github.com/bldrs-ai/Share",
diff --git a/src/Components/DialogTabs.fixture.jsx b/src/Components/DialogTabs.fixture.jsx
new file mode 100644
index 000000000..1d896c5d3
--- /dev/null
+++ b/src/Components/DialogTabs.fixture.jsx
@@ -0,0 +1,79 @@
+import React from 'react'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Typography'
+import FixtureContext from '../FixtureContext'
+import DialogTabs from './DialogTabs'
+import AttentionIcon from '../assets/icons/Attention.svg'
+
+
+const tabList = ['Explore', 'Open', 'Save']
+
+const contentList = [
+  <Box sx={{textAlign: 'left'}} key={1}>
+    <Typography variant='h4'>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </Typography>
+  </Box>,
+  <Box sx={{textAlign: 'left'}} key={2}>
+    <Typography variant='h4'>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </Typography>
+  </Box>,
+  <Box sx={{textAlign: 'left'}} key={2}>
+    <Typography variant='h4'>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </Typography>
+  </Box>,
+]
+
+const headerTextList = ['Explore Sample Projects', 'Open Project', 'Save Project']
+
+
+// const contentList = ['one', 'two', 'three']
+
+export default (
+  <FixtureContext>
+    <DialogTabs
+      icon={<AttentionIcon className='icon-share'/>}
+      headerText={'Here\'s the thing!'}
+      isDialogDisplayed={true}
+      // eslint-disable-next-line no-empty-function
+      setIsDialogDisplayed={() => {}}
+      content={'What you should know about doing the thing'}
+      actionTitle={'Do do the thing?'}
+      actionCb={() => {
+        alert('You did the thing')
+      }}
+      tabList={tabList}
+      contentList={contentList}
+      headerTextList={headerTextList}
+    />
+  </FixtureContext>
+)
diff --git a/src/Components/Library/DialogTabs.jsx b/src/Components/DialogTabs.jsx
similarity index 100%
rename from src/Components/Library/DialogTabs.jsx
rename to src/Components/DialogTabs.jsx
diff --git a/src/Components/Library/DialogTabs.fixture.jsx b/src/Components/Library/DialogTabs.fixture.jsx
deleted file mode 100644
index 3013c3935..000000000
--- a/src/Components/Library/DialogTabs.fixture.jsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import React from 'react'
-import Typography from '@mui/material/Typography'
-import Box from '@mui/material/Typography'
-import FixtureContext from '../../FixtureContext'
-import DialogTabs from './DialogTabs'
-import AttentionIcon from '../../assets/icons/Attention.svg'
-import Panel from './Panel'
-
-
-const tabList = ['Explore', 'Open', 'Save']
-
-const contentList = [
-  <Panel
-    key={1}
-    content={
-      <Box sx={{textAlign: 'left'}}>
-        <Typography variant='h4'>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </Typography>
-      </Box>
-    }
-  />,
-  <Panel
-    key={2}
-    content={
-      <Box sx={{textAlign: 'left'}}>
-        <Typography variant='h4'>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </Typography>
-      </Box>
-    }
-  />,
-  <Panel
-    key={3}
-    content={
-      <Box sx={{textAlign: 'left'}}>
-        <Typography variant='h4'>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </Typography>
-      </Box>
-    }
-  />,
-]
-
-const headerTextList = ['Explore Sample Projects', 'Open Project', 'Save Project']
-
-
-// const contentList = ['one', 'two', 'three']
-
-export default (
-  <FixtureContext>
-    <DialogTabs
-      icon={<AttentionIcon className='icon-share'/>}
-      headerText={'Here\'s the thing!'}
-      isDialogDisplayed={true}
-      // eslint-disable-next-line no-empty-function
-      setIsDialogDisplayed={() => {}}
-      content={'What you should know about doing the thing'}
-      actionTitle={'Do do the thing?'}
-      actionCb={() => {
-        alert('You did the thing')
-      }}
-      tabList={tabList}
-      contentList={contentList}
-      headerTextList={headerTextList}
-    />
-  </FixtureContext>
-)
diff --git a/src/Components/Library/Panel.jsx b/src/Components/Library/Panel.jsx
deleted file mode 100644
index 81910fa44..000000000
--- a/src/Components/Library/Panel.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-import Box from '@mui/material/Box'
-
-/**
- * Styled Tabs component.
- *
- * @property {React.Component} content component that is injected into a panel
- * @return {React.Component}
- */
-export default function Panel({content}) {
-  return (
-    <Box sx={{
-      width: '100%',
-      borderRadius: '.3em',
-    }}
-    >
-      {content}
-    </Box>
-  )
-}
diff --git a/src/Components/Library/Tabs.jsx b/src/Components/Tabs.jsx
similarity index 100%
rename from src/Components/Library/Tabs.jsx
rename to src/Components/Tabs.jsx

From 682f46226ddfdad0916bdb23c468cd358bdf247a Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Wed, 9 Aug 2023 15:30:11 +0200
Subject: [PATCH 13/28] clean up

---
 package.json                  | 2 +-
 src/Components/DialogTabs.jsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index d31f54307..d21e0b8e6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r693",
+  "version": "1.0.0-r694",
   "main": "src/index.jsx",
   "license": "MIT",
   "homepage": "https://github.com/bldrs-ai/Share",
diff --git a/src/Components/DialogTabs.jsx b/src/Components/DialogTabs.jsx
index aa4702757..255cea320 100644
--- a/src/Components/DialogTabs.jsx
+++ b/src/Components/DialogTabs.jsx
@@ -5,12 +5,12 @@ import DialogTitle from '@mui/material/DialogTitle'
 import Typography from '@mui/material/Typography'
 import MuiDialog from '@mui/material/Dialog'
 import Tabs from './Tabs'
-import {RectangularButton, CloseButton} from '../Buttons'
-import {assertDefined} from '../../utils/assert'
+import {RectangularButton, CloseButton} from './Buttons'
+import {assertDefined} from '../utils/assert'
 
 
 /**
- * A generic base dialog component.
+ * A ialog with tabs component.
  *
  * @property {React.ReactElement} icon Leading icon above header description
  * @property {Array<string>} headerText Short array of messages describing the current opeation

From 9800bd3a128d01bcf22c961c126efea1e86575e3 Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Wed, 9 Aug 2023 15:44:52 +0200
Subject: [PATCH 14/28] clean up

---
 src/Components/DialogTabs.fixture.jsx | 4 ----
 src/Components/DialogTabs.jsx         | 4 ++--
 src/Components/Tabs.jsx               | 3 ++-
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/Components/DialogTabs.fixture.jsx b/src/Components/DialogTabs.fixture.jsx
index 1d896c5d3..2daecbce8 100644
--- a/src/Components/DialogTabs.fixture.jsx
+++ b/src/Components/DialogTabs.fixture.jsx
@@ -7,7 +7,6 @@ import AttentionIcon from '../assets/icons/Attention.svg'
 
 
 const tabList = ['Explore', 'Open', 'Save']
-
 const contentList = [
   <Box sx={{textAlign: 'left'}} key={1}>
     <Typography variant='h4'>
@@ -52,12 +51,9 @@ const contentList = [
     </Typography>
   </Box>,
 ]
-
 const headerTextList = ['Explore Sample Projects', 'Open Project', 'Save Project']
 
 
-// const contentList = ['one', 'two', 'three']
-
 export default (
   <FixtureContext>
     <DialogTabs
diff --git a/src/Components/DialogTabs.jsx b/src/Components/DialogTabs.jsx
index 255cea320..da445af34 100644
--- a/src/Components/DialogTabs.jsx
+++ b/src/Components/DialogTabs.jsx
@@ -10,11 +10,11 @@ import {assertDefined} from '../utils/assert'
 
 
 /**
- * A ialog with tabs component.
+ * A Dialog with tabs compoent.
  *
  * @property {React.ReactElement} icon Leading icon above header description
  * @property {Array<string>} headerText Short array of messages describing the current opeation
- * @property {Array<string>} tabList Array of tabs name and tab content
+ * @property {Array<string>} tabList Array of tabs names
  * @property {Array<React.ReactElement>} contentList Array of components coresponding to the tabs
  * @property {boolean} isDialogDisplayed React var
  * @property {Function} setIsDialogDisplayed React setter
diff --git a/src/Components/Tabs.jsx b/src/Components/Tabs.jsx
index 19856439f..eaf0feb0b 100644
--- a/src/Components/Tabs.jsx
+++ b/src/Components/Tabs.jsx
@@ -4,9 +4,10 @@ import MuiTabs from '@mui/material/Tabs'
 import Tab from '@mui/material/Tab'
 
 /**
- * Styled Tabs component.
+ * Tabs component.
  *
  * @property {Array<string>} tabList array of Tab strings composed of tab names
+ * @property {Function} actionCb called back fired when the tabs is selected returns currect tab number
  * @return {React.Component}
  */
 export default function Tabs({tabList, actionCb}) {

From 791c5290f8c6903d1f8980204de77980be46f697 Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Wed, 9 Aug 2023 15:54:26 +0200
Subject: [PATCH 15/28] adjust the theme

---
 src/Components/DialogTabs.jsx | 4 ++--
 src/theme/Components.js       | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/Components/DialogTabs.jsx b/src/Components/DialogTabs.jsx
index da445af34..19209eab2 100644
--- a/src/Components/DialogTabs.jsx
+++ b/src/Components/DialogTabs.jsx
@@ -51,10 +51,10 @@ export default function Dialog({
         {icon}<br/>
         <Typography variant={'h4'}>{headerTextList[currentTab]}</Typography>
       </DialogTitle>
-      <DialogContent sx={{height: '70px'}}>
+      <DialogContent>
         <Tabs tabList={tabList} actionCb={setCurrentTab}/>
       </DialogContent>
-      <DialogContent >
+      <DialogContent sx={{height: '240px'}}>
         {contentList[currentTab] || 'loading' }
       </DialogContent>
       <DialogActions disableSpacing>
diff --git a/src/theme/Components.js b/src/theme/Components.js
index fc9df405e..3392a2077 100644
--- a/src/theme/Components.js
+++ b/src/theme/Components.js
@@ -64,7 +64,6 @@ export function getComponentOverrides(palette, typography) {
     MuiDialogContent: {
       styleOverrides: {
         root: {
-          height: '240px',
           padding: '0px 10px',
         },
       },

From 2cc1879e6f2627ea5508a172c3c08740631437c2 Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Wed, 9 Aug 2023 16:22:40 +0200
Subject: [PATCH 16/28] spacing clean up

---
 package.json                  | 2 +-
 src/Components/DialogTabs.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index d21e0b8e6..2395b847a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r694",
+  "version": "1.0.0-r697",
   "main": "src/index.jsx",
   "license": "MIT",
   "homepage": "https://github.com/bldrs-ai/Share",
diff --git a/src/Components/DialogTabs.jsx b/src/Components/DialogTabs.jsx
index 19209eab2..5b3a6e41c 100644
--- a/src/Components/DialogTabs.jsx
+++ b/src/Components/DialogTabs.jsx
@@ -51,7 +51,7 @@ export default function Dialog({
         {icon}<br/>
         <Typography variant={'h4'}>{headerTextList[currentTab]}</Typography>
       </DialogTitle>
-      <DialogContent>
+      <DialogContent sx={{marginBottom: '6px'}}>
         <Tabs tabList={tabList} actionCb={setCurrentTab}/>
       </DialogContent>
       <DialogContent sx={{height: '240px'}}>

From 864c446df2c744808085f7836030fc6fd322fb9b Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Wed, 9 Aug 2023 16:49:50 +0200
Subject: [PATCH 17/28] add array of call backs

---
 package.json                          | 2 +-
 src/Components/DialogTabs.fixture.jsx | 9 ++++++---
 src/Components/DialogTabs.jsx         | 4 ++--
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 2395b847a..60ae83f47 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r697",
+  "version": "1.0.0-r698",
   "main": "src/index.jsx",
   "license": "MIT",
   "homepage": "https://github.com/bldrs-ai/Share",
diff --git a/src/Components/DialogTabs.fixture.jsx b/src/Components/DialogTabs.fixture.jsx
index 2daecbce8..ee4e949b4 100644
--- a/src/Components/DialogTabs.fixture.jsx
+++ b/src/Components/DialogTabs.fixture.jsx
@@ -52,6 +52,11 @@ const contentList = [
   </Box>,
 ]
 const headerTextList = ['Explore Sample Projects', 'Open Project', 'Save Project']
+const actionCbList = [
+  () => alert('Explore actionCb'),
+  () => alert('Open actionCb'),
+  () => alert('Save actionCb'),
+]
 
 
 export default (
@@ -64,9 +69,7 @@ export default (
       setIsDialogDisplayed={() => {}}
       content={'What you should know about doing the thing'}
       actionTitle={'Do do the thing?'}
-      actionCb={() => {
-        alert('You did the thing')
-      }}
+      actionCb={actionCbList}
       tabList={tabList}
       contentList={contentList}
       headerTextList={headerTextList}
diff --git a/src/Components/DialogTabs.jsx b/src/Components/DialogTabs.jsx
index 5b3a6e41c..e69d4909d 100644
--- a/src/Components/DialogTabs.jsx
+++ b/src/Components/DialogTabs.jsx
@@ -31,7 +31,7 @@ export default function Dialog({
   isDialogDisplayed,
   setIsDialogDisplayed,
   actionTitle,
-  actionCb,
+  actionCb = [() => alert('loading')],
   actionIcon,
 }) {
   assertDefined(
@@ -58,7 +58,7 @@ export default function Dialog({
         {contentList[currentTab] || 'loading' }
       </DialogContent>
       <DialogActions disableSpacing>
-        <RectangularButton title={actionTitle} icon={actionIcon} onClick={actionCb}/>
+        <RectangularButton title={actionTitle} icon={actionIcon} onClick={actionCb[currentTab]}/>
       </DialogActions>
     </MuiDialog>
   )

From da6e022f4755c46116b75256f09acd0140451cf6 Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Wed, 9 Aug 2023 20:22:34 +0200
Subject: [PATCH 18/28] clean up

---
 package.json                  | 2 +-
 src/Components/Dialog.jsx     | 2 +-
 src/Components/DialogTabs.jsx | 6 ++++--
 src/theme/Components.js       | 3 ++-
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 60ae83f47..039a8db71 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r698",
+  "version": "1.0.0-r699",
   "main": "src/index.jsx",
   "license": "MIT",
   "homepage": "https://github.com/bldrs-ai/Share",
diff --git a/src/Components/Dialog.jsx b/src/Components/Dialog.jsx
index 66d9e3df9..a664f6bd5 100644
--- a/src/Components/Dialog.jsx
+++ b/src/Components/Dialog.jsx
@@ -40,7 +40,7 @@ export default function Dialog({
       onClose={close}
       PaperProps={{variant: 'control'}}
     >
-      <CloseButton onClick={close}/>
+      <CloseButton onClick={close} className='icon-share'/>
       <DialogTitle>
         {icon}<br/>
         {headerText}
diff --git a/src/Components/DialogTabs.jsx b/src/Components/DialogTabs.jsx
index e69d4909d..5bc3e34fa 100644
--- a/src/Components/DialogTabs.jsx
+++ b/src/Components/DialogTabs.jsx
@@ -51,10 +51,12 @@ export default function Dialog({
         {icon}<br/>
         <Typography variant={'h4'}>{headerTextList[currentTab]}</Typography>
       </DialogTitle>
-      <DialogContent sx={{marginBottom: '6px'}}>
+      <DialogContent>
         <Tabs tabList={tabList} actionCb={setCurrentTab}/>
       </DialogContent>
-      <DialogContent sx={{height: '240px'}}>
+      <DialogContent
+        sx={{height: '240px'}}
+      >
         {contentList[currentTab] || 'loading' }
       </DialogContent>
       <DialogActions disableSpacing>
diff --git a/src/theme/Components.js b/src/theme/Components.js
index 3392a2077..4a1631307 100644
--- a/src/theme/Components.js
+++ b/src/theme/Components.js
@@ -109,7 +109,7 @@ export function getComponentOverrides(palette, typography) {
             backgroundColor: 'green',
           },
           '@media (max-width: 700px)': {
-            fontSize: '.7em',
+            fontSize: '.8em',
           },
         },
       },
@@ -117,6 +117,7 @@ export function getComponentOverrides(palette, typography) {
     MuiTabs: {
       styleOverrides: {
         root: {
+          'paddingBottom': '12px',
           '& .MuiTabs-indicator': {
             backgroundColor: palette.secondary.main,
           },

From 16a91c1cdb95bb372359527b0c3fed65fe2b1c51 Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Wed, 9 Aug 2023 20:47:55 +0200
Subject: [PATCH 19/28]  adjustments

---
 package.json                  | 2 +-
 src/Components/DialogTabs.jsx | 2 +-
 src/theme/Components.js       | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 039a8db71..de4c46016 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r699",
+  "version": "1.0.0-r700",
   "main": "src/index.jsx",
   "license": "MIT",
   "homepage": "https://github.com/bldrs-ai/Share",
diff --git a/src/Components/DialogTabs.jsx b/src/Components/DialogTabs.jsx
index 5bc3e34fa..c049043dd 100644
--- a/src/Components/DialogTabs.jsx
+++ b/src/Components/DialogTabs.jsx
@@ -59,7 +59,7 @@ export default function Dialog({
       >
         {contentList[currentTab] || 'loading' }
       </DialogContent>
-      <DialogActions disableSpacing>
+      <DialogActions >
         <RectangularButton title={actionTitle} icon={actionIcon} onClick={actionCb[currentTab]}/>
       </DialogActions>
     </MuiDialog>
diff --git a/src/theme/Components.js b/src/theme/Components.js
index 4a1631307..29d015b71 100644
--- a/src/theme/Components.js
+++ b/src/theme/Components.js
@@ -118,6 +118,7 @@ export function getComponentOverrides(palette, typography) {
       styleOverrides: {
         root: {
           'paddingBottom': '12px',
+          'width': '100%',
           '& .MuiTabs-indicator': {
             backgroundColor: palette.secondary.main,
           },

From f8dd62ece5ec858e4a14d60a86f26a35fc36ab2f Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Thu, 10 Aug 2023 00:12:23 +0200
Subject: [PATCH 20/28] add tab fixture and add scrollable prop the dialog

---
 package.json                          |  2 +-
 src/Components/DialogTabs.fixture.jsx |  7 ++++---
 src/Components/DialogTabs.jsx         |  6 ++++--
 src/Components/Tabs.fixture.jsx       | 11 +++++++++++
 src/Components/Tabs.jsx               | 20 +++++++++-----------
 5 files changed, 29 insertions(+), 17 deletions(-)
 create mode 100644 src/Components/Tabs.fixture.jsx

diff --git a/package.json b/package.json
index de4c46016..885b8928c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r700",
+  "version": "1.0.0-r701",
   "main": "src/index.jsx",
   "license": "MIT",
   "homepage": "https://github.com/bldrs-ai/Share",
diff --git a/src/Components/DialogTabs.fixture.jsx b/src/Components/DialogTabs.fixture.jsx
index ee4e949b4..1aaefc062 100644
--- a/src/Components/DialogTabs.fixture.jsx
+++ b/src/Components/DialogTabs.fixture.jsx
@@ -9,7 +9,7 @@ import AttentionIcon from '../assets/icons/Attention.svg'
 const tabList = ['Explore', 'Open', 'Save']
 const contentList = [
   <Box sx={{textAlign: 'left'}} key={1}>
-    <Typography variant='h4'>
+    <Typography variant='h5'>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit,
       sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
       Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -18,7 +18,7 @@ const contentList = [
     </Typography>
   </Box>,
   <Box sx={{textAlign: 'left'}} key={2}>
-    <Typography variant='h4'>
+    <Typography variant='h5'>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit,
       sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
       Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -37,7 +37,7 @@ const contentList = [
     </Typography>
   </Box>,
   <Box sx={{textAlign: 'left'}} key={2}>
-    <Typography variant='h4'>
+    <Typography variant='h5'>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit,
       sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
       Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -71,6 +71,7 @@ export default (
       actionTitle={'Do do the thing?'}
       actionCb={actionCbList}
       tabList={tabList}
+      scrollableTabs={false}
       contentList={contentList}
       headerTextList={headerTextList}
     />
diff --git a/src/Components/DialogTabs.jsx b/src/Components/DialogTabs.jsx
index c049043dd..d7f0ecb26 100644
--- a/src/Components/DialogTabs.jsx
+++ b/src/Components/DialogTabs.jsx
@@ -14,7 +14,8 @@ import {assertDefined} from '../utils/assert'
  *
  * @property {React.ReactElement} icon Leading icon above header description
  * @property {Array<string>} headerText Short array of messages describing the current opeation
- * @property {Array<string>} tabList Array of tabs names
+ * @property {Array<string>} tabList List of tabs names
+ * @property {boolean} scrollableTabs Activate if the nymber of tabs is larger then 5
  * @property {Array<React.ReactElement>} contentList Array of components coresponding to the tabs
  * @property {boolean} isDialogDisplayed React var
  * @property {Function} setIsDialogDisplayed React setter
@@ -27,6 +28,7 @@ export default function Dialog({
   icon,
   headerTextList = ['loading'],
   tabList = ['loading'],
+  scrollableTabs = false,
   contentList = ['loading'],
   isDialogDisplayed,
   setIsDialogDisplayed,
@@ -52,7 +54,7 @@ export default function Dialog({
         <Typography variant={'h4'}>{headerTextList[currentTab]}</Typography>
       </DialogTitle>
       <DialogContent>
-        <Tabs tabList={tabList} actionCb={setCurrentTab}/>
+        <Tabs tabList={tabList} scrollableTabs={scrollableTabs} actionCb={setCurrentTab}/>
       </DialogContent>
       <DialogContent
         sx={{height: '240px'}}
diff --git a/src/Components/Tabs.fixture.jsx b/src/Components/Tabs.fixture.jsx
new file mode 100644
index 000000000..4810d1592
--- /dev/null
+++ b/src/Components/Tabs.fixture.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import Tabs from './Tabs'
+import FixtureContext from '../FixtureContext'
+
+
+const tabList = ['Explore', 'Open', 'Save']
+export default (
+  <FixtureContext>
+    <Tabs tabList={tabList} scrollable={true}/>
+  </FixtureContext>
+)
diff --git a/src/Components/Tabs.jsx b/src/Components/Tabs.jsx
index eaf0feb0b..5188e9929 100644
--- a/src/Components/Tabs.jsx
+++ b/src/Components/Tabs.jsx
@@ -1,5 +1,4 @@
 import React, {useState} from 'react'
-import Box from '@mui/material/Box'
 import MuiTabs from '@mui/material/Tabs'
 import Tab from '@mui/material/Tab'
 
@@ -7,10 +6,11 @@ import Tab from '@mui/material/Tab'
  * Tabs component.
  *
  * @property {Array<string>} tabList array of Tab strings composed of tab names
+ * @property {boolean} scrollableTabs whenever the tabs number is large then 5 variant shall be flipper to scrollable
  * @property {Function} actionCb called back fired when the tabs is selected returns currect tab number
  * @return {React.Component}
  */
-export default function Tabs({tabList, actionCb}) {
+export default function Tabs({tabList, scrollableTabs, actionCb}) {
   const [value, setValue] = useState(0)
 
   const handleChange = (event, newValue) => {
@@ -18,14 +18,12 @@ export default function Tabs({tabList, actionCb}) {
     actionCb(newValue)
   }
   return (
-    <Box sx={{width: '100%'}}>
-      <MuiTabs value={value} onChange={handleChange} centered variant="fullWidth">
-        {tabList.map((tab) => {
-          return (
-            <Tab key={tab} label={tab}/>
-          )
-        })}
-      </MuiTabs>
-    </Box>
+    <MuiTabs value={value} onChange={handleChange} centered variant={scrollableTabs ? 'scrollable' : 'fullWidth'}>
+      {tabList.map((tab) => {
+        return (
+          <Tab key={tab} label={tab}/>
+        )
+      })}
+    </MuiTabs>
   )
 }

From cd6694963571c548d12528de8999a2004551a363 Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Thu, 10 Aug 2023 11:04:41 +0200
Subject: [PATCH 21/28] correct a typo

---
 src/Components/Tabs.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/Tabs.jsx b/src/Components/Tabs.jsx
index 5188e9929..f301f8702 100644
--- a/src/Components/Tabs.jsx
+++ b/src/Components/Tabs.jsx
@@ -7,7 +7,7 @@ import Tab from '@mui/material/Tab'
  *
  * @property {Array<string>} tabList array of Tab strings composed of tab names
  * @property {boolean} scrollableTabs whenever the tabs number is large then 5 variant shall be flipper to scrollable
- * @property {Function} actionCb called back fired when the tabs is selected returns currect tab number
+ * @property {Function} actionCb callBack fired when the tabs is selected, returns currect tab number
  * @return {React.Component}
  */
 export default function Tabs({tabList, scrollableTabs, actionCb}) {

From 53a45258909496cca1084a6bb98dd539f190e723 Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Fri, 11 Aug 2023 17:55:05 +0200
Subject: [PATCH 22/28] address the comments

---
 package.json                          |  2 +-
 src/Components/DialogTabs.fixture.jsx | 23 ++++++++---------------
 src/Components/DialogTabs.jsx         |  2 +-
 3 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index 885b8928c..301f51c0d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r701",
+  "version": "1.0.0-r703",
   "main": "src/index.jsx",
   "license": "MIT",
   "homepage": "https://github.com/bldrs-ai/Share",
diff --git a/src/Components/DialogTabs.fixture.jsx b/src/Components/DialogTabs.fixture.jsx
index 1aaefc062..afd633640 100644
--- a/src/Components/DialogTabs.fixture.jsx
+++ b/src/Components/DialogTabs.fixture.jsx
@@ -1,24 +1,20 @@
 import React from 'react'
-import Typography from '@mui/material/Typography'
-import Box from '@mui/material/Typography'
 import FixtureContext from '../FixtureContext'
 import DialogTabs from './DialogTabs'
 import AttentionIcon from '../assets/icons/Attention.svg'
+import debug from '../utils/debug'
 
 
 const tabList = ['Explore', 'Open', 'Save']
 const contentList = [
-  <Box sx={{textAlign: 'left'}} key={1}>
-    <Typography variant='h5'>
+  <p key={1}>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit,
       sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
       Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
       Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
       Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </Typography>
-  </Box>,
-  <Box sx={{textAlign: 'left'}} key={2}>
-    <Typography variant='h5'>
+  </p>,
+  <p key={2}>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit,
       sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
       Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -34,10 +30,8 @@ const contentList = [
       Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
       Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
       Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </Typography>
-  </Box>,
-  <Box sx={{textAlign: 'left'}} key={2}>
-    <Typography variant='h5'>
+  </p>,
+  <p key={3}>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit,
       sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
       Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -48,8 +42,7 @@ const contentList = [
       Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
       Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
       Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </Typography>
-  </Box>,
+  </p>,
 ]
 const headerTextList = ['Explore Sample Projects', 'Open Project', 'Save Project']
 const actionCbList = [
@@ -66,7 +59,7 @@ export default (
       headerText={'Here\'s the thing!'}
       isDialogDisplayed={true}
       // eslint-disable-next-line no-empty-function
-      setIsDialogDisplayed={() => {}}
+      setIsDialogDisplayed={debug().log('setIsDialogDisplayed')}
       content={'What you should know about doing the thing'}
       actionTitle={'Do do the thing?'}
       actionCb={actionCbList}
diff --git a/src/Components/DialogTabs.jsx b/src/Components/DialogTabs.jsx
index d7f0ecb26..ff2c211db 100644
--- a/src/Components/DialogTabs.jsx
+++ b/src/Components/DialogTabs.jsx
@@ -24,7 +24,7 @@ import {assertDefined} from '../utils/assert'
  * @property {React.ReactElement} [actionIcon] Optional icon for the action button
  * @return {React.Component}
  */
-export default function Dialog({
+export default function DialogTab({
   icon,
   headerTextList = ['loading'],
   tabList = ['loading'],

From e6373d06d97d1bd9f0bb96bfe7b741d97cde55c4 Mon Sep 17 00:00:00 2001
From: OlegMoshkovich <oleg.mosh@gmail.com>
Date: Fri, 11 Aug 2023 18:01:11 +0200
Subject: [PATCH 23/28] address comments

---
 src/Components/Dialog.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/Dialog.jsx b/src/Components/Dialog.jsx
index a664f6bd5..66d9e3df9 100644
--- a/src/Components/Dialog.jsx
+++ b/src/Components/Dialog.jsx
@@ -40,7 +40,7 @@ export default function Dialog({
       onClose={close}
       PaperProps={{variant: 'control'}}
     >
-      <CloseButton onClick={close} className='icon-share'/>
+      <CloseButton onClick={close}/>
       <DialogTitle>
         {icon}<br/>
         {headerText}

From ccf705a60f9cccbfb6b5e244f9bbdc7877b0ca95 Mon Sep 17 00:00:00 2001
From: Pablo Mayrgundter <pablo.mayrgundter@gmail.com>
Date: Fri, 11 Aug 2023 19:39:35 -0500
Subject: [PATCH 24/28] Fixes and simplifications.

---
 package.json                            |  2 +-
 src/Components/Dialog.jsx               |  2 +-
 src/Components/DialogTabs.fixture.jsx   | 72 -------------------------
 src/Components/DialogTabs.jsx           | 69 ------------------------
 src/Components/TabbedDialog.fixture.jsx | 27 ++++++++++
 src/Components/TabbedDialog.jsx         | 55 +++++++++++++++++++
 src/Components/Tabs.fixture.jsx         |  7 ++-
 src/Components/Tabs.jsx                 | 20 +++----
 8 files changed, 97 insertions(+), 157 deletions(-)
 delete mode 100644 src/Components/DialogTabs.fixture.jsx
 delete mode 100644 src/Components/DialogTabs.jsx
 create mode 100644 src/Components/TabbedDialog.fixture.jsx
 create mode 100644 src/Components/TabbedDialog.jsx

diff --git a/package.json b/package.json
index 301f51c0d..03c8bba2e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r703",
+  "version": "1.0.0-r705",
   "main": "src/index.jsx",
   "license": "MIT",
   "homepage": "https://github.com/bldrs-ai/Share",
diff --git a/src/Components/Dialog.jsx b/src/Components/Dialog.jsx
index 66d9e3df9..c9320f62e 100644
--- a/src/Components/Dialog.jsx
+++ b/src/Components/Dialog.jsx
@@ -1,8 +1,8 @@
 import React from 'react'
+import MuiDialog from '@mui/material/Dialog'
 import DialogActions from '@mui/material/DialogActions'
 import DialogContent from '@mui/material/DialogContent'
 import DialogTitle from '@mui/material/DialogTitle'
-import MuiDialog from '@mui/material/Dialog'
 import {RectangularButton, CloseButton} from '../Components/Buttons'
 import {assertDefined} from '../utils/assert'
 
diff --git a/src/Components/DialogTabs.fixture.jsx b/src/Components/DialogTabs.fixture.jsx
deleted file mode 100644
index afd633640..000000000
--- a/src/Components/DialogTabs.fixture.jsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react'
-import FixtureContext from '../FixtureContext'
-import DialogTabs from './DialogTabs'
-import AttentionIcon from '../assets/icons/Attention.svg'
-import debug from '../utils/debug'
-
-
-const tabList = ['Explore', 'Open', 'Save']
-const contentList = [
-  <p key={1}>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  </p>,
-  <p key={2}>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  </p>,
-  <p key={3}>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  </p>,
-]
-const headerTextList = ['Explore Sample Projects', 'Open Project', 'Save Project']
-const actionCbList = [
-  () => alert('Explore actionCb'),
-  () => alert('Open actionCb'),
-  () => alert('Save actionCb'),
-]
-
-
-export default (
-  <FixtureContext>
-    <DialogTabs
-      icon={<AttentionIcon className='icon-share'/>}
-      headerText={'Here\'s the thing!'}
-      isDialogDisplayed={true}
-      // eslint-disable-next-line no-empty-function
-      setIsDialogDisplayed={debug().log('setIsDialogDisplayed')}
-      content={'What you should know about doing the thing'}
-      actionTitle={'Do do the thing?'}
-      actionCb={actionCbList}
-      tabList={tabList}
-      scrollableTabs={false}
-      contentList={contentList}
-      headerTextList={headerTextList}
-    />
-  </FixtureContext>
-)
diff --git a/src/Components/DialogTabs.jsx b/src/Components/DialogTabs.jsx
deleted file mode 100644
index ff2c211db..000000000
--- a/src/Components/DialogTabs.jsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React, {useState} from 'react'
-import DialogActions from '@mui/material/DialogActions'
-import DialogContent from '@mui/material/DialogContent'
-import DialogTitle from '@mui/material/DialogTitle'
-import Typography from '@mui/material/Typography'
-import MuiDialog from '@mui/material/Dialog'
-import Tabs from './Tabs'
-import {RectangularButton, CloseButton} from './Buttons'
-import {assertDefined} from '../utils/assert'
-
-
-/**
- * A Dialog with tabs compoent.
- *
- * @property {React.ReactElement} icon Leading icon above header description
- * @property {Array<string>} headerText Short array of messages describing the current opeation
- * @property {Array<string>} tabList List of tabs names
- * @property {boolean} scrollableTabs Activate if the nymber of tabs is larger then 5
- * @property {Array<React.ReactElement>} contentList Array of components coresponding to the tabs
- * @property {boolean} isDialogDisplayed React var
- * @property {Function} setIsDialogDisplayed React setter
- * @property {string} actionTitle Title for the action button
- * @property {Function} actionCb Callback for action button
- * @property {React.ReactElement} [actionIcon] Optional icon for the action button
- * @return {React.Component}
- */
-export default function DialogTab({
-  icon,
-  headerTextList = ['loading'],
-  tabList = ['loading'],
-  scrollableTabs = false,
-  contentList = ['loading'],
-  isDialogDisplayed,
-  setIsDialogDisplayed,
-  actionTitle,
-  actionCb = [() => alert('loading')],
-  actionIcon,
-}) {
-  assertDefined(
-      icon, headerTextList, isDialogDisplayed, setIsDialogDisplayed,
-      actionTitle, actionCb, tabList)
-  const close = () => setIsDialogDisplayed(false)
-  const [currentTab, setCurrentTab] = useState(0)
-  return (
-    <MuiDialog
-      maxWidth={'xs'}
-      open={isDialogDisplayed}
-      onClose={close}
-      PaperProps={{variant: 'control'}}
-    >
-      <CloseButton onClick={close}/>
-      <DialogTitle >
-        {icon}<br/>
-        <Typography variant={'h4'}>{headerTextList[currentTab]}</Typography>
-      </DialogTitle>
-      <DialogContent>
-        <Tabs tabList={tabList} scrollableTabs={scrollableTabs} actionCb={setCurrentTab}/>
-      </DialogContent>
-      <DialogContent
-        sx={{height: '240px'}}
-      >
-        {contentList[currentTab] || 'loading' }
-      </DialogContent>
-      <DialogActions >
-        <RectangularButton title={actionTitle} icon={actionIcon} onClick={actionCb[currentTab]}/>
-      </DialogActions>
-    </MuiDialog>
-  )
-}
diff --git a/src/Components/TabbedDialog.fixture.jsx b/src/Components/TabbedDialog.fixture.jsx
new file mode 100644
index 000000000..00a4b9155
--- /dev/null
+++ b/src/Components/TabbedDialog.fixture.jsx
@@ -0,0 +1,27 @@
+/* eslint-disable no-magic-numbers */
+import React from 'react'
+import Button from '@mui/material/Button'
+import FixtureContext from '../FixtureContext'
+import debug from '../utils/debug'
+import TabbedDialog from './TabbedDialog'
+
+
+const loremIpsum = (size) => `Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. `.repeat(size)
+
+
+export default (
+  <FixtureContext>
+    <TabbedDialog
+      tabLabels={['Explore', 'Open', 'Save']}
+      headerLabels={['Explore Sample Projects', 'Open Project', 'Save Project']}
+      contentComponents={[
+        (<p key='1'>{loremIpsum(3)}<Button onClick={debug().log('clicked 1')}/></p>),
+        (<p key='2'>{loremIpsum(2)}<Button onClick={debug().log('clicked 2')}/></p>),
+        (<p key='3'>{loremIpsum(4)}<Button onClick={debug().log('clicked 3')}/></p>),
+      ]}
+      isDialogDisplayed={true}
+      setIsDialogDisplayed={() => debug().log('setIsDialogDisplayed')}
+    />
+  </FixtureContext>
+)
diff --git a/src/Components/TabbedDialog.jsx b/src/Components/TabbedDialog.jsx
new file mode 100644
index 000000000..8fb1d3442
--- /dev/null
+++ b/src/Components/TabbedDialog.jsx
@@ -0,0 +1,55 @@
+import React, {useState} from 'react'
+import MuiDialog from '@mui/material/Dialog'
+import DialogContent from '@mui/material/DialogContent'
+import DialogTitle from '@mui/material/DialogTitle'
+import Typography from '@mui/material/Typography'
+import {assertDefined} from '../utils/assert'
+import {CloseButton} from './Buttons'
+import Tabs from './Tabs'
+
+
+/**
+ * A Dialog with tabs to page between associated contents.
+ *
+ * @property {Array<string>} tabLabels Tab names
+ * @property {Array<string>} headerLabels Short messages describing the current operation
+ * @property {Array<React.ReactElement>} contentComponents Components coresponding to the tabs
+ * @property {boolean} isDialogDisplayed React var
+ * @property {Function} setIsDialogDisplayed React setter
+ * @property {boolean} [isTabsScrollable] Activate if the number of tabs is larger than 5
+ * @property {React.ReactElement} [icon] Leading icon above header description
+ * @return {React.Component}
+ */
+export default function TabbedDialog({
+  tabLabels,
+  headerLabels,
+  contentComponents,
+  isDialogDisplayed,
+  setIsDialogDisplayed,
+  isTabsScrollable = false,
+  icon,
+}) {
+  assertDefined(tabLabels, headerLabels, contentComponents, isDialogDisplayed, setIsDialogDisplayed)
+  const close = () => setIsDialogDisplayed(false)
+  const [currentTab, setCurrentTab] = useState(0)
+  return (
+    <MuiDialog
+      maxWidth={'xs'}
+      open={isDialogDisplayed}
+      onClose={close}
+      PaperProps={{variant: 'control'}}
+    >
+      <CloseButton onClick={close}/>
+      <DialogTitle>
+        {icon && <>{icon}<br/></>}
+        <Typography variant={'h1'}>{headerLabels[currentTab]}</Typography>
+      </DialogTitle>
+      <DialogContent>
+        <Tabs tabLabels={tabLabels} actionCb={setCurrentTab} isScrollable={isTabsScrollable}/>
+      </DialogContent>
+      <DialogContent>
+        {contentComponents[currentTab]}
+      </DialogContent>
+    </MuiDialog>
+  )
+}
diff --git a/src/Components/Tabs.fixture.jsx b/src/Components/Tabs.fixture.jsx
index 4810d1592..1f0e6d2c4 100644
--- a/src/Components/Tabs.fixture.jsx
+++ b/src/Components/Tabs.fixture.jsx
@@ -1,11 +1,14 @@
 import React from 'react'
 import Tabs from './Tabs'
 import FixtureContext from '../FixtureContext'
+import debug from '../utils/debug'
 
 
-const tabList = ['Explore', 'Open', 'Save']
 export default (
   <FixtureContext>
-    <Tabs tabList={tabList} scrollable={true}/>
+    <Tabs
+      tabLabels={['Explore', 'Open', 'Save']}
+      actionCb={() => debug().log('Clicked')}
+    />
   </FixtureContext>
 )
diff --git a/src/Components/Tabs.jsx b/src/Components/Tabs.jsx
index f301f8702..282b32de7 100644
--- a/src/Components/Tabs.jsx
+++ b/src/Components/Tabs.jsx
@@ -1,29 +1,25 @@
 import React, {useState} from 'react'
 import MuiTabs from '@mui/material/Tabs'
 import Tab from '@mui/material/Tab'
+import {assertDefined} from '../utils/assert'
+
 
 /**
- * Tabs component.
- *
- * @property {Array<string>} tabList array of Tab strings composed of tab names
- * @property {boolean} scrollableTabs whenever the tabs number is large then 5 variant shall be flipper to scrollable
+ * @property {Array<string>} tabLabels Names of each tab
  * @property {Function} actionCb callBack fired when the tabs is selected, returns currect tab number
+ * @property {boolean} [isScrollable] Enable scrolling for many (> 5) tabs
  * @return {React.Component}
  */
-export default function Tabs({tabList, scrollableTabs, actionCb}) {
+export default function Tabs({tabLabels, actionCb, isScrollable = false}) {
+  assertDefined(tabLabels, actionCb)
   const [value, setValue] = useState(0)
-
   const handleChange = (event, newValue) => {
     setValue(newValue)
     actionCb(newValue)
   }
   return (
-    <MuiTabs value={value} onChange={handleChange} centered variant={scrollableTabs ? 'scrollable' : 'fullWidth'}>
-      {tabList.map((tab) => {
-        return (
-          <Tab key={tab} label={tab}/>
-        )
-      })}
+    <MuiTabs value={value} onChange={handleChange} centered variant={isScrollable ? 'scrollable' : 'fullWidth'}>
+      {tabLabels.map((tab) => <Tab key={tab} label={tab}/>)}
     </MuiTabs>
   )
 }

From 324fc3358830a88a4eee756c4f83f3876754687d Mon Sep 17 00:00:00 2001
From: Pablo Mayrgundter <pablo.mayrgundter@gmail.com>
Date: Mon, 14 Aug 2023 11:01:02 -0500
Subject: [PATCH 25/28] Restore DialogActions to TabbedDialog.  Enhance asserts

---
 src/Components/Buttons.jsx              | 12 +++++---
 src/Components/TabbedDialog.fixture.jsx | 12 +++++---
 src/Components/TabbedDialog.jsx         | 22 ++++++++++----
 src/utils/assert.js                     | 25 ++++++++++++++++
 src/utils/assert.test.js                | 40 ++++++++++++++++++++++++-
 5 files changed, 96 insertions(+), 15 deletions(-)

diff --git a/src/Components/Buttons.jsx b/src/Components/Buttons.jsx
index d4383347b..ef533c931 100644
--- a/src/Components/Buttons.jsx
+++ b/src/Components/Buttons.jsx
@@ -116,9 +116,9 @@ export function CloseButton({onClick}) {
  *
  * @property {string} title Text to show in button
  * @property {Function} onClick callback
- * @property {object} icon Start icon to left of text
- * @property {boolean} border Default: false
- * @property {boolean} background Default: true
+ * @property {object} [icon] Start icon to left of text
+ * @property {boolean} [border] Default: false
+ * @property {boolean} [background] Default: true
  * @return {object} React component
  */
 export function RectangularButton({
@@ -129,7 +129,11 @@ export function RectangularButton({
   background = true,
 }) {
   assertDefined(title, onClick)
-  return <Button onClick={onClick} startIcon={icon} variant='rectangular'>{title}</Button>
+  return (
+    icon ?
+      <Button onClick={onClick} startIcon={icon} variant='rectangular'>{title}</Button> :
+      <Button onClick={onClick} variant='rectangular'>{title}</Button>
+  )
 }
 
 
diff --git a/src/Components/TabbedDialog.fixture.jsx b/src/Components/TabbedDialog.fixture.jsx
index 00a4b9155..a83ebc3f0 100644
--- a/src/Components/TabbedDialog.fixture.jsx
+++ b/src/Components/TabbedDialog.fixture.jsx
@@ -1,6 +1,5 @@
 /* eslint-disable no-magic-numbers */
 import React from 'react'
-import Button from '@mui/material/Button'
 import FixtureContext from '../FixtureContext'
 import debug from '../utils/debug'
 import TabbedDialog from './TabbedDialog'
@@ -16,9 +15,14 @@ export default (
       tabLabels={['Explore', 'Open', 'Save']}
       headerLabels={['Explore Sample Projects', 'Open Project', 'Save Project']}
       contentComponents={[
-        (<p key='1'>{loremIpsum(3)}<Button onClick={debug().log('clicked 1')}/></p>),
-        (<p key='2'>{loremIpsum(2)}<Button onClick={debug().log('clicked 2')}/></p>),
-        (<p key='3'>{loremIpsum(4)}<Button onClick={debug().log('clicked 3')}/></p>),
+        (<p key='1'>{loremIpsum(3)}</p>),
+        (<p key='2'>{loremIpsum(2)}</p>),
+        (<p key='3'>{loremIpsum(4)}</p>),
+      ]}
+      actionCbs={[
+        () => debug().log('clicked 1'),
+        () => debug().log('clicked 2'),
+        () => debug().log('clicked 3'),
       ]}
       isDialogDisplayed={true}
       setIsDialogDisplayed={() => debug().log('setIsDialogDisplayed')}
diff --git a/src/Components/TabbedDialog.jsx b/src/Components/TabbedDialog.jsx
index 8fb1d3442..62501dba8 100644
--- a/src/Components/TabbedDialog.jsx
+++ b/src/Components/TabbedDialog.jsx
@@ -1,10 +1,10 @@
 import React, {useState} from 'react'
 import MuiDialog from '@mui/material/Dialog'
+import DialogActions from '@mui/material/DialogActions'
 import DialogContent from '@mui/material/DialogContent'
 import DialogTitle from '@mui/material/DialogTitle'
-import Typography from '@mui/material/Typography'
-import {assertDefined} from '../utils/assert'
-import {CloseButton} from './Buttons'
+import {assertDefined, assertArraysEqualLength} from '../utils/assert'
+import {CloseButton, RectangularButton} from './Buttons'
 import Tabs from './Tabs'
 
 
@@ -13,23 +13,28 @@ import Tabs from './Tabs'
  *
  * @property {Array<string>} tabLabels Tab names
  * @property {Array<string>} headerLabels Short messages describing the current operation
- * @property {Array<React.ReactElement>} contentComponents Components coresponding to the tabs
+ * @property {Array<React.Element>} contentComponents Components coresponding to the tabs
+ * @property {Array<React.Element>} actionCbs Callbacks for each component's ok button
  * @property {boolean} isDialogDisplayed React var
  * @property {Function} setIsDialogDisplayed React setter
  * @property {boolean} [isTabsScrollable] Activate if the number of tabs is larger than 5
  * @property {React.ReactElement} [icon] Leading icon above header description
+ * @property {string} [actionButtonLabels] Labels for action ok buttons
  * @return {React.Component}
  */
 export default function TabbedDialog({
   tabLabels,
   headerLabels,
   contentComponents,
+  actionCbs,
   isDialogDisplayed,
   setIsDialogDisplayed,
   isTabsScrollable = false,
   icon,
+  actionButtonLabels,
 }) {
-  assertDefined(tabLabels, headerLabels, contentComponents, isDialogDisplayed, setIsDialogDisplayed)
+  assertDefined(tabLabels, headerLabels, contentComponents, actionCbs, isDialogDisplayed, setIsDialogDisplayed)
+  assertArraysEqualLength(tabLabels, headerLabels, contentComponents, actionCbs)
   const close = () => setIsDialogDisplayed(false)
   const [currentTab, setCurrentTab] = useState(0)
   return (
@@ -42,7 +47,6 @@ export default function TabbedDialog({
       <CloseButton onClick={close}/>
       <DialogTitle>
         {icon && <>{icon}<br/></>}
-        <Typography variant={'h1'}>{headerLabels[currentTab]}</Typography>
       </DialogTitle>
       <DialogContent>
         <Tabs tabLabels={tabLabels} actionCb={setCurrentTab} isScrollable={isTabsScrollable}/>
@@ -50,6 +54,12 @@ export default function TabbedDialog({
       <DialogContent>
         {contentComponents[currentTab]}
       </DialogContent>
+      <DialogActions>
+        <RectangularButton
+          title={actionButtonLabels ? actionButtonLabels[currentTab] : 'Ok'}
+          onClick={actionCbs[currentTab]}
+        />
+      </DialogActions>
     </MuiDialog>
   )
 }
diff --git a/src/utils/assert.js b/src/utils/assert.js
index c91dfd661..311057cef 100644
--- a/src/utils/assert.js
+++ b/src/utils/assert.js
@@ -25,6 +25,11 @@ export function assertDefined(...args) {
     if (Object.prototype.hasOwnProperty.call(args, ndx)) {
       const arg = args[ndx]
       assert(arg !== null && arg !== undefined, `Arg ${ndx} is not defined`)
+      if (Array.isArray(arg)) {
+        for (let i = 0; i < arg.length; i++) {
+          assertDefined(arg[i], `Arg ${ndx} is an array with undefined index ${i}`)
+        }
+      }
     }
   }
   if (args.length === 1) {
@@ -44,3 +49,23 @@ export function assertDefinedBoolean(arg) {
   }
   return false
 }
+
+
+/**
+ * @param {any} args Variable length arguments to assert are defined.
+ * @return {Array<Array>} The arrays
+ */
+export function assertArraysEqualLength(...arrays) {
+  if (arrays.length <= 1) {
+    throw new Error('Expected multiple arrays')
+  }
+  const arrLength = arrays[0].length
+  for (const ndx in arrays) {
+    if (Object.prototype.hasOwnProperty.call(arrays, ndx)) {
+      const array = arrays[ndx]
+      assertDefined(array)
+      assert(arrLength === array.length, `Array ${ndx} has unexpected length != ${array.length}`)
+    }
+  }
+  return arrays
+}
diff --git a/src/utils/assert.test.js b/src/utils/assert.test.js
index e3aa6650c..b5295baec 100644
--- a/src/utils/assert.test.js
+++ b/src/utils/assert.test.js
@@ -1,6 +1,8 @@
+/* eslint-disable no-magic-numbers */
 import {
   assert,
   assertDefined,
+  assertArraysEqualLength,
 } from './assert'
 
 
@@ -15,8 +17,28 @@ test('assert', () => {
 })
 
 
-test('assert', () => {
+test('assertDefined', () => {
   assertDefined(1)
+  assertDefined(1, 2)
+  assertDefined(1, 2, 3)
+  assertDefined([])
+  assertDefined([], [])
+  assertDefined([], [], [])
+  expectFailure(() => {
+    assertDefined([undefined])
+  })
+  expectFailure(() => {
+    assertDefined([1], [undefined])
+  })
+  expectFailure(() => {
+    assertDefined([undefined], [1])
+  })
+  expectFailure(() => {
+    assertDefined([undefined], [1])
+  })
+  expectFailure(() => {
+    assertDefined([undefined], [undefined])
+  })
   expectFailure(() => {
     assertDefined(undefined)
   })
@@ -37,6 +59,22 @@ test('assert', () => {
 })
 
 
+test('assertArraysEqualLength', () => {
+  expectFailure(() => {
+    assertArraysEqualLength()
+  })
+  expectFailure(() => {
+    assertArraysEqualLength([])
+  })
+  assertArraysEqualLength([], [])
+  assertArraysEqualLength([], [], [])
+  assertArraysEqualLength([], [], [], [])
+
+  assertArraysEqualLength([1, 1, 1], [2, 2, 2])
+  assertArraysEqualLength([1, 1, 1], [2, 2, 2], [3, 3, 3])
+})
+
+
 /**
  * Catches expected failures or throws if no failure.
  *

From 4f9fa9b12666c82ba74daa51990c8ccc0d473fe9 Mon Sep 17 00:00:00 2001
From: Pablo Mayrgundter <pablo.mayrgundter@gmail.com>
Date: Mon, 14 Aug 2023 11:29:04 -0500
Subject: [PATCH 26/28] Fixup title

---
 src/Components/TabbedDialog.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Components/TabbedDialog.jsx b/src/Components/TabbedDialog.jsx
index 62501dba8..086bf2f42 100644
--- a/src/Components/TabbedDialog.jsx
+++ b/src/Components/TabbedDialog.jsx
@@ -47,6 +47,7 @@ export default function TabbedDialog({
       <CloseButton onClick={close}/>
       <DialogTitle>
         {icon && <>{icon}<br/></>}
+        {headerLabels[currentTab]}
       </DialogTitle>
       <DialogContent>
         <Tabs tabLabels={tabLabels} actionCb={setCurrentTab} isScrollable={isTabsScrollable}/>

From 4694f22eb911d7eb8ee00bab6be2995f11fd276d Mon Sep 17 00:00:00 2001
From: Pablo Mayrgundter <pablo.mayrgundter@gmail.com>
Date: Wed, 16 Aug 2023 19:36:59 -0500
Subject: [PATCH 27/28] Add TabbedDialog.test.jsx

---
 src/Components/TabbedDialog.test.jsx | 43 ++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 src/Components/TabbedDialog.test.jsx

diff --git a/src/Components/TabbedDialog.test.jsx b/src/Components/TabbedDialog.test.jsx
new file mode 100644
index 000000000..ad5968395
--- /dev/null
+++ b/src/Components/TabbedDialog.test.jsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import {render, screen, fireEvent} from '@testing-library/react'
+import TabbedDialog from './TabbedDialog'
+
+
+describe('TabbedDialog', () => {
+  it('', () => {
+    const cb1 = jest.fn()
+    const cb2 = jest.fn()
+    const cb3 = jest.fn()
+    render(
+        <TabbedDialog
+          tabLabels={['Explore', 'Open', 'Save']}
+          headerLabels={['Explore Sample Projects', 'Open Project', 'Save Project']}
+          contentComponents={[
+            (<p key='1'>{'A content'}</p>),
+            (<p key='2'>{'B content'}</p>),
+            (<p key='3'>{'C content'}</p>),
+          ]}
+          actionCbs={[cb1, cb2, cb3]}
+          actionButtonLabels={['A OK', 'B OK', 'C OK']}
+          isDialogDisplayed={true}
+          setIsDialogDisplayed={jest.fn()}
+        />)
+
+    fireEvent.click(screen.getByText('A OK'))
+    expect(cb1.mock.calls.length).toBe(1)
+    expect(cb2.mock.calls.length).toBe(0)
+    expect(cb3.mock.calls.length).toBe(0)
+
+    fireEvent.click(screen.getByText('Open'))
+    fireEvent.click(screen.getByText('B OK'))
+    expect(cb1.mock.calls.length).toBe(1)
+    expect(cb2.mock.calls.length).toBe(1)
+    expect(cb3.mock.calls.length).toBe(0)
+
+    fireEvent.click(screen.getByText('Save'))
+    fireEvent.click(screen.getByText('C OK'))
+    expect(cb1.mock.calls.length).toBe(1)
+    expect(cb2.mock.calls.length).toBe(1)
+    expect(cb3.mock.calls.length).toBe(1)
+  })
+})

From 071721a30be140b0bf37a4f254f800a63392f8b3 Mon Sep 17 00:00:00 2001
From: Pablo Mayrgundter <pablo.mayrgundter@gmail.com>
Date: Thu, 17 Aug 2023 15:04:52 -0500
Subject: [PATCH 28/28] tsc fixups.

---
 src/utils/assert.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utils/assert.js b/src/utils/assert.js
index 311057cef..d54ea28d2 100644
--- a/src/utils/assert.js
+++ b/src/utils/assert.js
@@ -52,8 +52,8 @@ export function assertDefinedBoolean(arg) {
 
 
 /**
- * @param {any} args Variable length arguments to assert are defined.
- * @return {Array<Array>} The arrays
+ * @param {any} arrays Variable length arguments to assert are defined.
+ * @return {Array<Array<any>>} The arrays
  */
 export function assertArraysEqualLength(...arrays) {
   if (arrays.length <= 1) {