From 6241d0cf78d97bc2c5f5d06e05903898eb5f9c82 Mon Sep 17 00:00:00 2001 From: sct Date: Wed, 9 Sep 2020 10:16:19 +0900 Subject: [PATCH] style(frontend): login page styling touchup (#64) --- next.config.js | 13 + package.json | 1 + src/assets/logo.svg | 4 + src/components/Login/index.tsx | 21 +- src/components/PlexLoginButton/index.tsx | 2 +- src/styles/globals.css | 6 +- src/types/custom.d.ts | 24 ++ yarn.lock | 424 +++++++++++++++++++++-- 8 files changed, 462 insertions(+), 33 deletions(-) create mode 100644 next.config.js create mode 100644 src/assets/logo.svg create mode 100644 src/types/custom.d.ts diff --git a/next.config.js b/next.config.js new file mode 100644 index 000000000..a6ea87dfb --- /dev/null +++ b/next.config.js @@ -0,0 +1,13 @@ +module.exports = { + webpack(config) { + config.module.rules.push({ + test: /\.svg$/, + issuer: { + test: /\.(js|ts)x?$/, + }, + use: ['@svgr/webpack'], + }); + + return config; + }, +}; diff --git a/package.json b/package.json index ba0f901a7..40dcf5000 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "start": "NODE_ENV=production node dist/index.js" }, "dependencies": { + "@svgr/webpack": "^5.4.0", "@tailwindcss/ui": "^0.6.0", "axios": "^0.20.0", "body-parser": "^1.19.0", diff --git a/src/assets/logo.svg b/src/assets/logo.svg new file mode 100644 index 000000000..ce93f0ca0 --- /dev/null +++ b/src/assets/logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/Login/index.tsx b/src/components/Login/index.tsx index 6c65909ec..4fb4a7242 100644 --- a/src/components/Login/index.tsx +++ b/src/components/Login/index.tsx @@ -3,6 +3,7 @@ import PlexLoginButton from '../PlexLoginButton'; import { useUser } from '../../hooks/useUser'; import axios from 'axios'; import { useRouter } from 'next/dist/client/router'; +import Logo from '../../assets/logo.svg'; const Login: React.FC = () => { const [authToken, setAuthToken] = useState(undefined); @@ -34,20 +35,20 @@ const Login: React.FC = () => { }, [user, router]); return ( -
-
-
- Overseerr -
-
- would like to sign in to your Plex account -
-
+
+
+ +

+ Log in to continue +

+
+
+
setAuthToken(authToken)} />
- +
); }; diff --git a/src/components/PlexLoginButton/index.tsx b/src/components/PlexLoginButton/index.tsx index 816533eec..1f2add501 100644 --- a/src/components/PlexLoginButton/index.tsx +++ b/src/components/PlexLoginButton/index.tsx @@ -28,7 +28,7 @@ const PlexLoginButton: React.FC = ({ } }; return ( - +