finished Annotation cleanup including imports, styling, variable names, types and tutorial - now DeleteButton

Author: brett-webster

app/src/components/main/DeleteButton.tsx

@@ -6,8 +6,6 @@ import StateContext from '../../context/context';
 function DeleteButton({ id, name }: DeleteButtons) {
   const [state, dispatch] = useContext(StateContext);
 
-  // -------------------------------- NEW CODE for DELETE BUTTONS, REPLACING ANNOTATIONS ---------------------------------------
-
   const deleteHTMLtype = (id: number) => {
     dispatch({
       type: 'DELETE CHILD',
@@ -18,7 +16,7 @@ function DeleteButton({ id, name }: DeleteButtons) {
   return (
     <div style={{ padding: '1px', float: 'right' }}>
       <button
-        className="annotate-button-empty" // NOTE:  This className no longer accurate --> to update to delete button, same w/ Annotation export throughout
+        className="delete-button-empty"
         id={'btn' + id}
         onClick={(event) => {
           event.stopPropagation();

app/src/public/styles/style.css

@@ -17,7 +17,7 @@ html {
 body {
   margin: 0;
   padding: 0;
-  font-family: 'Roboto','Raleway', sans-serif;
+  font-family: 'Roboto', 'Raleway', sans-serif;
   font-size: 0.9 em;
   font-weight: 400;
   overflow: hidden;
@@ -29,14 +29,14 @@ h4 {
   text-align: center;
 }
 .creation-panel {
-  color:black;
+  color: black;
   display: flex;
   flex-direction: row;
   /* height: 100%; */
   background-color: #fff;
 }
 .customization-section {
-  color:black;
+  color: black;
   display: flex;
   flex-direction: row;
   height: 100%;
@@ -47,7 +47,6 @@ h4 {
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
-
 }
 .state-prop-grid {
   height: 300px;
@@ -85,7 +84,7 @@ header {
   flex-grow: 1;
 }
 .column {
-  background-color: #F9F9F9;
+  background-color: #f9f9f9;
 }
 
 /*
@@ -150,7 +149,7 @@ LEFT COLUMN
   height: 52vh;
   overflow-y: auto;
 }
-#CompBottomHalf{
+#CompBottomHalf {
   flex-grow: 1;
   overflow-y: auto;
   margin-bottom: 50%;
@@ -441,7 +440,7 @@ BOTTOM PANEL
   text-align: center;
   line-height: 0px;
   user-select: none;
-  color:rgb(32, 32, 32);
+  color: rgb(32, 32, 32);
   font-size: x-large;
 }
 
@@ -514,34 +513,32 @@ NAVBAR
   width: 16%;
 }
 
-
 /*
 /////////////////////////////////////////////////
-ANNOTATIONS
+ANNOTATIONS --> now DELETE BUTTON
 /////////////////////////////////////////////////
 */
-.annotate-button-empty {
+.delete-button-empty {
   float: right;
   background-color: #3ec1ac;
   border-radius: 15px;
   font-size: 14px;
-  color: rgb(32, 32, 32)
+  color: rgb(32, 32, 32);
 }
-.annotate-button-filled {
+.delete-button-filled {
   float: right;
   border-radius: 15px;
   font-size: 13px;
 }
-.annotate-position {
+.delete-position {
   display: flex;
   flex-direction: column;
   position: fixed;
-  align-items:flex-start;
+  align-items: flex-start;
   top: 30%;
   left: 30%;
-
 }
-.annotate-textarea {
+.delete-textarea {
   width: 600px;
   height: 300px;
   resize: none;
@@ -553,7 +550,7 @@ ANNOTATIONS
   border-radius: 0px 0px 15px 15px;
   font-family: Arial, Helvetica, sans-serif;
 }
-.annotate-textarea-header {
+.delete-textarea-header {
   font-size: 35px;
   background-color: #003366;
   color: rgb(241, 240, 240);
@@ -564,15 +561,15 @@ ANNOTATIONS
   font-family: 'Open Sans', sans-serif;
   border-radius: 15px 15px 0px 0px;
 }
-.annotate-textarea-footer {
+.delete-textarea-footer {
   background-color: #4772c7;
   color: rgb(107, 93, 93);
   width: 600px;
   border: 2px;
   border-style: solid;
   border-color: black;
 }
-.annotate-textarea-savebutton {
+.delete-textarea-savebutton {
   float: right;
   width: 150px;
   height: 30px;
@@ -636,23 +633,23 @@ a.nav_link:hover {
 .oauth-bttn:hover {
   background-color: #4e76c7;
 }
-.text-editor .bttn{
+.text-editor .bttn {
   position: absolute;
   bottom: 90px;
-  right: 30px ;
+  right: 30px;
   z-index: 999;
 }
 .useState-btn {
   color: rgb(241, 240, 240);
-  background-color: #0099E6;
+  background-color: #0099e6;
   font-family: Arial, Helvetica, sans-serif;
 }
 .useState-btn {
   color: rgb(241, 240, 240);
-  background-color: #0099E6;
-  border: 1px solid #186BB4;
+  background-color: #0099e6;
+  border: 1px solid #186bb4;
   border-radius: 3;
-  box-shadow: "0 0px 0px 2px #1a1a1a";
+  box-shadow: '0 0px 0px 2px #1a1a1a';
   padding: 2px 2px 2px 2px;
 }
 .useState-position {

app/src/tutorial/Annotations.tsx

@@ -13,7 +13,6 @@ import CodeIcon from '@material-ui/icons/Code';
 import AddToPhotosIcon from '@material-ui/icons/AddToPhotos';
 import TvIcon from '@material-ui/icons/Tv';
 import AccountTreeIcon from '@material-ui/icons/AccountTree';
-import CommentIcon from '@material-ui/icons/Comment';
 import AddPhotoAlternateIcon from '@material-ui/icons/AddPhotoAlternate';
 import StyleIcon from '@material-ui/icons/Style';
 import ColorLensIcon from '@material-ui/icons/ColorLens';
@@ -23,7 +22,6 @@ import BrushIcon from '@material-ui/icons/Brush';
 import CloseIcon from '@material-ui/icons/Close';
 import Button from '@material-ui/core/Button';
 
-
 const useStyles = makeStyles({
   root: {
     display: 'flex',
@@ -100,10 +98,9 @@ const Tutorial: React.FC<RouteComponentProps> = () => {
     'HTML Elements',
     'Styling',
     'Customization',
-    'Annotations',
     'States',
     'CSS Editor',
-    'Keyboard Shortcuts',
+    'Keyboard Shortcuts'
   ];
   const icons = [
     <MenuBookIcon className={classes.icons} />,
@@ -115,24 +112,23 @@ const Tutorial: React.FC<RouteComponentProps> = () => {
     <AddPhotoAlternateIcon className={classes.icons} />,
     <StyleIcon className={classes.icons} />,
     <ColorLensIcon className={classes.icons} />,
-    <CommentIcon className={classes.icons} />,
     <SwapVertIcon className={classes.icons} />,
     <BrushIcon className={classes.icons} />,
-    <KeyboardIcon className={classes.icons} />,
+    <KeyboardIcon className={classes.icons} />
   ];
   const body = document.querySelector('body');
   body.style.overflowY = 'auto';
   body.style.backgroundColor = Styling.tutorialGray;
   const cards = topics.map((topic, i) => {
     return (
       <div key={`k${i}`} className={classes.cardWrapper}>
-        <Link to={`/tutorialPage/${topic}`} style={{ textDecoration: 'none' }} >
+        <Link to={`/tutorialPage/${topic}`} style={{ textDecoration: 'none' }}>
           <Card className={classes.root} variant="elevation">
             <CardContent>
               <Typography className={classes.title}>{topic}</Typography>
             </CardContent>
-            <CardActions className={classes.cardActions} >
-                {icons[i]}
+            <CardActions className={classes.cardActions}>
+              {icons[i]}
             </CardActions>
           </Card>
         </Link>
@@ -141,25 +137,25 @@ const Tutorial: React.FC<RouteComponentProps> = () => {
   });
   return (
     <>
-    <div>
-            {/* <Link to='/' style={{textDecoration: 'none'}}> */}
-              <Button
-                variant='contained'
-                color='primary'
-                style={{ minWidth: '137.69px'}}
-                className="navbarButton"
-                id="ratingButton"
-                onClick={window.close}
-                endIcon={<CloseIcon/>}
-                > 
-                Close
-              </Button>
-            {/* </Link> */}
-          </div>
-    <Container maxWidth="xl" className={classes.container}>
-      <h1 className={classes.pageTitle}>ReacType Tutorial</h1>
-      <div className={classes.wrapper}>{cards}</div>
-    </Container>
+      <div>
+        {/* <Link to='/' style={{textDecoration: 'none'}}> */}
+        <Button
+          variant="contained"
+          color="primary"
+          style={{ minWidth: '137.69px' }}
+          className="navbarButton"
+          id="ratingButton"
+          onClick={window.close}
+          endIcon={<CloseIcon />}
+        >
+          Close
+        </Button>
+        {/* </Link> */}
+      </div>
+      <Container maxWidth="xl" className={classes.container}>
+        <h1 className={classes.pageTitle}>ReacType Tutorial</h1>
+        <div className={classes.wrapper}>{cards}</div>
+      </Container>
     </>
   );
 };