From eead77bff994deb32cc4b4969593808ac68e6afe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 5 Sep 2023 17:52:11 +0200
Subject: [PATCH] MOBILE-4201 login: Login restyling

---
 .../components/user-avatar/user-avatar.scss   |   1 -
 .../login-methods/login-methods.html          |  13 +-
 src/core/features/login/lang.json             |   2 +-
 src/core/features/login/login.scss            | 128 ++++++++++++++----
 .../login/pages/credentials/credentials.html  | 125 ++++++++---------
 .../login/pages/reconnect/reconnect.html      | 105 +++++++-------
 src/theme/theme.base.scss                     |   3 -
 src/theme/theme.light.scss                    |   2 +-
 8 files changed, 224 insertions(+), 155 deletions(-)

diff --git a/src/core/components/user-avatar/user-avatar.scss b/src/core/components/user-avatar/user-avatar.scss
index 5c41f6ca2..cf9c7a7df 100644
--- a/src/core/components/user-avatar/user-avatar.scss
+++ b/src/core/components/user-avatar/user-avatar.scss
@@ -45,7 +45,6 @@
         display: block;
 
         img {
-            padding: 4px;
             border-radius: 50%;
         }
     }
diff --git a/src/core/features/login/components/login-methods/login-methods.html b/src/core/features/login/components/login-methods/login-methods.html
index 3ce4e3fa9..e553ef901 100644
--- a/src/core/features/login/components/login-methods/login-methods.html
+++ b/src/core/features/login/components/login-methods/login-methods.html
@@ -1,6 +1,5 @@
-<div *ngIf="loginMethods.length || identityProviders.length || showScanQR"
-    class="ion-text-center ion-padding core-login-site-qrcode-separator">
-    {{ 'core.login.or' | translate }}
+<div *ngIf="loginMethods.length || identityProviders.length || showScanQR" class="ion-text-center ion-padding core-login-methods-separator">
+    <span>{{ 'core.login.or' | translate }}</span>
 </div>
 
 <div class="core-login-methods" *ngIf="loginMethods.length">
@@ -19,12 +18,8 @@
 </ng-container>
 
 <!-- Identity providers. -->
-<ion-list *ngIf="identityProviders.length" class="ion-padding-top core-login-identity-providers">
-    <ion-item class="ion-text-wrap">
-        <ion-label>
-            <h2 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h2>
-        </ion-label>
-    </ion-item>
+<ion-list *ngIf="identityProviders.length" class="core-login-identity-providers">
+    <h2 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h2>
     <ion-button [fill]="'outline'" *ngFor="let provider of identityProviders" class="ion-text-wrap ion-margin core-oauth-provider"
         (click)="oauthClicked(provider)" [attr.aria-label]="provider.name" expand="block">
         <img *ngIf="provider.iconurl" [src]="provider.iconurl" alt="" width="32" height="32" slot="start" aria-hidden="true">
diff --git a/src/core/features/login/lang.json b/src/core/features/login/lang.json
index 7744cb51c..5d77bdad5 100644
--- a/src/core/features/login/lang.json
+++ b/src/core/features/login/lang.json
@@ -85,7 +85,7 @@
     "onboardingprovidefeedback": "Provide timely feedback",
     "onboardingtoconnect": "To connect to the Moodle App you'll need a Moodle site",
     "onboardingwelcome": "Welcome to the Moodle App!",
-    "or": "OR",
+    "or": "Or",
     "password": "Password",
     "passwordforgotten": "Forgotten password",
     "passwordforgotteninstructions2": "To reset your password, submit your username or your email address below. If we can find you in the database, an email will be sent to your email address, with instructions how to get access again.",
diff --git a/src/core/features/login/login.scss b/src/core/features/login/login.scss
index de84e1041..785732e0a 100644
--- a/src/core/features/login/login.scss
+++ b/src/core/features/login/login.scss
@@ -16,10 +16,6 @@
         }
     }
 
-    form div {
-        color: var(--color);
-    }
-
     ion-button.core-button-as-link {
         --color: var(--core-login-text-color);
         text-decoration-color: var(--core-login-text-color);
@@ -29,43 +25,73 @@
         }
     }
 
-    form .item.item-input {
-        margin-bottom: 16px;
+
+
+    .core-login-reconnect-warning {
+        margin: 0px 0px 32px 0px;
     }
 
-    form .item,
-    form .item ion-label {
-        --background: var(--core-login-input-background);
-        --color: var(--core-login-input-color);
-    }
+    .core-login-info-box {
+        margin-bottom: 32px;
 
-    .core-login-site-logo img {
-        max-width: 100%;
-    }
+        .core-login-site {
+            .core-login-site-logo {
+                width: 90%;
+                max-width: 300px;
+                margin: 0px auto;
 
-    .core-sitename + .core-siteurl {
-        margin-top: 0;
-    }
+                img {
+                    max-width: 100%;
+                    max-height: 104px;
+                }
+            }
 
-    .core-sitename {
-        font-size: 1.2rem;
-        margin-bottom: 0;
-    }
+            .core-sitename {
+                font-size: 1.2rem;
+                margin-bottom: 8px;
+            }
 
-    .core-login-site-logo {
-        width: 90%;
-        max-width: 300px;
-        margin: 5px auto;
-    }
+            .core-siteurl {
+                margin-top: 8px;
+                margin-bottom: 0px;
+            }
+        }
 
-    .core-login-forgotten-password {
-        text-decoration: underline;
+        .core-login-site + .core-login-user {
+            margin-top: 24px;
+        }
     }
 
     core-user-avatar.large-avatar {
         --core-avatar-size: var(--core-large-avatar-size);
     }
 
+    .core-login-fullname {
+        margin-top: 8px;
+        margin-bottom: 0px;
+    }
+
+    .core-login-methods {
+        form .item.item-input {
+            margin-bottom: 16px;
+        }
+
+        form .item,
+        form .item ion-label {
+            --background: var(--core-login-input-background);
+            --color: var(--core-login-input-color);
+        }
+    }
+
+    ion-button {
+        margin-left: 0px;
+        margin-right: 0px;
+    }
+
+    .core-login-forgotten-password {
+        text-decoration: underline;
+    }
+
     @if ($core-login-hide-forgot-password) {
         .core-login-forgotten-password {
             display: none;
@@ -93,15 +119,59 @@
         }
     }
 
+    .core-login-methods-separator {
+        position: relative;
+        padding: 8px 0;
+
+        span {
+            background: var(--core-login-background);
+            padding: 0 8px;
+        }
+
+        &::before {
+            height: 1px;
+            position: absolute;
+            top: 50%;
+            left: 0px;
+            right: 0px;
+            border-bottom: 1px solid var(--gray-300);
+            content: "";
+            z-index: -1;
+        }
+    }
+
+
     @if ($core-login-hide-qrcode) {
         .core-login-site-qrcode,
-        .core-login-site-qrcode-separator {
+        .core-login-methods-separator {
             display: none;
         }
     }
 
+    .core-login-login-button {
+        margin-top: 32px;
+    }
+
+    .core-login-login-inbrowser-button {
+        margin-bottom: 8px;
+    }
+
     p.core-login-inbrowser {
         font-size: 12px;
+        margin-top: 8px;
+        margin-bottom: 8px;
+    }
+
+    .core-login-sign-up {
+        margin-top: 8px;
+        border-top: 1px solid var(--gray-300);
+    }
+
+    .core-login-identity-providers h2,
+    .core-login-sign-up h2 {
+        margin-top: 16px;
+        margin-bottom: 8px;
+        font-size: 16px;
     }
 
 }
diff --git a/src/core/features/login/pages/credentials/credentials.html b/src/core/features/login/pages/credentials/credentials.html
index 93554e1f5..8ba3874ff 100644
--- a/src/core/features/login/pages/credentials/credentials.html
+++ b/src/core/features/login/pages/credentials/credentials.html
@@ -20,79 +20,82 @@
 </ion-header>
 <ion-content class="ion-padding limited-width">
     <core-loading [hideUntil]="pageLoaded">
-        <div class="ion-text-wrap ion-text-center ion-margin-bottom">
-            <div class="core-login-site-logo">
-                <!-- Show site logo or a default image. -->
-                <img *ngIf="logoUrl" [src]="logoUrl" role="presentation" alt="" onError="this.src='assets/img/login_logo.png'">
-                <img *ngIf="!logoUrl" src="assets/img/login_logo.png" role="presentation" alt="">
+        <div class="ion-text-wrap ion-text-center core-login-info-box">
+            <div class="core-login-site">
+                <div class="core-login-site-logo">
+                    <!-- Show site logo or a default image. -->
+                    <img *ngIf="logoUrl" [src]="logoUrl" role="presentation" alt="" onError="this.src='assets/img/login_logo.png'">
+                    <img *ngIf="!logoUrl" src="assets/img/login_logo.png" role="presentation" alt="">
+                </div>
+
+                <h2 *ngIf="siteName" class="ion-margin-top ion-no-padding core-sitename">
+                    <core-format-text [text]="siteName" [filter]="false"></core-format-text>
+                </h2>
+                <p class="core-siteurl">{{siteUrl}}</p>
             </div>
 
-            <h2 *ngIf="siteName" class="ion-padding core-sitename">
-                <core-format-text [text]="siteName" [filter]="false"></core-format-text>
-            </h2>
-            <p class="core-siteurl">{{siteUrl}}</p>
+            <core-login-exceeded-attempts *ngIf="exceededAttemptsHTML && supportConfig && loginAttempts >= 3"
+                [supportConfig]="supportConfig" [supportSubject]="'core.login.exceededloginattemptssupportsubject' | translate">
+                <div [innerHTML]="exceededAttemptsHTML" (click)="exceededAttemptsClicked($event)"></div>
+            </core-login-exceeded-attempts>
         </div>
 
-        <core-login-exceeded-attempts *ngIf="exceededAttemptsHTML && supportConfig && loginAttempts >= 3" [supportConfig]="supportConfig"
-            [supportSubject]="'core.login.exceededloginattemptssupportsubject' | translate">
-            <div [innerHTML]="exceededAttemptsHTML" (click)="exceededAttemptsClicked($event)"></div>
-        </core-login-exceeded-attempts>
-
-        <form [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #credentialsForm *ngIf="!isBrowserSSO">
-            <ion-item>
-                <ion-label class="sr-only">{{ 'core.login.username' | translate }}</ion-label>
-                <ion-input type="text" name="username" placeholder="{{ 'core.login.username' | translate }}" formControlName="username"
-                    autocapitalize="none" autocorrect="off" autocomplete="username" enterkeyhint="next" required="true">
-                </ion-input>
-            </ion-item>
-            <ion-item class="ion-margin-bottom">
-                <ion-label class="sr-only">{{ 'core.login.password' | translate }}</ion-label>
-                <core-show-password name="password">
-                    <ion-input name="password" type="password" placeholder="{{ 'core.login.password' | translate }}"
-                        formControlName="password" [clearOnEdit]="false" autocomplete="current-password" enterkeyhint="go" required="true">
+        <div class="core-login-methods">
+            <form [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #credentialsForm *ngIf="!isBrowserSSO">
+                <ion-item>
+                    <ion-label class="sr-only">{{ 'core.login.username' | translate }}</ion-label>
+                    <ion-input type="text" name="username" placeholder="{{ 'core.login.username' | translate }}" formControlName="username"
+                        autocapitalize="none" autocorrect="off" autocomplete="username" enterkeyhint="next" required="true">
                     </ion-input>
-                </core-show-password>
-            </ion-item>
-            <ion-button expand="block" type="submit" [disabled]="!credForm.valid" class="ion-margin core-login-login-button ion-text-wrap">
-                {{ 'core.login.loginbutton' | translate }}
-            </ion-button>
-            <!-- Remove this once Ionic fixes this bug: https://github.com/ionic-team/ionic-framework/issues/19368 -->
-            <input type="submit" class="core-submit-hidden-enter" />
+                </ion-item>
+                <ion-item class="ion-margin-bottom">
+                    <ion-label class="sr-only">{{ 'core.login.password' | translate }}</ion-label>
+                    <core-show-password name="password">
+                        <ion-input name="password" type="password" placeholder="{{ 'core.login.password' | translate }}"
+                            formControlName="password" [clearOnEdit]="false" autocomplete="current-password" enterkeyhint="go"
+                            required="true">
+                        </ion-input>
+                    </core-show-password>
+                </ion-item>
+                <ion-button expand="block" type="submit" [disabled]="!credForm.valid"
+                    class="ion-margin core-login-login-button ion-text-wrap">
+                    {{ 'core.login.loginbutton' | translate }}
+                </ion-button>
+                <!-- Remove this once Ionic fixes this bug: https://github.com/ionic-team/ionic-framework/issues/19368 -->
+                <input type="submit" class="core-submit-hidden-enter" />
 
-            <!-- Forgotten password option. -->
-            <ion-button *ngIf="showForgottenPassword" expand="block" fill="clear"
-                class="core-login-forgotten-password core-button-as-link ion-text-wrap" (click)="forgottenPassword()">
-                {{ 'core.login.forgotten' | translate }}
-            </ion-button>
-        </form>
+                <!-- Forgotten password option. -->
+                <ion-button *ngIf="showForgottenPassword" expand="block" fill="clear"
+                    class="core-login-forgotten-password core-button-as-link ion-text-wrap" (click)="forgottenPassword()">
+                    {{ 'core.login.forgotten' | translate }}
+                </ion-button>
+            </form>
 
-        <ng-container *ngIf="isBrowserSSO">
-            <ion-button expand="block" (click)="openBrowserSSO()" class="ion-margin core-login-login-button ion-text-wrap">
-                {{ 'core.login.loginbutton' | translate }}
-                <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true"></ion-icon>
-            </ion-button>
-            <p class="text-center core-login-inbrowser">{{ 'core.openinbrowserdescription' | translate }}</p>
-        </ng-container>
+            <ng-container *ngIf="isBrowserSSO">
+                <ion-button expand="block" (click)="openBrowserSSO()" class="ion-margin core-login-login-inbrowser-button ion-text-wrap">
+                    {{ 'core.login.loginbutton' | translate }}
+                    <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true"></ion-icon>
+                </ion-button>
+                <p class="text-center core-login-inbrowser">{{ 'core.openinbrowserdescription' | translate }}</p>
+            </ng-container>
 
 
-        <core-login-methods *ngIf="siteConfig" [siteConfig]="siteConfig" [siteUrl]="siteUrl"></core-login-methods>
+            <core-login-methods *ngIf="siteConfig" [siteConfig]="siteConfig" [siteUrl]="siteUrl"></core-login-methods>
+        </div>
 
-        <ion-list *ngIf="canSignup || authInstructions" class="ion-padding-top core-login-sign-up">
-            <ion-item class="ion-text-wrap">
+        <div class="core-login-sign-up" *ngIf="canSignup || authInstructions">
+            <h2>{{ 'core.login.firsttime' | translate }}</h2>
+
+            <ion-item class="ion-text-wrap ion-no-padding core-login-instructions">
                 <ion-label>
-                    <h2 class="item-heading">{{ 'core.login.firsttime' | translate }}</h2>
+                    <core-format-text *ngIf="authInstructions" [text]="authInstructions" [filter]="false"></core-format-text>
                 </ion-label>
             </ion-item>
-            <ion-item class="ion-text-wrap" *ngIf="authInstructions">
-                <ion-label>
-                    <p>
-                        <core-format-text [text]="authInstructions" [filter]="false"></core-format-text>
-                    </p>
-                </ion-label>
-            </ion-item>
-            <ion-button *ngIf="canSignup" expand="block" class="ion-margin ion-text-wrap" fill="outline" (click)="openEmailSignup()">
-                {{ 'core.login.startsignup' | translate }}
-            </ion-button>
-        </ion-list>
+
+
+        </div>
+        <ion-button *ngIf="canSignup" expand="block" class="ion-margin ion-text-wrap" fill="outline" (click)="openEmailSignup()">
+            {{ 'core.login.startsignup' | translate }}
+        </ion-button>
     </core-loading>
 </ion-content>
diff --git a/src/core/features/login/pages/reconnect/reconnect.html b/src/core/features/login/pages/reconnect/reconnect.html
index 663393e33..dbda9509a 100644
--- a/src/core/features/login/pages/reconnect/reconnect.html
+++ b/src/core/features/login/pages/reconnect/reconnect.html
@@ -20,74 +20,79 @@
 <ion-content class="ion-padding" (keydown)="keyDown($event)" (keyup)="keyUp($event)">
     <core-loading [hideUntil]="!showLoading">
         <div class="list-item-limited-width">
-            <ion-card *ngIf="!isLoggedOut" class="core-danger-card core-login-reconnect-warning">
+            <ion-card *ngIf="!isLoggedOut" class="core-warning-card core-login-reconnect-warning">
                 <ion-item>
-                    <ion-icon name="fas-circle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
                     <ion-label>
                         <p>{{ 'core.lostconnection' | translate }}</p>
                     </ion-label>
                 </ion-item>
             </ion-card>
 
-            <div class="ion-text-wrap ion-text-center ion-margin-bottom" [ngClass]="{'item-avatar-center': showUserAvatar}">
-                <div class="core-login-site-logo" *ngIf="!showUserAvatar">
-                    <!-- Show site logo or a default image. -->
-                    <img *ngIf="logoUrl" [src]="logoUrl" role="presentation" onError="this.src='assets/img/login_logo.png'" alt="">
-                    <img *ngIf="!logoUrl" src="assets/img/login_logo.png" role="presentation" alt="">
+            <div class="ion-text-wrap ion-text-center core-login-info-box">
+                <div class="core-login-site">
+                    <div class="core-login-site-logo" *ngIf="!showUserAvatar">
+                        <!-- Show site logo or a default image. -->
+                        <img *ngIf="logoUrl" [src]="logoUrl" role="presentation" onError="this.src='assets/img/login_logo.png'" alt="">
+                        <img *ngIf="!logoUrl" src="assets/img/login_logo.png" role="presentation" alt="">
+                    </div>
+
+                    <p *ngIf="siteInfo?.siteName" class="ion-no-margin ion-no-padding core-sitename">
+                        <core-format-text [text]="siteInfo?.siteName" [filter]="false"></core-format-text>
+                    </p>
+                    <p class="core-siteurl">{{siteUrl}}</p>
                 </div>
 
-                <p *ngIf="siteInfo?.siteName" class="ion-padding core-sitename">
-                    <core-format-text [text]="siteInfo?.siteName" [filter]="false"></core-format-text>
-                </p>
-                <p class="core-siteurl">{{siteUrl}}</p>
-
-                <!-- Show user avatar. -->
-                <core-user-avatar class="large-avatar" *ngIf="showUserAvatar" [user]="siteInfo" [linkProfile]="false"
-                    [siteId]="siteId"></core-user-avatar>
-                <p *ngIf="siteInfo?.fullname" class="core-login-fullname">
-                    <core-format-text [text]="siteInfo?.fullname" [filter]="false"></core-format-text>
-                </p>
-
+                <div class="core-login-user">
+                    <!-- Show user avatar. -->
+                    <core-user-avatar class="large-avatar" *ngIf="showUserAvatar" [user]="siteInfo" [linkProfile]="false"
+                        [siteId]="siteId"></core-user-avatar>
+                    <p *ngIf="siteInfo?.fullname" class="core-login-fullname">
+                        <core-format-text [text]="siteInfo?.fullname" [filter]="false"></core-format-text>
+                    </p>
+                </div>
                 <core-login-exceeded-attempts *ngIf="exceededAttemptsHTML && supportConfig && reconnectAttempts >= 3"
                     [supportConfig]="supportConfig" [supportSubject]="'core.login.exceededloginattemptssupportsubject' | translate">
                     <div [innerHTML]="exceededAttemptsHTML" (click)="exceededAttemptsClicked($event)"></div>
                 </core-login-exceeded-attempts>
             </div>
 
-            <form *ngIf="!isBrowserSSO" [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #reconnectForm>
-                <ion-item class="ion-margin-bottom">
-                    <ion-label class="sr-only">{{ 'core.login.password' | translate }}</ion-label>
-                    <core-show-password name="password">
-                        <ion-input class="core-ioninput-password" name="password" type="password"
-                            placeholder="{{ 'core.login.password' | translate }}" formControlName="password" [clearOnEdit]="false"
-                            autocomplete="current-password" enterkeyhint="go" required="true">
-                        </ion-input>
-                    </core-show-password>
-                </ion-item>
-                <ion-button type="submit" expand="block" [disabled]="!credForm.valid"
-                    class="ion-margin core-login-login-button ion-text-wrap">
-                    {{ 'core.login.loginbutton' | translate }}
-                </ion-button>
+            <div class="core-login-methods">
+                <form *ngIf="!isBrowserSSO" [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #reconnectForm>
+                    <ion-item class="ion-margin-bottom">
+                        <ion-label class="sr-only">{{ 'core.login.password' | translate }}</ion-label>
+                        <core-show-password name="password">
+                            <ion-input class="core-ioninput-password" name="password" type="password"
+                                placeholder="{{ 'core.login.password' | translate }}" formControlName="password" [clearOnEdit]="false"
+                                autocomplete="current-password" enterkeyhint="go" required="true">
+                            </ion-input>
+                        </core-show-password>
+                    </ion-item>
+                    <ion-button type="submit" expand="block" [disabled]="!credForm.valid"
+                        class="ion-margin core-login-login-button ion-text-wrap">
+                        {{ 'core.login.loginbutton' | translate }}
+                    </ion-button>
 
-                <!-- Forgotten password option. -->
-                <ion-button *ngIf="showForgottenPassword" expand="block" fill="clear"
-                    class="core-login-forgotten-password core-button-as-link ion-text-wrap" (click)="forgottenPassword()">
-                    {{ 'core.login.forgotten' | translate }}
-                </ion-button>
-            </form>
+                    <!-- Forgotten password option. -->
+                    <ion-button *ngIf="showForgottenPassword" expand="block" fill="clear"
+                        class="core-login-forgotten-password core-button-as-link ion-text-wrap" (click)="forgottenPassword()">
+                        {{ 'core.login.forgotten' | translate }}
+                    </ion-button>
+                </form>
 
-            <ng-container *ngIf="isBrowserSSO">
-                <ion-button expand="block" (click)="openBrowserSSO()" class="ion-margin core-login-login-button ion-text-wrap">
-                    {{ 'core.login.loginbutton' | translate }}
-                    <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true"></ion-icon>
-                </ion-button>
-                <p class="text-center core-login-inbrowser">{{ 'core.openinbrowserdescription' | translate }}</p>
-            </ng-container>
-
-            <!-- Additional Login methods -->
-            <core-login-methods *ngIf="siteConfig" [siteConfig]="siteConfig" [reconnect]="true" [siteUrl]="siteUrl"
-                [redirectData]="redirectData"></core-login-methods>
+                <ng-container *ngIf="isBrowserSSO">
+                    <ion-button expand="block" (click)="openBrowserSSO()"
+                        class="ion-margin core-login-login-inbrowser-button ion-text-wrap">
+                        {{ 'core.login.loginbutton' | translate }}
+                        <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true"></ion-icon>
+                    </ion-button>
+                    <p class="text-center core-login-inbrowser">{{ 'core.openinbrowserdescription' | translate }}</p>
+                </ng-container>
 
+                <!-- Additional Login methods -->
+                <core-login-methods *ngIf="siteConfig" [siteConfig]="siteConfig" [reconnect]="true" [siteUrl]="siteUrl"
+                    [redirectData]="redirectData"></core-login-methods>
+            </div>
         </div>
     </core-loading>
 </ion-content>
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index dafb8f140..88ba3383f 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -902,10 +902,7 @@ img.large-avatar,
     height: var(--core-large-avatar-size);
     max-width: var(--core-large-avatar-size);
     max-height: var(--core-large-avatar-size);
-    margin-bottom: 10px;
     border-radius: 50%;
-    padding: 4px;
-    border: 1px solid var(--stroke);
     background-color: transparent;
 }
 
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index fa09f202c..f2d892099 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -328,7 +328,7 @@ html {
 
     --core-star-color: var(--primary);
 
-    --core-large-avatar-size: 90px;
+    --core-large-avatar-size: 80px;
     --core-avatar-size: var(--a11y-min-target-size);
     --core-avatar-radius: 50%;