Modals: fix buttons in modals;

Tooltips: fix titles;
Cards: fix buttons.

Author: Blari

src/app/modules/templates/ui-elements/components/cards-page/cards-page.component.scss

@@ -113,7 +113,7 @@ div + mat-card {
   }
 
   button + button {
-    margin-left: 8px;
+    margin-left: 16px;
 
     @media (min-width: $small) and (max-width: ($normal - 1px)) {
       margin-left: 0;

src/app/modules/templates/ui-elements/components/icons-page/icons-page.component.scss

@@ -45,7 +45,7 @@
   padding: 0 16px;
 
   &__icon-wrapper {
-    width: 158px;
+    width: 170px;
     padding: 8px;
     color: $grey;
     display: flex;

src/app/modules/templates/ui-elements/components/tooltips-page/tooltips-page.component.scss

@@ -75,7 +75,7 @@
 
 mat-card-content.content {
   display: flex;
-  justify-content: space-between;
+  justify-content: start;
 
   @media (max-width: $medium) {
     flex-wrap: wrap;

src/app/modules/templates/ui-elements/containers/notification-page/notification-page.component.html

@@ -4,7 +4,7 @@
   <mat-card class="page-content__first-item-wrapper">
     <div class="page-content__first-item-element">
       <mat-card-title>
-        <h5>Layout Options</h5>
+        <p>Layout Options</p>
       </mat-card-title>
       <mat-card-subtitle>
         <p>There are few position options available for notifications. You can click any of them to change notifications position:</p>
@@ -51,7 +51,7 @@ <h5>Layout Options</h5>
     </div>
     <div class="page-content__first-item-element">
       <mat-card-title>
-        <h5>Notifications Types</h5>
+        <p>Notifications Types</p>
       </mat-card-title>
       <mat-card-subtitle>
         <p>Different types of notifications for lost of use cases. Custom classes are also supported.</p>
@@ -78,7 +78,7 @@ <h5>Notifications Types</h5>
     </div>
     <div class="page-content__first-item-element">
       <mat-card-title>
-        <h5>Usage</h5>
+        <p>Usage</p>
       </mat-card-title>
       <mat-card-subtitle>
         <p>Notifications are created with the help of <a class="link" [href]="toastrLink">ngx-toastr</a></p>

src/app/modules/templates/ui-elements/popups/form/form.component.html

@@ -9,6 +9,6 @@ <h3 class="title">Subscribe</h3>
 </mat-form-field>
 
 <div class="button-wrapper">
-  <button class="button" mat-flat-button (click)="close()" tabindex="-1">cancel</button>
-  <button class="button" mat-flat-button tabindex="-1" [mat-dialog-close]="data.email">subscribe</button>
+  <button class="button" mat-stroked-button color="primary" (click)="close()" tabindex="-1">CANCEL</button>
+  <button class="button" mat-raised-button color="primary" tabindex="-1" [mat-dialog-close]="data.email">SUBSCRIBE</button>
 </div>

src/app/modules/templates/ui-elements/popups/form/form.component.scss

@@ -20,16 +20,6 @@
   justify-content: flex-end;
 }
 
-.button {
-  color: $blue;
-  background-color: transparent;
-  box-shadow: none;
-
-  &:hover {
-    background-color: $white-gray;
-  }
-
-  & + .button {
+.button + .button {
     margin-left: 8px;
-  }
 }

src/app/modules/templates/ui-elements/popups/grid/grid.component.html

@@ -51,6 +51,6 @@ <h3 class="title">Grid system</h3>
 </div>
 
 <div class="button-wrapper">
-  <button class="button" mat-flat-button (click)="close()" tabindex="-1">cancel</button>
-  <button class="button" mat-flat-button (click)="close()" tabindex="-1">ok</button>
+  <button class="button" mat-stroked-button color="primary" (click)="close()" tabindex="-1">CANCEL</button>
+  <button class="button" mat-raised-button color="primary" (click)="close()" tabindex="-1">OK</button>
 </div>

src/app/modules/templates/ui-elements/popups/grid/grid.component.scss

@@ -12,18 +12,8 @@
   justify-content: flex-end;
 }
 
-.button {
-  color: $blue;
-  background-color: transparent;
-  box-shadow: none;
-
-  &:hover {
-    background-color: $white-gray;
-  }
-
-  & + .button {
+.button + .button {
     margin-left: 8px;
-  }
 }
 
 @mixin grid-item-2 {

src/app/modules/templates/ui-elements/popups/location/location.component.html

@@ -6,6 +6,6 @@ <h3 class="title">Use Google's location service?</h3>
 </p>
 
 <div class="button-wrapper">
-  <button class="button" mat-flat-button (click)="close()" tabindex="-1">disagree</button>
-  <button class="button" mat-flat-button (click)="close()" tabindex="-1">agree</button>
+  <button class="button" mat-stroked-button color="primary" (click)="close()" tabindex="-1">DISAGREE</button>
+  <button class="button" mat-raised-button color="primary" (click)="close()" tabindex="-1">AGREE</button>
 </div>

src/app/modules/templates/ui-elements/popups/location/location.component.scss

@@ -16,16 +16,6 @@
   justify-content: flex-end;
 }
 
-.button {
-  color: $blue;
-  background-color: transparent;
-  box-shadow: none;
-
-  &:hover {
-    background-color: $white-gray;
-  }
-
-  & + .button {
+.button + .button {
     margin-left: 8px;
   }
-}

src/app/modules/templates/ui-elements/popups/long-content/long-content.component.html

@@ -116,8 +116,8 @@ <h3 class="title">Subscribe</h3>
   </p>
 
   <div class="button-wrapper">
-    <button class="button" mat-flat-button (click)="close()" tabindex="-1">cancel</button>
-    <button class="button" mat-flat-button (click)="close()" tabindex="-1">subscribe</button>
+    <button class="button" mat-stroked-button color="primary" (click)="close()" tabindex="-1">DISAGREE</button>
+    <button class="button" mat-raised-button color="primary" (click)="close()" tabindex="-1">AGREE</button>
   </div>
 
 </div>

src/app/modules/templates/ui-elements/popups/long-content/long-content.component.scss

@@ -14,18 +14,9 @@
 .button-wrapper {
   display: flex;
   justify-content: flex-end;
+  margin-bottom: 1rem;
 }
 
-.button {
-  color: $blue;
-  background-color: transparent;
-  box-shadow: none;
-
-  &:hover {
-    background-color: $white-gray;
-  }
-
-  & + .button {
+.button + .button {
     margin-left: 8px;
-  }
 }

src/app/modules/user/components/settings-edit-form/settings-edit-form.component.html

@@ -9,7 +9,7 @@ <h3>Settings</h3>
     </mat-select>
   </mat-form-field>
 
-  <div class="settings-item-wrapper">
+  <div class="settings-item-wrapper first-setting">
     <h3 class="settings-subtitle">Communication:</h3>
     <mat-checkbox [checked]="true" color="warn" class="checkbox">Email</mat-checkbox>
     <mat-checkbox color="warn" class="checkbox">Messages</mat-checkbox>

src/app/modules/user/components/settings-edit-form/settings-edit-form.component.scss

@@ -13,6 +13,9 @@
 
 .settings-item-wrapper {
   margin-top: 24px;
+  &.first-setting {
+    margin-top: 0;
+  }
 }
 
 .settings-subtitle {