diff --git a/projects/editor/src/app/components/canvas/canvas.component.html b/projects/editor/src/app/components/canvas/canvas.component.html index 496d8322ed8ebf76a349de7799840320e3c54549..2db4c17e4210258f64c8caef7854b5403b2107f3 100644 --- a/projects/editor/src/app/components/canvas/canvas.component.html +++ b/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> diff --git a/projects/editor/src/app/components/canvas/canvas.component.ts b/projects/editor/src/app/components/canvas/canvas.component.ts index 7254f754c87ceeda35cb8107ccfcabb70d85de7a..02a784f3b2d912e17c45cbd55810668897114412 100644 --- a/projects/editor/src/app/components/canvas/canvas.component.ts +++ b/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')