From 26f321e7f9ea20075c56edaedad9ec55f856dadf Mon Sep 17 00:00:00 2001 From: Prakhar Uniyal Date: Fri, 2 Aug 2019 13:13:42 -0400 Subject: [PATCH] preference: Fix visually broken delete custom css button. 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. --- app/renderer/css/preference.css | 13 +++++++++++-- app/renderer/js/pages/preference/general-section.ts | 1 - 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/app/renderer/css/preference.css b/app/renderer/css/preference.css index 4e5b67660..869f0ddfe 100644 --- a/app/renderer/css/preference.css +++ b/app/renderer/css/preference.css @@ -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, diff --git a/app/renderer/js/pages/preference/general-section.ts b/app/renderer/js/pages/preference/general-section.ts index 589225865..fb0d8ab32 100644 --- a/app/renderer/js/pages/preference/general-section.ts +++ b/app/renderer/js/pages/preference/general-section.ts @@ -104,7 +104,6 @@ class GeneralSection extends BaseSection {
- "S
${ConfigUtil.getConfigItem('customCSS')}