Skip to content

Commit

Permalink
preference: Fix visually broken delete custom css button.
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
PrakharUniyal authored and akashnimare committed Aug 7, 2019
1 parent 47b729c commit 26f321e
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 3 deletions.
13 changes: 11 additions & 2 deletions app/renderer/css/preference.css
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
1 change: 0 additions & 1 deletion app/renderer/js/pages/preference/general-section.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 26f321e

Please sign in to comment.