refactor: background image in loginview

web/package.json

@@ -38,6 +38,7 @@
     "autoprefixer": "^10.2.6",
     "css-loader": "^5.2.6",
     "esbuild-loader": "^2.13.1",
+    "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.3.2",
     "mini-css-extract-plugin": "^1.6.2",
     "postcss": "^8.3.5",
@@ -46,6 +47,7 @@
     "ts-node": "^10.0.0",
     "tsconfig-paths": "^3.9.0",
     "typescript": "^4.3.4",
+    "url-loader": "^4.1.1",
     "webpack": "^5.41.0",
     "webpack-cli": "^4.7.2",
     "webpack-dev-server": "^3.11.2"

web/src/App.tsx

@@ -22,7 +22,7 @@ export const App: React.FC = React.memo(() => {
 
   return (
     <div
-      className={clsx({
+      className={clsx('h-screen w-screen', {
         dark: darkMode,
       })}
     >

web/src/routes/Entry/index.tsx

@@ -1,16 +1,21 @@
 import React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import { LoginView } from './LoginView';
+import bgImage from '../../../assets/images/bg.jpg';
 
 export const EntryRoute = React.memo(() => {
   return (
-    <div>
-      <div>
+    <div className="h-full flex flex-row">
+      <div className="w-142 sm:w-full bg-gray-600 text-white">
         <Switch>
           <Route path="/entry/login" component={LoginView} />
           <Redirect to="/entry/login" />
         </Switch>
       </div>
+      <div
+        className="flex-1 sm:hidden bg-center bg-cover bg-no-repeat"
+        style={{ backgroundImage: `url(${bgImage})` }}
+      />
     </div>
   );
 });

web/src/routes/Main.tsx

@@ -19,7 +19,7 @@ const NavbarNavItem: React.FC<{
 
 export const MainRoute: React.FC = React.memo(() => {
   return (
-    <div className="flex h-screen w-screen">
+    <div className="flex">
       <div className="w-16 bg-gray-900 flex flex-col justify-start items-center pt-4 pb-4 p-1">
         {/* Navbar */}
         <div className="flex-1">

web/tailwind.config.js

@@ -8,9 +8,17 @@ module.exports = {
   },
   darkMode: 'class', // or 'media'
   theme: {
+    screens: {
+      'lg': {'min': '1024px'},
+      'md': {'max': '767px'},
+      'sm': {'max': '639px'},
+    },
     extend: {
       borderRadius: {
         "1/2": '50%'
+      },
+      spacing: {
+        "142": "35.5rem"
       }
     },
   },

web/types/index.d.ts

@@ -0,0 +1 @@
+declare module '*.jpg';

web/webpack.config.ts

@@ -68,6 +68,14 @@ const config: Configuration = {
           },
         ],
       },
+      {
+        test: /\.(png|jpg|gif|woff|woff2|svg|eot|ttf)$/,
+        loader: 'url-loader',
+        options: {
+          limit: 8192,
+          name: 'assets/[name].[hash:7].[ext]',
+        },
+      },
     ],
   },
   resolve: {

yarn.lock

@@ -2002,6 +2002,14 @@ figures@^2.0.0:
   dependencies:
     escape-string-regexp "^1.0.5"
 
+file-loader@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz#baef7cf8e1840df325e4390b4484879480eebe4d"
+  integrity sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
 file-uri-to-path@1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
@@ -5339,6 +5347,15 @@ urix@^0.1.0:
   resolved "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
   integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
 
+url-loader@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz#28505e905cae158cf07c92ca622d7f237e70a4e2"
+  integrity sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==
+  dependencies:
+    loader-utils "^2.0.0"
+    mime-types "^2.1.27"
+    schema-utils "^3.0.0"
+
 url-parse@^1.4.3, url-parse@^1.5.1:
   version "1.5.1"
   resolved "https://registry.npmjs.org/url-parse/-/url-parse-1.5.1.tgz#d5fa9890af8a5e1f274a2c98376510f6425f6e3b"