-
Notifications
You must be signed in to change notification settings - Fork 15
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: Revert "fix: revert verify/sign in changes (#3364)" #3371
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,4 @@ | ||
<?xml version="1.0" encoding="utf-8"?> | ||
<resources> | ||
<color name="ic_launcher_new_splash_background">#220033</color> | ||
<color name="ic_launcher_new_splash_background">#FFFFFF</color> | ||
</resources> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
{} | ||
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,25 +1,33 @@ | ||
<ion-content> | ||
<ion-grid class="disabled--header-container"> | ||
<ion-row class="disabled--header ion-align-items-center"> | ||
<ion-col class="disabled--header-logo-container"> | ||
<img class="disabled--header-logo" src="../../../assets/svg/fyle-logo-light.svg" alt="fyle-logo-light" /> | ||
</ion-col> | ||
</ion-row> | ||
</ion-grid> | ||
<div class="disabled--body"> | ||
<div id="disabled--header" class="disabled--body-header">Account Disabled</div> | ||
<img class="disabled--image" src="../../../assets/images/stop.svg" alt="Stop" /> | ||
<div class="disabled--subtext"> | ||
This account is no longer active. Please contact your company admin for details. | ||
<div class="disabled-user"> | ||
<div class="disabled-user__content-container"> | ||
<div class="disabled-user__error-icon-container"> | ||
<ion-icon | ||
class="disabled-user__error-icon" | ||
[src]="'/assets/svg/error-outlined.svg'" | ||
slot="icon-only" | ||
></ion-icon> | ||
</div> | ||
<section class="disabled-user__text"> | ||
<h1 class="disabled-user__header">Account disabled</h1> | ||
<p class="disabled-user__content"> | ||
This account is no longer active. Please contact your company admin for details. | ||
</p> | ||
</section> | ||
</div> | ||
<div class="disabled-user__cta"> | ||
<ion-button | ||
(click)="onGotoSignInClick()" | ||
class="btn-primary" | ||
fill="clear" | ||
aria-label="Navigate back to sign in page" | ||
role="button" | ||
> | ||
<div class="disabled-user__cta-content"> | ||
<ion-icon class="disabled-user__arrow-icon" [src]="'/assets/svg/arrow-left.svg'" slot="icon-only"></ion-icon> | ||
<span class="disabled-user__cta-text">Back to sign in</span> | ||
</div> | ||
</ion-button> | ||
</div> | ||
</div> | ||
</ion-content> | ||
|
||
<ion-footer> | ||
<ion-toolbar mode="md"> | ||
<ion-button fill="clear" expand="full" (click)="onGotoSignInClick()"> | ||
<span class="disabled--greyed"> Incorrect Account? </span> | ||
Try Signing in Again | ||
</ion-button> | ||
</ion-toolbar> | ||
</ion-footer> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,93 +1,80 @@ | ||
$disabled-header: #220033; | ||
$body-header: #000; | ||
$body-subheader: #4a4a4a; | ||
$password-icon: #b9beba; | ||
$secondary-cta-border: #e0e0e0; | ||
@import '../../../theme/colors.scss'; | ||
|
||
.disabled { | ||
&--header { | ||
min-height: 140px; | ||
} | ||
|
||
&--header-container { | ||
min-height: 140px; | ||
background-color: $disabled-header; | ||
} | ||
.disabled-user { | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: space-between; | ||
height: 100%; | ||
|
||
Comment on lines
+3
to
+7
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 💡 Codebase verification Mind it! Your flex container needs some responsive style, macha! Listen here, style superstar! Your flex container is standing tall like a 100% height boss, but without proper responsive styles and overflow handling, it might create trouble on smaller screens. When the content becomes too much, it could overflow like a villain! To make it bulletproof:
Here's the style power-up you need: .disabled-user {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
min-height: 400px; // Adjust based on your content
overflow-y: auto;
} 🔗 Analysis chainAiyoo! This flex container is neat. Using flex with column direction and full height is a wise design choice. However, ensure that the container doesn’t force squashing in smaller screens. Would you like me to check usage for smaller breakpoints across your style files? 🏁 Scripts executedThe following scripts were executed for the analysis: Script: #!/bin/bash
rg -A 5 --iglob '*.scss' 'disabled-user'
Length of output: 397 Script: #!/bin/bash
# Let's check for any media queries or responsive styles
rg -A 10 --iglob '*.scss' '@media.*\{' src/app/auth/disabled/
# Also check if there are any min-height declarations
rg --iglob '*.scss' 'min-height' src/app/auth/disabled/
# And look for any potential overflow handling
rg --iglob '*.scss' 'overflow' src/app/auth/disabled/
Length of output: 173 |
||
&--header-logo-container { | ||
text-align: center; | ||
&__content-container { | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
justify-content: center; | ||
flex-grow: 2; | ||
} | ||
|
||
&--header-logo { | ||
max-width: 100px; | ||
&__arrow-icon { | ||
fill: $pure-white; | ||
margin-right: 8px; | ||
} | ||
|
||
&--body { | ||
padding: 24px; | ||
text-align: center; | ||
&__cta-text { | ||
font-size: 14px; | ||
font-weight: 500; | ||
} | ||
|
||
&--body-field { | ||
width: 100%; | ||
&__cta { | ||
margin: 0 20px 24px 20px; | ||
} | ||
|
||
&--body-header { | ||
font-size: 24px; | ||
margin-top: 16px; | ||
margin-bottom: 8px; | ||
color: $body-header; | ||
font-weight: 700; | ||
&__cta-content { | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
} | ||
|
||
&--image { | ||
max-width: 125px; | ||
padding: 12px; | ||
&__error-icon-container { | ||
width: 60px; | ||
height: 60px; | ||
border-radius: 8px; | ||
background: $pale-pink; | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
margin-bottom: 16px; | ||
} | ||
Comment on lines
+37
to
+45
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🧹 Nitpick (assertive) Nalla idea! The error icon container styling is top-notch. Just be mindful of large error icons on small devices. The margin-bottom of 16px is good, but might you want to make the container responsive? |
||
|
||
&--subtext { | ||
font-size: 16px; | ||
color: $body-subheader; | ||
margin-top: 8px; | ||
margin-bottom: 24px; | ||
&__error-icon { | ||
width: 45px; | ||
height: 45px; | ||
} | ||
|
||
&--primary-cta { | ||
.mat-button-base { | ||
width: 100%; | ||
font-weight: 700; | ||
min-height: 47px; | ||
} | ||
&__text { | ||
display: flex; | ||
align-items: center; | ||
gap: 8px; | ||
flex-direction: column; | ||
} | ||
|
||
&--password-visibility-icon { | ||
color: $password-icon; | ||
&__header { | ||
color: $black; | ||
font-size: 20px; | ||
font-style: normal; | ||
font-weight: 500; | ||
line-height: normal; | ||
height: 26px; | ||
margin: 0; | ||
} | ||
|
||
&--secondary-cta { | ||
.mat-button-base { | ||
width: 100%; | ||
font-weight: 700; | ||
min-height: 47px; | ||
letter-spacing: 1.6px; | ||
border: 1px solid $secondary-cta-border; | ||
} | ||
margin-top: 24px; | ||
} | ||
|
||
&--redirect { | ||
margin: 16px; | ||
&__content { | ||
color: $black-light; | ||
text-align: center; | ||
font-size: 16px; | ||
a { | ||
text-decoration: none; | ||
} | ||
} | ||
|
||
&--edit-email { | ||
text-align: end; | ||
} | ||
|
||
&--greyed { | ||
color: grey; | ||
font-size: 14px; | ||
font-style: normal; | ||
font-weight: 400; | ||
line-height: 1.25; | ||
height: 36px; | ||
width: 274px; | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -17,6 +17,7 @@ import { MatIconModule } from '@angular/material/icon'; | |
import { MatButtonModule } from '@angular/material/button'; | ||
|
||
import { PopupComponent } from './popup/popup.component'; | ||
import { SharedModule } from 'src/app/shared/shared.module'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🧹 Nitpick (assertive) Another mind-blowing SharedModule addition, but watch out! Just like in my movies where I appear in multiple roles, you've got FormsModule appearing twice! Let's make it a blockbuster by fixing this duplicate import! Here's the power-packed fix: imports: [
CommonModule,
- FormsModule,
IonicModule,
NewPasswordPageRoutingModule,
MatFormFieldModule,
MatInputModule,
FormsModule, Also applies to: 34-34 |
||
|
||
@NgModule({ | ||
imports: [ | ||
|
@@ -30,6 +31,7 @@ import { PopupComponent } from './popup/popup.component'; | |
ReactiveFormsModule, | ||
MatIconModule, | ||
MatButtonModule, | ||
SharedModule, | ||
], | ||
declarations: [NewPasswordPage, PopupComponent], | ||
}) | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🧹 Nitpick (assertive)
Enna config, Thalaiva?
This file is empty now. One day it might hold the secrets to your app’s destiny. Keep an eye on it, superstar!