Merge pull request #66 from thexdev/improve-accessibility

Improve accessibility
BrandonArmand · Oct 1, 2020 · 643721b · 643721b
2 parents b2f6556 + e85a19f
commit 643721b
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 14 deletions.
diff --git a/src/assets/jss/material-kit-react.js b/src/assets/jss/material-kit-react.js
@@ -75,7 +75,7 @@ const dangerColor = "#f44336";
 const successColor = "#4caf50";
 const infoColor = "#00acc1";
 const roseColor = "#e91e63";
-const grayColor = "#999999";
+const grayColor = "#333";
 
 const primaryBoxShadow = {
     boxShadow:

diff --git a/src/assets/jss/material-kit-react/views/landingPage.js b/src/assets/jss/material-kit-react/views/landingPage.js
@@ -16,9 +16,10 @@ const landingPageStyle = {
         textDecoration: "none",
     },
     subtitle: {
-        fontSize: "1.313rem",
-        maxWidth: "500px",
-        margin: "10px auto 0",
+        fontSize: "1.125rem",
+        lineHeight: "1.5rem",
+        marginTop: "10px",
+        marginBottom: "10px"
     },
     main: {
         background: "#FFFFFF",

diff --git a/src/assets/jss/material-kit-react/views/landingPageSections/productStyle.js b/src/assets/jss/material-kit-react/views/landingPageSections/productStyle.js
@@ -13,7 +13,9 @@ const productStyle = {
         textDecoration: "none",
     },
     description: {
-        color: "#999",
+        color: "#333",
+        fontSize: "1.0625rem",
+        lineHeight: "1.55em"
     },
     infoSection: {
         marginTop: "20px",
@@ -26,9 +28,11 @@ const productStyle = {
         marginLeft: "20px",
     },
     videoDescription: {
-        color: "#999",
+        color: "#333",
         textAlign: "left",
         marginLeft: "30px",
+        fontSize: "1.0625rem",
+        lineHeight: "1.55em"
     },
 };
 

diff --git a/src/components/InfoArea/InfoArea.js b/src/components/InfoArea/InfoArea.js
@@ -28,7 +28,7 @@ export default function InfoArea(props) {
                 <props.icon className={iconClasses} />
             </div>
             <div className={classes.descriptionWrapper}>
-                <h4 className={classes.title}>{title}</h4>
+                <h3 className={classes.title}>{title}</h3>
                 <p className={classes.description}>{description}</p>
             </div>
         </div>

diff --git a/src/index.js b/src/index.js
@@ -49,12 +49,12 @@ function App() {
                         <GridContainer>
                             <GridItem xs={12} sm={12} md={6}>
                                 <h1 className={classes.title}>Binari</h1>
-                                <h4>
+                                <p className={classes.subtitle}>
                                     Binary Trees are a gateway towards a deeper understanding of
                                     dynamic programming. Through the use of both recursion and
                                     iterative implementations, any developer can be guided towards
                                     becoming a more complete programmer.
-                                </h4>
+                                </p>
                                 <br/>
                                 <Button color="primary" linkTo="/playground">
                                     Get Started

diff --git a/src/views/LandingPage/Sections/ProductSection.js b/src/views/LandingPage/Sections/ProductSection.js
@@ -18,12 +18,12 @@ export default function ProductSection() {
             <GridContainer justify="center">
                 <GridItem xs={12} sm={12} md={8}>
                     <h2 className={classes.title}>Let{"'"}s talk code</h2>
-                    <h5 className={classes.description}>
+                    <p className={classes.description}>
             Understanding Data Structures and Algorithms can be hard, I&apos;ve
             been there. That is why I built Binari, a one-stop shop for all
             things Binary Tree. Binari uses an interactive view so that you can
             fully encompass how Binary Trees operate.
-                    </h5>
+                    </p>
                 </GridItem>
             </GridContainer>
             <div>
@@ -74,7 +74,7 @@ export default function ProductSection() {
                     </GridItem>
                     <GridItem xs={12} sm={12} md={6}>
                         <h2 className={classes.videoTitle}>Universal Value Tree Problem</h2>
-                        <h5 className={classes.videoDescription}>
+                        <p className={classes.videoDescription}>
               There are many resources on the internet that break down various
               complex algorithms through interactive and visual understanding.
               An example is the video featured here. In addition to online
@@ -83,7 +83,7 @@ export default function ProductSection() {
               most notable work, Cracking the Coding Interview, offers insight
               into preparing for technical interviews, as well as methods on how
               to approach different types of algorithms.
-                        </h5>
+                        </p>
                     </GridItem>
                 </GridContainer>
             </div>

diff --git a/src/views/Playground/Playground.js b/src/views/Playground/Playground.js
@@ -18,7 +18,6 @@ import "ace-builds/src-noconflict/theme-twilight";
 import styles from "assets/jss/material-kit-react/views/playground.js";
 import SplitterLayout from "react-splitter-layout";
 import "react-splitter-layout/lib/index.css";
-import { IconButton } from '@material-ui/core';
 
 import { Canvas, Debug, Error, Info, Directory } from "./components";
 import { setPage, saveCode, resetCode } from "../../store/actions";