redis cache + other stuff

2021-11-05 18:43:12 -04:00 · 2021-11-05 18:43:12 -04:00 · 65a4422c1d
parent 7ad1be29e8
commit 65a4422c1d
13 changed files with 939 additions and 166 deletions
--- 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');
    }
 }
--- 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"
--- 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",
--- 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),

--- 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'),
--- a/web/database/migrations/2021_11_05_221042_create_cache_table.php
+++ 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');
+    }
+}
--- a/web/docker-compose.yml
+++ 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
--- 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"
            }
--- 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"
    }
--- 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"
 }
--- 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>
 	</>
  );
--- a/web/resources/sass/Graphictoria.module.scss
+++ b/web/resources/sass/Graphictoria.module.scss
--- 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 [