[Fixed] How to remove "Sign in with AWS" button from Angular/Amplify/Cognito login page?

Issue

I am currently using Angular/Congito/Amplify for users to login to my website. The functionality works perfectly but I cannot find anyway to edit the design (colors / buttons etc.).

Currently my login page looks like below:

My goal is to remove the "Sign in with AWS" button as well as change the color scheme of the orange text and orange Sign In background button color.

Below is my app.component.html

<app-header *ngIf="authState === 'signedin'"></app-header><br>

<amplify-authenticator *ngIf="authState !== 'signedin'"></amplify-authenticator>

<router-outlet *ngIf="authState === 'signedin'"></router-outlet>

<app-footer *ngIf="authState === 'signedin'"></app-footer>

This is my app.component.css (where I was able to center the authentication. The colors I added here do nothing.

  amplify-authenticator {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 100vh;
    --button-background-color: #00D5A1;
    background-color: #0000;

  }

I can find the theme by navigating to: angular-master\node_modules@aws-amplify\ui\src\Theme.css

But that has been no help. Any advice would be apprecaited.

Solution

I just had and resolved this problem.

The "Sign in with AWS" button load from federated component.

The solution is to override the slot in amplify-sign-in with an empty div.

Eg :

<amplify-authenticator
  *ngIf="authState !== 'signedin'">
  <amplify-sign-in slot="sign-in" usernameAlias="phone_number" hideSignUp>
    <div slot="federated-buttons"></div>
  </amplify-sign-in>
</amplify-authenticator>

<div *ngIf="authState === 'signedin' && user" class="App">
  <amplify-sign-out></amplify-sign-out>
  <div>Hello, {{user.username}}</div>
  <!-- This is where you application template code goes -->
</div>

Resulting UI