From f45d40f9604ee7b11603274019bbe147f3d6efa0 Mon Sep 17 00:00:00 2001 From: Seth Mcleod Date: Thu, 3 May 2018 18:00:54 -0400 Subject: [PATCH] bounty: unify modal designs (#809) * Reduce size of h1 element for yge * Update yge button styles to match ui kit * Reduce extra spacing on emoji elements * Update body font color to match ui kit --- app/assets/v2/css/forms/button.css | 1 + app/assets/yge/css/main.css | 120 ++----------- app/assets/yge/sass/libs/_vars.scss | 4 +- app/dashboard/templates/yge/base.html | 167 ++++++++++--------- app/dashboard/templates/yge/receive.html | 4 +- app/dashboard/templates/yge/redeem_coin.html | 4 +- app/dashboard/templates/yge/send1.html | 4 +- app/dashboard/templates/yge/send2.html | 4 +- 8 files changed, 107 insertions(+), 201 deletions(-) diff --git a/app/assets/v2/css/forms/button.css b/app/assets/v2/css/forms/button.css index d6add349700..1a3269597b0 100644 --- a/app/assets/v2/css/forms/button.css +++ b/app/assets/v2/css/forms/button.css @@ -6,6 +6,7 @@ cursor: pointer; font-size: 14px; font-family: 'Muli', sans-serif; + font-weight: 300; padding: 10px 20px; -webkit-appearance: none; } diff --git a/app/assets/yge/css/main.css b/app/assets/yge/css/main.css index ba55a19510c..2ea3681c779 100644 --- a/app/assets/yge/css/main.css +++ b/app/assets/yge/css/main.css @@ -25,6 +25,7 @@ body { overflow-x: hidden; width: 100%; height: 100%; + color: #000000; background-color: #0d023b; background-image: url('/static/yge/images/overlay.png'), -moz-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url('/static/v2/images/header-bg.png'); background-image: url('/static/yge/images/overlay.png'), -webkit-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url('/static/v2/images/header-bg.png'); @@ -260,7 +261,7 @@ body, input, select, textarea { - color: #414f57; + color: #000000; font-size: 18px; font-weight: 400; line-height: 2; @@ -301,11 +302,6 @@ a:before { transition: color 0.2s ease, text-shadow 0.2s ease; } -strong, -b { - color: #313f47; -} - em, i { font-style: italic; @@ -321,7 +317,6 @@ h3, h4, h5, h6 { - color: #313f47; line-height: 1.5; margin: 0 0 0.75em 0; } @@ -338,7 +333,7 @@ h6 a { h1 { font-weight: 300; - font-size: 1.85em; + font-size: 1.65em; letter-spacing: 0.2em; margin: 0 0 0.525em 0; } @@ -506,7 +501,7 @@ input[type='radio'] { input[type='checkbox'] + label, input[type='radio'] + label { text-decoration: none; - color: #414f57; + color: #000000; cursor: pointer; display: inline-block; font-size: 1em; @@ -726,103 +721,6 @@ dl dd { margin-left: 1.5em; } -/* Button */ - -input[type='submit'], -input[type='reset'], -input[type='button'], -button, -.button { - -moz-appearance: none; - -webkit-appearance: none; - -ms-appearance: none; - appearance: none; - -moz-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out; - -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out; - -ms-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out; - transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out; - display: inline-block; - height: 2.75em; - line-height: 2.75em; - padding: 0 1.5em; - background-color: transparent; - border-radius: 4px; - border: solid 1px #c8cccf; - color: #414f57 !important; - cursor: pointer; - text-align: center; - text-decoration: none; - white-space: nowrap; -} - -input[type='submit']:hover, -input[type='reset']:hover, -input[type='button']:hover, -button:hover, -.button:hover { - border-color: #ff7496; - color: #ff7496 !important; -} - -input[type='submit'].icon, -input[type='reset'].icon, -input[type='button'].icon, -button.icon, -.button.icon { - padding-left: 1.35em; -} - -input[type='submit'].icon:before, -input[type='reset'].icon:before, -input[type='button'].icon:before, -button.icon:before, -.button.icon:before { - margin-right: 0.5em; -} - -input[type='submit'].fit, -input[type='reset'].fit, -input[type='button'].fit, -button.fit, -.button.fit { - display: block; - width: 100%; - margin: 0 0 0.75em 0; -} - -input[type='submit'].small, -input[type='reset'].small, -input[type='button'].small, -button.small, -.button.small { - font-size: 0.8em; -} - -input[type='submit'].big, -input[type='reset'].big, -input[type='button'].big, -button.big, -.button.big { - font-size: 1.35em; -} - -input[type='submit'].disabled, -input[type='submit']:disabled, -input[type='reset'].disabled, -input[type='reset']:disabled, -input[type='button'].disabled, -input[type='button']:disabled, -button.disabled, -button:disabled, -.button.disabled, -.button:disabled { - -moz-pointer-events: none; - -webkit-pointer-events: none; - -ms-pointer-events: none; - pointer-events: none; - opacity: 0.5; -} - .particles-js-canvas-el { z-index: 1; position: absolute; @@ -992,11 +890,11 @@ body.is-ie #wrapper { height: 100%; } -body #main a { +body #main a:not(.button) { color: #fc7596; } -body #main a:hover { +body #main a:not(.button):hover { color: #ec5597; } @@ -1045,3 +943,9 @@ p.alert_msg a { display: block; height: 300px; } + +span.emoji { + letter-spacing: 0; + width: 0.85em; + display: inline-block; +} diff --git a/app/assets/yge/sass/libs/_vars.scss b/app/assets/yge/sass/libs/_vars.scss index 2c454003b49..1df3667253b 100644 --- a/app/assets/yge/sass/libs/_vars.scss +++ b/app/assets/yge/sass/libs/_vars.scss @@ -30,11 +30,11 @@ $palette: ( bg: #ffffff, bg-alt: #e1dfe8, - fg: #414f57, + fg: #000000, fg-bold: #313f47, fg-light: #616f77, border: #c8cccf, accent1: #ffa596, accent2: #00e4ff, highlight: #ff7496 - ); \ No newline at end of file + ); diff --git a/app/dashboard/templates/yge/base.html b/app/dashboard/templates/yge/base.html index 4782e276426..ac91a3071a0 100644 --- a/app/dashboard/templates/yge/base.html +++ b/app/dashboard/templates/yge/base.html @@ -1,83 +1,84 @@ -{% comment %} - Copyright (C) 2018 Gitcoin Core - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as published - by the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - This program is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU Affero General Public License for more details. - - You should have received a copy of the GNU Affero General Public License - along with this program. If not, see . -{% endcomment %} -{% load i18n static %} - - - - {% include 'shared/tag_manager_1.html' %} - {{title}} | Gitcoin - - - - - - - - - - - - - - {% include 'shared/favicon.html' %} - {% include 'shared/rollbar.html' %} - - - {% include 'shared/tag_manager_2.html' %} - {% include 'shared/analytics.html' %} - {% block 'world' %} {% endblock %} - {% include 'shared/rain.html' with class="color" %} - -
- - {% block 'main' %} {% endblock %} - - -
- - - {% block 'scripts' %}{% endblock %} - - - - {% if recommend_gas_price %} - - {% endif %} - - +{% comment %} + Copyright (C) 2018 Gitcoin Core + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as published + by the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see . +{% endcomment %} +{% load i18n static %} + + + + {% include 'shared/tag_manager_1.html' %} + {{title}} | Gitcoin + + + + + + + + + + + + + + + {% include 'shared/favicon.html' %} + {% include 'shared/rollbar.html' %} + + + {% include 'shared/tag_manager_2.html' %} + {% include 'shared/analytics.html' %} + {% block 'world' %} {% endblock %} + {% include 'shared/rain.html' with class="color" %} + +
+ + {% block 'main' %} {% endblock %} + + +
+ + + {% block 'scripts' %}{% endblock %} + + + + {% if recommend_gas_price %} + + {% endif %} + + \ No newline at end of file diff --git a/app/dashboard/templates/yge/receive.html b/app/dashboard/templates/yge/receive.html index 4c5211cfdca..8ed4c077121 100644 --- a/app/dashboard/templates/yge/receive.html +++ b/app/dashboard/templates/yge/receive.html @@ -50,7 +50,7 @@

{% trans "Loading" %}


- {% trans "Claim" %} Eth {% trans "Tip" %} 🙌 + {% trans "Claim" %} Eth {% trans "Tip" %} 🙌
diff --git a/app/dashboard/templates/yge/redeem_coin.html b/app/dashboard/templates/yge/redeem_coin.html index 8c19d80c45f..6e1d77a2689 100644 --- a/app/dashboard/templates/yge/redeem_coin.html +++ b/app/dashboard/templates/yge/redeem_coin.html @@ -49,7 +49,7 @@

{% trans "Loading" %}


- {% trans "Claim" %} 🙌 + {% trans "Claim" %} 🙌
diff --git a/app/dashboard/templates/yge/send1.html b/app/dashboard/templates/yge/send1.html index 269396c9e5a..fb8390bd684 100644 --- a/app/dashboard/templates/yge/send1.html +++ b/app/dashboard/templates/yge/send1.html @@ -34,7 +34,7 @@ -

{% trans "Send Tip" %} ⚡

+

{% trans "Send Tip" %} ⚡

{% trans "It's Fast. It's Easy. It's Free.️" %}

({% trans "Supports any github username or email address" %})


@@ -46,6 +46,6 @@

{% trans "It's Fast. It's Easy. It's Free.️" %}

- {% trans "Send Ether" %} 💰 + {% trans "Send Ether" %} 💰 {% endblock %} diff --git a/app/dashboard/templates/yge/send2.html b/app/dashboard/templates/yge/send2.html index 2fb15973887..3c7d0b8fcc0 100644 --- a/app/dashboard/templates/yge/send2.html +++ b/app/dashboard/templates/yge/send2.html @@ -100,7 +100,7 @@

{% trans "Send Tip." %}

- {% trans "Send" %} ⚡️ + {% trans "Send" %} ⚡️ {% endblock %}