Skip to content

Commit

Permalink
bounty: unify modal designs (#809)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
sethmcleod authored and mbeacom committed May 3, 2018
1 parent 2602b04 commit f45d40f
Show file tree
Hide file tree
Showing 8 changed files with 107 additions and 201 deletions.
1 change: 1 addition & 0 deletions app/assets/v2/css/forms/button.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
cursor: pointer;
font-size: 14px;
font-family: 'Muli', sans-serif;
font-weight: 300;
padding: 10px 20px;
-webkit-appearance: none;
}
Expand Down
120 changes: 12 additions & 108 deletions app/assets/yge/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -260,7 +261,7 @@ body,
input,
select,
textarea {
color: #414f57;
color: #000000;
font-size: 18px;
font-weight: 400;
line-height: 2;
Expand Down Expand Up @@ -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;
Expand All @@ -321,7 +317,6 @@ h3,
h4,
h5,
h6 {
color: #313f47;
line-height: 1.5;
margin: 0 0 0.75em 0;
}
Expand All @@ -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;
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -1045,3 +943,9 @@ p.alert_msg a {
display: block;
height: 300px;
}

span.emoji {
letter-spacing: 0;
width: 0.85em;
display: inline-block;
}
4 changes: 2 additions & 2 deletions app/assets/yge/sass/libs/_vars.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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
);
);
167 changes: 84 additions & 83 deletions app/dashboard/templates/yge/base.html
Original file line number Diff line number Diff line change
@@ -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 <http://www.gnu.org/licenses/>.
{% endcomment %}
{% load i18n static %}
<!DOCTYPE HTML>
<html>
<head>
{% include 'shared/tag_manager_1.html' %}
<title>{{title}} | Gitcoin</title>
<meta charset="utf-8" />
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="theme-color" content="#ffffff">
<!--[if lte IE 8]><script src="{% static "yge/js/html5shiv.js" %}"></script><![endif]-->
<link rel="stylesheet" href="{% static "v2/css/gitcoin.css" %}" />
<link rel="stylesheet" href="{% static "yge/css/main.css" %}" />
<link rel="stylesheet" href="{% static "v2/css/rain.css" %}" />
<link rel="stylesheet" href="{% static "v2/css/jquery.select2.min.css" %}" />
<script src="{% static "v2/js/jquery.js" %}"></script>
<script src="{% static "v2/js/work_with_gitcoin.js" %}"></script>
<!--[if lte IE 9]><link rel="stylesheet" href="{% static "yge/css/ie9.css" %}" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="{% static "yge/css/ie8.css" %}" /><![endif]-->
<noscript>
<link rel="stylesheet" href="{% static "yge/css/noscript.css" %}" />
</noscript>
{% include 'shared/favicon.html' %}
{% include 'shared/rollbar.html' %}
</head>
<body id="yge" class="{{ class }}">
{% include 'shared/tag_manager_2.html' %}
{% include 'shared/analytics.html' %}
{% block 'world' %} {% endblock %}
{% include 'shared/rain.html' with class="color" %}
<!-- Wrapper -->
<div id="wrapper">
<!-- Main -->
{% block 'main' %} {% endblock %}
<!-- Footer -->
<footer id="footer">
<ul class="copyright">
<li>
<a href="/">&copy; Gitcoin.co</a>
</li>
<li>
<a href="{% url "tip" %}">{% trans "Send Tip" %}</a>
</li>
</ul>
</footer>
</div>
<!-- Scripts -->
<script type="text/javascript" src="{% url 'javascript-catalog' %}"></script>
{% block 'scripts' %}{% endblock %}
<script src="{% static "v2/js/jquery.select2.min.js" %}"></script>
<!--[if lte IE 8]><script src="{% static "yge/js/respond.min.js" %}"></script><![endif]-->
<script>
if ('addEventListener' in window) {
window.addEventListener('load', function () {
document.body.className = document.body.className.replace(/\bis-loading\b/, '');
});
document.body.className += (navigator.userAgent.match(/(MSIE|rv:11\.0)/) ? ' is-ie' : '');
}
</script>
{% if recommend_gas_price %}
<script type="text/javascript">
setInterval(function () {
defaultGasPrice = parseInt(10 ** 9 * {{ recommend_gas_price }});
}, 1000);
</script>
{% endif %}
</body>
</html>
{% 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 <http://www.gnu.org/licenses/>.
{% endcomment %}
{% load i18n static %}
<!DOCTYPE HTML>
<html>
<head>
{% include 'shared/tag_manager_1.html' %}
<title>{{title}} | Gitcoin</title>
<meta charset="utf-8" />
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="theme-color" content="#ffffff">
<!--[if lte IE 8]><script src="{% static "yge/js/html5shiv.js" %}"></script><![endif]-->
<link rel="stylesheet" href="{% static "v2/css/gitcoin.css" %}" />
<link rel="stylesheet" href="{% static "yge/css/main.css" %}" />
<link rel="stylesheet" href="{% static "v2/css/rain.css" %}" />
<link rel="stylesheet" href="{% static "v2/css/jquery.select2.min.css" %}" />
<link rel="stylesheet" href="{% static "v2/css/forms/button.css" %}" />
<script src="{% static "v2/js/jquery.js" %}"></script>
<script src="{% static "v2/js/work_with_gitcoin.js" %}"></script>
<!--[if lte IE 9]><link rel="stylesheet" href="{% static "yge/css/ie9.css" %}" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="{% static "yge/css/ie8.css" %}" /><![endif]-->
<noscript>
<link rel="stylesheet" href="{% static "yge/css/noscript.css" %}" />
</noscript>
{% include 'shared/favicon.html' %}
{% include 'shared/rollbar.html' %}
</head>
<body id="yge" class="{{ class }}">
{% include 'shared/tag_manager_2.html' %}
{% include 'shared/analytics.html' %}
{% block 'world' %} {% endblock %}
{% include 'shared/rain.html' with class="color" %}
<!-- Wrapper -->
<div id="wrapper">
<!-- Main -->
{% block 'main' %} {% endblock %}
<!-- Footer -->
<footer id="footer">
<ul class="copyright">
<li>
<a href="/">&copy; Gitcoin.co</a>
</li>
<li>
<a href="{% url "tip" %}">{% trans "Send Tip" %}</a>
</li>
</ul>
</footer>
</div>
<!-- Scripts -->
<script type="text/javascript" src="{% url 'javascript-catalog' %}"></script>
{% block 'scripts' %}{% endblock %}
<script src="{% static "v2/js/jquery.select2.min.js" %}"></script>
<!--[if lte IE 8]><script src="{% static "yge/js/respond.min.js" %}"></script><![endif]-->
<script>
if ('addEventListener' in window) {
window.addEventListener('load', function () {
document.body.className = document.body.className.replace(/\bis-loading\b/, '');
});
document.body.className += (navigator.userAgent.match(/(MSIE|rv:11\.0)/) ? ' is-ie' : '');
}
</script>
{% if recommend_gas_price %}
<script type="text/javascript">
setInterval(function () {
defaultGasPrice = parseInt(10 ** 9 * {{ recommend_gas_price }});
}, 1000);
</script>
{% endif %}
</body>
</html>
4 changes: 2 additions & 2 deletions app/dashboard/templates/yge/receive.html
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ <h1>{% trans "Loading" %}</h1>
<div id="step_zero" style="display:none;">
<h1 id="zeroh1">{% trans "You've Got ETH!" %}</h1>
<p>{% trans "To claim it, please install MetaMask and refresh the page." %}</p>
<a href="https://metamask.io/?utm_source=gitcoin.co&utm_medium=referral" id="install" class="button">{% trans "Install Metamask" %} 🐬</a>
<a href="https://metamask.io/?utm_source=gitcoin.co&utm_medium=referral" id="install" class="button button--primary">{% trans "Install Metamask" %} <span class="emoji">🐬</span></a>
<br>
<br>
<h2>{% trans "What is Metamask?" %}</h2>
Expand All @@ -71,7 +71,7 @@ <h1 id="oneh1">{% trans "Receive Ethereum Now." %}</h1>
</div>
<div>
<br>
<a href="#" id="receive" class="button">{% trans "Claim" %} <span id="tokenName">Eth</span> {% trans "Tip" %} 🙌</a>
<a href="#" id="receive" class="button button--primary">{% trans "Claim" %} <span id="tokenName">Eth</span> {% trans "Tip" %} <span class="emoji">🙌</span></a>
<br>
</div>
</div>
Expand Down
Loading

0 comments on commit f45d40f

Please sign in to comment.