final-changes

rithmschool · Jun 26, 2019 · 2707dd6 · 2707dd6
1 parent 519f8c9
commit 2707dd6
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 28 deletions.
diff --git a/src/components/InfoIcon.css b/src/components/InfoIcon.css
@@ -9,11 +9,11 @@
   cursor: pointer;
 }
 
-.Text-container {
+.InfoIcon-text-container {
   position: relative;
 }
 
-.Show {
+.InfoIcon-text {
   position: absolute;
   background-color: rgb(34, 34, 34, 0.8);
   width: 180px;
@@ -27,14 +27,14 @@
   z-index: 1;
 }
 
-.Show a {
+.InfoIcon-text a {
   color: #fff;
 }
 
-.Show a:hover {
+.InfoIcon-text a:hover {
   color: rgb(184, 184, 184);
 }
 
-.Hide {
+.InfoIcon-text.hide {
   display: none;
 }
diff --git a/src/components/InfoIcon.js b/src/components/InfoIcon.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import info from './icons/info.svg';
 import './InfoIcon.css';
 
-export default class Info extends Component {
+export default class InfoIcon extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -18,22 +18,20 @@ export default class Info extends Component {
   }
 
   render() {
-    const displayClass = this.state.show ? 'Show' : 'Hide';
+    const displayClass = this.state.show ? 'show' : 'hide';
     return (
       <div className="InfoIcon-text-container">
-        <div className="Text-container">
-          <img
-            src={info}
-            alt="info icon"
-            className="InfoIcon-icon"
-            onClick={this.toggleInfo}
-          />
-          <div className={`InfoIcon-text ${displayClass}`}>
-            <p>{this.props.infoText}</p>
-            <a href="https://github.com/desmosinc/gifsmos" target="blank">
-              <p>More Info</p>
-            </a>
-          </div>
+        <img
+          src={info}
+          alt="info icon"
+          className="InfoIcon-icon"
+          onClick={this.toggleInfo}
+        />
+        <div className={`InfoIcon-text ${displayClass}`}>
+          <p>{this.props.infoText}</p>
+          <a href="https://github.com/desmosinc/gifsmos" target="blank">
+            <p>More Info</p>
+          </a>
         </div>
       </div>
     );

diff --git a/src/components/Preview.css b/src/components/Preview.css
@@ -9,6 +9,7 @@
   transition: 0.2s transform;
   margin-bottom: 0;
   overflow: scroll;
+  color: #fff;
 }
 
 .Preview-expanded {
@@ -66,14 +67,6 @@
   align-items: center;
 }
 
-.Preview-header h2 {
-  color: #fff;
-}
-
-.Preview-header p {
-  color: #fff;
-}
-
 @keyframes fade-in {
   0% {
     opacity: 0;