Fix link color and navigation two line error

app/hub/Views/SideNavigationView/SideNavigationView.jsx

@@ -26,7 +26,7 @@ const SideNavigationView = (props) => {
 					<div key={`menu-item-${item.href.substring(1)}`} className="SideNavigation__item SideNavigation__menuItem  flex-container align-middle">
 						<NavLink to={item.href} exact={item.href === '/'} className="flex-container align-middle">
 							<div className={`SideNavigation__menuIcon ${item.icon}`} />
-							<div>{item.text}</div>
+							<div className="SideNavigation__menuText">{item.text}</div>
 						</NavLink>
 					</div>
 				))}

app/hub/Views/SideNavigationView/SideNavigationView.scss

@@ -16,8 +16,8 @@
 	position: fixed;
 	height: 100%;
 	overflow-y: scroll;
-	min-width: 200px;
-	max-width: 200px;
+	min-width: 230px;
+	max-width: 230px;
 	background-color: #5d7d85;
 }
 .SideNavigation__top {
@@ -45,6 +45,7 @@
 	pointer-events: none;
 }
 .SideNavigation__item a {
+	color: #ffffff;
 	pointer-events: all;
 }
 .SideNavigation__item a:active,
@@ -103,6 +104,9 @@
 .SideNavigation__menuIcon.products {
 	background-image: buildIconProducts(#ffffff);
 }
+.SideNavigation__menuText {
+	max-width: 145px;
+}
 .SideNavigation__bottomItem {
 	padding-left: 20px;
 	margin: -24px 0;

app/hub/Views/SideNavigationView/__tests__/__snapshots__/SideNavigationView.test.jsx.snap

@@ -47,7 +47,9 @@ exports[`app/hub/Views/SideNavigationView component Snapshot tests with react-te
         <div
           className="SideNavigation__menuIcon home"
         />
-        <div>
+        <div
+          className="SideNavigation__menuText"
+        >
           Home
         </div>
       </a>
@@ -65,7 +67,9 @@ exports[`app/hub/Views/SideNavigationView component Snapshot tests with react-te
         <div
           className="SideNavigation__menuIcon setup"
         />
-        <div>
+        <div
+          className="SideNavigation__menuText"
+        >
           Customize Setup
         </div>
       </a>
@@ -83,7 +87,9 @@ exports[`app/hub/Views/SideNavigationView component Snapshot tests with react-te
         <div
           className="SideNavigation__menuIcon tutorial"
         />
-        <div>
+        <div
+          className="SideNavigation__menuText"
+        >
           Take a Tutorial
         </div>
       </a>
@@ -101,7 +107,9 @@ exports[`app/hub/Views/SideNavigationView component Snapshot tests with react-te
         <div
           className="SideNavigation__menuIcon supporter"
         />
-        <div>
+        <div
+          className="SideNavigation__menuText"
+        >
           Become a Supporter
         </div>
       </a>
@@ -119,7 +127,9 @@ exports[`app/hub/Views/SideNavigationView component Snapshot tests with react-te
         <div
           className="SideNavigation__menuIcon rewards"
         />
-        <div>
+        <div
+          className="SideNavigation__menuText"
+        >
           Try Ghostery Rewards
         </div>
       </a>
@@ -137,7 +147,9 @@ exports[`app/hub/Views/SideNavigationView component Snapshot tests with react-te
         <div
           className="SideNavigation__menuIcon products"
         />
-        <div>
+        <div
+          className="SideNavigation__menuText"
+        >
           See More Ghostery Products
         </div>
       </a>

app/scss/hub.scss

@@ -22,7 +22,7 @@ html, body, #root {
 }
 .App__mainContent {
 	overflow-y: scroll;
-	margin-left: 200px;
+	margin-left: 230px;
 }
 
 // Foundation Overrides