feat: signin page styling

apps/web/next.config.js

@@ -14,6 +14,38 @@ const config = {
   /** We already do linting and typechecking as separate tasks in CI */
   eslint: { ignoreDuringBuilds: true },
   typescript: { ignoreBuildErrors: true },
+
+  webpack(config) {
+    // Grab the existing rule that handles SVG imports
+    const fileLoaderRule = config.module.rules.find((rule) =>
+      rule.test?.test?.(".svg"),
+    );
+
+    config.module.rules.push(
+      // Reapply the existing rule, but only for svg imports ending in ?url
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/, // *.svg?url
+      },
+      // Convert all other *.svg imports to React components
+      {
+        test: /\.svg$/i,
+        issuer: { not: /\.(css|scss|sass)$/ },
+        resourceQuery: { not: /url/ }, // exclude if *.svg?url
+        loader: "@svgr/webpack",
+        options: {
+          dimensions: false,
+          titleProp: true,
+        },
+      },
+    );
+
+    // Modify the file loader rule to ignore *.svg, since we have it handled now.
+    fileLoaderRule.exclude = /\.svg$/i;
+
+    return config;
+  },
 };
 
 export default config;

apps/web/package.json

@@ -26,6 +26,7 @@
     "zod": "^3.23.0"
   },
   "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
     "@tanya.in/eslint-config": "*",
     "@tanya.in/prettier-config": "*",
     "@tanya.in/tsconfig": "*",

apps/web/src/app/sign-in/page.tsx

@@ -1,21 +1,17 @@
-import Image from "next/image";
 import { SigninForm } from "@/components/signin-form";
 
+import ITS from "~/ITS.svg";
+import Logo from "~/logo.svg";
+
 export default function AuthenticationPage() {
   return (
     <div className="container grid h-screen flex-col items-center justify-center lg:max-w-none lg:grid-cols-2 lg:px-0">
-      <div className="relative hidden h-full flex-col bg-muted p-10 dark:border-r lg:flex">
+      <div className="bg-secondary-its dark:bg-primary-its relative hidden h-full flex-col p-10 dark:border-r lg:flex">
         <div className="absolute inset-0" />
         <div className="relative z-20 flex items-center text-lg font-medium">
-          Tanya.in
+          <Logo className="h-9 text-white" />
         </div>
-        <Image
-          src="/ITS.png"
-          alt="Hero"
-          fill
-          className="object-cover"
-          priority
-        />
+        <ITS className="m-auto size-96 text-white" />
         {/* <div className='relative z-20 mt-auto'>
             <blockquote className='space-y-2'>
               <p className='text-lg'>

apps/web/src/components/signin-form.tsx

@@ -45,7 +45,7 @@ export function SigninForm() {
           <Button color="primary" type="submit" className="w-full">
             Login
           </Button>
-          <Button variant="bordered" className="w-full">
+          <Button variant="shadow" color="warning" className="w-full">
             Login with MyITS
           </Button>
         </div>

apps/web/src/styles/globals.css

@@ -24,6 +24,9 @@
     --input: 240 5.9% 90%;
     --ring: 240 5.9% 10%;
     --radius: 0.75rem;
+    --primary-its: 202 100% 38%;
+    --secondary-its: 223 56% 32%;
+    --accent-its: 44 100% 51%;
   }
 
   .dark {

apps/web/tsconfig.json

@@ -1,16 +1,34 @@
 {
   "extends": "@tanya.in/tsconfig/base.json",
   "compilerOptions": {
-    "lib": ["es2022", "dom", "dom.iterable"],
+    "lib": [
+      "es2022",
+      "dom",
+      "dom.iterable"
+    ],
     "jsx": "preserve",
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ],
+      "~/*": [
+        "./public/*"
+      ]
     },
-    "plugins": [{ "name": "next" }],
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
     "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json",
     "module": "esnext"
   },
-  "include": [".", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    ".",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

packages/ui/tailwind.config.ts

@@ -18,20 +18,23 @@ export default {
     },
     extend: {
       colors: {
-        "primary-its": "hsl(202, 100%, 38%)",
-        "secondary-its": "hsl(223, 56%, 32%);",
-        "accent-its": "hsl(44, 100%, 51%)",
+        "primary-its": "hsl(var(--primary-its))",
+        "secondary-its": "hsl(var(--secondary-its))",
+        "accent-its": "hsl(var(--accent-its))",
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
+        warning: {
+          DEFAULT: "hsl(var(--accent-its))",
+        },
         primary: {
-          DEFAULT: "hsl(var(--primary))",
+          DEFAULT: "hsl(var(--primary-its))",
           foreground: "hsl(var(--primary-foreground))",
         },
         secondary: {
-          DEFAULT: "hsl(var(--secondary))",
+          DEFAULT: "hsl(var(--secondary-its))",
           foreground: "hsl(var(--secondary-foreground))",
         },
         destructive: {