From 7f04db938996c5b5d429a8b9cb0839776a0f9b7f Mon Sep 17 00:00:00 2001
From: mrdrogdrog <mr.drogdrog@gmail.com>
Date: Thu, 27 Aug 2020 10:48:29 +0200
Subject: [PATCH] Reduce space between editor toolbar buttons (#494)

---
 .../editor/editor-pane/editor-pane.scss       |   4 +
 .../editor/editor-pane/tool-bar/tool-bar.tsx  | 148 +++++++++---------
 2 files changed, 77 insertions(+), 75 deletions(-)

diff --git a/src/components/editor/editor-pane/editor-pane.scss b/src/components/editor/editor-pane/editor-pane.scss
index 43d0583e3..c9a928476 100644
--- a/src/components/editor/editor-pane/editor-pane.scss
+++ b/src/components/editor/editor-pane/editor-pane.scss
@@ -13,3 +13,7 @@
   height: 100%;
 }
 
+.btn-toolbar .btn {
+  padding: 0.1875rem 0.5rem;
+  min-width: 30px;
+}
diff --git a/src/components/editor/editor-pane/tool-bar/tool-bar.tsx b/src/components/editor/editor-pane/tool-bar/tool-bar.tsx
index f2819fc72..c3b3309ad 100644
--- a/src/components/editor/editor-pane/tool-bar/tool-bar.tsx
+++ b/src/components/editor/editor-pane/tool-bar/tool-bar.tsx
@@ -1,5 +1,5 @@
 import { Editor, EditorConfiguration } from 'codemirror'
-import React, { Fragment } from 'react'
+import React from 'react'
 import { Button, ButtonGroup, ButtonToolbar } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
@@ -44,79 +44,77 @@ export const ToolBar: React.FC<ToolBarProps> = ({ editor, onPreferencesChange, e
   }
 
   return (
-    <Fragment>
-      <ButtonToolbar className='bg-light'>
-        <ButtonGroup className={'mx-2 flex-wrap'}>
-          <Button variant='light' onClick={() => makeSelectionBold(editor)} title={t('editor.editorToolbar.bold')}>
-            <ForkAwesomeIcon icon="bold"/>
-          </Button>
-          <Button variant='light' onClick={() => makeSelectionItalic(editor)} title={t('editor.editorToolbar.italic')}>
-            <ForkAwesomeIcon icon="italic"/>
-          </Button>
-          <Button variant='light' onClick={() => underlineSelection(editor)} title={t('editor.editorToolbar.underline')}>
-            <ForkAwesomeIcon icon="underline"/>
-          </Button>
-          <Button variant='light' onClick={() => strikeThroughSelection(editor)} title={t('editor.editorToolbar.strikethrough')}>
-            <ForkAwesomeIcon icon="strikethrough"/>
-          </Button>
-          <Button variant='light' onClick={() => subscriptSelection(editor)} title={t('editor.editorToolbar.subscript')}>
-            <ForkAwesomeIcon icon="subscript"/>
-          </Button>
-          <Button variant='light' onClick={() => superscriptSelection(editor)} title={t('editor.editorToolbar.superscript')}>
-            <ForkAwesomeIcon icon="superscript"/>
-          </Button>
-        </ButtonGroup>
-        <span className={'divider'}>&nbsp;</span>
-        <ButtonGroup className={'mx-2 flex-wrap'}>
-          <Button variant='light' onClick={() => addHeaderLevel(editor)} title={t('editor.editorToolbar.header')}>
-            <ForkAwesomeIcon icon="header"/>
-          </Button>
-          <Button variant='light' onClick={() => addCodeFences(editor)} title={t('editor.editorToolbar.code')}>
-            <ForkAwesomeIcon icon="code"/>
-          </Button>
-          <Button variant='light' onClick={() => addQuotes(editor)} title={t('editor.editorToolbar.blockquote')}>
-            <ForkAwesomeIcon icon="quote-right"/>
-          </Button>
-          <Button variant='light' onClick={() => addList(editor)} title={t('editor.editorToolbar.unorderedList')}>
-            <ForkAwesomeIcon icon="list"/>
-          </Button>
-          <Button variant='light' onClick={() => addOrderedList(editor)} title={t('editor.editorToolbar.orderedList')}>
-            <ForkAwesomeIcon icon="list-ol"/>
-          </Button>
-          <Button variant='light' onClick={() => addTaskList(editor)} title={t('editor.editorToolbar.checkList')}>
-            <ForkAwesomeIcon icon="check-square"/>
-          </Button>
-        </ButtonGroup>
-        <span className={'divider'}>&nbsp;</span>
-        <ButtonGroup className={'mx-2 flex-wrap'}>
-          <Button variant='light' onClick={() => addLink(editor)} title={t('editor.editorToolbar.link')}>
-            <ForkAwesomeIcon icon="link"/>
-          </Button>
-          <Button variant='light' onClick={() => addImage(editor)} title={t('editor.editorToolbar.image')}>
-            <ForkAwesomeIcon icon="picture-o"/>
-          </Button>
-          <Button variant='light' onClick={notImplemented} title={t('editor.editorToolbar.uploadImage')}>
-            <ForkAwesomeIcon icon="upload"/>
-          </Button>
-        </ButtonGroup>
-        <span className={'divider'}>&nbsp;</span>
-        <ButtonGroup className={'mx-2 flex-wrap'}>
-          <Button variant='light' onClick={() => addTable(editor)} title={t('editor.editorToolbar.table')}>
-            <ForkAwesomeIcon icon="table"/>
-          </Button>
-          <Button variant='light' onClick={() => addLine(editor)} title={t('editor.editorToolbar.line')}>
-            <ForkAwesomeIcon icon="minus"/>
-          </Button>
-          <Button variant='light' onClick={() => addComment(editor)} title={t('editor.editorToolbar.comment')}>
-            <ForkAwesomeIcon icon="comment"/>
-          </Button>
-          <EmojiPickerButton editor={editor}/>
-        </ButtonGroup>
-        <span className={'divider'}>&nbsp;</span>
-        <ButtonGroup className={'mx-2 flex-wrap'}>
-          <EditorPreferences onPreferencesChange={onPreferencesChange} preferences={editorPreferences}/>
-        </ButtonGroup>
-      </ButtonToolbar>
-    </Fragment>
+    <ButtonToolbar className='bg-light'>
+      <ButtonGroup className={'mx-1 flex-wrap'}>
+        <Button variant='light' onClick={() => makeSelectionBold(editor)} title={t('editor.editorToolbar.bold')}>
+          <ForkAwesomeIcon icon="bold"/>
+        </Button>
+        <Button variant='light' onClick={() => makeSelectionItalic(editor)} title={t('editor.editorToolbar.italic')}>
+          <ForkAwesomeIcon icon="italic"/>
+        </Button>
+        <Button variant='light' onClick={() => underlineSelection(editor)} title={t('editor.editorToolbar.underline')}>
+          <ForkAwesomeIcon icon="underline"/>
+        </Button>
+        <Button variant='light' onClick={() => strikeThroughSelection(editor)} title={t('editor.editorToolbar.strikethrough')}>
+          <ForkAwesomeIcon icon="strikethrough"/>
+        </Button>
+        <Button variant='light' onClick={() => subscriptSelection(editor)} title={t('editor.editorToolbar.subscript')}>
+          <ForkAwesomeIcon icon="subscript"/>
+        </Button>
+        <Button variant='light' onClick={() => superscriptSelection(editor)} title={t('editor.editorToolbar.superscript')}>
+          <ForkAwesomeIcon icon="superscript"/>
+        </Button>
+      </ButtonGroup>
+      <span className={'divider'}>&nbsp;</span>
+      <ButtonGroup className={'mx-1 flex-wrap'}>
+        <Button variant='light' onClick={() => addHeaderLevel(editor)} title={t('editor.editorToolbar.header')}>
+          <ForkAwesomeIcon icon="header"/>
+        </Button>
+        <Button variant='light' onClick={() => addCodeFences(editor)} title={t('editor.editorToolbar.code')}>
+          <ForkAwesomeIcon icon="code"/>
+        </Button>
+        <Button variant='light' onClick={() => addQuotes(editor)} title={t('editor.editorToolbar.blockquote')}>
+          <ForkAwesomeIcon icon="quote-right"/>
+        </Button>
+        <Button variant='light' onClick={() => addList(editor)} title={t('editor.editorToolbar.unorderedList')}>
+          <ForkAwesomeIcon icon="list"/>
+        </Button>
+        <Button variant='light' onClick={() => addOrderedList(editor)} title={t('editor.editorToolbar.orderedList')}>
+          <ForkAwesomeIcon icon="list-ol"/>
+        </Button>
+        <Button variant='light' onClick={() => addTaskList(editor)} title={t('editor.editorToolbar.checkList')}>
+          <ForkAwesomeIcon icon="check-square"/>
+        </Button>
+      </ButtonGroup>
+      <span className={'divider'}>&nbsp;</span>
+      <ButtonGroup className={'mx-1 flex-wrap'}>
+        <Button variant='light' onClick={() => addLink(editor)} title={t('editor.editorToolbar.link')}>
+          <ForkAwesomeIcon icon="link"/>
+        </Button>
+        <Button variant='light' onClick={() => addImage(editor)} title={t('editor.editorToolbar.image')}>
+          <ForkAwesomeIcon icon="picture-o"/>
+        </Button>
+        <Button variant='light' onClick={notImplemented} title={t('editor.editorToolbar.uploadImage')}>
+          <ForkAwesomeIcon icon="upload"/>
+        </Button>
+      </ButtonGroup>
+      <span className={'divider'}>&nbsp;</span>
+      <ButtonGroup className={'mx-1 flex-wrap'}>
+        <Button variant='light' onClick={() => addTable(editor)} title={t('editor.editorToolbar.table')}>
+          <ForkAwesomeIcon icon="table"/>
+        </Button>
+        <Button variant='light' onClick={() => addLine(editor)} title={t('editor.editorToolbar.line')}>
+          <ForkAwesomeIcon icon="minus"/>
+        </Button>
+        <Button variant='light' onClick={() => addComment(editor)} title={t('editor.editorToolbar.comment')}>
+          <ForkAwesomeIcon icon="comment"/>
+        </Button>
+        <EmojiPickerButton editor={editor}/>
+      </ButtonGroup>
+      <span className={'divider'}>&nbsp;</span>
+      <ButtonGroup className={'mx-1 flex-wrap'}>
+        <EditorPreferences onPreferencesChange={onPreferencesChange} preferences={editorPreferences}/>
+      </ButtonGroup>
+    </ButtonToolbar>
   )
 }