FIX: client js packages fixes and welcome screen style

Author: ahmetkuslular

package.json

@@ -46,7 +46,6 @@
     "compression": "^1.7.4",
     "cookie-parser": "1.4.3",
     "copy-webpack-plugin": "4.5.2",
-    "core-js": "3.20.3",
     "css-loader": "6.5.1",
     "css-minimizer-webpack-plugin": "3.4.1",
     "eev": "0.1.5",

src/universal/partials/Welcome/PartialCards.js

@@ -5,15 +5,6 @@ import { ServerStyleSheet } from 'styled-components';
 import partials from './partials';
 import groupBy from '../../utils/lodash/groupBy';
 
-const STATUS_COLOR = {
-  live: '#8dc63f',
-  dev: '#FF6000',
-  page: '#00abff',
-  1: '#9b59b6',
-  2: '#c0392b',
-  3: '#16a085'
-};
-
 const sheet = new ServerStyleSheet();
 
 const Welcome = () => {
@@ -26,10 +17,8 @@ const Welcome = () => {
       className="link"
     >
       <div className="card">
-        <div className="card-header">
-          <div className="badge" style={{ backgroundColor: STATUS_COLOR[status] }}>
-            {title}
-          </div>
+        <div className="ribbon-wrapper">
+          <div className={`ribbon color-${status}`}> {title}</div>
         </div>
         <div className="card-title">{item.name}</div>
         <div className="card-subtitle">

src/universal/partials/Welcome/welcomeStyle.js

@@ -10,8 +10,8 @@ const welcomeStyle = () => {
             --theme-bg-color: #fafafb;
             --body-font: "Poppins", sans-serif;
             --body-color: #2f2f33;
-            --active-color: #0162ff;
-            --active-light-color: #e1ebfb;
+            --active-color: #4e4e4e;
+            --active-light-color: #f1f1f1;
             --header-bg-color: #fff;
             --border-color: #d8d8d8;
             --alert-bg-color: #e8f2ff;
@@ -157,7 +157,7 @@ const welcomeStyle = () => {
           }
           .group-title {
             font-size: 24px;
-            font-weight: 600;
+            font-weight: 700;
           }
           .link {
             color: inherit;
@@ -190,12 +190,13 @@ const welcomeStyle = () => {
           }
 
           .card {
-            padding: 20px 16px;
+            padding: 16px 16px;
             background-color: var(--header-bg-color);
             border-radius: 8px;
             cursor: pointer;
             transition: 0.2s;
             text-decoration: none;
+            position: relative;
           }
           .card:hover {
             transform: scale(1.02);
@@ -207,8 +208,7 @@ const welcomeStyle = () => {
           }
           .card-title {
             font-weight: 600;
-            margin-top: 16px;
-            font-size: 14px;
+            font-size: 16px;
           }
           .card-subtitle {
             color: var(--subtitle-color);
@@ -220,14 +220,62 @@ const welcomeStyle = () => {
             display: flex;
             align-items: flex-start;
           }
+
+          .ribbon-wrapper {
+            width: 85px;
+            height: 88px;
+            overflow: hidden;
+            position: absolute;
+            top: 0;
+            right: 0;
+          }
+
+          .ribbon {
+            font-size: 10px;
+            font-weight: bold;
+            color: var(--header-bg-color);;
+            text-align: center;
+            -webkit-transform: rotate(45deg);
+            -moz-transform:    rotate(45deg);
+            -ms-transform:     rotate(45deg);
+            -o-transform:      rotate(45deg);
+            position: relative;
+            padding: 0;
+            left: 26px;
+            top: 14px;
+            width: 80px;
+            -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
+            -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
+            box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
+          }
+
+          .color-live{
+            background-color: #badc58;
+          }
+          .color-dev{
+            background-color: #f0932b;
+          }
+          .color-page{
+            background-color: #00abff;
+          }
+          .color-1{
+            background-color: #9b59b6;
+          }
+          .color-2{
+            background-color: #c0392b;
+          }
+          .color-3{
+            background-color: #16a085;
+          }
+
           .badge{
             display: flex;
             align-items: center;
             justify-content: center;
             background-color: #f50;
             font-weight: 600;
             margin-top: 16px;
-            font-size: 14px;
+            font-size: 10px;
             padding: 5px 10px;
             color: white;
             border-radius: 5px;

webpack.client.config.js

@@ -25,22 +25,19 @@ const appConfigFilePath = `${voltranConfig.appConfigFile.entry}/${env}.conf.js`;
 const appConfig = require(appConfigFilePath);
 const commonConfig = require('./webpack.common.config');
 const postCssConfig = require('./postcss.config');
-const babelConfig = require('./babel.server.config');
 
 const voltranClientConfigPath = voltranConfig.webpackConfiguration.client;
 const voltranClientConfig = voltranClientConfigPath
   ? require(voltranConfig.webpackConfiguration.client)
   : '';
 
-const normalizeUrl = require('./lib/os.js');
 const replaceString = require('./config/string.js');
 
 const fragmentManifest = require(voltranConfig.routing.dictionary);
 const fixFragmentManifest = require('./src/universal/core/route/dictionary');
 
-const isDebug = voltranConfig.dev;
+const isDebug = appConfig.dev;
 const reScript = /\.(js|jsx|mjs)$/;
-const distFolderPath = voltranConfig.distFolder;
 const isProd = process.env.BROWSER && process.env.VOLTRAN_ENV === 'prod';
 const hideCssPrefixOnTest = voltranConfig.hideCssPrefixOnTest;
 
@@ -73,27 +70,8 @@ const appConfigFileTarget = `${voltranConfig.appConfigFile.output.path}/${voltra
 
 fs.copyFileSync(appConfigFilePath, appConfigFileTarget);
 
-chunks.client.unshift('regenerator-runtime/runtime.js', 'core-js/stable', 'intersection-observer');
-
 if (isDebug) {
-  const appConfigJSONContent = require(appConfigFileTarget);
-
-  for (const service in appConfigJSONContent.services) {
-    appConfigJSONContent.services[service].clientUrl =
-      appConfigJSONContent.services[service].serverUrl;
-  }
-
-  const moduleExportsText = 'module.exports';
-  const appConfigFileContent = fs.readFileSync(appConfigFileTarget).toString();
-  const moduleExportsIndex = appConfigFileContent.indexOf(moduleExportsText);
-
-  let context = appConfigFileContent.substr(0, moduleExportsIndex + moduleExportsText.length);
-  context += '=';
-  context += JSON.stringify(appConfigJSONContent);
-  context += ';';
-
-  fs.writeFileSync(appConfigFileTarget, context);
-
+  chunks.client.unshift('regenerator-runtime/runtime.js');
   chunks.client.push('webpack-hot-middleware/client');
 }
 
@@ -234,7 +212,7 @@ const clientConfig = merge(commonConfig, voltranClientConfig, {
       ? []
       : [
           new CleanWebpackPlugin({
-            verbose: false,
+            verbose: true,
             dangerouslyAllowCleanPatternsOutsideProject: true
           })
         ]),

webpack.server.config.js

@@ -122,7 +122,7 @@ const serverConfig = merge(commonConfig, voltranServerConfig, {
 
   plugins: [
     new CleanWebpackPlugin({
-      verbose: false,
+      verbose: true,
       dangerouslyAllowCleanPatternsOutsideProject: true
     }),