Skip to content

Commit 10ded6e

Browse files
feat: Update login panel icons and styles for improved visual consistency
1 parent dcb864f commit 10ded6e

2 files changed

Lines changed: 18 additions & 4 deletions

File tree

src/app/shared/components/login-panel/login-panel.component.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="login-panel">
22
<div class="login-content">
3-
<div class="login-icon">🔐</div>
3+
<i class="login-icon ti ti-shield-lock"></i>
44
<h2>Welcome to GitHub Security Alerts</h2>
55
<p>Enter your GitHub Personal Access Token to monitor security alerts.</p>
66
<p class="hint">
@@ -12,7 +12,7 @@ <h2>Welcome to GitHub Security Alerts</h2>
1212
(click)="onOpenTokenPage()"
1313
title="Open GitHub token creation page"
1414
>
15-
🔑 Create Token on GitHub
15+
<i class="ti ti-key"></i> Create Token on GitHub
1616
</button>
1717
<div class="token-input-group">
1818
<input
@@ -28,7 +28,7 @@ <h2>Welcome to GitHub Security Alerts</h2>
2828
[disabled]="authLoading || !tokenInput.trim()"
2929
>
3030
<span *ngIf="!authLoading">Connect</span>
31-
<span *ngIf="authLoading"> Connecting...</span>
31+
<span *ngIf="authLoading"><i class="ti ti-loader spinning"></i> Connecting...</span>
3232
</button>
3333
</div>
3434
<p class="error-text" *ngIf="error">{{ error }}</p>

src/app/shared/components/login-panel/login-panel.component.scss

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,9 @@ $border-color: #2a2a4a;
2727
text-align: center;
2828

2929
.login-icon {
30-
font-size: 48px;
30+
font-size: 56px;
3131
margin-bottom: 16px;
32+
color: #4a90d9;
3233
}
3334

3435
h2 {
@@ -80,6 +81,11 @@ $border-color: #2a2a4a;
8081
transition: all 0.2s;
8182
margin: 0 auto 16px;
8283

84+
i {
85+
font-size: 16px;
86+
color: #4a90d9;
87+
}
88+
8389
&:hover {
8490
background: color.adjust($bg-tertiary, $lightness: 5%);
8591
border-color: $accent-color;
@@ -125,6 +131,14 @@ $border-color: #2a2a4a;
125131
font-weight: 500;
126132
cursor: pointer;
127133
transition: background 0.2s;
134+
display: flex;
135+
align-items: center;
136+
justify-content: center;
137+
gap: 6px;
138+
139+
i {
140+
font-size: 16px;
141+
}
128142

129143
&:hover {
130144
background: color.adjust($accent-color, $lightness: -10%);

0 commit comments

Comments
 (0)