fantonangeli commented on code in PR #2551: URL: https://github.com/apache/incubator-kie-tools/pull/2551#discussion_r1743316774
########## packages/data-index-webapp/env/index.js: ########## @@ -0,0 +1,33 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +const { varsWithName, getOrDefault, composeEnv } = require("@kie-tools-scripts/build-env"); + +module.exports = composeEnv([require("@kie-tools/root-env/env")], { + vars: varsWithName({}), + get env() { + return { + dataIndexWebapp: { + dev: { + port: 9025, Review Comment: Thank you for choosing a port not used by other packages. It happened that exactly the 9025 is used in PR #2532 , which is still in review. Can you please choose the 9026 to avoid using the same port after our PRs are merged? ########## packages/data-index-webapp/src/styles.css: ########## @@ -0,0 +1,89 @@ +.maindiv { + font-family: "RedHatText", "Overpass", overpass, helvetica, arial, sans-serif; + background-color: #fff; + color: #fff; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + text-align: center; + background-color: #fff; + max-width: 700px; +} + +.logo img { + width: 80px; + height: auto; +} + +h1 { + font-size: 48px; + color: #e44c3b; + padding-left: 15px; +} + +h4 { + font-size: 30px; + color: #c94848; + margin-top: 10px; +} + +p { + font-size: 16px; + color: #1f1e1e; + margin-top: 5px; + margin-bottom: 40px; +} + +.btn { + padding: 10px 20px; + background-color: #e44c3b; + color: #fff; + text-decoration: none; + border-radius: 5px; + font-size: 16px; + transition: background-color 0.3s; +} + +.btn:hover { + background-color: #c73828; +} + +@media (prefers-color-scheme: dark) { + body { + margin: 0px; + padding: 0px; + } + .maindiv { + background-color: #232121; + color: #fff; + } + + .container { + background-color: #232121; + } + + h1 { + color: #e44c3b; + } + + h4 { + color: #fefefe; + } + + p { + color: #fefefe; + } + + .btn { + background-color: #e44c3b; + color: #fff; + } + + .btn:hover { + background-color: #c73828; + } Review Comment: Here we can clean up all the properties already applied outside of the media query to keep this short and easier to maintain. Please double-check that I didn't miss anything. ```suggestion .maindiv, .container { background-color: #232121; } h4, p { color: #fefefe; } ``` ########## packages/data-index-webapp/src/styles.css: ########## @@ -0,0 +1,120 @@ +/* Default light mode */ +.body { + margin: 0px; + padding: 0px; +} + +.maindiv { + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + background-color: #fff; + color: #fff; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + text-align: center; + background-color: #fff; + max-width: 700px; +} + +.logo img { + width: 80px; + height: auto; +} + +h1 { + font-size: 48px; + color: #e44c3b; + padding-left: 15px; +} + +h4 { + font-size: 30px; + color: #c94848; + margin-top: 10px; +} + +p { + font-size: 16px; + color: #1f1e1e; + margin-top: 5px; + margin-bottom: 40px; +} + +.btn { + padding: 10px 20px; + background-color: #e44c3b; + color: #fff; + text-decoration: none; + border-radius: 5px; + font-size: 16px; + transition: background-color 0.3s; +} + +.btn:hover { + background-color: #c73828; +} + +/* Dark mode */ +@media (prefers-color-scheme: dark) { Review Comment: To avoid the white border, you can move the block below to the top of the CSS, outside of the media query. This way it's applied also to both versions (black and white) and there are no differences in dimensions between them. ```css body { margin: 0px; padding: 0px; } ``` ########## packages/data-index-webapp/package.json: ########## @@ -18,14 +18,15 @@ "build:dev": "rimraf dist && webpack --env dev", "build:prod": "pnpm lint && pnpm test && rimraf dist && webpack", "lint": "echo 'Linting'", - "start": "webpack serve --host 0.0.0.0 --env dev" + "start": "webpack serve --host 0.0.0.0 --env dev", + "test": "run-script-if --ignore-errors \"$(build-env tests.ignoreFailures)\" --bool \"$(build-env tests.run)\" --then \"jest --silent --verbose --passWithNoTests\"" }, "devDependencies": { "@kie-tools-core/webpack-base": "workspace:*", "@kie-tools/root-env": "workspace:*", "copy-webpack-plugin": "^11.0.0", + "jest": "^29.7.0", Review Comment: We need to update the `pnpm-lock.yaml`, after changing a package dependencies. Please run `pnpm bootstrap` on kie-tool's root and commit the updated files -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
