Replace unused props with className, add btn-custom class in oove the…

… use of important
thoughtworksarts · Aug 30, 2019 · 100bab9 · 100bab9
1 parent 8764c22
commit 100bab9
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 65 deletions.
diff --git a/app/components/branch.js b/app/components/branch.js
@@ -49,7 +49,7 @@ export default class Branch extends React.Component {
         return(
             <div id="branch">
                 <h5> {this.props.emotion} Branch </h5>
-                <input type="checkbox" name="enabled" bsStyle="primary" bsSize="large" onClick={this.handleToggle}/>
+                <input type="checkbox" name="enabled" onClick={this.handleToggle}/>
                 <span> Disable </span>
                 { this.branch() }
                 <br/>

diff --git a/app/components/container.js b/app/components/container.js
@@ -140,20 +140,20 @@ export default class Container extends React.Component {
         return (
             <div id="container">
                 <Collapsible trigger="Intro">
-                    <Button name="intros" bsStyle="primary" onClick={this.addSlide}>
+                    <Button name="intros" className="btn-custom" onClick={this.addSlide}>
                         Add Intro Slide
                     </Button>
                     <br/>
-                    <div> 
+                    <div>
                         { Object.keys(intros).map((timeRangeId,_) =>
                             <div id="deleteSlide1">
-                                <div id="deleteButton1">
+                                <div className="deleteButton">
                                     &nbsp;
-                                    <Button name="intros" bsStyle="primary" id={timeRangeId}
+                                    <Button name="intros" className="btn-custom" id={timeRangeId}
                                         onClick={this.deleteSlide}>
                                         &times;
                                     </Button>
-                                </div>                            
+                                </div>
                                 <TimeRange name="intros" id={timeRangeId} range={[intros[timeRangeId].start,
                                            intros[timeRangeId].end]} onChange={this.handleTimeRangeChange}
                                             numFrames={this.props.numFrames}/>
@@ -171,16 +171,16 @@ export default class Container extends React.Component {
                         )}
                     </div>
                     <Collapsible trigger="Credits">
-                    <Button name="credits" bsStyle="primary" onClick={this.addSlide}>
+                    <Button name="credits" className="btn-custom" onClick={this.addSlide}>
                         Add Credit Slide
                     </Button>
                     <br/>
                     <div>
                         { Object.keys(credits).map((timeRangeId,_) =>
                             <div id="deleteSlide2">
-                                <div id="deleteButton2">
+                                <div className="deleteButton">
                                     &nbsp;
-                                    <Button name="credits" bsStyle="primary" id={timeRangeId}
+                                    <Button name="credits" className="btn-custom" id={timeRangeId}
                                         onClick={this.deleteSlide}>
                                         &times;
                                     </Button>
@@ -193,7 +193,7 @@ export default class Container extends React.Component {
                     </div>
                 </Collapsible>
                 <branches/>
-                <Button onClick={this.handleExport} id="exportButton" name="export" bsStyle="primary">Export</Button>
+                <Button onClick={this.handleExport} id="exportButton" name="export" className="btn-custom">Export</Button>
                 <span id="exportValidator" style={{display: this.state.displayValue, color: "red"}}>
                     &nbsp; fix your mistakesssss
                 </span>

diff --git a/app/components/intro.js b/app/components/intro.js
@@ -49,14 +49,14 @@ export default class Intro extends React.Component {
 						</label>
 						<input type="number" min={1} max={100} name="numFrames" value={this.state.numFrames}
 						       placeholder={this.state.numFrames} onChange={this.handleInputChange}/><br/>
-						<Button bsStyle="primary" type="submit">Start Configuring!</Button>
+						<Button className="btn-custom" type="submit">Start Configuring!</Button>
 					</form>
 				</div>
             );
 		} else {
 			return(
 				<div>
-					<Button name="goBack" bsStyle="primary" id="backButton" onClick={this.goBack}>Go Back</Button>
+					<Button name="goBack" className="btn-custom" id="backButton" onClick={this.goBack}>Go Back</Button>
 					<Container numLevels={this.state.numLevels} numFrames={this.state.numFrames} />
 				</div>
 			);

diff --git a/app/style/index.css b/app/style/index.css
@@ -12,16 +12,17 @@ h1 {
 	text-align: center;
 }
 
-.btn-primary {
+.btn-custom {
     background-color: var(--main-color);
     border-color: var(--main-color);
     box-shadow: 1px 1px 1px grey;
     margin-bottom: 1%;
+    color: white;
 }
 
-.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
-    background-color: var(--hover-color) !important;
-    border-color: var(--hover-color) !important;
+.btn-custom:hover, .btn-custom:focus, .btn-custom:active {
+    background-color: var(--hover-color);
+    border-color: var(--hover-color);
 }
 
 #app {
@@ -38,32 +39,24 @@ h1 {
 
 #exportButton {
     margin-top: 1%;
-} 
-
-#deleteSlide1 {
-    text-align:left;
 }
 
-#deleteSlide2 {
+#deleteSlide1, #deleteSlide2 {
     text-align:left;
 }
 
-#deleteButton1, #timeRangeDiv {
-    display:inline;
-}
-
-#deleteButton2, #timeRangeDiv {
+#deleteButton1, .deleteButton, #timeRangeDiv {
     display:inline;
 }
 
 input#timeRange {
-    width: 8%;
+    width: 5em;
 }
 
 select#outcome {
     background-color: var(--main-color);
     border-radius: 5px;
-    color: #fff;
+    color: white;
     height: 30px;
     margin-top: 5px;
 }
@@ -86,20 +79,10 @@ div#branch {
 }
 
 .Collapsible__contentInner {
-  padding: 10px;
-  background-color: white;
-  border: 1px solid $lightGrey;
-  border-top: 0;
-
-  p {
-    margin-bottom: 10px;
-    font-size: 14px;
-    line-height: 20px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
+    padding: 10px;
+    background-color: white;
+    border: 1px solid lightGrey;
+    border-top: 0;
 }
 
 .Collapsible__trigger {
@@ -112,28 +95,7 @@ div#branch {
   padding: 10px;
   color: white;
   border-collapse: separate;
-  border-radius: 0.25 rem;
-
-  &:after {
-    font-family: 'FontAwesome';
-    content: '\f107';
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    display: block;
-    transition: transform 300ms;
-  }
-
-  &.is-open {
-    &:after {
-      transform: rotateZ(180deg);
-    }
-  }
-
-  &.is-disabled {
-    opacity: 0.5;
-    background-color: grey;
-  }
+  border-radius: 0.25rem;
 }
 
 .Collapsible__custom-sibling {
@@ -142,4 +104,4 @@ div#branch {
   background-color: #CBB700;
   color: black;
 }
-/*end of Collapsible*/
+/*end of Collapsible*/