[UI] Add Brand Icons to "Continue with Google" and "Continue with GitHub" OAuth Buttons on Login Page

[jikrana1]

Description

The OAuth login buttons ("Continue with Google" and "Continue with GitHub") on the Login page are missing their respective brand icons/logos. Standard practice for OAuth buttons is to display the provider's official icon alongside the text, which improves user trust, recognition, and overall UX.

Screenshot

Expected Behavior

• "Continue with Google" button should display the official Google "G" logo on the left side of the text
• "Continue with GitHub" button should display the GitHub Octocat/mark icon on the left side of the text
• Icons should be properly sized, vertically centered with the text
• Button layout: [Icon] [Text] — icon on left, text centered or left-aligned

Actual Behavior

Both OAuth buttons show only plain text with no brand icons:

• "Continue with Google" — no Google logo
• "Continue with GitHub" — no GitHub icon
• Buttons look generic and do not follow standard OAuth button design patterns

Suggested Fix

HTML — add icons inside buttons:

<!-- Continue with Google -->
<button class="oauth-btn google-btn">
    <img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg" 
         alt="Google" class="oauth-icon" />
    Continue with Google
</button>

<!-- Continue with GitHub -->
<button class="oauth-btn github-btn">
    <i class="fab fa-github oauth-icon"></i>
    Continue with GitHub
</button>

CSS — style the icons:

.oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.oauth-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.google-btn .oauth-icon {
    font-size: 20px;
}

.github-btn .oauth-icon {
    font-size: 20px;
    color: #ffffff;
}

.google-btn:hover {
    background: rgba(234, 67, 53, 0.1);
    border-color: #ea4335;
}

.github-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #ffffff;
}

Affected Area

• Login page (/login)
• "Continue with Google" button
• "Continue with GitHub" button

Additional Notes

• Font Awesome is likely already included in the project (fab fa-github class available)
• Google logo can be loaded via Google's own CDN or added as a local SVG asset
• No change needed to OAuth functionality — only visual icon addition
• Same fix should also be applied to the Register/Signup page if OAuth buttons exist there too

[jikrana1]

Hi ,
please assign to me this issue .
Thank you!