Improveedstylization of Accessibility Lens. Reduced checkbox sizes. Added border

Co-authored-by: Justin Baik <bij3377@gmail.com>
Co-authored-by: Max Weisenberger <germanbluemax@gmail.com>
Co-authored-by: Mo Hmaidi <mhmaidi789@gmail.com>
Co-authored-by: Dieu Huynh <dieuhhuynh@gmail.com>

Author: 5 people

src/components/BrowserView/BrowserView.jsx

@@ -86,43 +86,37 @@ const BrowserView = () => {
     }
   };
 
-  const useStyles = makeStyles(() => ({
-    FormControlLabel: {
-      // fontSize doesn't work, but color does work...
-      fontSize: '1px',
-      // color: 'white',
-      // ,
-    },
-  }));
+  // const useStyles = makeStyles(() => ({
+  //   FormControlLabel: {
+  //     // fontSize doesn't work, but color does work...
+  //     fontSize: '1px',
+  //     color: 'red',
+  //     // ,
+  //   },
+  // }));
 
-  const classes = useStyles();
+  // const classes = useStyles();
 
   return (
-    <div id="Accessibility Lens">
-      <div className={styles.accessLensContainer}>
+    <div id={styles.browswerComponentTopLevelDiv}>
+      <div id={styles.accessLensContainer}>
         <div id={styles.accessLensLabel}>
           Accessibility Lens
         </div>
         {/* trying to put some sort of flex style or centered style here to center the 3 check boxes...but no avail */}
         <div
-          id="Check Boxes"
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            // fontSize: 22,
-          }}
+          id={styles.accessLensCheckBoxes}
         >
           <FormControlLabel
               // style={{fontSize:2}}
-            id="Disable Mouse Checkbox"
-            control={(
-              <Checkbox
-                // style={{fontSize:2}}
+              id="Disable Mouse Checkbox"
+              control={(
+                <Checkbox
                 value="disable mouse clicks"
                 checked={checkedBoxes.checkedMouse}
                 onChange={handleChangeCheckBox}
                 name="checkedMouse"
+                size='small'
               />
             )}
             label="Disable Mouse Clicks"
@@ -135,6 +129,7 @@ const BrowserView = () => {
                 checked={checkedBoxes.checkedGrayscale}
                 onChange={handleChangeCheckBox}
                 name="checkedGrayscale"
+                size='small'
               />
             )}
             label="Grayscale"
@@ -147,6 +142,7 @@ const BrowserView = () => {
                 checked={checkedBoxes.checkedContrast}
                 onChange={handleChangeCheckBox}
                 name="checkedContrast"
+                size='small'
               />
             )}
             label="Low Contrast"
@@ -159,6 +155,7 @@ const BrowserView = () => {
                 checked={checkedBoxes.muted}
                 onChange={handleChangeCheckBox}
                 name="muted"
+                size='small'
               />
             )}
             label="Mute"

src/components/BrowserView/BrowserView.module.scss

@@ -2,7 +2,9 @@
 @import '../../assets/stylesheets/fonts.scss';
 
 #browserView {
-  height: 100vh;
+  display: flex;
+  justify-content: center;
+  height: 97vh;
   width: auto;
 }
 
@@ -17,14 +19,38 @@
   text-indent: 10px;
 }
 
-.accessLensContainer{
-  background-color: $mint2;
-  height: 55px;
+#browswerComponentTopLevelDiv{
+  display: flex;
+  flex: 1;
+  flex-direction: column;
 }
 
-.accessLensCheckBoxes{
-  display: flex;
+#accessLensContainer{
   // background-color: $mint2;
+  display: flex;
+  flex-direction: column;
+  height: 8vh;
+  min-width: 100px;
+  // border: $mint;
+  // border-width: .1em;
+  // border-radius: 5px;
+  // border-style: solid;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  white-space: nowrap;
+  justify-content: center;
+}
+
+#accessLensCheckBoxes{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: $mint2;
+  border: $mint2;
+  border-width: .1em;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  border-style: solid;
 }
 
 #accessLensLabel {
@@ -33,6 +59,11 @@
   background-color: $mint;
   color: white;
   font-size: 18px;
+  height: 2vh;
+  border: $mint;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  border-style: solid;
 }
 
 // button {