update demos

neptunian · Sep 15, 2017 · 1842a36 · 1842a36
1 parent ac9cd50
commit 1842a36
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 5 deletions.
diff --git a/examples/src/ExampleBasic.js b/examples/src/ExampleBasic.js
@@ -4,7 +4,7 @@ import Gallery from 'react-photo-gallery';
 const ExampleBasic = ({photos, columns}) => {
     return (
       <div>
-        <h2>Basic:</h2>
+        <h2>Basic</h2>
         <Gallery photos={photos} columns={columns} />
       </div>
     );

diff --git a/examples/src/ExampleCustomComponentSelection.js b/examples/src/ExampleCustomComponentSelection.js
@@ -21,9 +21,9 @@ class ExampleCustomComponentSelection extends React.Component {
   render(){
     return (
       <div>
-        <h2>Using the Custom Image Component:</h2>
+        <h2>Using the ImageComponent prop</h2>
         <h3>Pass in a custom image component to create any visual representation such as selection</h3>
-        <button className="toggle-select" onClick={this.toggleSelect}>toggle select</button>
+        <button className="toggle-select" onClick={this.toggleSelect}>toggle select all</button>
         <Gallery photos={this.state.photos} columns={this.props.columns} onClick={this.selectPhoto} ImageComponent={SelectedImage}/>
       </div>
     );

diff --git a/examples/src/ExampleWithLightbox.js b/examples/src/ExampleWithLightbox.js
@@ -37,7 +37,7 @@ class ExampleWithLightbox extends React.Component {
   render() {
     return (
       <div>
-        <h2>Using a Lightbox:</h2>
+        <h2>Using with a Lightbox component</h2>
         <Gallery photos={this.props.photos} columns={this.props.columns} onClick={this.openLightbox}/>
         <Lightbox
           theme={{ container: { background: 'rgba(0, 0, 0, 0.85)' } }}

diff --git a/examples/src/example.less b/examples/src/example.less
@@ -57,6 +57,7 @@ h1{
 }
 h2{
   margin: 15px 0 5px 0;
+  font-weight: 400;
 }
 h3{
   margin: 5px 0 5px 0;
@@ -98,8 +99,21 @@ iframe{
 #react-images-container{
  background-color: rgba(0,0,0,0.9);
 }
-.toggle-select{
+.toggle-select {
   margin-top: 5px;
+  background: #06befa;
+  background-image: linear-gradient(to bottom, #06befa, #2980b9);
+  border-radius: 3px;
+  border: 0;
+  font-family: Arial;
+  color: #ffffff;
+  padding: 10px 20px 10px 20px;
+  text-decoration: none;
+}
+.toggle-select:hover {
+  background: #06befa;
+  background-image: linear-gradient(to bottom, #06befa, #3498db);
+  text-decoration: none;
 }
 @keyframes ellipsis {
   to {