paulmataruso/zulip-desktop
1
0
Fork 0
mirror of https://github.com/zulip/zulip-desktop.git synced 2025-10-23 03:31:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

preference: Fix visually broken delete custom css button.

Browse Source 
There were couple of issue solved by this commit:
  - The button had extra 10px margin to right; this comes from .action class
  - The "Delete" text and icon were not aligned
  - The button looks bigger than other buttons

Both of which made the button look broken. We fix first by changing
.css-delete-action to #css-delete-action in css file; git grep shows
this is only used once and is used as id not a class. Then we use
display flex to fix the alinging of icon and text. We add box-sizing border-box
which solves the bigger width issue. We remove extra 10px margin that comes from
.action.

Fixes: #801.
This commit is contained in:
Prakhar Uniyal
2019-08-02 13:13:42 -04:00
committed by Akash Nimare
parent 47b729cbc2
commit 26f321e7f9
2 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/renderer/css/preference.css
View File

@@ -399,8 +399,17 @@ i.open-tab-button {
cursor: pointer;
}
.css-delete-action {
margin-bottom: 10px;
#css-delete-action {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
/*
.action class will add extra margin to right which
we don't want for a button; the extra margin is intended for radio buttons
*/
margin-right: 0px;
}
.selected-css-path,

1
app/renderer/js/pages/preference/general-section.ts
View File

@@ -104,7 +104,6 @@ class GeneralSection extends BaseSection {
<button class="custom-css-button green">${t.__('Upload')}</button>
</div>
<div class="setting-row" id="remove-custom-css">
"S
<div class="setting-description">
<div class="selected-css-path" id="custom-css-path">${ConfigUtil.getConfigItem('customCSS')}</div>
</div>