style: login button (#83)

* style: login button

* chore: auto-fix linting and formatting issues

---------

Co-authored-by: hamster1963 <hamster1963@users.noreply.github.com>

src/routes/login.tsx

@@ -8,7 +8,9 @@ import {
     FormLabel,
     FormMessage,
 } from "@/components/ui/form"
+import { GitHubIcon } from "@/components/ui/icon"
 import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
 import { useAuth } from "@/hooks/useAuth"
 import useSetting from "@/hooks/useSetting"
 import { zodResolver } from "@hookform/resolvers/zod"
@@ -99,12 +101,30 @@ function Login() {
                             </FormItem>
                         )}
                     />
-                    <Button type="submit">{t("Login")}</Button>
+                    <Button
+                        type="submit"
+                        className="w-full rounded-lg shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]"
+                    >
+                        {t("Login")}
+                    </Button>
                 </form>
+                <section className="flex items-center my-3 w-full">
+                    <Separator className="flex-1" />
+                    <div className="flex justify-center text-xs text-muted-foreground w-full max-w-[100px]">
+                        OAuth2
+                    </div>
+                    <Separator className="flex-1" />
+                </section>
             </Form>
-            <div className="mt-4">
+            <div className="mt-3">
                 {settingData?.config?.oauth2_providers?.map((p: string) => (
-                    <Button onClick={() => loginWith(p)}>{p}</Button>
+                    <Button
+                        className="w-full rounded-lg shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] bg-muted text-primary hover:bg-muted/80 hover:text-primary/80"
+                        onClick={() => loginWith(p)}
+                    >
+                        {p === "GitHub" && <GitHubIcon className="-mt-[1px] size-4" />}
+                        {p}
+                    </Button>
                 ))}
             </div>
         </div>