Merge branch 'feat/ui-v0.4' into 'test'

refactor(layout): remove min-height calc form page-wrap, prevent unexpected...

See merge request opensource/answer!259

ui/package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "axios": "^0.27.2",
     "bootstrap": "^5.2.0",
-    "bootstrap-icons": "^1.9.1",
+    "bootstrap-icons": "1.10.2",
     "classnames": "^2.3.1",
     "codemirror": "5.65.0",
     "copy-to-clipboard": "^3.3.2",
@@ -39,9 +39,8 @@
   "devDependencies": {
     "@commitlint/cli": "^17.0.3",
     "@fullhuman/postcss-purgecss": "^4.1.3",
-    "purgecss-webpack-plugin": "^4.1.3",
-    "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/dom": "^8.17.1",
+    "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
@@ -71,6 +70,7 @@
     "lint-staged": "^13.0.3",
     "postcss": "^8.0.0",
     "prettier": "^2.7.1",
+    "purgecss-webpack-plugin": "^4.1.3",
     "react-app-rewired": "^2.2.1",
     "react-scripts": "5.0.1",
     "sass": "^1.54.4",

ui/pnpm-lock.yaml

@@ -19,7 +19,7 @@ specifiers:
   '@typescript-eslint/parser': ^5.33.0
   axios: ^0.27.2
   bootstrap: ^5.2.0
-  bootstrap-icons: ^1.9.1
+  bootstrap-icons: 1.10.2
   classnames: ^2.3.1
   codemirror: 5.65.0
   copy-to-clipboard: ^3.3.2
@@ -67,7 +67,7 @@ specifiers:
 dependencies:
   axios: 0.27.2
   bootstrap: 5.2.1_@popperjs+core@2.11.6
-  bootstrap-icons: 1.9.1
+  bootstrap-icons: 1.10.2
   classnames: 2.3.2
   codemirror: 5.65.0
   copy-to-clipboard: 3.3.2
@@ -1480,7 +1480,7 @@ packages:
       cosmiconfig-typescript-loader: 4.1.0_3owiowz3ujipd4k6pbqn3n7oui
       lodash: 4.17.21
       resolve-from: 5.0.0
-      ts-node: 10.9.1_ck2axrxkiif44rdbzjywaqjysa
+      ts-node: 10.9.1_ao52im6kiihokc7tdj7weudhra
       typescript: 4.8.3
     transitivePeerDependencies:
       - '@swc/core'
@@ -3415,8 +3415,8 @@ packages:
   /boolbase/1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
 
-  /bootstrap-icons/1.9.1:
-    resolution: {integrity: sha512-d4ZkO30MIkAhQ2nNRJqKXJVEQorALGbLWTuRxyCTJF96lRIV6imcgMehWGJUiJMJhglN0o2tqLIeDnMdiQEE9g==}
+  /bootstrap-icons/1.10.2:
+    resolution: {integrity: sha512-PTPYadRn1AMGr+QTSxe4ZCc+Wzv9DGZxbi3lNse/dajqV31n2/wl/7NX78ZpkvFgRNmH4ogdIQPQmxAfhEV6nA==}
     dev: false
 
   /bootstrap/5.2.1_@popperjs+core@2.11.6:
@@ -3821,7 +3821,7 @@ packages:
     dependencies:
       '@types/node': 14.18.29
       cosmiconfig: 7.0.1
-      ts-node: 10.9.1_ck2axrxkiif44rdbzjywaqjysa
+      ts-node: 10.9.1_ao52im6kiihokc7tdj7weudhra
       typescript: 4.8.3
     dev: true
 
@@ -10186,37 +10186,6 @@ packages:
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
 
-  /ts-node/10.9.1_ck2axrxkiif44rdbzjywaqjysa:
-    resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
-    hasBin: true
-    peerDependencies:
-      '@swc/core': '>=1.2.50'
-      '@swc/wasm': '>=1.2.50'
-      '@types/node': '*'
-      typescript: '>=2.7'
-    peerDependenciesMeta:
-      '@swc/core':
-        optional: true
-      '@swc/wasm':
-        optional: true
-    dependencies:
-      '@cspotcode/source-map-support': 0.8.1
-      '@tsconfig/node10': 1.0.9
-      '@tsconfig/node12': 1.0.11
-      '@tsconfig/node14': 1.0.3
-      '@tsconfig/node16': 1.0.3
-      '@types/node': 14.18.29
-      acorn: 8.8.0
-      acorn-walk: 8.2.0
-      arg: 4.1.3
-      create-require: 1.1.1
-      diff: 4.0.2
-      make-error: 1.3.6
-      typescript: 4.8.3
-      v8-compile-cache-lib: 3.0.1
-      yn: 3.1.1
-    dev: true
-
   /tsconfig-paths/3.14.1:
     resolution: {integrity: sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==}
     dependencies:

ui/src/index.scss

@@ -98,12 +98,17 @@ a {
   border-bottom: 1px solid rgba(33, 37, 41, 0.25);
 }
 
-.page-wrap {
-  min-height: calc(100vh - 138px);
-}
-.page-wrap2 {
-  background-color: #f5f5f5;
+#root {
   min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+#root > footer {
+  margin-top: auto !important;
+}
+
+.bg-f5 {
+  background-color: #f5f5f5;
 }
 
 .btn-no-border,

ui/src/pages/Install/index.tsx

@@ -245,7 +245,7 @@ const Index: FC = () => {
   }
 
   return (
-    <div className="page-wrap2 py-5">
+    <div className="bg-f5 py-5 flex-grow-1">
       <PageTitle title={t('install', { keyPrefix: 'page_title' })} />
       <Container className='py-3'>
         <Row className="justify-content-center">

ui/src/pages/Maintenance/index.tsx

@@ -8,7 +8,7 @@ const Index = () => {
     keyPrefix: 'page_maintenance',
   });
   return (
-    <div className="page-wrap2">
+    <div className="bg-f5">
       <Container
         className="d-flex flex-column justify-content-center align-items-center"
         style={{ minHeight: '100vh' }}>