build: revert changes

.gitignore

@@ -2,7 +2,6 @@
 node_modules/
 .vscode/
 build/
-dist/
 
 # Files
 package-lock.json

package.json

@@ -47,16 +47,13 @@
     "source-map-loader": "^3.0.0",
     "webpack": "^5.39.1",
     "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^3.11.2",
+    "webpack-dev-server": "^3.11.2"
-    "webpack-merge": "^5.8.0",
-    "zip-file-webpack-plugin": "^1.2.0"
   },
   "scripts": {
-    "start": "webpack serve --config webpack.dev.js",
+    "start": "webpack serve",
-    "build": "webpack --config webpack.prod.js",
+    "build": "webpack --mode=production",
-    "build:chrome": "webpack --config webpack.prod.js --env=type=chrome",
+    "chrome": "cp manifest/chrome.json build/manifest.json",
-    "build:firefox": "webpack --config webpack.prod.js --env=type=firefox",
+    "firefox": "cp manifest/firefox.json build/manifest.json"
-    "postinstall": "node -e \"if (require('fs').existsSync('node_modules/.cache/webpack')) require('fs').rmSync('node_modules/.cache/webpack', { recursive: true })\""
   },
   "browserslist": {
     "production": [

src/components/widgets/background/Background.jsx

@@ -31,7 +31,7 @@ export default class Background extends React.PureComponent {
     if (gradient.length > 1) {
       // Note: Append the gradient for additional browser support.
       const stepStyles = gradient.map((g) => ` ${g.colour} ${g.stop}%`).join();
-      style += ` background: ${type}-gradient(${(type === 'linear' ? (`${angle}deg,`) : '')}${stepStyles})`;
+      style += ` background: ${type}-gradient(${(type === 'linear' ? (`${angle}deg,`) : '')}${stepStyles});`;
     }
 
     this.setState({

src/components/widgets/background/scss/index.scss

@@ -3,11 +3,12 @@
 
 #backgroundImage {
   height: 100vh;
-  background-size: cover !important;
+	background-size: 400% 400%;
   background-repeat: no-repeat !important;
   background-position: center !important;
   background-attachment: fixed !important;
   zoom: 100% !important;
+  animation: gradient 15s ease infinite;
 }
 
 .backgroundPreload {
@@ -35,3 +36,15 @@
     opacity: 1;
   }
 }
+
+@keyframes gradient {
+	0% {
+		background-position: 0% 50%;
+	}
+	50% {
+		background-position: 100% 50%;
+	}
+	100% {
+		background-position: 0% 50%;
+	}
+}

webpack.common.js

@@ -1,44 +0,0 @@
-const path = require('path');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-module.exports = {
-  entry: path.resolve(__dirname, './src/index.js'),
-  performance: {
-    hints: false
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(js|jsx)$/,
-        exclude: /node_modules/,
-        use: ['babel-loader']
-      },
-      {
-        test: /\.(sa|sc|c)ss$/,
-        use: [
-          {
-            loader: MiniCssExtractPlugin.loader,
-            options: {
-              publicPath: ''
-            },
-          },
-          'css-loader',
-          'sass-loader'
-        ],
-      },
-      {
-        test: /\.(woff|woff2|svg)$/,
-        type: 'asset/resource'
-      }
-    ]
-  },
-  resolve: {
-    extensions: ['.js', '.jsx']
-  },
-  plugins: [
-    new MiniCssExtractPlugin({
-      filename: '[name].[chunkhash].css',
-      chunkFilename: '[id].[chunkhash].chunk.css'
-    }),
-  ]
-};

webpack.config.js

@@ -0,0 +1,75 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+  entry: path.resolve(__dirname, './src/index.js'),
+  mode: 'development',
+  performance: {
+    hints: false
+  },
+  module: {
+    rules: [{
+      test: /\.(js|jsx)$/,
+      exclude: /node_modules/,
+      use: ['babel-loader']
+    },
+    {
+      test: /\.(sa|sc|c)ss$/,
+      use: [
+        {
+          loader: MiniCssExtractPlugin.loader,
+          options: {
+            publicPath: ''
+          },
+        },
+        'css-loader',
+        'sass-loader'
+      ],
+    },
+    {
+      test: /\.(woff|woff2|svg)$/,
+      type: 'asset/resource'
+    },
+    {
+      test: /\.js$/,
+      enforce: 'pre',
+      use: ['source-map-loader']
+    }]
+  },
+  resolve: {
+    extensions: ['.js', '.jsx']
+  },
+  output: {
+    path: path.resolve(__dirname, './build'),
+    filename: '[name].[chunkhash].js',
+    chunkFilename: '[id].[chunkhash].chunk.js',
+    clean: true
+  },
+  devServer: {
+    contentBase: path.resolve(__dirname, './build'),
+    open: true,
+    port: 3000
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, './public/index.html')
+    }),
+    new CopyPlugin({
+      patterns: [{
+          from: 'public/icons',
+          to: 'icons'
+        },
+        {
+          from: 'public/offline-images',
+          to: 'offline-images'
+        }
+      ]
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].[chunkhash].css',
+      chunkFilename: '[id].[chunkhash].chunk.css'
+    }),
+  ]
+};

webpack.dev.js

@@ -1,21 +0,0 @@
-const { merge } = require('webpack-merge');
-const common = require('./webpack.common.js');
-const path = require('path');
-
-module.exports = merge(common, {
-  mode: 'development',
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        enforce: 'pre',
-        use: ['source-map-loader']
-      }
-    ]
-  },
-  devServer: {
-    contentBase: path.resolve(__dirname, './build'),
-    open: true,
-    port: 3000
-  }
-});

webpack.prod.js

@@ -1,47 +0,0 @@
-const { merge } = require('webpack-merge');
-const common = require('./webpack.common.js');
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CopyPlugin = require('copy-webpack-plugin');
-const ZipFilePlugin = require('zip-file-webpack-plugin');
-
-module.exports = (env) => {
-  const type = env.type || 'web';
-
-  return merge(common, {
-    mode: 'production',
-    output: {
-      path: path.resolve(__dirname, './build'),
-      filename: '[name].[chunkhash].js',
-      chunkFilename: '[id].[chunkhash].chunk.js',
-      clean: true
-    },
-    cache: {
-      type: 'filesystem'
-    },
-    plugins: [
-      new HtmlWebpackPlugin({
-        template: path.resolve(__dirname, './public/index.html')
-      }),
-      new CopyPlugin({
-        patterns: [{
-            from: 'public/icons',
-            to: 'icons'
-          },
-          {
-            from: 'public/offline-images',
-            to: 'offline-images'
-          },
-          {
-            from: `manifest/${type}.json`,
-            to: 'manifest.json'
-          }
-        ]
-      }),
-      new ZipFilePlugin({
-        path: '../dist/',
-        filename: `${type}.zip`
-      })
-    ]
-  });
-}