[editor] Fix layout of add section button in CanvasComponent

projects/editor/src/app/components/canvas/canvas.component.html

@@ -42,9 +42,9 @@
     </div>
   </div>
 
-  <button mat-fab class="add-section-button"
+  <button mat-raised-button class="add-section-button"
           [style.width.px]="page.hasMaxWidth ? page.maxWidth : null"
           (click)="addSection()">
-    <mat-icon>add</mat-icon>
+    <mat-icon class="add-section-icon">add</mat-icon>
   </button>
 </div>

projects/editor/src/app/components/canvas/canvas.component.ts

@@ -21,20 +21,16 @@ import { SectionDynamicComponent } from './section-dynamic.component';
       height: 100%;
       overflow: auto;
     }
+    .add-section-icon{
+      font-size: 24px;
+      color: white;
+      margin-top: -5px;
+    }
     .add-section-button {
       width: 100%;
       height: 25px;
       background-color: #BABABA;
       margin-top: 10px;
-      border-radius: 10%;
-    }
-    /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
-    ::ng-deep .add-section-button span.mat-button-wrapper {
-      padding: 0;
-    }
-    /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
-    ::ng-deep .add-section-button span.mat-button-wrapper mat-icon {
-      vertical-align: unset;
     }
     .hidden {
       display: none !important;
@@ -51,7 +47,7 @@ import { SectionDynamicComponent } from './section-dynamic.component';
       align-items: stretch;
     }
   `]
-})
+  })
 export class CanvasComponent {
   @Input() page!: Page;
   @ViewChildren('sectionComponent')