Adjust styles for mobile (#141)

* style about and snackbar for mobile

* add logo link back to bldrs

* build

* style drawer

* shoe cutplane icon only on mobile

* add click function to logo

* add onClick prop to the logo

* add person icon

* add an outline of the person wave icon

* remove the cirle

package.json

@@ -1,6 +1,6 @@
 {
   "name": "buildrs",
-  "version": "1.0.0-r254",
+  "version": "1.0.0-r258",
   "main": "src/index.jsx",
   "homepage": "https://github.com/buildrs/Share",
   "scripts": {

src/Components/AboutControl.jsx

@@ -6,7 +6,7 @@ import Dialog from './Dialog'
 import debug from '../utils/debug'
 import * as Privacy from '../privacy/Privacy'
 import {ControlButton} from './Buttons'
-import AboutIcon from '../assets/2D_Icons/Wave.svg'
+import AboutIcon from '../assets/2D_Icons/Wave_person.svg'
 import LogoB from '../assets/LogoB.svg'
 import ShareIcon from '../assets/2D_Icons/Share.svg'
 import OpenIcon from '../assets/2D_Icons/Open.svg'
@@ -167,17 +167,24 @@ const useStyles = makeStyles({
     },
   },
   demo: {
-    height: '100px',
-    textAlign: 'center',
-    marginTop: '10px',
-    borderRadius: '10px',
-    border: '1px solid lightGrey',
+    'height': '100px',
+    'textAlign': 'center',
+    'marginTop': '10px',
+    'borderRadius': '10px',
+    'boxShadow': 'rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px',
+    '@media (max-width: 900px)': {
+      height: '60px',
+    },
   },
   demoContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    height: '50px',
+    'display': 'flex',
+    'flexDirection': 'row',
+    'justifyContent': 'space-between',
+    'height': '50px',
+    '@media (max-width: 900px)': {
+      height: '0px',
+      justifyContent: 'center',
+    },
   },
   settings: {
     'display': 'flex',
@@ -188,6 +195,9 @@ const useStyles = makeStyles({
     'textAlign': 'center',
     'paddingTop': '20px',
     'borderTop': '1px solid lightGrey',
+    '@media (max-width: 900px)': {
+      paddingTop: '10px',
+    },
     '& .MuiSlider-thumb': {
       backgroundColor: 'green',
       width: '15px',

src/Components/Buttons.jsx

@@ -66,7 +66,7 @@ export function TooltipToggleButton({
               onClick(event)
             }
           }}
-          color='success'>
+          color='primary'>
           {icon}
         </ToggleButton>
       </Tooltip>

src/Components/ItemPropertiesDrawer.jsx

@@ -45,21 +45,15 @@ export default function ItemPropertiesDrawer({
 
 const useStyles = makeStyles((props) => ({
   drawer: {
-    'height': '100%',
-    'width': 'auto',
-    'overflow': 'hidden',
-    'fontFamily': 'Helvetica',
-    '@media (max-width: 900px)': {
-      width: 'auto',
-      height: '200px',
-      borderRadius: '8px',
-      marginLeft: '0px',
-    },
     '& > .MuiPaper-root': {
-      width: (props) => props.isLandscape ? '320px' : 'auto',
+      'width': (props) => props.isLandscape ? '320px' : 'auto',
       // This lets the h1 in ItemProperties use 1em padding but have
       // its mid-line align with the text in SearchBar
-      padding: '4px 1em',
+      'padding': '4px 1em',
+      '@media (max-width: 900px)': {
+        width: 'auto',
+        height: '300px',
+      },
     },
     '& .MuiPaper-root': {
       marginTop: '0px',
@@ -80,8 +74,8 @@ const useStyles = makeStyles((props) => ({
     'alignItems': 'center',
     'margin': '1em 0',
     '@media (max-width: 900px)': {
-      paddingBottom: '10px',
       borderBottom: 'none',
+      height: '20px',
     },
   },
   content: {

src/Components/Logo.jsx

@@ -4,12 +4,13 @@ import {makeStyles, useTheme} from '@mui/styles'
 
 
 /**
+ * @param {function} onClick function triggered when logo is cliked
  * @return {Object} React component
  */
-export default function Logo() {
+export default function Logo({onClick}) {
   const classes = useStyles(useTheme())
   return (
-    <LogoIcon className={classes.logo}/>
+    <LogoIcon className={classes.logo} onClick = {onClick}/>
   )
 }
 
@@ -21,6 +22,7 @@ const useStyles = makeStyles((theme) => ({
     'paddingBottom': '3px',
     'left': '30px',
     'width': '140px',
+    'cursor': 'pointer',
     '@media (max-width: 900px)': {
       position: 'fixed',
       bottom: '20px',

src/Components/OperationsGroup.jsx

@@ -7,6 +7,7 @@ import ShortcutsControl from './ShortcutsControl'
 import {TooltipIconButton} from './Buttons'
 import CutPlaneIcon from '../assets/2D_Icons/CutPlane.svg'
 import ClearIcon from '../assets/2D_Icons/Clear.svg'
+import {useWindowDimensions} from './Hooks'
 
 
 /**
@@ -20,6 +21,8 @@ import ClearIcon from '../assets/2D_Icons/Clear.svg'
  */
 export default function OperationsGroup({viewer, unSelectItem, itemPanelControl}) {
   const classes = useStyles()
+  const {width} = useWindowDimensions()
+  const isMobile = width < 500
 
   /** Add a clipping plane. */
   function placeCutPlane() {
@@ -34,7 +37,10 @@ export default function OperationsGroup({viewer, unSelectItem, itemPanelControl}
       </div>
       <div className={classes.lowerGroup}>
         {itemPanelControl}
-        <TooltipIconButton title="Section plane" onClick={placeCutPlane} icon={<CutPlaneIcon/>}/>
+        {isMobile ?
+          <TooltipIconButton title="Section plane" onClick={placeCutPlane} icon={<CutPlaneIcon/>}/>:
+          ''
+        }
         <TooltipIconButton title="Clear selection" onClick={unSelectItem} icon={<ClearIcon/>}/>
         <ShortcutsControl/>
       </div>

src/Components/SnackbarMessage.jsx

@@ -40,6 +40,7 @@ const useStyles = makeStyles({
     '@media (max-width: 900px)': {
       left: '18px',
       bottom: '90px',
+      width: '220px',
     },
   }})
 

src/Containers/CadView.jsx

@@ -361,7 +361,7 @@ export default function CadView({
             pathPrefix={
               pathPrefix + (modelPath.gitpath ? modelPath.getRepoPath() : modelPath.filepath)
             }/>}
-        <Logo/>
+        <Logo onClick = {() => navToDefault(navigate, appPrefix)}/>
         <div className={isItemPanelOpen ?
                         classes.operationsGroupOpen :
                         classes.operationsGroup}>