From 65a4422c1d9b233468ffc9c506e827a45178e737 Mon Sep 17 00:00:00 2001
From: Graphictoria <support@gtoria.net>
Date: Fri, 5 Nov 2021 18:43:12 -0400
Subject: [PATCH] redis cache + other stuff

---
 web/app/Http/Controllers/BannerController.php |  29 +-
 web/composer.json                             |   5 +-
 web/composer.lock                             | 188 +++--
 web/config/app.php                            |   4 +-
 web/config/database.php                       |   2 +-
 .../2021_11_05_221042_create_cache_table.php  |  39 +
 web/docker-compose.yml                        |  49 ++
 web/package-lock.json                         | 726 ++++++++++++++++--
 web/package.json                              |   3 +
 web/public/mix-manifest.json                  |   2 +-
 web/resources/js/components/Navbar.js         |  56 +-
 ...hictoria.scss => Graphictoria.module.scss} |   0
 web/webpack.mix.js                            |   2 +-
 13 files changed, 939 insertions(+), 166 deletions(-)
 create mode 100644 web/database/migrations/2021_11_05_221042_create_cache_table.php
 create mode 100644 web/docker-compose.yml
 rename web/resources/sass/{Graphictoria.scss => Graphictoria.module.scss} (100%)

diff --git a/web/app/Http/Controllers/BannerController.php b/web/app/Http/Controllers/BannerController.php
index 6580132..cc056e5 100644
--- a/web/app/Http/Controllers/BannerController.php
+++ b/web/app/Http/Controllers/BannerController.php
@@ -4,6 +4,7 @@ namespace App\Http\Controllers;
 
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Cache;
 
 use App\Models\Banner;
 
@@ -16,12 +17,28 @@ class BannerController extends Controller
      */
     public function getBanners()
     {
-		$banners = Banner::select('type', 'message as text', 'dismissable')
-					->get();
+		$redis = Cache::store('redis');
+		$content = '[{}]'; // fallback
 		
-        return response()->json($banners)
-				->header('Access-Control-Allow-Origin', env('APP_URL'))
-				->header('Vary', 'origin')
-				->header('Content-Type', 'application/json');
+		if($bannerSettings = $redis->get('bannerSetting'))
+		{
+			$content = $bannerSettings;
+		}
+		else
+		{
+			$banners = Banner::select('type', 'message as text', 'dismissable')
+						->get();
+			
+			$response = $banners->toJson();
+			
+			$redis->put('bannerSetting', $response, now()->addMinutes(5));
+			
+			$content = $response;
+		}
+		
+		return response($content)
+					->header('Access-Control-Allow-Origin', env('APP_URL'))
+					->header('Vary', 'origin')
+					->header('Content-Type', 'application/json');
     }
 }
diff --git a/web/composer.json b/web/composer.json
index fb2a803..1b84c54 100644
--- a/web/composer.json
+++ b/web/composer.json
@@ -10,14 +10,15 @@
         "fruitcake/laravel-cors": "^2.0",
         "guzzlehttp/guzzle": "^7.0.1",
         "laravel/framework": "^8.54",
+        "laravel/sail": "^1.12",
         "laravel/sanctum": "^2.11",
         "laravel/tinker": "^2.5",
-        "laravel/ui": "^3.3"
+        "laravel/ui": "^3.3",
+        "predis/predis": "^1.1"
     },
     "require-dev": {
         "facade/ignition": "^2.5",
         "fakerphp/faker": "^1.9.1",
-        "laravel/sail": "^1.0.1",
         "mockery/mockery": "^1.4.2",
         "nunomaduro/collision": "^5.0",
         "phpunit/phpunit": "^9.3.3"
diff --git a/web/composer.lock b/web/composer.lock
index ccf7af7..a61a8e0 100644
--- a/web/composer.lock
+++ b/web/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "c45d38644e938e892fde3ff3da0b22a1",
+    "content-hash": "eae1aa1a609fc45f372619bc8e23cafc",
     "packages": [
         {
             "name": "asm89/stack-cors",
@@ -1105,6 +1105,66 @@
             },
             "time": "2021-08-31T13:55:57+00:00"
         },
+        {
+            "name": "laravel/sail",
+            "version": "v1.12.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/laravel/sail.git",
+                "reference": "1acae00ddb5c6ec4a2957fe42c0004f13cd17a7a"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/laravel/sail/zipball/1acae00ddb5c6ec4a2957fe42c0004f13cd17a7a",
+                "reference": "1acae00ddb5c6ec4a2957fe42c0004f13cd17a7a",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/console": "^8.0|^9.0",
+                "illuminate/contracts": "^8.0|^9.0",
+                "illuminate/support": "^8.0|^9.0",
+                "php": "^7.3|^8.0"
+            },
+            "bin": [
+                "bin/sail"
+            ],
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.x-dev"
+                },
+                "laravel": {
+                    "providers": [
+                        "Laravel\\Sail\\SailServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Laravel\\Sail\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Taylor Otwell",
+                    "email": "taylor@laravel.com"
+                }
+            ],
+            "description": "Docker files for running a basic Laravel application.",
+            "keywords": [
+                "docker",
+                "laravel"
+            ],
+            "support": {
+                "issues": "https://github.com/laravel/sail/issues",
+                "source": "https://github.com/laravel/sail"
+            },
+            "time": "2021-10-26T21:37:54+00:00"
+        },
         {
             "name": "laravel/sanctum",
             "version": "v2.11.2",
@@ -2165,6 +2225,72 @@
             ],
             "time": "2021-08-28T21:27:29+00:00"
         },
+        {
+            "name": "predis/predis",
+            "version": "v1.1.9",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/predis/predis.git",
+                "reference": "c50c3393bb9f47fa012d0cdfb727a266b0818259"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/predis/predis/zipball/c50c3393bb9f47fa012d0cdfb727a266b0818259",
+                "reference": "c50c3393bb9f47fa012d0cdfb727a266b0818259",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.3.9"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "~4.8"
+            },
+            "suggest": {
+                "ext-curl": "Allows access to Webdis when paired with phpiredis",
+                "ext-phpiredis": "Allows faster serialization and deserialization of the Redis protocol"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Predis\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Daniele Alessandri",
+                    "email": "suppakilla@gmail.com",
+                    "homepage": "http://clorophilla.net",
+                    "role": "Creator & Maintainer"
+                },
+                {
+                    "name": "Till Krüss",
+                    "homepage": "https://till.im",
+                    "role": "Maintainer"
+                }
+            ],
+            "description": "Flexible and feature-complete Redis client for PHP and HHVM",
+            "homepage": "http://github.com/predis/predis",
+            "keywords": [
+                "nosql",
+                "predis",
+                "redis"
+            ],
+            "support": {
+                "issues": "https://github.com/predis/predis/issues",
+                "source": "https://github.com/predis/predis/tree/v1.1.9"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/sponsors/tillkruss",
+                    "type": "github"
+                }
+            ],
+            "time": "2021-10-05T19:02:38+00:00"
+        },
         {
             "name": "psr/container",
             "version": "1.1.1",
@@ -5866,66 +5992,6 @@
             },
             "time": "2020-07-09T08:09:16+00:00"
         },
-        {
-            "name": "laravel/sail",
-            "version": "v1.10.1",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/laravel/sail.git",
-                "reference": "267fafeaf0e0311952316ae0f3c765abc7516469"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/laravel/sail/zipball/267fafeaf0e0311952316ae0f3c765abc7516469",
-                "reference": "267fafeaf0e0311952316ae0f3c765abc7516469",
-                "shasum": ""
-            },
-            "require": {
-                "illuminate/console": "^8.0|^9.0",
-                "illuminate/contracts": "^8.0|^9.0",
-                "illuminate/support": "^8.0|^9.0",
-                "php": "^7.3|^8.0"
-            },
-            "bin": [
-                "bin/sail"
-            ],
-            "type": "library",
-            "extra": {
-                "branch-alias": {
-                    "dev-master": "1.x-dev"
-                },
-                "laravel": {
-                    "providers": [
-                        "Laravel\\Sail\\SailServiceProvider"
-                    ]
-                }
-            },
-            "autoload": {
-                "psr-4": {
-                    "Laravel\\Sail\\": "src/"
-                }
-            },
-            "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
-            "authors": [
-                {
-                    "name": "Taylor Otwell",
-                    "email": "taylor@laravel.com"
-                }
-            ],
-            "description": "Docker files for running a basic Laravel application.",
-            "keywords": [
-                "docker",
-                "laravel"
-            ],
-            "support": {
-                "issues": "https://github.com/laravel/sail/issues",
-                "source": "https://github.com/laravel/sail"
-            },
-            "time": "2021-08-23T13:43:27+00:00"
-        },
         {
             "name": "mockery/mockery",
             "version": "1.4.3",
diff --git a/web/config/app.php b/web/config/app.php
index c9b8f5a..168b732 100644
--- a/web/config/app.php
+++ b/web/config/app.php
@@ -13,7 +13,7 @@ return [
     |
     */
 
-    'name' => env('APP_NAME', 'Laravel'),
+    'name' => env('APP_NAME', 'Graphictoria'),
 
     /*
     |--------------------------------------------------------------------------
@@ -52,7 +52,7 @@ return [
     |
     */
 
-    'url' => env('APP_URL', 'http://localhost'),
+    'url' => env('APP_URL', 'http://gtoria.local'),
 
     'asset_url' => env('ASSET_URL', null),
 
diff --git a/web/config/database.php b/web/config/database.php
index b42d9b3..66d8670 100644
--- a/web/config/database.php
+++ b/web/config/database.php
@@ -119,7 +119,7 @@ return [
 
     'redis' => [
 
-        'client' => env('REDIS_CLIENT', 'phpredis'),
+        'client' => env('REDIS_CLIENT', 'predis'),
 
         'options' => [
             'cluster' => env('REDIS_CLUSTER', 'redis'),
diff --git a/web/database/migrations/2021_11_05_221042_create_cache_table.php b/web/database/migrations/2021_11_05_221042_create_cache_table.php
new file mode 100644
index 0000000..88cd445
--- /dev/null
+++ b/web/database/migrations/2021_11_05_221042_create_cache_table.php
@@ -0,0 +1,39 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateCacheTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('cache', function (Blueprint $table) {
+            $table->string('key')->primary();
+            $table->mediumText('value');
+            $table->integer('expiration');
+        });
+
+        Schema::create('cache_locks', function (Blueprint $table) {
+            $table->string('key')->primary();
+            $table->string('owner');
+            $table->integer('expiration');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('cache');
+        Schema::dropIfExists('cache_locks');
+    }
+}
diff --git a/web/docker-compose.yml b/web/docker-compose.yml
new file mode 100644
index 0000000..d36b9d5
--- /dev/null
+++ b/web/docker-compose.yml
@@ -0,0 +1,49 @@
+# For more information: https://laravel.com/docs/sail
+version: '3'
+services:
+    laravel.test:
+        build:
+            context: ./vendor/laravel/sail/runtimes/8.0
+            dockerfile: Dockerfile
+            args:
+                WWWGROUP: '${WWWGROUP}'
+        image: sail-8.0/app
+        extra_hosts:
+            - 'host.docker.internal:host-gateway'
+        ports:
+            - '${APP_PORT:-80}:80'
+        environment:
+            WWWUSER: '${WWWUSER}'
+            LARAVEL_SAIL: 1
+            XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
+            XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
+        volumes:
+            - '.:/var/www/html'
+        networks:
+            - sail
+        depends_on:
+            - mariadb
+    mariadb:
+        image: 'mariadb:10'
+        ports:
+            - '${FORWARD_DB_PORT:-3306}:3306'
+        environment:
+            MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
+            MYSQL_DATABASE: '${DB_DATABASE}'
+            MYSQL_USER: '${DB_USERNAME}'
+            MYSQL_PASSWORD: '${DB_PASSWORD}'
+            MYSQL_ALLOW_EMPTY_PASSWORD: 'yes'
+        volumes:
+            - 'sailmariadb:/var/lib/mysql'
+        networks:
+            - sail
+        healthcheck:
+            test: ["CMD", "mysqladmin", "ping", "-p${DB_PASSWORD}"]
+            retries: 3
+            timeout: 5s
+networks:
+    sail:
+        driver: bridge
+volumes:
+    sailmariadb:
+        driver: local
diff --git a/web/package-lock.json b/web/package-lock.json
index b5dfa81..e3dd7f8 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -1402,8 +1402,7 @@
         "@types/json-schema": {
             "version": "7.0.9",
             "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
-            "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
-            "dev": true
+            "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ=="
         },
         "@types/minimatch": {
             "version": "3.0.5",
@@ -1673,7 +1672,6 @@
             "version": "6.12.6",
             "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
             "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-            "dev": true,
             "requires": {
                 "fast-deep-equal": "^3.1.1",
                 "fast-json-stable-stringify": "^2.0.0",
@@ -1684,8 +1682,7 @@
         "ajv-keywords": {
             "version": "3.5.2",
             "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-            "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-            "dev": true
+            "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ=="
         },
         "alphanum-sort": {
             "version": "1.0.2",
@@ -1882,6 +1879,87 @@
                 "@babel/helper-define-polyfill-provider": "^0.2.2"
             }
         },
+        "babel-plugin-react-css-modules": {
+            "version": "3.4.2",
+            "resolved": "https://registry.npmjs.org/babel-plugin-react-css-modules/-/babel-plugin-react-css-modules-3.4.2.tgz",
+            "integrity": "sha512-pU7owkj5IO6rlleRzaF27ME/eCG7ZhO+EM+WfthfeykYe0eZzK51JD7nlcUr4UU9y4Zlc+QsTH+139L7PSwYtQ==",
+            "requires": {
+                "ajv": "^6.5.0",
+                "ajv-keywords": "^3.2.0",
+                "babel-plugin-syntax-jsx": "^6.18.0",
+                "babel-types": "^6.26.0",
+                "generic-names": "^1.0.3",
+                "postcss": "^6.0.22",
+                "postcss-modules": "^1.1.0",
+                "postcss-modules-extract-imports": "^1.1.0",
+                "postcss-modules-local-by-default": "^1.2.0",
+                "postcss-modules-parser": "^1.1.1",
+                "postcss-modules-scope": "^1.1.0",
+                "postcss-modules-values": "^1.3.0"
+            },
+            "dependencies": {
+                "chalk": {
+                    "version": "2.4.2",
+                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+                    "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+                    "requires": {
+                        "ansi-styles": "^3.2.1",
+                        "escape-string-regexp": "^1.0.5",
+                        "supports-color": "^5.3.0"
+                    }
+                },
+                "postcss": {
+                    "version": "6.0.23",
+                    "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+                    "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+                    "requires": {
+                        "chalk": "^2.4.1",
+                        "source-map": "^0.6.1",
+                        "supports-color": "^5.4.0"
+                    }
+                },
+                "postcss-modules-extract-imports": {
+                    "version": "1.2.1",
+                    "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.1.tgz",
+                    "integrity": "sha512-6jt9XZwUhwmRUhb/CkyJY020PYaPJsCyt3UjbaWo6XEbH/94Hmv6MP7fG2C5NDU/BcHzyGYxNtHvM+LTf9HrYw==",
+                    "requires": {
+                        "postcss": "^6.0.1"
+                    }
+                },
+                "postcss-modules-local-by-default": {
+                    "version": "1.2.0",
+                    "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz",
+                    "integrity": "sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=",
+                    "requires": {
+                        "css-selector-tokenizer": "^0.7.0",
+                        "postcss": "^6.0.1"
+                    }
+                },
+                "postcss-modules-scope": {
+                    "version": "1.1.0",
+                    "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz",
+                    "integrity": "sha1-1upkmUx5+XtipytCb75gVqGUu5A=",
+                    "requires": {
+                        "css-selector-tokenizer": "^0.7.0",
+                        "postcss": "^6.0.1"
+                    }
+                },
+                "postcss-modules-values": {
+                    "version": "1.3.0",
+                    "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz",
+                    "integrity": "sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=",
+                    "requires": {
+                        "icss-replace-symbols": "^1.1.0",
+                        "postcss": "^6.0.1"
+                    }
+                },
+                "source-map": {
+                    "version": "0.6.1",
+                    "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+                    "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+                }
+            }
+        },
         "babel-plugin-styled-components": {
             "version": "1.13.2",
             "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.2.tgz",
@@ -1898,6 +1976,40 @@
             "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
             "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
         },
+        "babel-runtime": {
+            "version": "6.26.0",
+            "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+            "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+            "requires": {
+                "core-js": "^2.4.0",
+                "regenerator-runtime": "^0.11.0"
+            },
+            "dependencies": {
+                "regenerator-runtime": {
+                    "version": "0.11.1",
+                    "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+                    "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+                }
+            }
+        },
+        "babel-types": {
+            "version": "6.26.0",
+            "resolved": "https://registry.npmjs.org/babel-types/-/babel-types-6.26.0.tgz",
+            "integrity": "sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=",
+            "requires": {
+                "babel-runtime": "^6.26.0",
+                "esutils": "^2.0.2",
+                "lodash": "^4.17.4",
+                "to-fast-properties": "^1.0.3"
+            },
+            "dependencies": {
+                "to-fast-properties": {
+                    "version": "1.0.3",
+                    "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz",
+                    "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc="
+                }
+            }
+        },
         "balanced-match": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1919,8 +2031,7 @@
         "big.js": {
             "version": "5.2.2",
             "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-            "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
-            "dev": true
+            "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ=="
         },
         "binary-extensions": {
             "version": "2.2.0",
@@ -2546,6 +2657,11 @@
             "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
             "dev": true
         },
+        "core-js": {
+            "version": "2.6.12",
+            "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+            "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+        },
         "core-js-compat": {
             "version": "3.17.2",
             "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.17.2.tgz",
@@ -2685,43 +2801,127 @@
             }
         },
         "css-loader": {
-            "version": "5.2.7",
-            "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.2.7.tgz",
-            "integrity": "sha512-Q7mOvpBNBG7YrVGMxRxcBJZFL75o+cH2abNASdibkj/fffYD8qWbInZrD0S9ccI6vZclF3DsHE7njGlLtaHbhg==",
+            "version": "6.4.0",
+            "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.4.0.tgz",
+            "integrity": "sha512-Dlt6qfsxI/w1vU0r8qDd4BtMPxWqJeY5qQU7SmmZfvbpe6Xl18McO4GhyaMLns24Y2VNPiZwJPQ8JSbg4qvQLw==",
             "dev": true,
             "requires": {
                 "icss-utils": "^5.1.0",
-                "loader-utils": "^2.0.0",
                 "postcss": "^8.2.15",
                 "postcss-modules-extract-imports": "^3.0.0",
                 "postcss-modules-local-by-default": "^4.0.0",
                 "postcss-modules-scope": "^3.0.0",
                 "postcss-modules-values": "^4.0.0",
                 "postcss-value-parser": "^4.1.0",
-                "schema-utils": "^3.0.0",
                 "semver": "^7.3.5"
+            }
+        },
+        "css-modules-loader-core": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/css-modules-loader-core/-/css-modules-loader-core-1.1.0.tgz",
+            "integrity": "sha1-WQhmgpShvs0mGuCkziGwtVHyHRY=",
+            "requires": {
+                "icss-replace-symbols": "1.1.0",
+                "postcss": "6.0.1",
+                "postcss-modules-extract-imports": "1.1.0",
+                "postcss-modules-local-by-default": "1.2.0",
+                "postcss-modules-scope": "1.1.0",
+                "postcss-modules-values": "1.3.0"
             },
             "dependencies": {
-                "loader-utils": {
-                    "version": "2.0.0",
-                    "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-                    "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-                    "dev": true,
+                "ansi-regex": {
+                    "version": "2.1.1",
+                    "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+                    "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
+                },
+                "ansi-styles": {
+                    "version": "2.2.1",
+                    "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+                    "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
+                },
+                "chalk": {
+                    "version": "1.1.3",
+                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+                    "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
                     "requires": {
-                        "big.js": "^5.2.2",
-                        "emojis-list": "^3.0.0",
-                        "json5": "^2.1.2"
+                        "ansi-styles": "^2.2.1",
+                        "escape-string-regexp": "^1.0.2",
+                        "has-ansi": "^2.0.0",
+                        "strip-ansi": "^3.0.0",
+                        "supports-color": "^2.0.0"
+                    },
+                    "dependencies": {
+                        "supports-color": {
+                            "version": "2.0.0",
+                            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+                            "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+                        }
                     }
                 },
-                "schema-utils": {
-                    "version": "3.1.1",
-                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
-                    "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
-                    "dev": true,
+                "has-flag": {
+                    "version": "1.0.0",
+                    "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
+                    "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo="
+                },
+                "postcss": {
+                    "version": "6.0.1",
+                    "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.1.tgz",
+                    "integrity": "sha1-AA29H47vIXqjaLmiEsX8QLKo8/I=",
                     "requires": {
-                        "@types/json-schema": "^7.0.8",
-                        "ajv": "^6.12.5",
-                        "ajv-keywords": "^3.5.2"
+                        "chalk": "^1.1.3",
+                        "source-map": "^0.5.6",
+                        "supports-color": "^3.2.3"
+                    }
+                },
+                "postcss-modules-extract-imports": {
+                    "version": "1.1.0",
+                    "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.1.0.tgz",
+                    "integrity": "sha1-thTJcgvmgW6u41+zpfqh26agXds=",
+                    "requires": {
+                        "postcss": "^6.0.1"
+                    }
+                },
+                "postcss-modules-local-by-default": {
+                    "version": "1.2.0",
+                    "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz",
+                    "integrity": "sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=",
+                    "requires": {
+                        "css-selector-tokenizer": "^0.7.0",
+                        "postcss": "^6.0.1"
+                    }
+                },
+                "postcss-modules-scope": {
+                    "version": "1.1.0",
+                    "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz",
+                    "integrity": "sha1-1upkmUx5+XtipytCb75gVqGUu5A=",
+                    "requires": {
+                        "css-selector-tokenizer": "^0.7.0",
+                        "postcss": "^6.0.1"
+                    }
+                },
+                "postcss-modules-values": {
+                    "version": "1.3.0",
+                    "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz",
+                    "integrity": "sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=",
+                    "requires": {
+                        "icss-replace-symbols": "^1.1.0",
+                        "postcss": "^6.0.1"
+                    }
+                },
+                "strip-ansi": {
+                    "version": "3.0.1",
+                    "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+                    "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+                    "requires": {
+                        "ansi-regex": "^2.0.0"
+                    }
+                },
+                "supports-color": {
+                    "version": "3.2.3",
+                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
+                    "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
+                    "requires": {
+                        "has-flag": "^1.0.0"
                     }
                 }
             }
@@ -2739,6 +2939,15 @@
                 "nth-check": "^2.0.0"
             }
         },
+        "css-selector-tokenizer": {
+            "version": "0.7.3",
+            "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.3.tgz",
+            "integrity": "sha512-jWQv3oCEL5kMErj4wRnK/OPoBi0D+P1FR2cDCKYPaMeD2eW3/mttav8HT4hT1CKopiJI/psEULjkClhvJo4Lvg==",
+            "requires": {
+                "cssesc": "^3.0.0",
+                "fastparse": "^1.1.2"
+            }
+        },
         "css-to-react-native": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
@@ -2776,8 +2985,7 @@
         "cssesc": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-            "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-            "dev": true
+            "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
         },
         "cssnano": {
             "version": "5.0.8",
@@ -3069,6 +3277,14 @@
                 "tslib": "^2.0.3"
             }
         },
+        "dot-prop": {
+            "version": "5.3.0",
+            "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
+            "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==",
+            "requires": {
+                "is-obj": "^2.0.0"
+            }
+        },
         "dotenv": {
             "version": "10.0.0",
             "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
@@ -3125,8 +3341,7 @@
         "emojis-list": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-            "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-            "dev": true
+            "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q=="
         },
         "encodeurl": {
             "version": "1.0.2",
@@ -3224,8 +3439,7 @@
         "esutils": {
             "version": "2.0.3",
             "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
-            "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-            "dev": true
+            "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="
         },
         "etag": {
             "version": "1.8.1",
@@ -3336,8 +3550,7 @@
         "fast-deep-equal": {
             "version": "3.1.3",
             "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-            "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-            "dev": true
+            "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
         },
         "fast-glob": {
             "version": "3.2.7",
@@ -3355,8 +3568,7 @@
         "fast-json-stable-stringify": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-            "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-            "dev": true
+            "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
         },
         "fastest-levenshtein": {
             "version": "1.0.12",
@@ -3364,6 +3576,11 @@
             "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==",
             "dev": true
         },
+        "fastparse": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
+            "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ=="
+        },
         "fastq": {
             "version": "1.12.0",
             "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.12.0.tgz",
@@ -3553,6 +3770,42 @@
             "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
             "dev": true
         },
+        "generic-names": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/generic-names/-/generic-names-1.0.3.tgz",
+            "integrity": "sha1-LXhqEhruUIh2eWk56OO/+DbCCRc=",
+            "requires": {
+                "loader-utils": "^0.2.16"
+            },
+            "dependencies": {
+                "big.js": {
+                    "version": "3.2.0",
+                    "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",
+                    "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q=="
+                },
+                "emojis-list": {
+                    "version": "2.1.0",
+                    "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
+                    "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k="
+                },
+                "json5": {
+                    "version": "0.5.1",
+                    "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+                    "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE="
+                },
+                "loader-utils": {
+                    "version": "0.2.17",
+                    "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
+                    "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
+                    "requires": {
+                        "big.js": "^3.1.3",
+                        "emojis-list": "^2.0.0",
+                        "json5": "^0.5.0",
+                        "object-assign": "^4.0.1"
+                    }
+                }
+            }
+        },
         "gensync": {
             "version": "1.0.0-beta.2",
             "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -3659,6 +3912,21 @@
                 "function-bind": "^1.1.1"
             }
         },
+        "has-ansi": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+            "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
+            "requires": {
+                "ansi-regex": "^2.0.0"
+            },
+            "dependencies": {
+                "ansi-regex": {
+                    "version": "2.1.1",
+                    "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+                    "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
+                }
+            }
+        },
         "has-flag": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -3976,6 +4244,11 @@
                 "safer-buffer": ">= 2.1.2 < 3"
             }
         },
+        "icss-replace-symbols": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
+            "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0="
+        },
         "icss-utils": {
             "version": "5.1.0",
             "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
@@ -4070,6 +4343,11 @@
             "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
             "dev": true
         },
+        "indexes-of": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
+            "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc="
+        },
         "inflight": {
             "version": "1.0.6",
             "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -4227,6 +4505,11 @@
             "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
             "dev": true
         },
+        "is-obj": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
+            "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w=="
+        },
         "is-path-cwd": {
             "version": "2.2.0",
             "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
@@ -4337,6 +4620,11 @@
             "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
             "dev": true
         },
+        "js-base64": {
+            "version": "2.6.4",
+            "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
+            "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ=="
+        },
         "js-tokens": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -4362,8 +4650,7 @@
         "json-schema-traverse": {
             "version": "0.4.1",
             "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-            "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-            "dev": true
+            "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
         },
         "json5": {
             "version": "2.2.0",
@@ -4458,6 +4745,59 @@
                 "webpack-notifier": "^1.13.0",
                 "webpackbar": "^5.0.0-3",
                 "yargs": "^17.0.1"
+            },
+            "dependencies": {
+                "css-loader": {
+                    "version": "5.2.7",
+                    "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.2.7.tgz",
+                    "integrity": "sha512-Q7mOvpBNBG7YrVGMxRxcBJZFL75o+cH2abNASdibkj/fffYD8qWbInZrD0S9ccI6vZclF3DsHE7njGlLtaHbhg==",
+                    "dev": true,
+                    "requires": {
+                        "icss-utils": "^5.1.0",
+                        "loader-utils": "^2.0.0",
+                        "postcss": "^8.2.15",
+                        "postcss-modules-extract-imports": "^3.0.0",
+                        "postcss-modules-local-by-default": "^4.0.0",
+                        "postcss-modules-scope": "^3.0.0",
+                        "postcss-modules-values": "^4.0.0",
+                        "postcss-value-parser": "^4.1.0",
+                        "schema-utils": "^3.0.0",
+                        "semver": "^7.3.5"
+                    }
+                },
+                "loader-utils": {
+                    "version": "2.0.0",
+                    "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+                    "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+                    "dev": true,
+                    "requires": {
+                        "big.js": "^5.2.2",
+                        "emojis-list": "^3.0.0",
+                        "json5": "^2.1.2"
+                    }
+                },
+                "mini-css-extract-plugin": {
+                    "version": "1.6.2",
+                    "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.2.tgz",
+                    "integrity": "sha512-WhDvO3SjGm40oV5y26GjMJYjd2UMqrLAGKy5YS2/3QKJy2F7jgynuHTir/tgUUOiNQu5saXHdc8reo7YuhhT4Q==",
+                    "dev": true,
+                    "requires": {
+                        "loader-utils": "^2.0.0",
+                        "schema-utils": "^3.0.0",
+                        "webpack-sources": "^1.1.0"
+                    }
+                },
+                "schema-utils": {
+                    "version": "3.1.1",
+                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+                    "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+                    "dev": true,
+                    "requires": {
+                        "@types/json-schema": "^7.0.8",
+                        "ajv": "^6.12.5",
+                        "ajv-keywords": "^3.5.2"
+                    }
+                }
             }
         },
         "laravel-mix-banner": {
@@ -4466,6 +4806,16 @@
             "integrity": "sha512-GXLohbaRdFbS5cmaqlOJb45RlDe7n//AdVkOrO4c/citt+A4jmQ2BxeJdni6tGOyFVnEKtZRuYVyzyKdd2DOpg==",
             "dev": true
         },
+        "laravel-mix-react-css-modules": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/laravel-mix-react-css-modules/-/laravel-mix-react-css-modules-2.0.0.tgz",
+            "integrity": "sha512-wd2oFNr1X3B+UnFAMP+aAvewOFTl4V1nWwswBe/X3mB3M5bLUu61ygTXQ0hDU7FeuEB/wj53YKwgEaMJyNYHhA==",
+            "requires": {
+                "babel-plugin-react-css-modules": "^3.4.2",
+                "postcss-nested": "^3.0.0",
+                "postcss-scss": "^1.0.6"
+            }
+        },
         "lilconfig": {
             "version": "2.0.3",
             "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.3.tgz",
@@ -4488,7 +4838,6 @@
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
             "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
-            "dev": true,
             "requires": {
                 "big.js": "^5.2.2",
                 "emojis-list": "^3.0.0",
@@ -4499,7 +4848,6 @@
                     "version": "1.0.1",
                     "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
                     "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-                    "dev": true,
                     "requires": {
                         "minimist": "^1.2.0"
                     }
@@ -4520,12 +4868,71 @@
             "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
             "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
         },
+        "lodash._arrayeach": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/lodash._arrayeach/-/lodash._arrayeach-3.0.0.tgz",
+            "integrity": "sha1-urFWsqkNPxu9XGU0AzSeXlkz754="
+        },
+        "lodash._baseeach": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/lodash._baseeach/-/lodash._baseeach-3.0.4.tgz",
+            "integrity": "sha1-z4cGVyyhROjZ11InyZDamC+TKvM=",
+            "requires": {
+                "lodash.keys": "^3.0.0"
+            }
+        },
+        "lodash._bindcallback": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz",
+            "integrity": "sha1-5THCdkTPi1epnhftlbNcdIeJOS4="
+        },
+        "lodash._getnative": {
+            "version": "3.9.1",
+            "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
+            "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U="
+        },
+        "lodash.camelcase": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+            "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY="
+        },
         "lodash.debounce": {
             "version": "4.0.8",
             "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
             "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
             "dev": true
         },
+        "lodash.foreach": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-3.0.3.tgz",
+            "integrity": "sha1-b9fvt5aRrs1n/erCdhyY5wHWw5o=",
+            "requires": {
+                "lodash._arrayeach": "^3.0.0",
+                "lodash._baseeach": "^3.0.0",
+                "lodash._bindcallback": "^3.0.0",
+                "lodash.isarray": "^3.0.0"
+            }
+        },
+        "lodash.isarguments": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
+            "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo="
+        },
+        "lodash.isarray": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
+            "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U="
+        },
+        "lodash.keys": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
+            "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=",
+            "requires": {
+                "lodash._getnative": "^3.0.0",
+                "lodash.isarguments": "^3.0.0",
+                "lodash.isarray": "^3.0.0"
+            }
+        },
         "lodash.memoize": {
             "version": "4.1.2",
             "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -4741,32 +5148,17 @@
             }
         },
         "mini-css-extract-plugin": {
-            "version": "1.6.2",
-            "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.2.tgz",
-            "integrity": "sha512-WhDvO3SjGm40oV5y26GjMJYjd2UMqrLAGKy5YS2/3QKJy2F7jgynuHTir/tgUUOiNQu5saXHdc8reo7YuhhT4Q==",
-            "dev": true,
+            "version": "2.4.3",
+            "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.4.3.tgz",
+            "integrity": "sha512-zekavl9mZuGyk7COjsfFY/f655AX61EKE0AthXPrmDk+oZyjZ9WzO4WPjXnnO9xl8obK2kmM6rAQrBEmk+WK1g==",
             "requires": {
-                "loader-utils": "^2.0.0",
-                "schema-utils": "^3.0.0",
-                "webpack-sources": "^1.1.0"
+                "schema-utils": "^3.1.0"
             },
             "dependencies": {
-                "loader-utils": {
-                    "version": "2.0.0",
-                    "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-                    "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-                    "dev": true,
-                    "requires": {
-                        "big.js": "^5.2.2",
-                        "emojis-list": "^3.0.0",
-                        "json5": "^2.1.2"
-                    }
-                },
                 "schema-utils": {
                     "version": "3.1.1",
                     "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
                     "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
-                    "dev": true,
                     "requires": {
                         "@types/json-schema": "^7.0.8",
                         "ajv": "^6.12.5",
@@ -4799,8 +5191,7 @@
         "minimist": {
             "version": "1.2.5",
             "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-            "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-            "dev": true
+            "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
         },
         "mkdirp": {
             "version": "0.5.5",
@@ -5258,6 +5649,11 @@
                 "sha.js": "^2.4.8"
             }
         },
+        "picocolors": {
+            "version": "0.2.1",
+            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+            "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA=="
+        },
         "picomatch": {
             "version": "2.3.0",
             "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
@@ -5450,6 +5846,42 @@
                 "postcss-selector-parser": "^6.0.5"
             }
         },
+        "postcss-modules": {
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/postcss-modules/-/postcss-modules-1.5.0.tgz",
+            "integrity": "sha512-KiAihzcV0TxTTNA5OXreyIXctuHOfR50WIhqBpc8pe0Q5dcs/Uap9EVlifOI9am7zGGdGOJQ6B1MPYKo2UxgOg==",
+            "requires": {
+                "css-modules-loader-core": "^1.1.0",
+                "generic-names": "^2.0.1",
+                "lodash.camelcase": "^4.3.0",
+                "postcss": "^7.0.1",
+                "string-hash": "^1.1.1"
+            },
+            "dependencies": {
+                "generic-names": {
+                    "version": "2.0.1",
+                    "resolved": "https://registry.npmjs.org/generic-names/-/generic-names-2.0.1.tgz",
+                    "integrity": "sha512-kPCHWa1m9wGG/OwQpeweTwM/PYiQLrUIxXbt/P4Nic3LbGjCP0YwrALHW1uNLKZ0LIMg+RF+XRlj2ekT9ZlZAQ==",
+                    "requires": {
+                        "loader-utils": "^1.1.0"
+                    }
+                },
+                "postcss": {
+                    "version": "7.0.39",
+                    "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+                    "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+                    "requires": {
+                        "picocolors": "^0.2.1",
+                        "source-map": "^0.6.1"
+                    }
+                },
+                "source-map": {
+                    "version": "0.6.1",
+                    "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+                    "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+                }
+            }
+        },
         "postcss-modules-extract-imports": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
@@ -5467,6 +5899,79 @@
                 "postcss-value-parser": "^4.1.0"
             }
         },
+        "postcss-modules-parser": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/postcss-modules-parser/-/postcss-modules-parser-1.1.1.tgz",
+            "integrity": "sha1-lfca15FvDzkge7gcQBM2yNJFc4w=",
+            "requires": {
+                "icss-replace-symbols": "^1.0.2",
+                "lodash.foreach": "^3.0.3",
+                "postcss": "^5.0.10"
+            },
+            "dependencies": {
+                "ansi-regex": {
+                    "version": "2.1.1",
+                    "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+                    "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
+                },
+                "ansi-styles": {
+                    "version": "2.2.1",
+                    "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+                    "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
+                },
+                "chalk": {
+                    "version": "1.1.3",
+                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+                    "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+                    "requires": {
+                        "ansi-styles": "^2.2.1",
+                        "escape-string-regexp": "^1.0.2",
+                        "has-ansi": "^2.0.0",
+                        "strip-ansi": "^3.0.0",
+                        "supports-color": "^2.0.0"
+                    },
+                    "dependencies": {
+                        "supports-color": {
+                            "version": "2.0.0",
+                            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+                            "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+                        }
+                    }
+                },
+                "has-flag": {
+                    "version": "1.0.0",
+                    "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
+                    "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo="
+                },
+                "postcss": {
+                    "version": "5.2.18",
+                    "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz",
+                    "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
+                    "requires": {
+                        "chalk": "^1.1.3",
+                        "js-base64": "^2.1.9",
+                        "source-map": "^0.5.6",
+                        "supports-color": "^3.2.3"
+                    }
+                },
+                "strip-ansi": {
+                    "version": "3.0.1",
+                    "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+                    "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+                    "requires": {
+                        "ansi-regex": "^2.0.0"
+                    }
+                },
+                "supports-color": {
+                    "version": "3.2.3",
+                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
+                    "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
+                    "requires": {
+                        "has-flag": "^1.0.0"
+                    }
+                }
+            }
+        },
         "postcss-modules-scope": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
@@ -5485,6 +5990,52 @@
                 "icss-utils": "^5.0.0"
             }
         },
+        "postcss-nested": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-3.0.0.tgz",
+            "integrity": "sha512-1xxmLHSfubuUi6xZZ0zLsNoiKfk3BWQj6fkNMaBJC529wKKLcdeCxXt6KJmDLva+trNyQNwEaE/ZWMA7cve1fA==",
+            "requires": {
+                "postcss": "^6.0.14",
+                "postcss-selector-parser": "^3.1.1"
+            },
+            "dependencies": {
+                "chalk": {
+                    "version": "2.4.2",
+                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+                    "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+                    "requires": {
+                        "ansi-styles": "^3.2.1",
+                        "escape-string-regexp": "^1.0.5",
+                        "supports-color": "^5.3.0"
+                    }
+                },
+                "postcss": {
+                    "version": "6.0.23",
+                    "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+                    "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+                    "requires": {
+                        "chalk": "^2.4.1",
+                        "source-map": "^0.6.1",
+                        "supports-color": "^5.4.0"
+                    }
+                },
+                "postcss-selector-parser": {
+                    "version": "3.1.2",
+                    "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz",
+                    "integrity": "sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==",
+                    "requires": {
+                        "dot-prop": "^5.2.0",
+                        "indexes-of": "^1.0.1",
+                        "uniq": "^1.0.1"
+                    }
+                },
+                "source-map": {
+                    "version": "0.6.1",
+                    "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+                    "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+                }
+            }
+        },
         "postcss-normalize-charset": {
             "version": "5.0.1",
             "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.1.tgz",
@@ -5599,6 +6150,41 @@
                 "postcss-value-parser": "^4.1.0"
             }
         },
+        "postcss-scss": {
+            "version": "1.0.6",
+            "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-1.0.6.tgz",
+            "integrity": "sha512-4EFYGHcEw+H3E06PT/pQQri06u/1VIIPjeJQaM8skB80vZuXMhp4cSNV5azmdNkontnOID/XYWEvEEELLFB1ww==",
+            "requires": {
+                "postcss": "^6.0.23"
+            },
+            "dependencies": {
+                "chalk": {
+                    "version": "2.4.2",
+                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+                    "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+                    "requires": {
+                        "ansi-styles": "^3.2.1",
+                        "escape-string-regexp": "^1.0.5",
+                        "supports-color": "^5.3.0"
+                    }
+                },
+                "postcss": {
+                    "version": "6.0.23",
+                    "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+                    "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+                    "requires": {
+                        "chalk": "^2.4.1",
+                        "source-map": "^0.6.1",
+                        "supports-color": "^5.4.0"
+                    }
+                },
+                "source-map": {
+                    "version": "0.6.1",
+                    "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+                    "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+                }
+            }
+        },
         "postcss-selector-parser": {
             "version": "6.0.6",
             "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz",
@@ -5706,8 +6292,7 @@
         "punycode": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-            "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
-            "dev": true
+            "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
         },
         "qs": {
             "version": "6.7.0",
@@ -6576,6 +7161,11 @@
                 "xtend": "^4.0.0"
             }
         },
+        "string-hash": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz",
+            "integrity": "sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs="
+        },
         "string-width": {
             "version": "4.2.2",
             "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
@@ -6903,6 +7493,11 @@
             "integrity": "sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==",
             "dev": true
         },
+        "uniq": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
+            "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8="
+        },
         "uniqs": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/uniqs/-/uniqs-2.0.0.tgz",
@@ -6925,7 +7520,6 @@
             "version": "4.4.1",
             "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
             "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-            "dev": true,
             "requires": {
                 "punycode": "^2.1.0"
             }
diff --git a/web/package.json b/web/package.json
index 2eea8f0..89a7173 100644
--- a/web/package.json
+++ b/web/package.json
@@ -14,6 +14,7 @@
         "@popperjs/core": "^2.9.2",
         "axios": "^0.21",
         "bootstrap": "5.0.1",
+        "css-loader": "^6.4.0",
         "jquery": "^3.6.0",
         "laravel-mix": "^6.0.6",
         "laravel-mix-banner": "^0.1.4",
@@ -29,6 +30,8 @@
     },
     "dependencies": {
         "@steveeeie/react-page-transition": "^1.2.1",
+        "laravel-mix-react-css-modules": "^2.0.0",
+        "mini-css-extract-plugin": "^2.4.3",
         "react-google-recaptcha": "^2.1.0",
         "styled-components": "^5.3.1"
     }
diff --git a/web/public/mix-manifest.json b/web/public/mix-manifest.json
index 9525ade..93271b2 100644
--- a/web/public/mix-manifest.json
+++ b/web/public/mix-manifest.json
@@ -1,4 +1,4 @@
 {
     "/js/app.js": "/js/app.js",
-    "/css/graphictoria.css": "/css/graphictoria.css"
+    "/css/graphictoria.module.css": "/css/graphictoria.module.css"
 }
diff --git a/web/resources/js/components/Navbar.js b/web/resources/js/components/Navbar.js
index 3fbf625..710b739 100644
--- a/web/resources/js/components/Navbar.js
+++ b/web/resources/js/components/Navbar.js
@@ -4,6 +4,10 @@
 import React, { useState } from 'react';
 import { Link, NavLink } from 'react-router-dom';
 
+import styles from '../../sass/Graphictoria.module.scss';
+
+console.log(styles);
+
 const dropdownLinks = [
 	{
 		area: 'Games',
@@ -28,58 +32,58 @@ const Navbar = (props) => {
 
   return (
     <>
-		<nav className="navbar graphictoria-navbar fixed-top navbar-expand-md shadow-sm">
-			<div className="container-sm">
-				<NavLink className="navbar-brand" to="/">
+		<nav className={ `${styles['navbar']} ${styles['graphictoria-navbar']} ${styles['fixed-top']} ${styles['navbar-expand-md']} ${styles['shadow-sm']}` }>
+			<div className={ styles['container-sm'] }>
+				<NavLink activeClassName={ styles['active'] } className={ styles['navbar-brand'] } to="/">
 					<img src="/images/logo.png" alt="Graphictoria" width="43" height="43" draggable="false"/>
 				</NavLink>
-				<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#graphictoria-nav" aria-controls="graphictoria-nav" aria-expanded="false" aria-label="Toggle navigation">
-					<span className="navbar-toggler-icon"></span>
+				<button className={ styles['navbar-toggler'] } type="button" data-bs-toggle="collapse" data-bs-target={ `#${styles['graphictoria-nav']}` } aria-controls={ styles['graphictoria-nav'] } aria-expanded="false" aria-label="Toggle navigation">
+					<span className={ styles['navbar-toggler-icon'] }></span>
 				</button>
-				<div className="collapse navbar-collapse" id="graphictoria-nav">
-					<ul className="navbar-nav me-auto">
+				<div className={ `${styles['collapse']} ${styles['navbar-collapse']}` } id={ styles['graphictoria-nav'] }>
+					<ul className={ `${styles['navbar-nav']} ${styles['me-auto']}` }>
 						{
 							!props.maintenanceEnabled ?
 							<>
-								<li className="nav-item">
-									<NavLink className="nav-link" to="/games">Games</NavLink>
+								<li className={ styles['nav-item'] }>
+									<NavLink activeClassName={ styles['active'] } className={ styles['nav-link'] } to="/games">Games</NavLink>
 								</li>
-								<li className="nav-item">
-									<NavLink className="nav-link" to="/catalog">Catalog</NavLink>
+								<li className={ styles['nav-item'] }>
+									<NavLink activeClassName={ styles['active'] } className={ styles['nav-link'] } to="/catalog">Catalog</NavLink>
 								</li>
-								<li className="nav-item">
-									<NavLink className="nav-link" to="/forum">Forum</NavLink>
+								<li className={ styles['nav-item'] }>
+									<NavLink activeClassName={ styles['active'] } className={ styles['nav-link'] } to="/forum">Forum</NavLink>
 								</li>
-								<li className="nav-item dropdown">
+								<li className={ `${styles['nav-item']} ${styles['dropdown']}` }>
 									{/* eslint-disable-next-line */}
-									<a className="nav-link dropdown-toggle" href="#" id="graphictoria-nav-dropdown" role="button" data-bs-toggle="dropdown" area-expanded="false">More</a>
-									<ul className="dropdown-menu graphictoria-nav-dropdown" area-labelledby="graphictoria-nav-dropdown">
-										<li><NavLink className="dropdown-item" to="/users">Users</NavLink></li>
-										<li><a className="dropdown-item" href="https://discord.gg/q666a2sF6d" target="_blank" rel="noreferrer">Discord</a></li>
+									<a className={ `${styles['nav-link']} ${styles['dropdown-toggle']}` } href="#" id={ styles['graphictoria-nav-dropdown'] } role="button" data-bs-toggle="dropdown" area-expanded="false">More</a>
+									<ul className={ `${styles['dropdown-menu']} ${styles['graphictoria-nav-dropdown']}` } area-labelledby={ styles['graphictoria-nav-dropdown'] }>
+										<li><NavLink activeClassName={ styles['active'] } className={ styles['dropdown-item'] } to="/users">Users</NavLink></li>
+										<li><a className={ styles['dropdown-item'] } href="https://discord.gg/q666a2sF6d" target="_blank" rel="noreferrer">Discord</a></li>
 									</ul>
 								</li>
 							</>
 							:
-							<li className="nav-item">
-								<a className="nav-link" href="https://discord.gg/q666a2sF6d" target="_blank" rel="noreferrer">Discord</a>
+							<li className={ styles['nav-item'] }>
+								<a className={ styles['nav-link'] } href="https://discord.gg/q666a2sF6d" target="_blank" rel="noreferrer">Discord</a>
 							</li>
 						}
 					</ul>
 					{
 						!props.maintenanceEnabled ?
-						<input type="text" className="form-control d-lg-flex graphictoria-search" placeholder="Search" aria-label="Search" aria-describedby="graphictoria-nav-search-button" onChange={ changeEvent => setSearchQuery(changeEvent.target.value) } value={ searchQuery }/>
+						<input type="text" className={ `${styles['form-control']} ${styles['d-lg-flex']} ${styles['graphictoria-search']}` } placeholder="Search" aria-label="Search" aria-describedby="graphictoria-nav-search-button" onChange={ changeEvent => setSearchQuery(changeEvent.target.value) } value={ searchQuery }/>
 						:
 						null
 					}
 					
 					{
 						searchQuery.length !== 0 ?
-						<div id="graphictoria-search-dropdown">
-							<ul className="dropdown-menu show" area-labelledby="graphictoria-search-dropdown">
+						<div id={ styles['graphictoria-search-dropdown'] }>
+							<ul className={ `${styles['dropdown-menu']} ${styles['show']}` } area-labelledby={ styles['graphictoria-search-dropdown'] }>
 								{
 									dropdownLinks.map(({ area, urlbase }, index) => 
 										<li key={index}>
-											<Link className="dropdown-item py-2" onClick={ () => setSearchQuery('') } to={urlbase + encodeURIComponent(searchQuery)}>Search <b className="text-truncate graphictoria-search-dropdown-truncate">{searchQuery}</b> in {area}</Link>
+											<Link activeClassName={ styles['active'] } className={ `${styles['dropdown-item']} ${styles['py-2']}` } onClick={ () => setSearchQuery('') } to={urlbase + encodeURIComponent(searchQuery)}>Search <b className="text-truncate graphictoria-search-dropdown-truncate">{searchQuery}</b> in {area}</Link>
 										</li>
 									)
 								}
@@ -91,14 +95,14 @@ const Navbar = (props) => {
 					
 					{
 						!props.maintenanceEnabled ?
-						<Link className="btn btn-success" to="/login">Login / Sign up</Link>
+						<Link activeClassName={ styles['active'] } className={ `${styles['btn']} ${styles['btn-success']}` } to="/login">Login / Sign up</Link>
 						:
 						null
 					}
 				</div>
 			</div>
 		</nav>
-		<div className="graphictoria-nav-margin">
+		<div className={ styles['graphictoria-nav-margin'] }>
 		</div>
 	</>
   );
diff --git a/web/resources/sass/Graphictoria.scss b/web/resources/sass/Graphictoria.module.scss
similarity index 100%
rename from web/resources/sass/Graphictoria.scss
rename to web/resources/sass/Graphictoria.module.scss
diff --git a/web/webpack.mix.js b/web/webpack.mix.js
index e99935e..04afb08 100644
--- a/web/webpack.mix.js
+++ b/web/webpack.mix.js
@@ -15,7 +15,7 @@ require('laravel-mix-banner');
 
 mix.js('resources/js/app.js', 'public/js')
     .react()
-    .sass('resources/sass/graphictoria.scss', 'public/css')
+    .sass('resources/sass/graphictoria.module.scss', 'public/css')
 	.banner({
         banner: (function () {
             return [