OlegMoshkovich · OlegMoshkovich · Feb 21, 2022 · Feb 21, 2022 · Feb 21, 2022 · Feb 21, 2022
diff --git a/docs/favicon.ico b/docs/favicon.ico
diff --git a/docs/favicon__.ico b/docs/favicon__.ico
diff --git a/docs/index.html b/docs/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Bldrs Share" />
@@ -12,7 +12,7 @@
     />
     <link
       rel="stylesheet"
-      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      href="https://fonts.googleapis.com/icon?family=Material+3D"
     />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

diff --git a/docs/index.js b/docs/index.js
diff --git a/docs/index.js.map b/docs/index.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "buildrs",
-  "version": "0.1.0-r249",
+  "version": "0.1.0-r275",
   "main": "src/index.jsx",
   "homepage": "https://github.com/buildrs/Share",
   "scripts": {

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon__.ico b/public/favicon__.ico
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Bldrs Share" />
@@ -12,7 +12,7 @@
     />
     <link
       rel="stylesheet"
-      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      href="https://fonts.googleapis.com/icon?family=Material+3D"
     />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

diff --git a/src/Components/AboutPanel.jsx b/src/Components/AboutPanel.jsx
@@ -1,8 +1,15 @@
-import React from 'react'
+import React, {useState} from 'react'
 import Paper from '@mui/material/Paper'
-import Typography from '@mui/material/Typography'
+import IconButton from '@mui/material/IconButton'
+import Tooltip from '@mui/material/Tooltip'
 import {makeStyles} from '@mui/styles'
-import About from '../assets/3D/attention.svg'
+import About from '../assets/2D_Icons/Wave.svg'
+import Slider from '@mui/material/Slider'
+import Delete from '../assets/2D_Icons/Delete.svg'
+import LogoB from '../assets/LogoB.svg'
+import Shareifc from '../assets/2D_Icons/Shareifc.svg'
+import Openifc from '../assets/2D_Icons/Openifc.svg'
+import Githubifc from '../assets/2D_Icons/Githubifc.svg'
 
 
 /**
@@ -11,19 +18,35 @@ import About from '../assets/3D/attention.svg'
  * @return {Object} The AboutControl react component.
  */
 export default function AboutControl({offsetTop}) {
-  const [open, setOpen]=React.useState(true)
+  const [open, setOpen] = useState(true)
   const classes = useStyles()
   return (
     <div >
-      <Typography className = {classes.about} onClick={() => {
+      <Tooltip title="About" placement="top">
+        <IconButton onClick={() => setOpen(!open)}>
+          <About className={classes.icon} />
+        </IconButton>
+      </Tooltip>
+      {open && <AboutPanel openToggle={() => {
         setOpen(!open)
-      }}>About</Typography>
-      {open && <AboutPanel openToggle={()=>{
-        setOpen(!open)
-      }} offsetTopCssStr={offsetTop}/>}
+      }} offsetTopCssStr={offsetTop} />}
     </div>)
 }
 
+const marks = [
+  {
+    value: 0,
+    label: 'mild',
+  },
+  {
+    value: 10,
+    label: 'medium',
+  },
+  {
+    value: 20,
+    label: 'high',
+  },
+]
 
 /**
  * About Panel component
@@ -35,57 +58,86 @@ function AboutPanel({openToggle, offsetTopCssStr}) {
   const classes = useStyles({offsetTop: offsetTopCssStr})
 
   return (
-    <div className = {classes.container}
-      role = "none"
-      onClick = {openToggle}
+    <div className={classes.container}
+      role="none"
+      onClick={openToggle}
       onKeyDown={openToggle} >
-      <Paper elevation={3} className={classes.panel}>
-        <h1 className = {classes.title}><About/></h1>
-        <p><strong>BLDRS</strong> is a collaborative integration environment for IFCs 🙂</p>
-        <p> We are open source 🌱 Please visit our repository:&nbsp;
-          <a href = {'https://github.com/buildrs/Share'} target="_new">
-            github.com/buildrs/Share
-          </a>
-        </p>
+      <Paper elevation={3} className={classes.panel} onClick={(event) => {
+        event.stopPropagation()
+      }} >
+        <h1 className={classes.title}><LogoB className={classes.hello} /></h1>
+        <p><strong>BLDRS</strong> is a collaborative environment to view and share IFC models.</p>
         <p>We are just getting started, stay tuned for the upcoming MVP release 🚀</p>
         <h2 >Features:</h2>
-        <ul>
-          <li>Upload IFC file</li>
-          <li>Share IFC model with the URL address</li>
-          <li>Select IFC element</li>
-          <li>Obtain IFC element properties </li>
+        <ul style={{marginLeft: '-10px'}}>
+          <li><Openifc className={classes.iconSmall} /> Upload IFC file</li>
+          <li><Githubifc className={classes.iconSmall} /> Open IFC files hosted on GitHub</li>
+          <li><Shareifc className={classes.iconSmall} /> Share IFC model</li>
         </ul>
-      </Paper>
-    </div>
+        <div style={{width: '100%', textAlign: 'center'}}>
+          <h2>Cookies</h2>
+          <Slider
+            sx={{width: 240, textAlign: 'center'}}
+            defaultValue={30}
+            step={10}
+            marks={marks}
+            min={0}
+            max={20} />
+          <div style={{width: '100%', textAlign: 'left'}}>
+            <ul>
+              <li>Mild - ...</li>
+              <li>Medium - ...</li>
+              <li>High - ...</li>
+            </ul>
+          </div>
+          <div className={classes.openSource}>
+            We are open source 🌱 Please visit our repository:&nbsp;
+            <a href={'https://github.com/buildrs/Share'} target="_new">
+              github.com/buildrs/Share
+            </a>
+          </div>
+        </div>
+        <div
+          style={{position: 'absolute', right: '20px', bottom: '10px'}}
+          onClick={openToggle}
+          onKeyDown={openToggle}
+          role="none"
+        >
+          <Delete style={{width: '30px'}} />
+        </div>
+      </Paper >
+    </div >
   )
 }
 
 
 const useStyles = makeStyles({
   container: {
-    position: 'absolute',
+    position: 'fixed',
     top: '0px',
     left: '0px',
     width: '100%',
     height: '100vh',
     display: 'flex',
     justifyContent: 'center',
+    zIndex: 2000,
   },
   title: {
     width: '100%',
     display: 'flex',
     justifyContent: 'center',
-    paddingTop: '10px'},
+    paddingTop: '10px',
+  },
   panel: {
     'position': 'relative',
     'top': (props) => props.offsetTop,
     'width': '320px',
-    'height': '380px',
+    'height': '600px',
     'fontFamily': 'Helvetica',
     'padding': '1em 1em',
     '@media (max-width: 900px)': {
       width: '84%',
-      height: '400px',
+      height: '590px',
     },
     '& h1, & h2': {
       color: '#696969',
@@ -108,15 +160,21 @@ const useStyles = makeStyles({
       },
     },
     '& li': {
+      marginBottom: '6px',
       fontWeight: 200,
+      listStyleType: 'none',
+      display: 'flex',
+      justifyContent: 'flex-start',
+      alignItems: 'center',
+
     },
     '& a': {
       color: 'lime',
       backgroundColor: '#848484',
       paddingLeft: '4px',
       paddingRight: '4px',
       paddingBottom: '2px',
-      cornerRadius: '2px',
+      borderRadius: '2px',
     },
   },
   about: {
@@ -128,6 +186,12 @@ const useStyles = makeStyles({
     height: '30px',
     cursor: 'pointer',
   },
+  iconSmall: {
+    marginRight: '10px',
+  },
+  hello: {
+    height: '50px',
+  },
   closeButton: {
     'float': 'right',
     'cursor': 'pointer',
@@ -137,4 +201,8 @@ const useStyles = makeStyles({
       height: '20px',
     },
   },
+  openSource: {
+    'fontWeight': 200,
+    'lineHeight': '24px',
+  },
 })
diff --git a/src/Components/BaseGroup.jsx b/src/Components/BaseGroup.jsx
@@ -0,0 +1,50 @@
+import React from 'react'
+import IconButton from '@mui/material/IconButton'
+import Tooltip from '@mui/material/Tooltip'
+import {makeStyles} from '@mui/styles'
+import Settings from './Settings'
+import AboutControl from './AboutPanel'
+import Open from '../assets/2D_Icons/Open.svg'
+
+
+/**
+ * Base group contains Settings, ModelUpload, About
+ * @param {function} fileOpen opens a file dialog for new model upload
+ * @param {Number} offsetTop
+ * @return {Object} React component.
+ */
+export default function BaseGroup({fileOpen, offsetTop}) {
+  const classes = useStyles()
+  return (
+    <div className={classes.container}>
+      <AboutControl offsetTop={offsetTop} />
+      <Tooltip title="Upload" placement="top">
+        <IconButton
+          aria-label='account of current user'
+          aria-controls='menu-appbar'
+          aria-haspopup='true'
+          onClick={fileOpen}
+          color='inherit'
+        >
+          <Open className={classes.icon} />
+        </IconButton>
+      </Tooltip>
+      <Settings />
+    </div>
+  )
+}
+
+
+const useStyles = makeStyles({
+  icon: {
+    'width': '30px',
+    'height': '30px',
+  },
+  container: {
+    'display': 'flex',
+    'flexDirection': 'row',
+    'justifyContent': 'space-between',
+    'width': '140px',
+    'alignItems': 'center',
+  },
+})
diff --git a/src/Components/ExpansionPanel.jsx b/src/Components/ExpansionPanel.jsx
@@ -3,7 +3,7 @@ import Accordion from '@mui/material/Accordion'
 import AccordionSummary from '@mui/material/AccordionSummary'
 import AccordionDetails from '@mui/material/AccordionDetails'
 import Typography from '@mui/material/Typography'
-import ExpandIcon from '../assets/ExpandIcon.svg'
+import ExpandIcon from '../assets/2D_Icons/ExpandIcon.svg'
 
 
 /**

diff --git a/src/Components/GuidePanel.jsx b/src/Components/GuidePanel.jsx
@@ -2,8 +2,8 @@ import React, {useState} from 'react'
 import IconButton from '@mui/material/IconButton'
 import Paper from '@mui/material/Paper'
 import {makeStyles} from '@mui/styles'
-import Close from '../assets/3D/clear.svg'
-import Question from '../assets/3D/help.svg'
+import Close from '../assets/2D_Icons/Clear.svg'
+import Question from '../assets/2D_Icons/Question.svg'
 
 
 /**