simplify styles

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r689",
+  "version": "1.0.0-r687",
   "main": "src/index.jsx",
   "license": "MIT",
   "homepage": "https://github.com/bldrs-ai/Share",

src/Components/About/AboutControl.jsx

@@ -1,11 +1,13 @@
 import React, {useState} from 'react'
 import Box from '@mui/material/Box'
+import Paper from '@mui/material/Paper'
+import Stack from '@mui/material/Stack'
+import Link from '@mui/material/Link'
 import Typography from '@mui/material/Typography'
 import {getCookieBoolean, setCookieBoolean} from '../../privacy/Privacy'
 import useStore from '../../store/useStore'
 import Dialog from '../Dialog'
 import {ControlButton} from '../Buttons'
-import AboutDescription from './AboutDescription'
 import PrivacyControl from './PrivacyControl'
 import AboutIcon from '../../assets/icons/Information.svg'
 import LogoB from '../../assets/LogoB.svg'
@@ -62,13 +64,12 @@ export default function AboutControl() {
 export function AboutDialog({isDialogDisplayed, setIsDialogDisplayed}) {
   return (
     <Dialog
-      icon={
+      headerText={
         <Box sx={{display: 'inline-flex', flexDirection: 'column', textAlign: 'center'}}>
           <LogoB/>
-          <Typography variant='h6'>bldrs.ai</Typography>
+          <Typography variant={'overline'}>bldrs.ai</Typography>
         </Box>
       }
-      headerText={''}
       isDialogDisplayed={isDialogDisplayed}
       setIsDialogDisplayed={setIsDialogDisplayed}
       content={<AboutContent setIsDialogDisplayed={setIsDialogDisplayed}/>}
@@ -86,15 +87,34 @@ export function AboutDialog({isDialogDisplayed, setIsDialogDisplayed}) {
  */
 function AboutContent({setIsDialogDisplayed}) {
   return (
-    <Box sx={{'& a': {textDecoration: 'none'}}}>
+    <Box sx={{paddingBottom: '10px'}}>
       <Helmet>
         <title>About — BLDRS</title>
       </Helmet>
-      <Typography variant='h2' gutterBottom={true}>build every thing together</Typography>
-      <a href='https://github.com/bldrs-ai/Share' target='_new'>
-        github.com/bldrs-ai/Share
-      </a>
-      <AboutDescription setIsDialogDisplayed={setIsDialogDisplayed}/>
-      <PrivacyControl/>
+      <Stack
+        spacing={3}
+        direction="column"
+        justifyContent="center"
+        alignItems="center"
+      >
+        <Stack spacing={0}>
+          <Typography variant={'body1'}>build every thing together</Typography>
+          <Link
+            underline="always"
+            href='https://github.com/bldrs-ai/Share'
+          >
+            github.com/bldrs-ai/Share
+          </Link>
+        </Stack>
+        <Paper variant='background' elevation={0}>
+          <Typography variant={'body1'}>
+              Cross-functional online collaboration unlocks team flow,
+              productivity and creativity.
+              Open workspaces, open standards and open source code is the most powerful way to work.
+              Cooperation is the unfair advantage.
+          </Typography>
+        </Paper>
+        <PrivacyControl/>
+      </Stack>
     </Box>)
 }

src/Components/About/AboutDescription.jsx

@@ -12,13 +12,6 @@ import useTheme from '@mui/styles/useTheme'
 export default function AboutDescription({setIsDialogDisplayed}) {
   const theme = useTheme()
 
-
-  /**
-   * Close About dialog when a link is clicked
-   */
-  function onClickLink() {
-    setIsDialogDisplayed(false)
-  }
   return (
     <Box
       sx={{
@@ -35,42 +28,12 @@ export default function AboutDescription({setIsDialogDisplayed}) {
         textAlign: 'left',
       }}
     >
-      <Box
-        sx={{
-          padding: '10px 10px',
-        }}
-      >
-        <Typography variant={'h5'}>
-            Cross-functional online collaboration unlocks team flow,
-            productivity and creativity.
-            Open workspaces, open standards and open source code is the most powerful way to work.
-            Cooperation is the unfair advantage.
-        </Typography>
-        <Box
-          sx={{
-            marginRight: '-6px',
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'flex-end',
-            position: 'relative',
-            top: '1.4em',
-          }}
-        >
-          <a
-            href='https://bldrs.ai/share/v/p/index.ifc#c:-113.444,0.464,81.43,-23.595,24.522,10.88::i:1493510953'
-            onClick={onClickLink}
-          >
-            <Typography sx={{textDecoration: 'underline', marginLeft: '10px'}}>Guide</Typography>
-          </a>
-          <a
-            // eslint-disable-next-line max-len
-            href='https://bldrs.ai/share/v/gh/OlegMoshkovich/Logo/main/IFC_STUDY.ifc#c:40.821,-10.247,39.647,5.918,-13.326,-13.866::i:1605443723'
-            onClick={onClickLink}
-          >
-            <Typography sx={{textDecoration: 'underline', marginLeft: '10px'}}>Team</Typography>
-          </a>
-        </Box>
-      </Box>
+      <Typography variant={'body2'}>
+          Cross-functional online collaboration unlocks team flow,
+          productivity and creativity.
+          Open workspaces, open standards and open source code is the most powerful way to work.
+          Cooperation is the unfair advantage.
+      </Typography>
     </Box>
   )
 }

src/Components/About/AboutGuide.jsx

@@ -25,7 +25,7 @@ export default function AboutGuide() {
         borderRadius: '10px',
         margin: '2em 0',
         padding: '.3em 1em .5em .5em',
-        color: theme.palette.primary.contrastText,
+        // color: theme.palette.primary.contrastText,
         backgroundColor: theme.palette.scene.background,
       }}
     >
@@ -38,7 +38,7 @@ export default function AboutGuide() {
             height: '13px',
             verticalAlign: 'middle',
             lineHeight: '15px',
-            fill: theme.palette.primary.contrastText,
+            // fill: theme.palette.primary.contrastText,
           },
           '& div': {
             textAlign: 'right',

src/Components/About/PrivacyControl.jsx

@@ -1,6 +1,7 @@
 import React, {useEffect, useState} from 'react'
-import Box from '@mui/material/Box'
+import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
+import Link from '@mui/material/Link'
 import * as Privacy from '../../privacy/Privacy'
 import Toggle from '../Toggle'
 
@@ -29,25 +30,25 @@ export default function PrivacyControl() {
 
 
   return (
-    <Box
-      sx={{
-        width: '100%',
-        margin: '1em 0',
-        textAlign: 'justify',
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-      }}
+    <Stack
+      spacing={2}
+      direction="row"
+      justifyContent="space-around"
+      alignItems="center"
     >
-      <Typography>
-        Analytics cookies<br/>
-        <a href='https://github.com/bldrs-ai/Share/wiki/Design#privacy' target='_new'>
+      <Stack
+        spacing={0}
+        direction="column"
+        justifyContent="flex-start"
+        alignItems="flex-start"
+      >
+        <Typography>Analytics cookies</Typography>
+        <Link href='https://github.com/bldrs-ai/Share/wiki/Design#privacy' >
           read more
-        </a>
-      </Typography>
+        </Link>
+      </Stack>
       <Toggle checked={acceptCookies} onChange={changePrivacy}/>
-    </Box>
+    </Stack>
   )
 }
 

src/Components/BranchesControl.jsx

@@ -81,7 +81,7 @@ export default function Branches() {
         >
           <TextField
             sx={{
-              'width': '300px',
+              'width': '274px',
               '& .MuiOutlinedInput-input': {
                 color: theme.palette.primary.contrastText,
               },

src/Components/Dialog.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
+import Button from '@mui/material/Button'
 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'
 
 
@@ -31,23 +31,22 @@ export default function Dialog({
   actionIcon,
 }) {
   assertDefined(
-      icon, headerText, isDialogDisplayed, setIsDialogDisplayed, content,
+      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>{content}</DialogContent>
       <DialogActions>
-        <RectangularButton title={actionTitle} icon={actionIcon} onClick={actionCb}/>
+        <Button variant="contained" onClick={actionCb} startIcon={actionIcon}>
+          {actionTitle}
+        </Button>
       </DialogActions>
     </MuiDialog>
   )

src/Components/NoContent.jsx

@@ -14,7 +14,7 @@ export default function NoContent({message = 'no content'}) {
   return (
     <Paper variant='control' sx={{textAlign: 'center'}}>
       <AttentionIcon className='icon-share'/>
-      <Typography variant={'h4'} sx={{marginTop: '1em'}}>{message}</Typography>
+      <Typography sx={{marginTop: '1em'}}>{message}</Typography>
     </Paper>
   )
 }