Style fixes

Fancy animations for main menu
Added primary md button
Minor fixes

app/css/app.css

@@ -173,15 +173,22 @@ input[type="number"] {
   text-transform: uppercase;
   font-size: 13px;
   padding: 6px 10px;
+  font-weight: bold;
 }
 .btn-md,
 .btn-md:focus,
 .btn-md:hover {
-  color: #3a6d99;
+  color: #72a0c7;
+  /*color: #4680b3;*/
 }
 .btn-md:hover {
   background: #f2f6fa;
 }
+.btn-md-primary,
+.btn-md-primary:focus,
+.btn-md-primary:hover {
+  color: #4680b3;
+}
 
 .btn-md-danger,
 .btn-md-danger:focus,
@@ -278,6 +285,7 @@ a.md_modal_action {
   float: right;
   color: #dde8f1;
   padding: 19px 15px 5px;
+  font-weight: bold;
 }
 a.md_modal_action:hover {
   color: #FFF;
@@ -767,11 +775,14 @@ a.tg_radio_on:hover i.icon-radio {
 .login_head_submit_progress {
   float: right;
 }
+.login_head_submit_wrap {
+  font-weight: bold;
+}
 .login_head_submit_btn,
 .login_head_submit_progress {
   font-size: 13px;
   line-height: 20px;
-  padding: 26px 15px 29px;
+  padding: 27px 15px 28px;
   display: inline-block;
   color: #FFF;
 }
@@ -1108,9 +1119,10 @@ a.im_dialog_selected .im_dialog_message_text {
   background: #64c270;
   font-size: 11px;
   padding: 5px;
-  border-radius: 10px;
+  border-radius: 11px;
   min-width: 21px;
   text-align: center;
+  margin-top: 4px;
 }
 .active .im_dialog_badge {
   color: #428bca;
@@ -2446,7 +2458,8 @@ a.peer_photo_init:focus {
 .im_dialogs_contacts_wrap h5 {
   color: #999;
   font-size: 13px;
-  margin-left: 8px;
+  margin-left: 20px;
+  font-weight: bold;
 }
 
 /* Gif documents */

app/css/desktop.css

@@ -31,6 +31,11 @@
   background: #497799;
 }
 
+/*.dropdown.open .tg_head_btn {
+  position: relative;
+  z-index: 5;
+}*/
+
 .tg_head_logo_dropdown .dropdown-toggle {
   color: #FFF;
   padding: 17px 20px 15px 22px;
@@ -52,6 +57,7 @@
   display: inline-block;
   width: 18px;
   height: 14px;
+  -webkit-transform: translate3d(0,0,0);
 }
 .tg_head_logo_dropdown .icon-hamburger-wrap {
   margin: 0 40px 0 0;
@@ -64,11 +70,51 @@
   background: #fff;
   display: block;
   height: 2px;
+  margin: 0;
+}
+.icon-hamburger-wrap .icon-bar:nth-child(2) {
   margin-bottom: 4px;
+  margin-top: 4px;
 }
-.icon-hamburger-wrap .icon-bar:last-child {
+
-  margin-bottom: 0;
+.tg_head_logo_dropdown .icon-bar {
+  opacity: 1;
+  -webkit-transition: -webkit-transform .1s ease-in;
+  -o-transition: -o-transform .1s ease;
+  -ms-transition: -ms-transform .1s ease;
+  -moz-transition: -moz-transform .1s ease;
+  transition: transform .1s ease-in;
+  -webkit-transform-origin: 50% 50%;
+  -o-transform-origin: 50% 50%;
+  -ms-transform-origin: 50% 50%;
+  -moz-transform-origin: 50% 50%;
+  transform-origin: 50% 50%;
+}
+.tg_head_logo_dropdown:not(.open) .dropdown-toggle:hover .icon-bar:nth-child(1) {
+  -webkit-transform: translateY(-1px);
+}
+.tg_head_logo_dropdown:not(.open) .dropdown-toggle:hover .icon-bar:nth-child(3) {
+  -webkit-transform: translateY(1px);
+}
+
+.tg_head_logo_dropdown.open .icon-bar:nth-child(1) {
+  -webkit-transform: translate3d(0,-6px,0) rotate(-45deg);
+  -moz-transform: translate3d(0,-6px,0) rotate(-45deg);
+  -ms-transform: translate3d(0,-6px,0) rotate(-45deg);
+  -o-transform: translate3d(0,-6px,0) rotate(-45deg);
+  transform: translate3d(0,6px,0) rotate(45deg);
+}
+.tg_head_logo_dropdown.open .icon-bar:nth-child(2) {
+  opacity: 0;
 }
+.tg_head_logo_dropdown.open .icon-bar:nth-child(3) {
+  -webkit-transform: translate3d(0,-6px,0) rotate(-45deg);
+  -moz-transform: translate3d(0,-6px,0) rotate(-45deg);
+  -ms-transform: translate3d(0,-6px,0) rotate(-45deg);
+  -o-transform: translate3d(0,-6px,0) rotate(-45deg);
+  transform: translate3d(0,-6px,0) rotate(-45deg);
+}
+
 
 .tg_head_logo_dropdown .dropdown-menu {
   border-radius: 0;
@@ -81,7 +127,24 @@
   -webkit-box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27);
   -moz-box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27);
   box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27);
+  overflow: hidden;
+}
+
+/*@-webkit-keyframes rollIn {
+    from { transform: translateY(-220px); }
+      to { transform: translateY(0); }
+}
+
+@keyframes rollIn {
+    from { transform: translateY(-220px); }
+      to { transform: translateY(0); }
 }
+
+.tg_head_logo_dropdown.open .dropdown-menu {
+  -webkit-animation: rollIn 0.2s cubic-bezier(0,2,1,0.5);
+  animation: rollIn 0.2s cubic-bezier(0,2,1,0.5);
+  z-index: 4;
+}*/
 .tg_head_logo_dropdown .dropdown-menu > li > a {
   font-size: 12px;
   line-height: 21px;

app/partials/desktop/chat_create_modal.html

@@ -17,7 +17,7 @@
 
   <div class="md_simple_modal_footer">
     <button class="btn btn-md" ng-click="$dismiss()" my-i18n="modal_cancel"></button>
-    <button class="btn btn-md" ng-class="{disabled: group.creating}" ng-click="createGroup()" ng-bind="group.creating ? 'group_create_submit_active' : 'group_create_submit' | i18n" ng-disabled="group.creating"></button>
+    <button class="btn btn-md btn-md-primary" ng-class="{disabled: group.creating}" ng-click="createGroup()" ng-bind="group.creating ? 'group_create_submit_active' : 'group_create_submit' | i18n" ng-disabled="group.creating"></button>
   </div>
 
 </div>

app/partials/desktop/chat_edit_modal.html

@@ -17,7 +17,7 @@
 
   <div class="md_simple_modal_footer">
     <button class="btn btn-md" ng-click="$dismiss()" my-i18n="modal_cancel"></button>
-    <button class="btn btn-md" ng-class="{disabled: group.updating}" ng-click="updateGroup()" ng-bind="group.updating ? 'group_edit_submit_active' : 'group_edit_submit' | i18n" ng-disabled="group.updating"></button>
+    <button class="btn btn-md btn-md-primary" ng-class="{disabled: group.updating}" ng-click="updateGroup()" ng-bind="group.updating ? 'group_edit_submit_active' : 'group_edit_submit' | i18n" ng-disabled="group.updating"></button>
   </div>
 
 </div>

app/partials/desktop/confirm_modal.html

@@ -50,7 +50,7 @@
     <button class="btn btn-md" ng-click="$dismiss()">
       <span my-i18n="modal_cancel"></span>
     </button>
-    <button class="btn btn-md" ng-switch="type" ng-click="$close()" my-focused >
+    <button class="btn btn-md btn-md-primary" ng-switch="type" ng-click="$close()" my-focused >
       <span ng-switch-when="LOGOUT" my-i18n="confirm_modal_logout_submit"></span>
       <span ng-switch-when="HISTORY_FLUSH" my-i18n="confirm_modal_history_flush_submit"></span>
       <span ng-switch-when="FILES_CLIPBOARD_PASTE" my-i18n="confirm_modal_clipboard_files_send_submit"></span>

app/partials/desktop/contacts_modal.html

@@ -66,10 +66,10 @@
 
     <div ng-switch-when="new_group" class="pull-right">
       <button class="btn btn-md" ng-click="$dismiss()" my-i18n="modal_cancel"></button>
-      <button class="btn btn-md" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="submitSelected()" type="submit" my-i18n="modal_next"></button>
+      <button class="btn btn-md btn-md-primary" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="submitSelected()" type="submit" my-i18n="modal_next"></button>
     </div>
 
-    <button ng-switch-when="select" class="btn btn-md pull-right" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="submitSelected()" type="submit" my-i18n="modal_next"></button>
+    <button ng-switch-when="select" class="btn btn-md btn-md-primary pull-right" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="submitSelected()" type="submit" my-i18n="modal_next"></button>
 
     <button ng-switch-when="edit" class="btn btn-md btn-md-danger pull-right"  ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="deleteSelected()">
       <my-i18n msgid="contacts_modal_edit_delete"></my-i18n>
@@ -77,7 +77,7 @@
     </button>
 
     <div ng-switch-default class="text-center">
-      <button class="btn btn-md" ng-click="importContact()" my-i18n="contacts_modal_new_contact"></button>
+      <button class="btn btn-md btn-md-primary" ng-click="importContact()" my-i18n="contacts_modal_new_contact"></button>
     </div>
 
   </div>

app/partials/desktop/edit_contact_modal.html

@@ -27,7 +27,7 @@
 
   <div class="md_simple_modal_footer">
     <button class="btn btn-md" ng-click="$dismiss()" my-i18n="modal_cancel"></button>
-    <button class="btn btn-md" ng-class="{disabled: progress.enabled}" ng-click="doImport()" ng-bind="progress.enabled ? 'contact_edit_modal_submit_active' : 'contact_edit_modal_submit'| i18n" ng-disabled="progress.enabled"></button>
+    <button class="btn btn-md btn-md-primary" ng-class="{disabled: progress.enabled}" ng-click="doImport()" ng-bind="progress.enabled ? 'contact_edit_modal_submit_active' : 'contact_edit_modal_submit'| i18n" ng-disabled="progress.enabled"></button>
   </div>
 
 </div>

app/partials/desktop/import_contact_modal.html

@@ -27,7 +27,7 @@
 
   <div class="md_simple_modal_footer">
     <button class="btn btn-md" ng-click="$dismiss()" my-i18n="modal_cancel"></button>
-    <button class="btn btn-md" ng-class="{disabled: progress.enabled}" ng-click="doImport()" ng-bind="progress.enabled ? 'contact_import_modal_submit_active' : 'contact_import_modal_submit' | i18n" ng-disabled="progress.enabled"></button>
+    <button class="btn btn-md btn-md-primary" ng-class="{disabled: progress.enabled}" ng-click="doImport()" ng-bind="progress.enabled ? 'contact_import_modal_submit_active' : 'contact_import_modal_submit' | i18n" ng-disabled="progress.enabled"></button>
   </div>
 
 </div>

app/partials/desktop/profile_edit_modal.html

@@ -22,7 +22,7 @@
 
   <div class="md_simple_modal_footer">
     <button class="btn btn-md" ng-click="$dismiss()" my-i18n="modal_cancel"></button>
-    <button class="btn btn-md" ng-class="{disabled: profile.updating}" ng-click="updateProfile()" ng-bind="profile.updating ? 'profile_edit_submit_active' : 'profile_edit_submit' | i18n" ng-disabled="profile.updating"></button>
+    <button class="btn btn-md btn-md-primary" ng-class="{disabled: profile.updating}" ng-click="updateProfile()" ng-bind="profile.updating ? 'profile_edit_submit_active' : 'profile_edit_submit' | i18n" ng-disabled="profile.updating"></button>
   </div>
 
 </div>

app/partials/desktop/settings_modal.html

@@ -34,6 +34,8 @@
 
   <div class="md_modal_body">
 
+    <div class="md_modal_sections">
+
       <div class="md_modal_iconed_section_wrap md_modal_iconed_section_number">
         <i class="md_modal_section_icon md_modal_section_icon_phone"></i>
 
@@ -115,4 +117,6 @@
 
     </div>
 
+  </div>
+
 </div>

app/partials/desktop/username_edit_modal.html

@@ -20,7 +20,7 @@
   <div class="md_simple_modal_footer">
 
     <button class="btn btn-md" ng-click="$dismiss()" my-i18n="modal_cancel"></button>
-    <button class="btn btn-md" ng-class="{disabled: profile.updating}" ng-click="updateUsername()" ng-bind="profile.updating ? 'username_edit_submit_active' : 'username_edit_submit' | i18n" ng-disabled="profile.updating"></button>
+    <button class="btn btn-md btn-md-primary" ng-class="{disabled: profile.updating}" ng-click="updateUsername()" ng-bind="profile.updating ? 'username_edit_submit_active' : 'username_edit_submit' | i18n" ng-disabled="profile.updating"></button>
 
   </div>