Merge pull request #49 from stepanzh/43-add-button-for-support-develo…

…pment-on-index-page

feat: donate button on app screen

static/css/index.css

@@ -10,46 +10,39 @@ body { background-color: white; }
   margin-bottom: 16px;
 }
 
-.severity-warning {
-  color: var(--red-0-color);
-}
+.severity-warning { color: var(--red-0-color); }
 
-#app-header nav {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
+#recipe-nav {
+  display: grid;
+  grid-template-columns: 3fr 1fr 1fr 3fr;
+  column-gap: 8px;
+  height: 36px;
 }
 
-#app-header nav > :first-child { padding-left: 0; }
+#command-menu,
+#command-menu-back {
+  padding-left: 0;
+  justify-self: left;
+}
 
-#app-header nav > :last-child { padding-right: 0; }
+#command-clear { 
+  justify-self: right;
+  padding-right: 0;
+}
 
-/* Promo link start */
-#promo {
-  /* Center itself, ignore flex */
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 36px;
-  height: 36px;
-  border-radius: 18px;
+.link-icon {
+  position: relative;
 }
 
-.promo__icon {
-  position: absolute;
+.link-icon > svg {
+  position: relative;
   left: 50%;
   top: 50%;
-  transform: translate(-50%, -40%);
-}
-
-.promo__icon svg {
+  transform: translate(-50%, -50%);
   width: 24px;
   height: 24px;
-  color: var(--special-0-color);
 }
 
-/* Promo link end */
 
 .toggle-wide {
   display: grid;

templates/index.html

@@ -20,7 +20,8 @@
     <div id="app-header">
       <nav id="recipe-nav">
         <button id="command-menu" class="default-button" aria-label="меню программы">Меню</button>
-        <div id="promo"><a href="promo.html"><span class="promo__icon">{{ icons.gift }}</span></a></div>
+        <a class="link-icon" href="promo.html">{{ icons.gift }}</a>
+        <a class="link-icon" href="{{ links.payment }}" target="_blank">{{ icons.dollar }}</a>
         <button id="command-clear" class="default-button severity-warning" aria-label="очистить таблицу">Очистить</button>
       </nav>
       <nav id="menu-nav" style="display: none;">
@@ -87,7 +88,7 @@
           <!-- Help by donation -->
           <div class="app-menu-item">
             <a href="{{ links.payment }}" target="_blank">
-              <span class="app-menu-item__icon">{{ icons.credit_card }}</span>
+              <span class="app-menu-item__icon">{{ icons.dollar }}</span>
               <span class="app-menu-item__caption">Помочь монетой</span>
               <span class="app-menu-item__external-link-icon">{{ icons.external_link_mini }}</span>
             </a>