Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

topic edit: Improve styling of topic edit icons (save and cancel). 

The earlier styles were inconsistent with the rest of UI.
The new styles follow the colour scheme.

Fixes #10983
This commit is contained in:
Archit Kaushik 2019-01-14 11:40:55 +05:30 committed by Alexandra Ciobica
parent d2f1c84001
commit e8eaa19ae4
2 changed files with 27 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
static/styles/zulip.scss
View File

@ -2538,29 +2538,36 @@ li .message_inline_image img {
text-align: center;
}
button.primary {
background-color: hsl(207, 21%, 62%);
padding: 2px;
color: hsl(0, 0%, 100%);
.small_square_button {
background-color: hsl(156, 30%, 50%);
padding: 0;
color: hsl(0, 0%, 95%);
border: none;
border-radius: 0px;
}
button.primary:hover {
background-color: hsl(207, 25%, 65%);
}
button.primary:focus {
outline: none;
}
button.topic_edit_save,
button.topic_edit_cancel {
font-size: 12px;
width: 18px;
height: 18px;
vertical-align: baseline;
border-radius: 4px;
margin-bottom: 3px;
}
.small_square_button:hover {
color: hsl(0, 0%, 100%);
box-shadow: 0 10px 41px 0 hsl(166, 35%, 48%);
}
.small_square_button:focus {
outline: none;
}
.small_square_x {
background-color: white;
color: hsl(0, 0%, 47%);
}
.small_square_x:hover {
background-color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 18%);
box-shadow: 0 10px 41px 0 hsl(0, 0%, 48%);
}
div.topic_edit_spinner {

4
static/templates/topic_edit_form.hbs
View File

@ -3,8 +3,8 @@
<form id="topic_edit_form" class="form-horizontal">
<input type="text" value="" class="inline_topic_edit header-v" id="inline_topic_edit"
autocomplete="off" />
<button type="button" class="topic_edit_save primary"><i class="fa fa-check" aria-hidden="true"></i></button>
<button type="button" class="topic_edit_cancel primary"><i class="fa fa-remove" aria-hidden="true"></i></button>
<button type="button" class="topic_edit_save small_square_button small_square_check"><i class="fa fa-check" aria-hidden="true"></i></button>
<button type="button" class="topic_edit_cancel small_square_button small_square_x"><i class="fa fa-remove" aria-hidden="true"></i></button>
<div class="topic_edit_spinner"></div>
<div class="alert alert-error edit_error hide"></div>
</form>