Merge pull request RocketChat#754 from RocketChat/better-github-button

Improve the "edit on github" button
karlitschek · May 21, 2018 · f4d74b4 · f4d74b4
2 parents befbe8d + 3958619
commit f4d74b4
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -85,7 +85,12 @@
       <div id="content" class="content">
         <div class="wrapper" {%if page.ignoreLinks%}data-proofer-ignore{% endif %}>
           {{ content }}
-          <div class="edit-github"><a href="https://github.com/RocketChat/docs/blob/master{{page.url}}README.md">Edit this page on GitHub</a></div>
+          <div class="edit-github">
+              <div class="edit-github-button">
+                <img class="github-icon" src="{{ site.url }}/images/icons/github.svg" alt="Github">
+                <a href="https://github.com/RocketChat/docs/blob/master{{page.url}}README.md">Contribute to this page on GitHub</a>
+              </div>
+          </div>
         </div>
       </div>
     </div>

diff --git a/_sass/layout.scss b/_sass/layout.scss
@@ -204,13 +204,31 @@ header {
 }
 
 .edit-github{
+  display: flex;
+
   margin: auto;
-  padding: 15px;
+  justify-content: end;
   width: max-content;
   text-align: right;
+  padding-top: 2em;
+
+  &-button {
+    display: flex;
+    background-color: #5cb85c;
+    border: 2px #4cae4c solid;
+    color: #fff;
+    padding: 15px 20px;
+
+    border-radius: 5px;
+  }
+  .github-icon {
+    filter: invert(100%);
+    margin-right: 10px;
+  }
 }
 
 .edit-github a, .edit-github a:visited {
+  color: #fff;
   text-decoration: none;
 }