make the account handle button more compact in width #175

* decrease margins between account handle icons
* move "options" button text to the "title" attribute, so only the icons remains visible

README.md

@@ -38,7 +38,7 @@ The way of verifying that the installation packages attached to the [releases](h
 - :bell: **System tray icon** with a total number of unread messages shown on top of it. Enabling [local messages store](https://github.com/vladimiry/ElectronMail/issues/32) improves this feature ([how to enable](https://github.com/vladimiry/ElectronMail/releases/tag/v2.0.0-beta.1)), see respective [issue](https://github.com/vladimiry/ElectronMail/issues/30).
 - :gear: **Starting minimized to tray**.
 - :gear: **Closing to tray**.
-- :gear: **Switchable view layouts** (full, tabs and dropdown). See details [here](https://github.com/vladimiry/ElectronMail/issues/36) and screenshots in the [images](images) folder.
+- :gear: **Switchable accounts handle buttons positioning** (vertical, horizontal and horizontal-dropdown). See details [here](https://github.com/vladimiry/ElectronMail/issues/36) and screenshots in the [images](images) folder.
 - :package: **Batch emails export** to EML files. Feature released with [v2.0.0-beta.4](https://github.com/vladimiry/ElectronMail/releases/tag/v2.0.0-beta.4) version, requires `local messages store` feature to be enabled ([how to enable](https://github.com/vladimiry/ElectronMail/releases/tag/v2.0.0-beta.1)).
 - :closed_lock_with_key: **Built-in/prepackaged web clients**. The built-in web clients are built from source code, see respective official [Protonmail](https://github.com/ProtonMail/WebClient) and [Tutanota](https://github.com/tutao/tutanota) repositories. See [79](https://github.com/vladimiry/ElectronMail/issues/79) and [80](https://github.com/vladimiry/ElectronMail/issues/80) issues for details.
 - :gear: **Configuring proxy per account** support. Enabled since [v3.0.0](https://github.com/vladimiry/ElectronMail/releases/tag/v3.0.0) release. See [113](https://github.com/vladimiry/ElectronMail/issues/113) and [120](https://github.com/vladimiry/ElectronMail/issues/120) issues for details.

src/web/browser-window/app/_accounts/account-title.component.html

@@ -8,16 +8,16 @@
         <electron-mail-unread-badge
             *ngIf="state.account.notifications.unread"
             [value]="state.account.notifications.unread"
-            class="ml-2"
+            class="ml-1"
         ></electron-mail-unread-badge>
-        <div class="d-flex ml-2">
+        <div class="d-flex ml-1">
             <i [class]="state.account.notifications.loggedIn ? 'fa fa-unlock' : 'fa fa-lock'"></i>
         </div>
         <div class="d-flex ml-1 login-delay" *ngIf="state.loginDelayed">
             <i class="fa fa-hand-pointer-o" *ngIf="state.account.loginDelayedUntilSelected"></i>
             <span *ngIf="state.account.loginDelayedSeconds; let remainingSeconds">{{ remainingSeconds }}</span>
         </div>
-        <div class="ml-2 d-flex flex-grow-1">
+        <div class="ml-1 d-flex flex-grow-1">
             {{ state.account.accountConfig.title || state.account.accountConfig.login }}
         </div>
     </a>

src/web/browser-window/app/_accounts/accounts.component.html

@@ -2,16 +2,20 @@
     <div class="accounts-block px-2 pt-2" [ngClass]="{'d-none': hideControls$ | async}">
         <div class="controls">
             <div class="btn-group" dropdown>
-                <button (click)="openSettingsView()" class="btn btn-light" id="optionsMenuItem" type="button">
+                <button (click)="openSettingsView()" class="btn btn-light" id="optionsMenuItem" title="Options" type="button">
                     <i class="fa fa-cog"></i>
-                    Options
                 </button>
                 <button class="btn btn-light dropdown-toggle dropdown-toggle-split" dropdownToggle type="button">
                     <span class="caret"></span>
                 </button>
                 <ul *dropdownMenu class="dropdown-menu" role="menu">
                     <li role="menuitem">
-                        <button (click)="toggleCompactLayout()" class="dropdown-item toggle-layout-view" type="button">
+                        <button
+                            (click)="toggleCompactLayout()"
+                            class="dropdown-item toggle-layout-view"
+                            title="Toggling vertical/horizontal accounts handle buttons positioning"
+                            type="button"
+                        >
                             Toggle View Mode
                         </button>
                     </li>

src/web/vendor-variables.scss

@@ -3,7 +3,7 @@
 
 $primary: #1ba489;
 $modal-header-padding: 0.7rem;
-$list-group-item-padding-x: 1.25rem * 0.65;
+$list-group-item-padding-x: 1.25rem * 0.5;
 $badge-padding-y: 0.15em;
 
 @import "~bootstrap/scss/variables";