reza added some chamges on site icons

master
RezaAshrafi77 3 years ago
parent 48d4374986
commit 5ebdff6f92
  1. 3
      .babelrc
  2. 106
      config/env.js
  3. 66
      config/getHttpsConfig.js
  4. 29
      config/jest/babelTransform.js
  5. 14
      config/jest/cssTransform.js
  6. 40
      config/jest/fileTransform.js
  7. 134
      config/modules.js
  8. 75
      config/paths.js
  9. 35
      config/pnpTs.js
  10. 757
      config/webpack.config.js
  11. 130
      config/webpackDevServer.config.js
  12. 131
      package.json
  13. 212
      scripts/build.js
  14. 166
      scripts/start.js
  15. 53
      scripts/test.js
  16. BIN
      src/assets/icons/Iconly Two-tone Show.png
  17. BIN
      src/assets/icons/basket-white.png
  18. BIN
      src/assets/icons/document-red.png
  19. BIN
      src/assets/icons/e-book-blue.png
  20. BIN
      src/assets/icons/iran.png
  21. BIN
      src/assets/icons/product-cash-back.png
  22. BIN
      src/assets/icons/product-shipping.png
  23. BIN
      src/assets/icons/product-support.png
  24. BIN
      src/assets/icons/send-comment.png
  25. BIN
      src/assets/images/auth_bg.png
  26. 38
      src/views/Auth/Login/Cellphone/index.js
  27. 36
      src/views/Auth/Login/Cellphone/index.scss
  28. 4
      src/views/Home/Footer/index.scss
  29. 19
      src/views/Home/Navbar/Laptop/index.js
  30. 28
      src/views/Home/Navbar/Laptop/index.scss
  31. 50
      src/views/Home/index.js
  32. 37
      src/views/Product/AddToCart/index.js
  33. 73
      src/views/Product/AddToCart/index.scss
  34. 30
      src/views/Product/Comment/Reply/index.js
  35. 37
      src/views/Product/Comment/index.js
  36. 30
      src/views/Product/Comment/index.scss
  37. 22
      src/views/Product/Gallery/index.scss
  38. 108
      src/views/Product/index.js
  39. 60
      src/views/Product/index.scss
  40. 68
      yarn.lock

@ -1,3 +0,0 @@
{
"plugins": [["babel-plugin-root-import"]]
}

@ -0,0 +1,106 @@
'use strict';
const fs = require('fs');
const path = require('path');
const paths = require('./paths');
// Make sure that including paths.js after env.js will read .env variables.
delete require.cache[require.resolve('./paths')];
const NODE_ENV = process.env.NODE_ENV;
if (!NODE_ENV) {
throw new Error(
'The NODE_ENV environment variable is required but was not specified.'
);
}
// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
const dotenvFiles = [
`${paths.dotenv}.${NODE_ENV}.local`,
// Don't include `.env.local` for `test` environment
// since normally you expect tests to produce the same
// results for everyone
NODE_ENV !== 'test' && `${paths.dotenv}.local`,
`${paths.dotenv}.${NODE_ENV}`,
paths.dotenv,
].filter(Boolean);
// Load environment variables from .env* files. Suppress warnings using silent
// if this file is missing. dotenv will never modify any environment variables
// that have already been set. Variable expansion is supported in .env files.
// https://github.com/motdotla/dotenv
// https://github.com/motdotla/dotenv-expand
dotenvFiles.forEach(dotenvFile => {
if (fs.existsSync(dotenvFile)) {
require('dotenv-expand')(
require('dotenv').config({
path: dotenvFile,
})
);
}
});
// We support resolving modules according to `NODE_PATH`.
// This lets you use absolute paths in imports inside large monorepos:
// https://github.com/facebook/create-react-app/issues/253.
// It works similar to `NODE_PATH` in Node itself:
// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
// Otherwise, we risk importing Node.js core modules into an app instead of webpack shims.
// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
// We also resolve them to make sure all tools using them work consistently.
const appDirectory = fs.realpathSync(process.cwd());
process.env.NODE_PATH = (process.env.NODE_PATH || '')
.split(path.delimiter)
.filter(folder => folder && !path.isAbsolute(folder))
.map(folder => path.resolve(appDirectory, folder))
.join(path.delimiter);
// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
// injected into the application via DefinePlugin in webpack configuration.
const REACT_APP = /^REACT_APP_/i;
function getClientEnvironment(publicUrl) {
const raw = Object.keys(process.env)
.filter(key => REACT_APP.test(key))
.reduce(
(env, key) => {
env[key] = process.env[key];
return env;
},
{
// Useful for determining whether we’re running in production mode.
// Most importantly, it switches React into the correct mode.
NODE_ENV: process.env.NODE_ENV || 'development',
// Useful for resolving the correct path to static assets in `public`.
// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
// This should only be used as an escape hatch. Normally you would put
// images into the `src` and `import` them in code to get their paths.
PUBLIC_URL: publicUrl,
// We support configuring the sockjs pathname during development.
// These settings let a developer run multiple simultaneous projects.
// They are used as the connection `hostname`, `pathname` and `port`
// in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
// and `sockPort` options in webpack-dev-server.
WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
// Whether or not react-refresh is enabled.
// react-refresh is not 100% stable at this time,
// which is why it's disabled by default.
// It is defined here so it is available in the webpackHotDevClient.
FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
}
);
// Stringify all values so we can feed into webpack DefinePlugin
const stringified = {
'process.env': Object.keys(raw).reduce((env, key) => {
env[key] = JSON.stringify(raw[key]);
return env;
}, {}),
};
return { raw, stringified };
}
module.exports = getClientEnvironment;

@ -0,0 +1,66 @@
'use strict';
const fs = require('fs');
const path = require('path');
const crypto = require('crypto');
const chalk = require('react-dev-utils/chalk');
const paths = require('./paths');
// Ensure the certificate and key provided are valid and if not
// throw an easy to debug error
function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
let encrypted;
try {
// publicEncrypt will throw an error with an invalid cert
encrypted = crypto.publicEncrypt(cert, Buffer.from('test'));
} catch (err) {
throw new Error(
`The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`
);
}
try {
// privateDecrypt will throw an error with an invalid key
crypto.privateDecrypt(key, encrypted);
} catch (err) {
throw new Error(
`The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${
err.message
}`
);
}
}
// Read file and throw an error if it doesn't exist
function readEnvFile(file, type) {
if (!fs.existsSync(file)) {
throw new Error(
`You specified ${chalk.cyan(
type
)} in your env, but the file "${chalk.yellow(file)}" can't be found.`
);
}
return fs.readFileSync(file);
}
// Get the https config
// Return cert files if provided in env, otherwise just true or false
function getHttpsConfig() {
const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
const isHttps = HTTPS === 'true';
if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
const config = {
cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
};
validateKeyAndCerts({ ...config, keyFile, crtFile });
return config;
}
return isHttps;
}
module.exports = getHttpsConfig;

@ -0,0 +1,29 @@
'use strict';
const babelJest = require('babel-jest');
const hasJsxRuntime = (() => {
if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
return false;
}
try {
require.resolve('react/jsx-runtime');
return true;
} catch (e) {
return false;
}
})();
module.exports = babelJest.createTransformer({
presets: [
[
require.resolve('babel-preset-react-app'),
{
runtime: hasJsxRuntime ? 'automatic' : 'classic',
},
],
],
babelrc: false,
configFile: false,
});

@ -0,0 +1,14 @@
'use strict';
// This is a custom Jest transformer turning style imports into empty objects.
// http://facebook.github.io/jest/docs/en/webpack.html
module.exports = {
process() {
return 'module.exports = {};';
},
getCacheKey() {
// The output is always the same.
return 'cssTransform';
},
};

@ -0,0 +1,40 @@
'use strict';
const path = require('path');
const camelcase = require('camelcase');
// This is a custom Jest transformer turning file imports into filenames.
// http://facebook.github.io/jest/docs/en/webpack.html
module.exports = {
process(src, filename) {
const assetFilename = JSON.stringify(path.basename(filename));
if (filename.match(/\.svg$/)) {
// Based on how SVGR generates a component name:
// https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
const pascalCaseFilename = camelcase(path.parse(filename).name, {
pascalCase: true,
});
const componentName = `Svg${pascalCaseFilename}`;
return `const React = require('react');
module.exports = {
__esModule: true,
default: ${assetFilename},
ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
return {
$$typeof: Symbol.for('react.element'),
type: 'svg',
ref: ref,
key: null,
props: Object.assign({}, props, {
children: ${assetFilename}
})
};
}),
};`;
}
return `module.exports = ${assetFilename};`;
},
};

@ -0,0 +1,134 @@
'use strict';
const fs = require('fs');
const path = require('path');
const paths = require('./paths');
const chalk = require('react-dev-utils/chalk');
const resolve = require('resolve');
/**
* Get additional module paths based on the baseUrl of a compilerOptions object.
*
* @param {Object} options
*/
function getAdditionalModulePaths(options = {}) {
const baseUrl = options.baseUrl;
if (!baseUrl) {
return '';
}
const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
// We don't need to do anything if `baseUrl` is set to `node_modules`. This is
// the default behavior.
if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
return null;
}
// Allow the user set the `baseUrl` to `appSrc`.
if (path.relative(paths.appSrc, baseUrlResolved) === '') {
return [paths.appSrc];
}
// If the path is equal to the root directory we ignore it here.
// We don't want to allow importing from the root directly as source files are
// not transpiled outside of `src`. We do allow importing them with the
// absolute path (e.g. `src/Components/Button.js`) but we set that up with
// an alias.
if (path.relative(paths.appPath, baseUrlResolved) === '') {
return null;
}
// Otherwise, throw an error.
throw new Error(
chalk.red.bold(
"Your project's `baseUrl` can only be set to `src` or `node_modules`." +
' Create React App does not support other values at this time.'
)
);
}
/**
* Get webpack aliases based on the baseUrl of a compilerOptions object.
*
* @param {*} options
*/
function getWebpackAliases(options = {}) {
const baseUrl = options.baseUrl;
if (!baseUrl) {
return {};
}
const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
if (path.relative(paths.appPath, baseUrlResolved) === '') {
return {
src: paths.appSrc,
};
}
}
/**
* Get jest aliases based on the baseUrl of a compilerOptions object.
*
* @param {*} options
*/
function getJestAliases(options = {}) {
const baseUrl = options.baseUrl;
if (!baseUrl) {
return {};
}
const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
if (path.relative(paths.appPath, baseUrlResolved) === '') {
return {
'^src/(.*)$': '<rootDir>/src/$1',
};
}
}
function getModules() {
// Check if TypeScript is setup
const hasTsConfig = fs.existsSync(paths.appTsConfig);
const hasJsConfig = fs.existsSync(paths.appJsConfig);
if (hasTsConfig && hasJsConfig) {
throw new Error(
'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
);
}
let config;
// If there's a tsconfig.json we assume it's a
// TypeScript project and set up the config
// based on tsconfig.json
if (hasTsConfig) {
const ts = require(resolve.sync('typescript', {
basedir: paths.appNodeModules,
}));
config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config;
// Otherwise we'll check if there is jsconfig.json
// for non TS projects.
} else if (hasJsConfig) {
config = require(paths.appJsConfig);
}
config = config || {};
const options = config.compilerOptions || {};
const additionalModulePaths = getAdditionalModulePaths(options);
return {
additionalModulePaths: additionalModulePaths,
webpackAliases: getWebpackAliases(options),
jestAliases: getJestAliases(options),
hasTsConfig,
};
}
module.exports = getModules();

@ -0,0 +1,75 @@
'use strict';
const path = require('path');
const fs = require('fs');
const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');
// Make sure any symlinks in the project folder are resolved:
// https://github.com/facebook/create-react-app/issues/637
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
// We use `PUBLIC_URL` environment variable or "homepage" field to infer
// "public path" at which the app is served.
// webpack needs to know it to put the right <script> hrefs into HTML even in
// single-page apps that may serve index.html for nested URLs like /todos/42.
// We can't use a relative path in HTML because we don't want to load something
// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
const publicUrlOrPath = getPublicUrlOrPath(
process.env.NODE_ENV === 'development',
require(resolveApp('package.json')).homepage,
process.env.PUBLIC_URL
);
const buildPath = process.env.BUILD_PATH || 'build';
const moduleFileExtensions = [
'web.mjs',
'mjs',
'web.js',
'js',
'web.ts',
'ts',
'web.tsx',
'tsx',
'json',
'web.jsx',
'jsx',
];
// Resolve file paths in the same order as webpack
const resolveModule = (resolveFn, filePath) => {
const extension = moduleFileExtensions.find(extension =>
fs.existsSync(resolveFn(`${filePath}.${extension}`))
);
if (extension) {
return resolveFn(`${filePath}.${extension}`);
}
return resolveFn(`${filePath}.js`);
};
// config after eject: we're in ./config/
module.exports = {
dotenv: resolveApp('.env'),
appPath: resolveApp('.'),
appBuild: resolveApp(buildPath),
appPublic: resolveApp('public'),
appHtml: resolveApp('public/index.html'),
appIndexJs: resolveModule(resolveApp, 'src/index'),
appPackageJson: resolveApp('package.json'),
appSrc: resolveApp('src'),
appTsConfig: resolveApp('tsconfig.json'),
appJsConfig: resolveApp('jsconfig.json'),
yarnLockFile: resolveApp('yarn.lock'),
testsSetup: resolveModule(resolveApp, 'src/setupTests'),
proxySetup: resolveApp('src/setupProxy.js'),
appNodeModules: resolveApp('node_modules'),
swSrc: resolveModule(resolveApp, 'src/service-worker'),
publicUrlOrPath,
};
module.exports.moduleFileExtensions = moduleFileExtensions;

@ -0,0 +1,35 @@
'use strict';
const { resolveModuleName } = require('ts-pnp');
exports.resolveModuleName = (
typescript,
moduleName,
containingFile,
compilerOptions,
resolutionHost
) => {
return resolveModuleName(
moduleName,
containingFile,
compilerOptions,
resolutionHost,
typescript.resolveModuleName
);
};
exports.resolveTypeReferenceDirective = (
typescript,
moduleName,
containingFile,
compilerOptions,
resolutionHost
) => {
return resolveModuleName(
moduleName,
containingFile,
compilerOptions,
resolutionHost,
typescript.resolveTypeReferenceDirective
);
};

@ -0,0 +1,757 @@
'use strict';
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const resolve = require('resolve');
const PnpWebpackPlugin = require('pnp-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const safePostCssParser = require('postcss-safe-parser');
const ManifestPlugin = require('webpack-manifest-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const ESLintPlugin = require('eslint-webpack-plugin');
const paths = require('./paths');
const modules = require('./modules');
const getClientEnvironment = require('./env');
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const postcssNormalize = require('postcss-normalize');
const appPackageJson = require(paths.appPackageJson);
// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
const webpackDevClientEntry = require.resolve(
'react-dev-utils/webpackHotDevClient'
);
const reactRefreshOverlayEntry = require.resolve(
'react-dev-utils/refreshOverlayInterop'
);
// Some apps do not need the benefits of saving a web request, so not inlining the chunk
// makes for a smoother build process.
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
const emitErrorsAsWarnings = process.env.ESLINT_NO_DEV_ERRORS === 'true';
const disableESLintPlugin = process.env.DISABLE_ESLINT_PLUGIN === 'true';
const imageInlineSizeLimit = parseInt(
process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
);
// Check if TypeScript is setup
const useTypeScript = fs.existsSync(paths.appTsConfig);
// Get the path to the uncompiled service worker (if it exists).
const swSrc = paths.swSrc;
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const hasJsxRuntime = (() => {
if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
return false;
}
try {
require.resolve('react/jsx-runtime');
return true;
} catch (e) {
return false;
}
})();
// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
module.exports = function (webpackEnv) {
const isEnvDevelopment = webpackEnv === 'development';
const isEnvProduction = webpackEnv === 'production';
// Variable used for enabling profiling in Production
// passed into alias object. Uses a flag if passed into the build command
const isEnvProductionProfile =
isEnvProduction && process.argv.includes('--profile');
// We will provide `paths.publicUrlOrPath` to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
// Get environment variables to inject into our app.
const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
const shouldUseReactRefresh = env.raw.FAST_REFRESH;
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
// css is located in `static/css`, use '../../' to locate index.html folder
// in production `paths.publicUrlOrPath` can be a relative path
options: paths.publicUrlOrPath.startsWith('.')
? { publicPath: '../../' }
: {},
},
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
// Adds PostCSS Normalize as the reset css with default options,
// so that it honors browserslist config in package.json
// which in turn let's users customize the target behavior as per their needs.
postcssNormalize(),
],
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
},
},
].filter(Boolean);
if (preProcessor) {
loaders.push(
{
loader: require.resolve('resolve-url-loader'),
options: {
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
root: paths.appSrc,
},
},
{
loader: require.resolve(preProcessor),
options: {
sourceMap: true,
},
}
);
}
return loaders;
};
return {
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
// Stop compilation early in production
bail: isEnvProduction,
devtool: isEnvProduction
? shouldUseSourceMap
? 'source-map'
: false
: isEnvDevelopment && 'cheap-module-source-map',
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
entry:
isEnvDevelopment && !shouldUseReactRefresh
? [
// Include an alternative client for WebpackDevServer. A client's job is to
// connect to WebpackDevServer by a socket and get notified about changes.
// When you save a file, the client will either apply hot updates (in case
// of CSS changes), or refresh the page (in case of JS changes). When you
// make a syntax error, this client will display a syntax error overlay.
// Note: instead of the default WebpackDevServer client, we use a custom one
// to bring better experience for Create React App users. You can replace
// the line below with these two lines if you prefer the stock client:
//
// require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'),
//
// When using the experimental react-refresh integration,
// the webpack plugin takes care of injecting the dev client for us.
webpackDevClientEntry,
// Finally, this is your app's code:
paths.appIndexJs,
// We include the app code last so that if there is a runtime error during
// initialization, it doesn't blow up the WebpackDevServer client, and
// changing JS code would still trigger a refresh.
]
: paths.appIndexJs,
output: {
// The build folder.
path: isEnvProduction ? paths.appBuild : undefined,
// Add /* filename */ comments to generated require()s in the output.
pathinfo: isEnvDevelopment,
// There will be one main bundle, and one file per asynchronous chunk.
// In development, it does not produce real files.
filename: isEnvProduction
? 'static/js/[name].[contenthash:8].js'
: isEnvDevelopment && 'static/js/bundle.js',
// TODO: remove this when upgrading to webpack 5
futureEmitAssets: true,
// There are also additional JS chunk files if you use code splitting.
chunkFilename: isEnvProduction
? 'static/js/[name].[contenthash:8].chunk.js'
: isEnvDevelopment && 'static/js/[name].chunk.js',
// webpack uses `publicPath` to determine where the app is being served from.
// It requires a trailing slash, or the file assets will get an incorrect path.
// We inferred the "public path" (such as / or /my-project) from homepage.
publicPath: paths.publicUrlOrPath,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: isEnvProduction
? info =>
path
.relative(paths.appSrc, info.absoluteResourcePath)
.replace(/\\/g, '/')
: isEnvDevelopment &&
(info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
// Prevents conflicts when multiple webpack runtimes (from different apps)
// are used on the same page.
jsonpFunction: `webpackJsonp${appPackageJson.name}`,
// this defaults to 'window', but by setting it to 'this' then
// module chunks which are built will work in web workers as well.
globalObject: 'this',
},
optimization: {
minimize: isEnvProduction,
minimizer: [
// This is only used in production mode
new TerserPlugin({
terserOptions: {
parse: {
// We want terser to parse ecma 8 code. However, we don't want it
// to apply any minification steps that turns valid ecma 5 code
// into invalid ecma 5 code. This is why the 'compress' and 'output'
// sections only apply transformations that are ecma 5 safe
// https://github.com/facebook/create-react-app/pull/4234
ecma: 8,
},
compress: {
ecma: 5,
warnings: false,
// Disabled because of an issue with Uglify breaking seemingly valid code:
// https://github.com/facebook/create-react-app/issues/2376
// Pending further investigation:
// https://github.com/mishoo/UglifyJS2/issues/2011
comparisons: false,
// Disabled because of an issue with Terser breaking valid code:
// https://github.com/facebook/create-react-app/issues/5250
// Pending further investigation:
// https://github.com/terser-js/terser/issues/120
inline: 2,
},
mangle: {
safari10: true,
},
// Added for profiling in devtools
keep_classnames: isEnvProductionProfile,
keep_fnames: isEnvProductionProfile,
output: {
ecma: 5,
comments: false,
// Turned on because emoji and regex is not minified properly using default
// https://github.com/facebook/create-react-app/issues/2488
ascii_only: true,
},
},
sourceMap: shouldUseSourceMap,
}),
// This is only used in production mode
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
parser: safePostCssParser,
map: shouldUseSourceMap
? {
// `inline: false` forces the sourcemap to be output into a
// separate file
inline: false,
// `annotation: true` appends the sourceMappingURL to the end of
// the css file, helping the browser find the sourcemap
annotation: true,
}
: false,
},
cssProcessorPluginOptions: {
preset: ['default', { minifyFontValues: { removeQuotes: false } }],
},
}),
],
// Automatically split vendor and commons
// https://twitter.com/wSokra/status/969633336732905474
// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
splitChunks: {
chunks: 'all',
name: isEnvDevelopment,
},
// Keep the runtime chunk separated to enable long term caching
// https://twitter.com/wSokra/status/969679223278505985
// https://github.com/facebook/create-react-app/issues/5358
runtimeChunk: {
name: entrypoint => `runtime-${entrypoint.name}`,
},
},
resolve: {
// This allows you to set a fallback for where webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebook/create-react-app/issues/253
modules: ['node_modules', paths.appNodeModules].concat(
modules.additionalModulePaths || []
),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
// https://github.com/facebook/create-react-app/issues/290
// `web` extension prefixes have been added for better support
// for React Native Web.
extensions: paths.moduleFileExtensions
.map(ext => `.${ext}`)
.filter(ext => useTypeScript || !ext.includes('ts')),
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
// Allows for better profiling with ReactDevTools
...(isEnvProductionProfile && {
'react-dom$': 'react-dom/profiling',
'scheduler/tracing': 'scheduler/tracing-profiling',
}),
...(modules.webpackAliases || {}),
},
plugins: [
// Adds support for installing with Plug'n'Play, leading to faster installs and adding
// guards against forgotten dependencies and such.
PnpWebpackPlugin,
// Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel.
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
// please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled, as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc, [
paths.appPackageJson,
reactRefreshOverlayEntry,
]),
],
},
resolveLoader: {
plugins: [
// Also related to Plug'n'Play, but this time it tells webpack to load its loaders
// from the current package.
PnpWebpackPlugin.moduleLoader(module),
],
},
module: {
strictExportPresence: true,
rules: [
// Disable require.ensure as it's not a standard language feature.
{ parser: { requireEnsure: false } },
{
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list.
oneOf: [
// TODO: Merge this config once `image/avif` is in the mime-db
// https://github.com/jshttp/mime-db
{
test: [/\.avif$/],
loader: require.resolve('url-loader'),
options: {
limit: imageInlineSizeLimit,
mimetype: 'image/avif',
name: 'static/media/[name].[hash:8].[ext]',
},
},
// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: imageInlineSizeLimit,
name: 'static/media/[name].[hash:8].[ext]',
},
},
// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
presets: [
[
require.resolve('babel-preset-react-app'),
{
runtime: hasJsxRuntime ? 'automatic' : 'classic',
},
],
],
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent:
'@svgr/webpack?-svgo,+titleProp,+ref![path]',
},
},
},
],
isEnvDevelopment &&
shouldUseReactRefresh &&
require.resolve('react-refresh/babel'),
].filter(Boolean),
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
// See #6846 for context on why cacheCompression is disabled
cacheCompression: false,
compact: isEnvProduction,
},
},
// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
{
test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
[
require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true },
],
],
cacheDirectory: true,
// See #6846 for context on why cacheCompression is disabled
cacheCompression: false,
// Babel sourcemaps are needed for debugging into node_modules
// code. Without the options below, debuggers like VSCode
// show incorrect code and set breakpoints on the wrong lines.
sourceMaps: shouldUseSourceMap,
inputSourceMap: shouldUseSourceMap,
},
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use MiniCSSExtractPlugin to extract that CSS
// to a file, but in development "style" loader enables hot editing
// of CSS.
// By default we support CSS Modules with the extension .module.css
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
}),
},
// Opt-in support for SASS (using .scss or .sass extensions).
// By default we support SASS Modules with the
// extensions .module.scss or .module.sass
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
},
'sass-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'sass-loader'
),
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// This loader doesn't use a "test" so it will catch all modules
// that fall through the other loaders.
{
loader: require.resolve('file-loader'),
// Exclude `js` files to keep "css" loader working as it injects
// its runtime that would otherwise be processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.
],
},
],
},
plugins: [
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
template: paths.appHtml,
},
isEnvProduction
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}
: undefined
)
),
// Inlines the webpack runtime script. This script is too small to warrant
// a network request.
// https://github.com/facebook/create-react-app/issues/5358
isEnvProduction &&
shouldInlineRuntimeChunk &&
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),
// Makes some environment variables available in index.html.
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
// <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
// It will be an empty string unless you specify "homepage"
// in `package.json`, in which case it will be the pathname of that URL.
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
// This gives some necessary context to module not found errors, such as
// the requesting resource.
new ModuleNotFoundPlugin(paths.appPath),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
// It is absolutely essential that NODE_ENV is set to production
// during a production build.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(env.stringified),
// This is necessary to emit hot updates (CSS and Fast Refresh):
isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
// Experimental hot reloading for React .
// https://github.com/facebook/react/tree/master/packages/react-refresh
isEnvDevelopment &&
shouldUseReactRefresh &&
new ReactRefreshWebpackPlugin({
overlay: {
entry: webpackDevClientEntry,
// The expected exports are slightly different from what the overlay exports,
// so an interop is included here to enable feedback on module-level errors.
module: reactRefreshOverlayEntry,
// Since we ship a custom dev client and overlay integration,
// the bundled socket handling logic can be eliminated.
sockIntegration: false,
},
}),
// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebook/create-react-app/issues/240
isEnvDevelopment && new CaseSensitivePathsPlugin(),
// If you require a missing module and then `npm install` it, you still have
// to restart the development server for webpack to discover it. This plugin
// makes the discovery automatic so you don't have to restart.
// See https://github.com/facebook/create-react-app/issues/186
isEnvDevelopment &&
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
isEnvProduction &&
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: 'static/css/[name].[contenthash:8].css',
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
}),
// Generate an asset manifest file with the following content:
// - "files" key: Mapping of all asset filenames to their corresponding
// output file so that tools can pick it up without having to parse
// `index.html`
// - "entrypoints" key: Array of files which are included in `index.html`,
// can be used to reconstruct the HTML if necessary
new ManifestPlugin({
fileName: 'asset-manifest.json',
publicPath: paths.publicUrlOrPath,
generate: (seed, files, entrypoints) => {
const manifestFiles = files.reduce((manifest, file) => {
manifest[file.name] = file.path;
return manifest;
}, seed);
const entrypointFiles = entrypoints.main.filter(
fileName => !fileName.endsWith('.map')
);
return {
files: manifestFiles,
entrypoints: entrypointFiles,
};
},
}),
// Moment.js is an extremely popular library that bundles large locale files
// by default due to how webpack interprets its code. This is a practical
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// Generate a service worker script that will precache, and keep up to date,
// the HTML & assets that are part of the webpack build.
isEnvProduction &&
fs.existsSync(swSrc) &&
new WorkboxWebpackPlugin.InjectManifest({
swSrc,
dontCacheBustURLsMatching: /\.[0-9a-f]{8}\./,
exclude: [/\.map$/, /asset-manifest\.json$/, /LICENSE/],
// Bump up the default maximum size (2mb) that's precached,
// to make lazy-loading failure scenarios less likely.
// See https://github.com/cra-template/pwa/issues/13#issuecomment-722667270
maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
}),
// TypeScript type checking
useTypeScript &&
new ForkTsCheckerWebpackPlugin({
typescript: resolve.sync('typescript', {
basedir: paths.appNodeModules,
}),
async: isEnvDevelopment,
checkSyntacticErrors: true,
resolveModuleNameModule: process.versions.pnp
? `${__dirname}/pnpTs.js`
: undefined,
resolveTypeReferenceDirectiveModule: process.versions.pnp
? `${__dirname}/pnpTs.js`
: undefined,
tsconfig: paths.appTsConfig,
reportFiles: [
// This one is specifically to match during CI tests,
// as micromatch doesn't match
// '../cra-template-typescript/template/src/App.tsx'
// otherwise.
'../**/src/**/*.{ts,tsx}',
'**/src/**/*.{ts,tsx}',
'!**/src/**/__tests__/**',
'!**/src/**/?(*.)(spec|test).*',
'!**/src/setupProxy.*',
'!**/src/setupTests.*',
],
silent: true,
// The formatter is invoked directly in WebpackDevServerUtils during development
formatter: isEnvProduction ? typescriptFormatter : undefined,
}),
!disableESLintPlugin &&
new ESLintPlugin({
// Plugin options
extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
failOnError: !(isEnvDevelopment && emitErrorsAsWarnings),
context: paths.appSrc,
cache: true,
cacheLocation: path.resolve(
paths.appNodeModules,
'.cache/.eslintcache'
),
// ESLint class options
cwd: paths.appPath,
resolvePluginsRelativeTo: __dirname,
baseConfig: {
extends: [require.resolve('eslint-config-react-app/base')],
rules: {
...(!hasJsxRuntime && {
'react/react-in-jsx-scope': 'error',
}),
},
},
}),
].filter(Boolean),
// Some libraries import Node modules but don't use them in the browser.
// Tell webpack to provide empty mocks for them so importing them works.
node: {
module: 'empty',
dgram: 'empty',
dns: 'mock',
fs: 'empty',
http2: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty',
},
// Turn off performance processing because we utilize
// our own hints via the FileSizeReporter
performance: false,
};
};

@ -0,0 +1,130 @@
'use strict';
const fs = require('fs');
const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
const ignoredFiles = require('react-dev-utils/ignoredFiles');
const redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware');
const paths = require('./paths');
const getHttpsConfig = require('./getHttpsConfig');
const host = process.env.HOST || '0.0.0.0';
const sockHost = process.env.WDS_SOCKET_HOST;
const sockPath = process.env.WDS_SOCKET_PATH; // default: '/sockjs-node'
const sockPort = process.env.WDS_SOCKET_PORT;
module.exports = function (proxy, allowedHost) {
return {
// WebpackDevServer 2.4.3 introduced a security fix that prevents remote
// websites from potentially accessing local content through DNS rebinding:
// https://github.com/webpack/webpack-dev-server/issues/887
// https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
// However, it made several existing use cases such as development in cloud
// environment or subdomains in development significantly more complicated:
// https://github.com/facebook/create-react-app/issues/2271
// https://github.com/facebook/create-react-app/issues/2233
// While we're investigating better solutions, for now we will take a
// compromise. Since our WDS configuration only serves files in the `public`
// folder we won't consider accessing them a vulnerability. However, if you
// use the `proxy` feature, it gets more dangerous because it can expose
// remote code execution vulnerabilities in backends like Django and Rails.
// So we will disable the host check normally, but enable it if you have
// specified the `proxy` setting. Finally, we let you override it if you
// really know what you're doing with a special environment variable.
disableHostCheck:
!proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
// Enable gzip compression of generated files.
compress: true,
// Silence WebpackDevServer's own logs since they're generally not useful.
// It will still show compile warnings and errors with this setting.
clientLogLevel: 'none',
// By default WebpackDevServer serves physical files from current directory
// in addition to all the virtual build products that it serves from memory.
// This is confusing because those files won’t automatically be available in
// production build folder unless we copy them. However, copying the whole
// project directory is dangerous because we may expose sensitive files.
// Instead, we establish a convention that only files in `public` directory
// get served. Our build script will copy `public` into the `build` folder.
// In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
// <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
// In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
// Note that we only recommend to use `public` folder as an escape hatch
// for files like `favicon.ico`, `manifest.json`, and libraries that are
// for some reason broken when imported through webpack. If you just want to
// use an image, put it in `src` and `import` it from JavaScript instead.
contentBase: paths.appPublic,
contentBasePublicPath: paths.publicUrlOrPath,
// By default files from `contentBase` will not trigger a page reload.
watchContentBase: true,
// Enable hot reloading server. It will provide WDS_SOCKET_PATH endpoint
// for the WebpackDevServer client so it can learn when the files were
// updated. The WebpackDevServer client is included as an entry point
// in the webpack development configuration. Note that only changes
// to CSS are currently hot reloaded. JS changes will refresh the browser.
hot: true,
// Use 'ws' instead of 'sockjs-node' on server since we're using native
// websockets in `webpackHotDevClient`.
transportMode: 'ws',
// Prevent a WS client from getting injected as we're already including
// `webpackHotDevClient`.
injectClient: false,
// Enable custom sockjs pathname for websocket connection to hot reloading server.
// Enable custom sockjs hostname, pathname and port for websocket connection
// to hot reloading server.
sockHost,
sockPath,
sockPort,
// It is important to tell WebpackDevServer to use the same "publicPath" path as
// we specified in the webpack config. When homepage is '.', default to serving
// from the root.
// remove last slash so user can land on `/test` instead of `/test/`
publicPath: paths.publicUrlOrPath.slice(0, -1),
// WebpackDevServer is noisy by default so we emit custom message instead
// by listening to the compiler events with `compiler.hooks[...].tap` calls above.
quiet: true,
// Reportedly, this avoids CPU overload on some systems.
// https://github.com/facebook/create-react-app/issues/293
// src/node_modules is not ignored to support absolute imports
// https://github.com/facebook/create-react-app/issues/1065
watchOptions: {
ignored: ignoredFiles(paths.appSrc),
},
https: getHttpsConfig(),
host,
overlay: false,
historyApiFallback: {
// Paths with dots should still use the history fallback.
// See https://github.com/facebook/create-react-app/issues/387.
disableDotRule: true,
index: paths.publicUrlOrPath,
},
public: allowedHost,
// `proxy` is run between `before` and `after` `webpack-dev-server` hooks
proxy,
before(app, server) {
// Keep `evalSourceMapMiddleware` and `errorOverlayMiddleware`
// middlewares before `redirectServedPath` otherwise will not have any effect
// This lets us fetch source contents from webpack for the error overlay
app.use(evalSourceMapMiddleware(server));
// This lets us open files from the runtime error overlay.
app.use(errorOverlayMiddleware());
if (fs.existsSync(paths.proxySetup)) {
// This registers user provided middleware for proxy reasons
require(paths.proxySetup)(app);
}
},
after(app) {
// Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
app.use(redirectServedPath(paths.publicUrlOrPath));
// This service worker file is effectively a 'no-op' that will reset any
// previous service worker registered for the same host:port combination.
// We do this in development to avoid hitting the production cache if
// it used the same host and port.
// https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
},
};
};

@ -3,34 +3,78 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/core": "7.12.3",
"@material-ui/core": "^4.11.4",
"@material-ui/icons": "^4.11.2",
"@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
"@svgr/webpack": "5.5.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@typescript-eslint/eslint-plugin": "^4.5.0",
"@typescript-eslint/parser": "^4.5.0",
"array-move": "^3.0.1",
"audio-react-recorder": "^1.0.4",
"axios": "^0.21.1",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.6.0",
"babel-loader": "8.1.0",
"babel-plugin-import-directory": "^1.1.0",
"babel-plugin-named-asset-import": "^0.3.7",
"babel-plugin-wildcard": "^7.0.0",
"babel-preset-react-app": "^10.0.0",
"bfj": "^7.0.2",
"bootstrap": "^5.0.1",
"camelcase": "^6.1.0",
"case-sensitive-paths-webpack-plugin": "2.3.0",
"create-index": "^2.6.0",
"css-loader": "4.3.0",
"dotenv": "8.2.0",
"dotenv-expand": "5.1.0",
"eslint": "^7.11.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.1.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-testing-library": "^3.9.2",
"eslint-webpack-plugin": "^2.5.2",
"file-loader": "6.1.1",
"fs-extra": "^9.0.1",
"history": "^5.0.0",
"html-webpack-plugin": "4.5.0",
"identity-obj-proxy": "3.0.0",
"jalali-moment": "^3.3.10",
"jest": "26.6.0",
"jest-circus": "26.6.0",
"jest-resolve": "26.6.0",
"jest-watch-typeahead": "0.6.1",
"mapir-react-component": "^1.8.1",
"material-ui-audio-player": "https://github.com/RezaAshrafi77/material-ui-audio-player.git",
"material-ui-player": "^0.2.2",
"mini-css-extract-plugin": "0.11.3",
"optimize-css-assets-webpack-plugin": "5.0.4",
"pnp-webpack-plugin": "1.6.4",
"postcss-flexbugs-fixes": "4.2.1",
"postcss-loader": "3.0.0",
"postcss-normalize": "8.0.1",
"postcss-preset-env": "6.7.0",
"postcss-safe-parser": "5.0.2",
"prettier": "^2.3.1",
"prompts": "2.4.0",
"react": "^17.0.2",
"react-app-polyfill": "^2.0.0",
"react-audio-player": "^0.17.0",
"react-dev-utils": "^11.0.3",
"react-dom": "^17.0.2",
"react-elastic-carousel": "^0.11.5",
"react-player": "^2.9.0",
"react-qr-scanner": "^1.0.0-alpha.7",
"react-redux": "^7.2.4",
"react-refresh": "^0.8.3",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-sortable-hoc": "^2.0.0",
"react-soundplayer": "^1.0.5",
"react-swipeable-views": "^0.14.0",
@ -39,15 +83,26 @@
"redux": "^4.1.0",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.3.0",
"resolve": "1.18.1",
"resolve-url-loader": "^3.1.2",
"sass": "^1.34.1",
"sass-loader": "^10.0.5",
"semver": "7.3.2",
"style-loader": "1.3.0",
"styled-components": "^5.3.0",
"web-vitals": "^1.0.1"
"terser-webpack-plugin": "4.2.3",
"ts-pnp": "1.2.0",
"url-loader": "4.1.1",
"web-vitals": "^1.0.1",
"webpack": "4.44.2",
"webpack-dev-server": "3.11.1",
"webpack-manifest-plugin": "2.2.0",
"workbox-webpack-plugin": "5.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
},
"eslintConfig": {
"extends": [
@ -69,5 +124,69 @@
},
"devDependencies": {
"babel-plugin-root-import": "^6.6.0"
},
"jest": {
"roots": [
"<rootDir>/src"
],
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"setupFiles": [
"react-app-polyfill/jsdom"
],
"setupFilesAfterEnv": [],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
],
"testEnvironment": "jsdom",
"testRunner": "C:\\Users\\Appsazz\\Desktop\\danovin\\node_modules\\jest-circus\\runner.js",
"transform": {
"^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"modulePaths": [],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
],
"watchPlugins": [
"jest-watch-typeahead/filename",
"jest-watch-typeahead/testname"
],
"resetMocks": true
},
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"babel-plugin-root-import",
{
"rootPathSuffix": "./src",
"rootPathPrefix": "~/"
}
]
]
}
}

@ -0,0 +1,212 @@
'use strict';
// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'production';
process.env.NODE_ENV = 'production';
// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
throw err;
});
// Ensure environment variables are read.
require('../config/env');
const path = require('path');
const chalk = require('react-dev-utils/chalk');
const fs = require('fs-extra');
const bfj = require('bfj');
const webpack = require('webpack');
const configFactory = require('../config/webpack.config');
const paths = require('../config/paths');
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
const printBuildError = require('react-dev-utils/printBuildError');
const measureFileSizesBeforeBuild =
FileSizeReporter.measureFileSizesBeforeBuild;
const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
const useYarn = fs.existsSync(paths.yarnLockFile);
// These sizes are pretty large. We'll warn for bundles exceeding them.
const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
const isInteractive = process.stdout.isTTY;
// Warn and crash if required files are missing
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
process.exit(1);
}
const argv = process.argv.slice(2);
const writeStatsJson = argv.indexOf('--stats') !== -1;
// Generate configuration
const config = configFactory('production');
// We require that you explicitly set browsers and do not fall back to
// browserslist defaults.
const { checkBrowsers } = require('react-dev-utils/browsersHelper');
checkBrowsers(paths.appPath, isInteractive)
.then(() => {
// First, read the current file sizes in build directory.
// This lets us display how much they changed later.
return measureFileSizesBeforeBuild(paths.appBuild);
})
.then(previousFileSizes => {
// Remove all content but keep the directory so that
// if you're in it, you don't end up in Trash
fs.emptyDirSync(paths.appBuild);
// Merge with the public folder
copyPublicFolder();
// Start the webpack build
return build(previousFileSizes);
})
.then(
({ stats, previousFileSizes, warnings }) => {
if (warnings.length) {
console.log(chalk.yellow('Compiled with warnings.\n'));
console.log(warnings.join('\n\n'));
console.log(
'\nSearch for the ' +
chalk.underline(chalk.yellow('keywords')) +
' to learn more about each warning.'
);
console.log(
'To ignore, add ' +
chalk.cyan('// eslint-disable-next-line') +
' to the line before.\n'
);
} else {
console.log(chalk.green('Compiled successfully.\n'));
}
console.log('File sizes after gzip:\n');
printFileSizesAfterBuild(
stats,
previousFileSizes,
paths.appBuild,
WARN_AFTER_BUNDLE_GZIP_SIZE,
WARN_AFTER_CHUNK_GZIP_SIZE
);
console.log();
const appPackage = require(paths.appPackageJson);
const publicUrl = paths.publicUrlOrPath;
const publicPath = config.output.publicPath;
const buildFolder = path.relative(process.cwd(), paths.appBuild);
printHostingInstructions(
appPackage,
publicUrl,
publicPath,
buildFolder,
useYarn
);
},
err => {
const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
if (tscCompileOnError) {
console.log(
chalk.yellow(
'Compiled with the following type errors (you may want to check these before deploying your app):\n'
)
);
printBuildError(err);
} else {
console.log(chalk.red('Failed to compile.\n'));
printBuildError(err);
process.exit(1);
}
}
)
.catch(err => {
if (err && err.message) {
console.log(err.message);
}
process.exit(1);
});
// Create the production build and print the deployment instructions.
function build(previousFileSizes) {
console.log('Creating an optimized production build...');
const compiler = webpack(config);
return new Promise((resolve, reject) => {
compiler.run((err, stats) => {
let messages;
if (err) {
if (!err.message) {
return reject(err);
}
let errMessage = err.message;
// Add additional information for postcss errors
if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) {
errMessage +=
'\nCompileError: Begins at CSS selector ' +
err['postcssNode'].selector;
}
messages = formatWebpackMessages({
errors: [errMessage],
warnings: [],
});
} else {
messages = formatWebpackMessages(
stats.toJson({ all: false, warnings: true, errors: true })
);
}
if (messages.errors.length) {
// Only keep the first error. Others are often indicative
// of the same problem, but confuse the reader with noise.
if (messages.errors.length > 1) {
messages.errors.length = 1;
}
return reject(new Error(messages.errors.join('\n\n')));
}
if (
process.env.CI &&
(typeof process.env.CI !== 'string' ||
process.env.CI.toLowerCase() !== 'false') &&
messages.warnings.length
) {
console.log(
chalk.yellow(
'\nTreating warnings as errors because process.env.CI = true.\n' +
'Most CI servers set it automatically.\n'
)
);
return reject(new Error(messages.warnings.join('\n\n')));
}
const resolveArgs = {
stats,
previousFileSizes,
warnings: messages.warnings,
};
if (writeStatsJson) {
return bfj
.write(paths.appBuild + '/bundle-stats.json', stats.toJson())
.then(() => resolve(resolveArgs))
.catch(error => reject(new Error(error)));
}
return resolve(resolveArgs);
});
});
}
function copyPublicFolder() {
fs.copySync(paths.appPublic, paths.appBuild, {
dereference: true,
filter: file => file !== paths.appHtml,
});
}

@ -0,0 +1,166 @@
'use strict';
// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'development';
process.env.NODE_ENV = 'development';
// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
throw err;
});
// Ensure environment variables are read.
require('../config/env');
const fs = require('fs');
const chalk = require('react-dev-utils/chalk');
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const clearConsole = require('react-dev-utils/clearConsole');
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
const {
choosePort,
createCompiler,
prepareProxy,
prepareUrls,
} = require('react-dev-utils/WebpackDevServerUtils');
const openBrowser = require('react-dev-utils/openBrowser');
const semver = require('semver');
const paths = require('../config/paths');
const configFactory = require('../config/webpack.config');
const createDevServerConfig = require('../config/webpackDevServer.config');
const getClientEnvironment = require('../config/env');
const react = require(require.resolve('react', { paths: [paths.appPath] }));
const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
const useYarn = fs.existsSync(paths.yarnLockFile);
const isInteractive = process.stdout.isTTY;
// Warn and crash if required files are missing
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
process.exit(1);
}
// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0';
if (process.env.HOST) {
console.log(
chalk.cyan(
`Attempting to bind to HOST environment variable: ${chalk.yellow(
chalk.bold(process.env.HOST)
)}`
)
);
console.log(
`If this was unintentional, check that you haven't mistakenly set it in your shell.`
);
console.log(
`Learn more here: ${chalk.yellow('https://cra.link/advanced-config')}`
);
console.log();
}
// We require that you explicitly set browsers and do not fall back to
// browserslist defaults.
const { checkBrowsers } = require('react-dev-utils/browsersHelper');
checkBrowsers(paths.appPath, isInteractive)
.then(() => {
// We attempt to use the default port but if it is busy, we offer the user to
// run on a different port. `choosePort()` Promise resolves to the next free port.
return choosePort(HOST, DEFAULT_PORT);
})
.then(port => {
if (port == null) {
// We have not found a port.
return;
}
const config = configFactory('development');
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
const appName = require(paths.appPackageJson).name;
const useTypeScript = fs.existsSync(paths.appTsConfig);
const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
const urls = prepareUrls(
protocol,
HOST,
port,
paths.publicUrlOrPath.slice(0, -1)
);
const devSocket = {
warnings: warnings =>
devServer.sockWrite(devServer.sockets, 'warnings', warnings),
errors: errors =>
devServer.sockWrite(devServer.sockets, 'errors', errors),
};
// Create a webpack compiler that is configured with custom messages.
const compiler = createCompiler({
appName,
config,
devSocket,
urls,
useYarn,
useTypeScript,
tscCompileOnError,
webpack,
});
// Load proxy config
const proxySetting = require(paths.appPackageJson).proxy;
const proxyConfig = prepareProxy(
proxySetting,
paths.appPublic,
paths.publicUrlOrPath
);
// Serve webpack assets generated by the compiler over a web server.
const serverConfig = createDevServerConfig(
proxyConfig,
urls.lanUrlForConfig
);
const devServer = new WebpackDevServer(compiler, serverConfig);
// Launch WebpackDevServer.
devServer.listen(port, HOST, err => {
if (err) {
return console.log(err);
}
if (isInteractive) {
clearConsole();
}
if (env.raw.FAST_REFRESH && semver.lt(react.version, '16.10.0')) {
console.log(
chalk.yellow(
`Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.`
)
);
}
console.log(chalk.cyan('Starting the development server...\n'));
openBrowser(urls.localUrlForBrowser);
});
['SIGINT', 'SIGTERM'].forEach(function (sig) {
process.on(sig, function () {
devServer.close();
process.exit();
});
});
if (process.env.CI !== 'true') {
// Gracefully exit when stdin ends
process.stdin.on('end', function () {
devServer.close();
process.exit();
});
}
})
.catch(err => {
if (err && err.message) {
console.log(err.message);
}
process.exit(1);
});

@ -0,0 +1,53 @@
'use strict';
// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'test';
process.env.NODE_ENV = 'test';
process.env.PUBLIC_URL = '';
// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
throw err;
});
// Ensure environment variables are read.
require('../config/env');
const jest = require('jest');
const execSync = require('child_process').execSync;
let argv = process.argv.slice(2);
function isInGitRepository() {
try {
execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
return true;
} catch (e) {
return false;
}
}
function isInMercurialRepository() {
try {
execSync('hg --cwd . root', { stdio: 'ignore' });
return true;
} catch (e) {
return false;
}
}
// Watch unless on CI or explicitly running all tests
if (
!process.env.CI &&
argv.indexOf('--watchAll') === -1 &&
argv.indexOf('--watchAll=false') === -1
) {
// https://github.com/facebook/create-react-app/issues/5210
const hasSourceControl = isInGitRepository() || isInMercurialRepository();
argv.push(hasSourceControl ? '--watch' : '--watchAll');
}
jest.run(argv);

Binary file not shown.

After

Width:  |  Height:  |  Size: 669 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 469 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 536 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 494 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 617 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 726 KiB

@ -1,19 +1,28 @@
import React, { Component } from "react";
import logo from "../../../../assets/icons/logo.png";
import iran from "../../../../assets/icons/iran.svg";
import iran from "../../../../assets/icons/iran.png";
import pic from "../../../../assets/images/pic.png";
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
desktop: {
span: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 85,
input: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 85,
button: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 85,
div: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 95,
div: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 100,
},
mobile: {
span: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 22,
input: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 22,
button: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 24,
div: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 30,
h1: window.innerWidth > maxMobileSize ? 30 : window.innerWidth / 18,
p: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 32,
},
};
@ -73,10 +82,12 @@ export default class Cellphone extends Component {
{" "}
حساب کاربری ندارید ؟ همین حالا<button>ثبت نام کنید</button>
</div>
<div style={{ fontSize: fontSize.desktop.div }}>شرایط استفاده و حریم خصوصی</div>
<div style={{ fontSize: fontSize.desktop.div }}>
شرایط استفاده و حریم خصوصی
</div>
</div>
</div>
<div style={{ width: "48%", height: "100%" }}>
<div style={{ width: "48%", height: "100%", opacity: 0 }}>
<img
src={pic}
alt="عکس"
@ -90,8 +101,8 @@ export default class Cellphone extends Component {
<div className="mobile-auth-cellphone d-flex flex-column align-items-center">
<img src={logo} alt="دانوین" />
<div className="d-flex flex-column">
<h1>دانوین</h1>
<p>
<h1 style={{ fontSize: fontSize.mobile.h1 }}>دانوین</h1>
<p style={{ fontSize: fontSize.mobile.p }}>
به دانوین خوش اومدی برای عضویت و ادامه شماره موبایلت رو وارد کن
و روی گزینه ثبت بزن
</p>
@ -104,7 +115,7 @@ export default class Cellphone extends Component {
})
}
>
<span>09</span>
<span style={{ fontSize: fontSize.mobile.span }}>09</span>
<img src={iran} alt="پرچم" />
<input
id="cellphone"
@ -123,10 +134,19 @@ export default class Cellphone extends Component {
})
.replace(/[^\d]/, ""))
}
style={{ fontSize: fontSize.mobile.input }}
/>
<button type="submit">ادامه</button>
<button
style={{ fontSize: fontSize.mobile.button }}
type="submit"
>
ادامه
</button>
</form>
<div className="mobile-auth-cellphone__footer d-flex flex-column justify-content-center align-items-center">
<div
style={{ fontSize: fontSize.mobile.div }}
className="mobile-auth-cellphone__footer d-flex flex-column justify-content-center align-items-center"
>
<div>
{" "}
حساب کاربری ندارید ؟ همین حالا <button>ثبت نام کنید</button>

@ -7,7 +7,12 @@
border: 1px solid #ddd;
border-radius: 20px;
justify-content: space-between;
background: url(../../../../assets/images/auth_bg.png);
background-position: -58px -60px;
background-size: calc(100% + 150px) calc(100% + 200px);
background-repeat: no-repeat;
height: 80%;
max-height: 600px;
img {
margin-bottom: 30px;
width: 200px;
@ -39,7 +44,7 @@
text-align: left;
background-color: #f2f2f2;
border: none;
padding: 8px 5px 8px 105px;
padding: 8px 5px 8px 85px;
border-radius: 5px;
&:focus {
outline: 0px;
@ -50,7 +55,7 @@
width: 100%;
max-width: 400px;
border: 0px;
font-family: numeralMedium;
font-family: numeralLight;
background-color: #6cbe44;
color: white;
border-radius: 7px;
@ -60,7 +65,7 @@
&--footer {
max-width: 400px;
div {
font-family: numeralMedium;
font-family: numeralLight;
color: #a5a5a5;
letter-spacing: -1px;
button {
@ -68,6 +73,8 @@
border: 0px;
color: #02733c;
letter-spacing: -1px;
transform: translateX(-3px);
padding: 0px;
}
}
}
@ -79,8 +86,9 @@
height: 100%;
justify-content: center;
align-items: center;
max-width: 360px;
max-width: 500px;
margin: 0px auto;
padding: 10px;
img {
margin-bottom: 30px;
position: relative;
@ -88,16 +96,13 @@
}
h1 {
font-family: numeralBold;
font-size: calc(100vw / 15);
color: #6f7074;
position: relative;
bottom: 40px;
}
p {
font-family: numeralLight;
font-size: calc(100vw / 25);
color: #6f7074;
letter-spacing: -1px;
position: relative;
bottom: 40px;
}
@ -115,21 +120,22 @@
text-align: right;
position: absolute;
left: 65px;
top: 5px;
top: 7px;
direction: ltr;
font-size: calc(100vw / 20);
font-family: numeralLight;
color: #a5a5a5;
}
input {
font-family: numeralLight;
width: 100%;
height: 41px;
background-color: inherit;
color: #a5a5a5;
direction: ltr;
text-align: left;
background-color: #f2f2f2;
border: none;
font-size: calc(100vw / 20);
padding: 5px 5px 5px 105px;
padding: 0px 5px 0px 83px;
border-radius: 5px;
&:focus {
outline: 0px;
@ -139,26 +145,26 @@
margin-top: 20px;
width: 100%;
border: 0px;
font-family: numeralMedium;
font-family: numeralLight;
background-color: #6cbe44;
color: white;
border-radius: 7px;
padding: 8px;
font-size: calc(100vw / 20);
}
}
&__footer {
position: fixed;
bottom: 40px;
div {
font-family: numeralMedium;
font-size: calc(100vw / 28);
font-family: numeralLight;
color: #a5a5a5;
letter-spacing: -1px;
button {
background-color: white;
border: 0px;
color: #02733c;
padding: 0px;
letter-spacing: -1px;
}
}
}

@ -1,6 +1,7 @@
.footer {
width: 100%;
background-color: rgb(80, 80, 80);
padding: 10px;
&-container {
width: 100%;
max-width: 1250px;
@ -77,13 +78,12 @@
}
}
.mobile-footer {
width: 100%;
background-color: rgb(80, 80, 80);
&-container {
width: 100%;
padding : 20px 20px;
padding: 20px 20px;
margin: 0px auto;
&__content {
padding-bottom: 40px;

@ -1,7 +1,8 @@
import React, { Component } from "react";
import { Link } from "react-router-dom";
import logo from "../../../../assets/icons/logo.png";
import logo from "~/assets/icons/logo.png";
import basket from "~/assets/icons/basket.png";
import "./index.scss";
@ -26,12 +27,24 @@ export default class LaptopNavbar extends Component {
<ul className="laptop-navbar__list d-flex">
{links.map((item, i) => (
<li style={{ fontSize: fontSize.desktop.li }} key={i}>
<Link to={item.to} style={{ color: this.props.page === item.page ? '#6cbe44' : '#6f7074' }}>{item.name}</Link>
<Link
to={item.to}
style={{
color:
this.props.page === item.page ? "#6cbe44" : "#6f7074",
}}
>
{item.name}
</Link>
</li>
))}
</ul>
</div>
<div className="d-flex">
<div className="d-flex align-items-center">
<Link to="/cart">
<img width="30" height="35" src={basket} alt="سبد خرید" />
</Link>
<Link
style={{ fontSize: fontSize.desktop.a }}
to={"/auth"}

@ -1,4 +1,4 @@
.laptop-navbar{
.laptop-navbar {
width: 100%;
// height: 60px;
justify-content: space-between;
@ -8,51 +8,51 @@
overflow: hidden;
background-color: white;
padding: 0px 10px 0px 20px;
&::-webkit-scrollbar{
&::-webkit-scrollbar {
display: none;
width: 0px;
}
&__logo{
&__logo {
// width: 100px;
// height: 50px;
// background : greenyellow;
position: relative;
left: 14px;
}
&__list{
margin : 0px;
&__list {
margin: 0px;
list-style: none;
align-items: center;
padding: 0px;
margin-right: 10px;
li{
li {
margin: 0px 10px;
padding: 0px 15px;
text-decoration: none;
a{
a {
text-decoration: none;
}
}
}
&__signin{
&__signin {
font-family: numeralLight;
text-decoration: none;
color: #6cbe44;
padding : 10px 20px;
margin-left: 12px;
&:hover{
padding: 10px 20px;
margin-left: 6px;
&:hover {
color: #6cbe44;
}
}
&__signup{
&__signup {
font-family: numeralLight;
text-decoration: none;
color: white;
background-color: #6cbe44;
border-radius: 6px;
padding : 10px 20px;
&:hover{
padding: 10px 20px;
&:hover {
color: white;
}
}

@ -10,25 +10,25 @@ import HomeSearch from "./HomeSearch/index";
import Membership from "./Membership/index";
import SingleBlog from "./SingleBlog/index";
import pic1 from "../../assets/images/pic1.png";
import pic from "../../assets/images/pic.png";
import online from "../../assets/icons/online-education.png";
import chemistry from "../../assets/icons/chemistry.png";
import calculator from "../../assets/icons/calculator.png";
import homework from "../../assets/icons/homework.png";
import pic1 from "~/assets/images/pic1.png";
import pic from "~/assets/images/pic.png";
import online from "~/assets/icons/online-education.png";
import chemistry from "~/assets/icons/chemistry.png";
import calculator from "~/assets/icons/calculator.png";
import homework from "~/assets/icons/homework.png";
import sciense_6 from "~/assets/images/sciense-6.png";
import sciense_7 from "../../assets/images/sciense-7.png";
import sciense_8 from "../../assets/images/sciense-8.png";
import sciense_9 from "../../assets/images/sciense-9.png";
import zist_10 from "../../assets/images/zist-10.png";
import blog1 from "../../assets/images/blog1.png";
import blog2 from "../../assets/images/blog2.png";
import blog3 from "../../assets/images/blog3.png";
import ar from "../../assets/icons/qr.svg";
import qr from "../../assets/icons/qr.svg";
import myBook from "../../assets/images/myBook.png";
import homeBlog from "../../assets/images/homeBlog.png";
import bookActivation from "../../assets/images/bookActivating.png";
import chemistry_10 from "~/assets/images/chemistry-10.png";
import sciense_8 from "~/assets/images/sciense-8.png";
import sciense_9 from "~/assets/images/sciense-9.png";
import zist_10 from "~/assets/images/zist-10.png";
import blog1 from "~/assets/images/blog1.png";
import blog2 from "~/assets/images/blog2.png";
import blog3 from "~/assets/images/blog3.png";
import ar from "~/assets/icons/qr.svg";
import qr from "~/assets/icons/qr.svg";
import myBook from "~/assets/images/myBook.png";
import homeBlog from "~/assets/images/homeBlog.png";
import bookActivation from "~/assets/images/bookActivating.png";
import "./index.scss";
export default class Home extends Component {
@ -283,7 +283,7 @@ Home.defaultProps = {
alignItems: "center",
books: [
{ id: 0, imageUrl: sciense_6 },
{ id: 1, imageUrl: sciense_7 },
{ id: 1, imageUrl: chemistry_10 },
{ id: 2, imageUrl: sciense_8 },
],
link: "/products",
@ -482,7 +482,7 @@ Home.defaultProps = {
},
{
id: 1,
image: sciense_7,
image: chemistry_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
},
@ -512,7 +512,7 @@ Home.defaultProps = {
},
{
id: 6,
image: sciense_7,
image: chemistry_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
},
@ -568,7 +568,7 @@ Home.defaultProps = {
},
{
id: 1,
image: sciense_7,
image: chemistry_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "39.000",
@ -610,7 +610,7 @@ Home.defaultProps = {
},
{
id: 6,
image: sciense_7,
image: chemistry_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "39.000",
@ -665,7 +665,7 @@ Home.defaultProps = {
},
{
id: 1,
image: sciense_7,
image: chemistry_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "39.000",
@ -707,7 +707,7 @@ Home.defaultProps = {
},
{
id: 6,
image: sciense_7,
image: chemistry_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "39.000",

@ -1,6 +1,9 @@
import React, { Component } from "react";
import "./index.scss";
import document_red from "~/assets/icons/document-red.png";
import ebook_blue from "~/assets/icons/e-book-blue.png";
import basket_white from "~/assets/icons/basket-white.png";
const maxDesktopSize = 1250;
@ -11,11 +14,12 @@ const fontSize = {
span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
button: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 80,
p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 100,
h2: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 100,
},
};
export default function AddToCart(props) {
const { price, off } = props;
const { price, off, supportItems } = props;
return (
<>
{window.innerWidth > 1000 ? (
@ -28,16 +32,30 @@ export default function AddToCart(props) {
</strong>{" "}
تومان
</div>
<span style={{ fontSize: fontSize.desktop.span }}>{off} نخفیف</span>
<span style={{ fontSize: fontSize.desktop.span }}>
{off} نخفیف
</span>
</div>
<button style={{ fontSize: fontSize.desktop.button }} className="product-addtocart__box--sampleButton">
<button
style={{ fontSize: fontSize.desktop.button }}
className="product-addtocart__box--sampleButton"
>
مشاهده نمونه کتاب
<img src={document_red} />
</button>
<button style={{ fontSize: fontSize.desktop.button }} className="product-addtocart__box--digitalButton">
<button
style={{ fontSize: fontSize.desktop.button }}
className="product-addtocart__box--digitalButton"
>
خرید نسخه دیجیتال
<img src={ebook_blue} />
</button>
<button style={{ fontSize: fontSize.desktop.button }} className="product-addtocart__box--addButton">
<button
style={{ fontSize: fontSize.desktop.button }}
className="product-addtocart__box--addButton"
>
افزودن به سبد خرید
<img src={basket_white} />
</button>
<div className="product-addtocart__box--accept d-flex">
<input type="checkbox" />
@ -48,7 +66,14 @@ export default function AddToCart(props) {
</p>
</div>
</div>
<footer className="product-addtocart__footer d-flex mt-3"></footer>
<footer className="product-addtocart__footer d-flex justify-content-between mt-3">
{supportItems.map((item, i) => (
<div className="d-flex flex-column align-items-center" key={i}>
<img src={item.icon} alt={item.name} />
<h2 style={{ fontSize: fontSize.desktop.h2 }}>{item.title}</h2>
</div>
))}
</footer>
</section>
) : null}
</>

@ -1,61 +1,84 @@
.product-addtocart{
.product-addtocart {
flex: 3.5;
margin: 10px;
&__box{
box-shadow: 0px 0px 13px #D5D5D5B0;
margin-left: 0px;
&__box {
box-shadow: 0px 0px 13px #d5d5d5b0;
border-radius: 13px;
padding: 20px 10px;
&--price{
&--price {
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
span{
background-color: #FFDD00;
span {
background-color: #ffdd00;
padding: 10px;
color: #4D4D4F;
color: #4d4d4f;
font-family: numeralLight;
border-radius: 5px;
}
div{
div {
color: #848484;
font-family: numeralLight;
strong{
strong {
font-family: numeralBold;
color: #4D4D4F;
color: #4d4d4f;
}
}
}
button{
button {
font-family: numeralLight;
border-radius: 7px;
margin-bottom: 10px;
padding: 10px;
position: relative;
letter-spacing: -1px;
img {
position: absolute;
left: 13px;
top: 13px;
transform: scale(0.9);
}
}
&--sampleButton{
color: #FF1616;
border: 1px solid #FF1616;
&--sampleButton {
color: #ff1616;
border: 1px solid #ff1616;
background-color: white;
}
&--digitalButton{
color: #2B95FF;
border: 1px solid #2B95FF;
&--digitalButton {
color: #2b95ff;
border: 1px solid #2b95ff;
background-color: white;
}
&--addButton{
background-color: #0080FFD4;
&--addButton {
background-color: #0080ffd4;
color: white;
border: 1px solid #0080FFD4;
border: 1px solid #0080ffd4;
}
&--accept{
input{
&--accept {
input {
margin: 3px 0px 0px 10px;
}
p{
color: #9E9E9E;
p {
color: #9e9e9e;
font-family: numeralLight;
text-align: justify;
letter-spacing: -1px;
}
}
}
}
&__footer {
padding: 5px 10px;
img {
width: 30px;
height: 30px;
margin-bottom: 5px;
}
h2 {
// color: ;
font-family: numeralLight;
letter-spacing: -1px;
color: #4d4d4f;
}
}
}

@ -1,27 +1,29 @@
import React, { Component } from 'react';
import React, { Component } from "react";
import './index.scss';
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
desktop : {
desktop: {
strong: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70,
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85,
}
}
},
};
const Replay = (props) => {
return(
return (
<>
{window.innerWidth > 1000 ?
<div className="reply d-flex flex-column justify-content-center">
<strong style={{ fontSize: fontSize.desktop.strong }}>پاسخ مدیریت سایت</strong>
<p style={{ fontSize: fontSize.desktop.p }}>{props.reply}</p>
</div> : null
}
{window.innerWidth > 1000 ? (
<div className="reply d-flex flex-column justify-content-center">
<strong style={{ fontSize: fontSize.desktop.strong }}>
پاسخ مدیریت سایت
</strong>
<p style={{ fontSize: fontSize.desktop.p }}>{props.data}</p>
</div>
) : null}
</>
);
}
};
export default Replay;
export default Replay;

@ -1,38 +1,57 @@
import React from "react";
import moment from "jalali-moment";
import Reply from "./Reply/index";
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
desktop : {
desktop: {
strong: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70,
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85,
span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95,
},
mobile : {
mobile: {
strong: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 20,
p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 27,
span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32,
},
}
};
export default function Comment(props) {
const { comment } = props;
return (
<>
{window.innerWidth < 1000 ? (
<div className="mobile-comment d-flex flex-column">
<strong style={{ fontSize: fontSize.mobile.strong }}>{comment.username}</strong>
<strong style={{ fontSize: fontSize.mobile.strong }}>
{comment.username}
</strong>
<p style={{ fontSize: fontSize.mobile.p }}>{comment.text}</p>
<span style={{ fontSize: fontSize.mobile.span }}>{moment(comment.date).format("YYYY/MM/DD")}</span>
<span style={{ fontSize: fontSize.mobile.span }}>
{moment(comment.date).format("YYYY/MM/DD")}
</span>
</div>
) : null}
{window.innerWidth > 1000 ? (
<div className="comment d-flex flex-column">
<strong style={{fontSize: fontSize.desktop.strong }}>{comment.username}</strong>
<p style={{ fontSize: fontSize.desktop.p }}>{comment.text}</p>
<span style={{ fontSize: fontSize.desktop.span }}>{moment(comment.date).format("YYYY/MM/DD")}</span>
<div className="comment d-flex flex-column mt-2">
<strong
className="comment__user"
style={{ fontSize: fontSize.desktop.strong }}
>
{comment.username}
</strong>
<p className="comment__text" style={{ fontSize: fontSize.desktop.p }}>
{comment.text}
</p>
<span
className="comment__date"
style={{ fontSize: fontSize.desktop.span }}
>
{moment(comment.date).format("YYYY/MM/DD")}
</span>
{comment.reply ? <Reply data={comment.reply} /> : null}
</div>
) : null}
</>

@ -1,5 +1,5 @@
.mobile-comment{
padding : 30px 20px 20px;
.mobile-comment {
padding: 30px 20px 20px;
border-radius: 10px;
background-color: #fffac9;
margin-left: 10px;
@ -7,48 +7,44 @@
max-width: 200px;
color: #72891edc;
position: relative;
p{
p {
text-align: justify;
font-family: numeralLight;
font-size: calc(100vw / 30);
}
strong{
strong {
font-family: numeralMedium;
margin-bottom: 5px;
font-size: calc(100vw / 25);
}
span{
span {
position: absolute;
left: 10px;
top: 10px;
font-family: numeralLight;
font-size: calc(100vw / 30);
}
}
.comment{
padding : 30px 20px 20px;
.comment {
padding: 30px 20px 20px;
border-radius: 10px;
background-color: #fffac9;
margin-bottom: 10px;
color: #72891edc;
position: relative;
width: 100%;
&__text{
&__text {
text-align: justify;
font-family: numeralLight;
}
&__user{
&__user {
font-family: numeralMedium;
margin-bottom: 5px;
}
&__date{
&__date {
position: absolute;
left: 10px;
top: 10px;
font-family: numeralLight;
}
}
}

@ -1,23 +1,24 @@
.product-gallery{
.product-gallery {
flex: 5;
margin: 10px;
justify-content: space-between;
&__top{
margin-right: 0px;
&__top {
width: 100%;
height: 320px;
background-color: #eee;
border-radius: 20px;
& img{
& img {
width: 100%;
height: 100%;
border-radius: 20px;
}
}
&__list{
&__list {
width: 100%;
justify-content: space-between;
}
&-item{
&-item {
min-width: 110px;
height: 110px;
max-width: 110px;
@ -25,13 +26,12 @@
position: relative;
margin: 5px;
cursor: pointer;
& img{
& img {
width: 100%;
height: 100%;
border-radius: 20px;
}
&__cover{
&__cover {
position: absolute;
left: 0px;
top: 0px;
@ -40,8 +40,8 @@
z-index: 100;
border-radius: 20px;
}
&__more{
background-color : rgba(0, 0, 0, 0.767);
&__more {
background-color: rgba(0, 0, 0, 0.767);
}
}
}
}

@ -11,25 +11,38 @@ import AddToCart from "./AddToCart/index";
import HomeScroll from "../Home/HomeScroll/index";
import HomeSlider from "../Home/HomeSlider/index";
import sciense_7 from "../../assets/images/sciense-7.png";
import sciense_6 from "../../assets/images/sciense-6.png";
import sciense_8 from "../../assets/images/sciense-8.png";
import sciense_9 from "../../assets/images/sciense-9.png";
import zist_10 from "../../assets/images/zist-10.png";
import film from "../../assets/Video/film.mp4";
import sciense_7 from "~/assets/images/sciense-7.png";
import sciense_6 from "~/assets/images/sciense-6.png";
import sciense_8 from "~/assets/images/sciense-8.png";
import sciense_9 from "~/assets/images/sciense-9.png";
import zist_10 from "~/assets/images/zist-10.png";
import film from "~/assets/Video/film.mp4";
import product_shipping from "~/assets/icons/product-shipping.png";
import product_cash_back from "~/assets/icons/product-cash-back.png";
import product_support from "~/assets/icons/product-support.png";
import send_comment from "~/assets/icons/send-comment.png";
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
desktop: {
h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70,
},
mobile: {
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 18,
h2: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 24,
h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 22,
a: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 26,
p: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 30,
li: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 26,
},
};
export default class Product extends Component {
render() {
const { product, sameProducts } = this.props;
const { product, sameProducts, supportItems } = this.props;
return (
<>
{window.innerWidth > 1000 ? (
@ -44,12 +57,23 @@ export default class Product extends Component {
title={product.title}
description={product.description}
/>
<AddToCart price={product.price} off={product.off} />
<AddToCart
supportItems={supportItems}
price={product.price}
off={product.off}
/>
</header>
<div className="product__comments d-flex flex-column">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>
نظرات خریداران
</h1>
<div className="d-flex justify-content-between">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>
نظرات خریداران
</h1>
<button>
ارسال نظر
<img src={send_comment} alt="ارسال نظر" />
</button>
</div>
<div className="product__comments--list d-flex flex-column">
<Comment comment={product.comments[0]} />
</div>
@ -65,29 +89,48 @@ export default class Product extends Component {
<Navbar />
<header className="mobile-product__header d-flex flex-column align-items-center">
<img src={product.image} alt={product.title} />
<h1>{product.title}</h1>
<h2>{product.subTitle}</h2>
<div className="d-flex mt-3">
<h1 style={{ fontSize: fontSize.mobile.h1 }}>
{product.title}
</h1>
<h2 style={{ fontSize: fontSize.mobile.h2 }}>
{product.subTitle}
</h2>
<div className="d-flex flex-column mt-3">
<div className="d-flex">
<Link
to={`/products/${product.id}/sample`}
className="mobile-product__header--digitalButton"
style={{ fontSize: fontSize.mobile.a }}
>
خرید نسخه دیجیتال
</Link>
<Link
to={`/products/${product.id}/sample`}
className="mobile-product__header--purchase"
style={{ fontSize: fontSize.mobile.a }}
>
خرید نسخه چاپی
</Link>
</div>
<Link
to={`/products/${product.id}/sample`}
className="mobile-product__header--sampleButton"
style={{ fontSize: fontSize.mobile.a }}
>
مطالعه نمومه کتاب
</Link>
<Link
to={`/products/${product.id}/sample`}
className="mobile-product__header--purchase"
>
خرید کتاب
مطالعه نمونه کتاب
</Link>
</div>
</header>
<div className="mobile-product__abstraction d-flex flex-column">
<h1>خلاصه کتاب</h1>
<p>{product.abstraction}</p>
<h3 style={{ fontSize: fontSize.mobile.h3 }}>خلاصه کتاب</h3>
<p style={{ fontSize: fontSize.mobile.p }}>
{product.abstraction}
</p>
</div>
<div className="mobile-product__modules d-flex flex-column">
<h1>این کتاب شامل چه مواردی است؟</h1>
<h3 style={{ fontSize: fontSize.mobile.h3 }}>
این کتاب شامل چه مواردی است؟
</h3>
<ul>
{product.modules.map((item, i) => (
<React.Fragment key={i}>
@ -97,7 +140,9 @@ export default class Product extends Component {
</ul>
</div>
<div className="mobile-product__tips d-flex flex-column">
<h1>نکاتی که هنگام خرید باید به آن توجه داشته باشید؟</h1>
<h3 style={{ fontSize: fontSize.mobile.h3 }}>
نکاتی که هنگام خرید باید به آن توجه داشته باشید؟
</h3>
<ul>
{product.tips.map((item, i) => (
<React.Fragment key={i}>
@ -107,10 +152,12 @@ export default class Product extends Component {
</ul>
</div>
<div className="mobile-product__description d-flex">
<p>{product.description}</p>
<p style={{ fontSize: fontSize.mobile.p }}>
{product.description}
</p>
</div>
<div className="mobile-product__comments d-flex flex-column">
<h1>نظرات خریداران</h1>
<h3 style={{ fontSize: fontSize.mobile.h3 }}>نظرات خریداران</h3>
<div className="mobile-product__comments--list d-flex">
{product.comments.map((item, i) => (
<Comment comment={item} key={i} />
@ -126,6 +173,11 @@ export default class Product extends Component {
}
Product.defaultProps = {
supportItems: [
{ title: "ارسال رایگان", icon: product_shipping },
{ title: "پشتیبانی 24 ساعته ", icon: product_support },
{ title: "ضمانت بازگشت ", icon: product_cash_back },
],
sameProducts: {
type: window.innerWidth > 1000 ? "slider" : "scroll",
title: "محصولات مرتبط",
@ -298,7 +350,7 @@ Product.defaultProps = {
};
const Item = (props) => {
return <li>+ {props.item}</li>;
return <li style={{ fontSize: fontSize.mobile.li }}>+ {props.item}</li>;
};
const Identifier = (props) => {

@ -8,27 +8,27 @@
overflow-x: hidden;
&__header {
width: 100%;
div {
width: 100%;
}
img {
height: calc(100vh / 2.7);
}
h1 {
margin-top: 10px;
font-family: numeralBold;
font-size: calc(100vw / 20);
color: #7dc241;
letter-spacing: -1px;
}
h2 {
font-family: numeralMedium;
font-size: calc(100vw / 28);
color: #6f7074;
}
a {
border: 0px;
font-family: numeralMedium;
font-size: calc(100vw / 25);
padding: 15px 0px;
width: 150px;
font-family: numeralLight;
padding: 10px 0px;
text-align: center;
letter-spacing: -1px;
text-decoration: none;
@ -38,26 +38,33 @@
border-bottom-left-radius: 8px;
background-color: #00cc69;
color: white !important;
flex: 1;
}
&--sampleButton {
&--digitalButton {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
background-color: #efefef;
color: #6f7074 !important;
flex: 1;
}
&--sampleButton {
border-radius: 8px;
border: 1px solid #c24141 !important;
background-color: white;
color: #c24141 !important;
margin-top: 8px;
}
}
&__abstraction {
margin-top: 30px;
width: 100%;
h1 {
h3 {
font-family: numeralBold;
font-size: calc(100vw / 22);
color: #6f7074;
letter-spacing: -1px;
}
p {
font-family: numeralLight;
font-size: calc(100vw / 30);
color: #6f7074;
letter-spacing: -1px;
text-align: justify;
@ -69,9 +76,8 @@
padding: 20px 10px;
background-color: #baffdc2f;
border-radius: 10px;
h1 {
h3 {
font-family: numeralBold;
font-size: calc(100vw / 28);
color: #02733c;
letter-spacing: -1px;
}
@ -82,7 +88,6 @@
margin-top: 10px;
li {
font-family: numeralLight;
font-size: calc(100vw / 28);
color: #02733c;
letter-spacing: -1px;
}
@ -94,9 +99,8 @@
padding: 20px 10px;
background-color: #1f6fb528;
border-radius: 10px;
h1 {
h3 {
font-family: numeralBold;
font-size: calc(100vw / 28);
color: #074f8b;
letter-spacing: -1px;
}
@ -107,10 +111,9 @@
margin-top: 10px;
li {
font-family: numeralLight;
font-size: calc(100vw / 30);
color: #074f8b;
letter-spacing: -1px;
margin-bottom: 3px;
margin-bottom: 5px;
}
}
}
@ -119,7 +122,6 @@
margin-top: 20px;
p {
font-family: numeralLight;
font-size: calc(100vw / 30);
color: #6f7074;
letter-spacing: -1px;
text-align: justify;
@ -130,11 +132,11 @@
margin-top: 30px;
h1 {
font-family: numeralBold;
font-size: calc(100vw / 22);
color: #6f7074;
letter-spacing: -1px;
margin-bottom: 30px;
}
&--list {
width: 100vw;
overflow-x: scroll !important;
@ -156,12 +158,12 @@
margin-top: 30px;
width: 100%;
height: 470px;
padding: 0px 10px;
padding: 0px;
}
&__comments {
width: 100%;
margin-top: 30px;
h1 {
h3 {
font-family: numeralBold;
color: #6f7074;
letter-spacing: -1px;
@ -170,5 +172,21 @@
&--list {
width: 100%;
}
button {
position: relative;
background-color: #ffc400;
border: 0px;
border-radius: 5px;
color: white;
font-family: numeralLight;
width: 130px;
text-align: right;
height: 45px;
img {
position: absolute;
left: 5px;
top: 6px;
}
}
}
}

@ -5691,7 +5691,7 @@ fsevents@^1.2.7:
bindings "^1.5.0"
nan "^2.12.1"
fsevents@^2.1.2, fsevents@^2.1.3, fsevents@~2.3.1:
fsevents@^2.1.2, fsevents@~2.3.1:
version "2.3.2"
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
@ -10049,72 +10049,6 @@ react-router@5.2.0:
tiny-invariant "^1.0.2"
tiny-warning "^1.0.0"
react-scripts@4.0.3:
version "4.0.3"
resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-4.0.3.tgz#b1cafed7c3fa603e7628ba0f187787964cb5d345"
integrity sha512-S5eO4vjUzUisvkIPB7jVsKtuH2HhWcASREYWHAQ1FP5HyCv3xgn+wpILAEWkmy+A+tTNbSZClhxjT3qz6g4L1A==
dependencies:
"@babel/core" "7.12.3"
"@pmmmwh/react-refresh-webpack-plugin" "0.4.3"
"@svgr/webpack" "5.5.0"
"@typescript-eslint/eslint-plugin" "^4.5.0"
"@typescript-eslint/parser" "^4.5.0"
babel-eslint "^10.1.0"
babel-jest "^26.6.0"
babel-loader "8.1.0"
babel-plugin-named-asset-import "^0.3.7"
babel-preset-react-app "^10.0.0"
bfj "^7.0.2"
camelcase "^6.1.0"
case-sensitive-paths-webpack-plugin "2.3.0"
css-loader "4.3.0"
dotenv "8.2.0"
dotenv-expand "5.1.0"
eslint "^7.11.0"
eslint-config-react-app "^6.0.0"
eslint-plugin-flowtype "^5.2.0"
eslint-plugin-import "^2.22.1"
eslint-plugin-jest "^24.1.0"
eslint-plugin-jsx-a11y "^6.3.1"
eslint-plugin-react "^7.21.5"
eslint-plugin-react-hooks "^4.2.0"
eslint-plugin-testing-library "^3.9.2"
eslint-webpack-plugin "^2.5.2"
file-loader "6.1.1"
fs-extra "^9.0.1"
html-webpack-plugin "4.5.0"
identity-obj-proxy "3.0.0"
jest "26.6.0"
jest-circus "26.6.0"
jest-resolve "26.6.0"
jest-watch-typeahead "0.6.1"
mini-css-extract-plugin "0.11.3"
optimize-css-assets-webpack-plugin "5.0.4"
pnp-webpack-plugin "1.6.4"
postcss-flexbugs-fixes "4.2.1"
postcss-loader "3.0.0"
postcss-normalize "8.0.1"
postcss-preset-env "6.7.0"
postcss-safe-parser "5.0.2"
prompts "2.4.0"
react-app-polyfill "^2.0.0"
react-dev-utils "^11.0.3"
react-refresh "^0.8.3"
resolve "1.18.1"
resolve-url-loader "^3.1.2"
sass-loader "^10.0.5"
semver "7.3.2"
style-loader "1.3.0"
terser-webpack-plugin "4.2.3"
ts-pnp "1.2.0"
url-loader "4.1.1"
webpack "4.44.2"
webpack-dev-server "3.11.1"
webpack-manifest-plugin "2.2.0"
workbox-webpack-plugin "5.1.4"
optionalDependencies:
fsevents "^2.1.3"
react-sortable-hoc@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/react-sortable-hoc/-/react-sortable-hoc-2.0.0.tgz#f6780d8aa4b922a21f3e754af542f032677078b7"

Loading…
Cancel
Save