settings: Changed checkbox and close icons on settings.

Introduced a new checkmark icon in the settings page
from entypo ( www.entypo.com )  to make icons more
consistent between user and organization settings.
This commit is contained in:
Armaan Ahluwalia 2018-04-03 16:39:52 +05:30 committed by Tim Abbott
parent 58d07fabef
commit 7b8da9b6c0
5 changed files with 29 additions and 13 deletions

View File

@ -0,0 +1,5 @@
<svg fill="#59a687" height="1000px" width="665.7999877929688px" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="M248 850c-22.667 0 -41.333 -9.333 -56 -28c0 0 -180 -236 -180 -236c-10.667 -16 -14.667 -33.333 -12 -52c2.667 -18.667 11.333 -34 26 -46c14.667 -12 31.667 -16.667 51 -14c19.333 2.667 35 12 47 28c0 0 118 154 118 154c0 0 296 -474 296 -474c10.667 -16 25 -26 43 -30c18 -4 35.667 -1.333 53 8c16 10.667 26 25 30 43c4 18 1.333 35.667 -8 53c0 0 -350 560 -350 560c-13.333 21.333 -32 32 -56 32c0 0 -2 2 -2 2" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 532 B

View File

@ -0,0 +1,5 @@
<svg fill="#FFFFFF" height="1000px" width="665.7999877929688px" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="M248 850c-22.667 0 -41.333 -9.333 -56 -28c0 0 -180 -236 -180 -236c-10.667 -16 -14.667 -33.333 -12 -52c2.667 -18.667 11.333 -34 26 -46c14.667 -12 31.667 -16.667 51 -14c19.333 2.667 35 12 47 28c0 0 118 154 118 154c0 0 296 -474 296 -474c10.667 -16 25 -26 43 -30c18 -4 35.667 -1.333 53 8c16 10.667 26 25 30 43c4 18 1.333 35.667 -8 53c0 0 -350 560 -350 560c-13.333 21.333 -32 32 -56 32c0 0 -2 2 -2 2" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 532 B

View File

@ -4,9 +4,9 @@ var exports = {};
exports.display_checkmark = function ($elem) {
var check_mark = document.createElement("img");
check_mark.src = "/static/images/checkbox-green.svg";
check_mark.src = "/static/images/icon-checkbox-green.svg";
$elem.prepend(check_mark);
$(check_mark).css("width", "13px");
$(check_mark).css("width", "10px");
};
exports.strings = {};

View File

@ -361,9 +361,9 @@ input[type=checkbox] + .inline-block {
display: inline-block;
cursor: pointer;
font-size: 14px;
padding: 3px 12px 4px 10px;
padding: 3px 14px 4px 11px;
text-decoration: none;
color: hsl(0, 0%, 43%);
color: hsl(0, 0%, 46%);
font-weight: 400;
}
@ -389,17 +389,21 @@ input[type=checkbox] + .inline-block {
}
#settings_page .icon-button .icon-button-icon {
color: #969696;
vertical-align: bottom;
margin-right: 3px;
font-size: 24px;
line-height: 19px;
font-weight: 600;
}
#settings_page .icon-button.primary .icon-button-icon {
color: white;
width: 10px;
margin-bottom: 2px;
margin-right: 3px;
}
#settings_page .icon-button .icon-button-text,
#settings_page .icon-button .icon-button-icon {
#settings_page .icon-button .icon-button-text {
vertical-align: baseline;
margin-right: 2px;
}
#settings_page .save-button-controls {
@ -426,6 +430,7 @@ input[type=checkbox] + .inline-block {
#settings_page .save-button.saving .icon-button-loading {
display: inline-block;
margin-right: 2px;
}
#settings_page .save-button .icon-button-loading {
@ -570,6 +575,7 @@ input[type=checkbox].inline-block {
width: 13px;
height: 20px;
margin: 0;
margin-right: 3px;
}
#settings_page .alert-notification .loading_indicator_text {
@ -579,9 +585,9 @@ input[type=checkbox].inline-block {
}
#settings_page .alert-notification img {
margin-right: 5px;
margin-right: 6px;
vertical-align: middle;
margin-top: -1px;
margin-top: -2px;
}
#notification-settings .notification-reminder {

View File

@ -3,7 +3,7 @@
<div class="input-group organization-submission subsection-changes-save">
<div class="icon-button button primary save-button" type="button" id="org-submit-{{section_name}}" data-status="save">
<span class="fa fa-spinner fa-spin icon-button-loading"></span>
<span class="fa fa-check icon-button-icon"></span>
<img class="icon-button-icon" src="static/images/icon-checkbox-white.svg" />
<span class="icon-button-text">
{{t 'Save changes' }}
</span>
@ -11,7 +11,7 @@
</div>
<div class="input-group subsection-changes-discard">
<div class="icon-button button discard-button" type="button" id="org-discard-{{section_name}}">
<span class="fa fa-times icon-button-icon"></span>
<span class="icon-button-icon">×</span>
<span class="icon-button-text">
{{t 'Discard' }}
</span>