#1 Change colors and icons to match fedora apps
Merged 3 years ago by ryanlerch. Opened 3 years ago by atelic.
atelic/fedora-paste theme  into  master

file modified
+1 -1

@@ -1,5 +1,5 @@ 

  -   repo: git://github.com/pre-commit/pre-commit-hooks

-     sha: 144c3857cdbba0b758f80aeee9f2adf42ea303ee

+     sha: 493665a5fc24deb2204fc48b8398be77e6c9e5d5

      hooks:

      -   id: trailing-whitespace

      -   id: check-json

@@ -55,7 +55,7 @@ 

   */

  modernPaste.universal.MenuController.hideMenuPanel = function() {

      this.menuToggleButton.fadeOut(function() {

-         $(this).attr('src', '/static/img/icons/menu.png');

+         $(this).attr('class', 'fa fa-bars fa-large menu-button');

          $(this).fadeIn();

      });

      this.menuPanel.css('margin-left', '-310px');

@@ -74,7 +74,7 @@ 

          this.userHeader.click();

      }

      this.menuToggleButton.fadeOut(function() {

-         $(this).attr('src', '/static/img/icons/cross.png');

+         $(this).attr('class', 'fa fa-times menu-button');

          $(this).fadeIn();

      });

      this.menuPanel.css('margin-left', '0');

@@ -24,7 +24,7 @@ 

  

  #menu-panel {

      @include ease-out-transition(margin);

-     background-color: $darker-blue;

+     background-color: $dark-gray;

      height: 100%;

      left: 0;

      margin-left: -310px;

file modified
+4 -4

@@ -74,9 +74,9 @@ 

              <div id="header">

                  <div class="container">

                      <span class="title-section">

-                         <img class="menu-button" src="/static/img/icons/menu.png" />

-                         <img class="hidden" src="/static/img/icons/cross.png" />

-                         <span class="sans-serif light gray size-5 spaced">modern</span><span class="sans-serif regular gray size-5 spaced">paste</span>

+                         <i class="fa fa-bars fa-large menu-button" aria-hidden="true"></i>

+                         <i class="fa fa-times hidden" aria-hidden="true"></i>

+                         <a href="/"><span class="sans-serif light gray size-5 spaced">modern</span><span class="sans-serif regular gray size-5 spaced">paste</span></a>

                      </span>

                      <span class="user-section">

                          <span class="user-header sans-serif semibold size-2 less-spaced">

@@ -85,7 +85,7 @@ 

                              {% else %}

                                  ANONYMOUS

                              {% endif %}

-                             <img class="user-menu-arrow" src="/static/img/icons/dark-arrows.png">

+                             <i class="fa fa-caret-down" aria-hidden="true"></i>

                          </span>

                      </span>

                  </div>

@@ -43,14 +43,14 @@ 

          <div class="page-navigation">

              <span class="previous-button">

                  <span>

-                     <img class="left-arrow" src="/static/img/icons/arrows.png">

+                     <i class="fa fa-arrow-left" aria-hidden="true"></i>

                  </span>

                  <span class="sans-serif regular light-gray size-3 less-spaced">PREVIOUS</span>

              </span>

              <span class="next-button">

                  <span class="sans-serif regular light-gray size-3 less-spaced">NEXT</span>

                  <span>

-                     <img class="right-arrow" src="/static/img/icons/arrows.png">

+                     <i class="fa fa-arrow-right" aria-hidden="true"></i>

                  </span>

              </span>

          </div>

@@ -48,7 +48,7 @@ 

      <div class="more-options-container section-label">

          <span class="more-options-link">

              <span class="sans-serif regular size-1 light-gray less-spaced">MORE OPTIONS</span>

-             <img class="arrow" src="/static/img/icons/arrows.png">

+             <i class="fa fa-caret-down text-muted" aria-hidden="true"></i>

          </span>

          <p class="option-description sans-serif regular size-1 light-gray less-spaced">PASTE EXPIRATION</p>

          <input id="date-time-picker" class="minimal-input-field underlined-input-field ubuntu-mono regular size-3" type="text" autocomplete="off" placeholder="Click to set a date">

@@ -67,7 +67,7 @@ 

      {% endif %}

  

      <div class="password-protected">

-         <img class="lock-icon" src="/static/img/icons/lock.png" />

+         <i class="fa fa-lock" aria-hidden="true"></i>

          <p class="sans-serif regular gray size-5 less-spaced">This paste is password-protected.</p>

          <br/>

          <p class="sans-serif regular light-gray size-3 less-spaced">Enter the paste password to continue.</p>

Creating pull request this time so you can confirm that these changes look right to you (RE which icons and colors to be used)

Pull-Request has been merged by ryanlerch

3 years ago

Looks good!

I will put together a logo for the top that is similar to the others we use.

I assume this will still be called "fedora paste", so i am going with that!

https://paste.fedoraproject.org/