Fwf 3215/bootstrap updates (AOT-Technologies#2032)

* theme related changes * theme related changes * theme updates * variable change * prefix change * forms-flow-theme chnages added in ejs * MF theme URL removed from env * Update index.ejs * [Removed] MF_FORMSFLOW_THEME_URL from open source --------- Co-authored-by: shuhaib-aot <[email protected]>
Bonymol-aot · May 15, 2024 · 47e3a68 · 47e3a68
1 parent a31971a
commit 47e3a68
Show file tree

Hide file tree

Showing 31 changed files with 282 additions and 320 deletions.
diff --git a/.github/workflows/forms-flow-root-config-cd.yml b/.github/workflows/forms-flow-root-config-cd.yml
@@ -87,7 +87,6 @@ jobs:
             MF_FORMSFLOW_NAV_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-nav@${{ env.VERSION }}/forms-flow-nav.gz.js
             MF_FORMSFLOW_SERVICE_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-service@${{ env.VERSION }}/forms-flow-service.gz.js
             MF_FORMSFLOW_ADMIN_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-admin@${{ env.VERSION }}/forms-flow-admin.gz.js
-            MF_FORMSFLOW_THEME_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-theme@${{ env.VERSION }}/forms-flow-theme.gz.js
       - name: Build and push Docker image
         if: ${{ github.ref == 'refs/heads/master' }}
         uses: docker/build-push-action@v4
@@ -101,8 +100,7 @@ jobs:
             MF_FORMSFLOW_WEB_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-web@${{ env.VERSION }}/forms-flow-web.gz.js
             MF_FORMSFLOW_NAV_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-nav@${{ env.VERSION }}/forms-flow-nav.gz.js
             MF_FORMSFLOW_SERVICE_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-service@${{ env.VERSION }}/forms-flow-service.gz.js
-            MF_FORMSFLOW_ADMIN_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-admin@${{ env.VERSION }}/forms-flow-admin.gz.js
-            MF_FORMSFLOW_THEME_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-theme@${{ env.VERSION }}/forms-flow-theme.gz.js 
+            MF_FORMSFLOW_ADMIN_URL=https://forms-flow-microfrontends.aot-technologies.com/forms-flow-admin@${{ env.VERSION }}/forms-flow-admin.gz.js 
       - name: Scan Docker image 🐳
         uses: snyk/actions/docker@master
         continue-on-error: true

diff --git a/deployment/docker/docker-compose.yml b/deployment/docker/docker-compose.yml
@@ -136,7 +136,6 @@ services:
         - MF_FORMSFLOW_NAV_URL=${MF_FORMSFLOW_NAV_URL:-https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-nav.gz.js}
         - MF_FORMSFLOW_SERVICE_URL=${MF_FORMSFLOW_SERVICE_URL:-https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-service.gz.js}
         - MF_FORMSFLOW_ADMIN_URL=${MF_FORMSFLOW_ADMIN_URL:-https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-admin.gz.js}
-        - MF_FORMSFLOW_THEME_URL=${MF_FORMSFLOW_THEME_URL:-https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-theme.gz.js}
         - NODE_ENV=${NODE_ENV:-production}
     entrypoint: /bin/sh -c "/usr/share/nginx/html/config/env.sh && nginx -g 'daemon off;'"
     environment:

diff --git a/deployment/docker/sample.env b/deployment/docker/sample.env
@@ -192,7 +192,6 @@ CUSTOM_SUBMISSION_URL=http://{your-ip-address}:{port}
 #MF_FORMSFLOW_NAV_URL=https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-nav.gz.js
 #MF_FORMSFLOW_SERVICE_URL=https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-service.gz.js
 #MF_FORMSFLOW_ADMIN_URL=https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-admin.gz.js
-#MF_FORMSFLOW_THEME_URL=https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-theme.gz.js
 
 #++++++++++++++++--- formsflow.ai Web Microfrontend components  ENV Variables - STOP ---+++++++++++++++++++++++++#
 

diff --git a/forms-flow-web-root-config/Dockerfile b/forms-flow-web-root-config/Dockerfile
@@ -10,14 +10,13 @@ ARG MF_FORMSFLOW_WEB_URL
 ARG MF_FORMSFLOW_NAV_URL
 ARG MF_FORMSFLOW_SERVICE_URL
 ARG MF_FORMSFLOW_ADMIN_URL
-ARG MF_FORMSFLOW_THEME_URL
+
 
 # Set environment variables
 ENV MF_FORMSFLOW_WEB_URL ${MF_FORMSFLOW_WEB_URL}
 ENV MF_FORMSFLOW_NAV_URL ${MF_FORMSFLOW_NAV_URL}
 ENV MF_FORMSFLOW_SERVICE_URL ${MF_FORMSFLOW_SERVICE_URL}
 ENV MF_FORMSFLOW_ADMIN_URL ${MF_FORMSFLOW_ADMIN_URL}
-ENV MF_FORMSFLOW_THEME_URL ${MF_FORMSFLOW_THEME_URL}
 ENV NODE_ENV ${NODE_ENV}
 
 # Add `/app/node_modules/.bin` to $PATH

diff --git a/forms-flow-web-root-config/README.md b/forms-flow-web-root-config/README.md
@@ -61,7 +61,6 @@ is mentioned on the [link](../forms-flow-idm/keycloak/README.md#create-forms-flo
  `MF_FORMSFLOW_NAV_UR`:triangular_flag_on_post:|For custom implementation of Navbar component, refer [here](https://github.com/AOT-Technologies/forms-flow-ai-micro-front-ends/tree/main/forms-flow-nav)|          |`//forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-nav.gz.js`
  `MF_FORMSFLOW_SERVICE_URL`:triangular_flag_on_post:|For custom implementation of Service component, refer [here](https://github.com/AOT-Technologies/forms-flow-ai-micro-front-ends/tree/main/forms-flow-service)|          |`//forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-service.gz.js`
  `MF_FORMSFLOW_ADMIN_URL`:triangular_flag_on_post:|For custom implementation of Admin component, refer [here](https://github.com/AOT-Technologies/forms-flow-ai-micro-front-ends/tree/main/forms-flow-admin)|          |`//forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-admin.gz.js`
- `MF_FORMSFLOW_THEME_URL`:triangular_flag_on_post:| For custom implementation of Theme component, refer [here](https://github.com/AOT-Technologies/forms-flow-ai-micro-front-ends/tree/main/forms-flow-theme) |          | `//forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-theme.gz.js`
  `NODE_ENV`| Define project level configuration | `development, test, production` | `production`
  `FORMIO_DEFAULT_PROJECT_URL`:triangular_flag_on_post:|The URL of the form.io server|          |`http://{your-ip-address}:3001`
  `KEYCLOAK_WEB_CLIENTID`|Your Keycloak Client ID within the realm| eg. forms-flow-web | `forms-flow-web`

diff --git a/forms-flow-web-root-config/docker-compose.yml b/forms-flow-web-root-config/docker-compose.yml
@@ -9,7 +9,6 @@ services:
         - MF_FORMSFLOW_NAV_URL=${MF_FORMSFLOW_NAV_URL:-https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-nav.gz.js}
         - MF_FORMSFLOW_SERVICE_URL=${MF_FORMSFLOW_SERVICE_URL:-https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-service.gz.js}
         - MF_FORMSFLOW_ADMIN_URL=${MF_FORMSFLOW_ADMIN_URL:-https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-admin.gz.js}
-        - MF_FORMSFLOW_THEME_URL=${MF_FORMSFLOW_THEME_URL:-https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-theme.gz.js}
         - NODE_ENV=${NODE_ENV:-production}
     entrypoint: /bin/sh -c "/usr/share/nginx/html/config/env.sh && nginx -g 'daemon off;'"
     environment:

diff --git a/forms-flow-web-root-config/public/config/config.template.js b/forms-flow-web-root-config/public/config/config.template.js
@@ -3,8 +3,7 @@ window["_env_"] = {
   MF_FORMSFLOW_WEB_URL: "${MF_FORMSFLOW_WEB_URL}",
   MF_FORMSFLOW_NAV_URL: "${MF_FORMSFLOW_NAV_URL}",
   MF_FORMSFLOW_SERVICE_URL: "${MF_FORMSFLOW_SERVICE_URL}",
-  MF_FORMSFLOW_ADMIN_URL: "${MF_FORMSFLOW_ADMIN_URL}",
-  MF_FORMSFLOW_THEME_URL: "${MF_FORMSFLOW_THEME_URL}",*/
+  MF_FORMSFLOW_ADMIN_URL: "${MF_FORMSFLOW_ADMIN_URL}", */
   // To define project level configuration  possible values development,test, production
   NODE_ENV: "${NODE_ENV}",
   //Environment Variables for forms-flow-web

diff --git a/forms-flow-web-root-config/sample.env b/forms-flow-web-root-config/sample.env
@@ -24,15 +24,13 @@
 #MF_FORMSFLOW_NAV_URL=https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-nav.gz.js
 #MF_FORMSFLOW_SERVICE_URL=https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-service.gz.js
 #MF_FORMSFLOW_ADMIN_URL=https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-admin.gz.js
-#MF_FORMSFLOW_THEME_URL=https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-theme.gz.js
 
 #OR
 
 #TODO only for Customised Local delevelopment with code from https://github.com/AOT-Technologies/forms-flow-ai-micro-front-ends  use below default values instead
 #MF_FORMSFLOW_NAV_URL=//{your-ip-address}:3005/forms-flow-nav.js
 #MF_FORMSFLOW_ADMIN_URL=//{your-ip-address}:3006/forms-flow-admin.js
 #MF_FORMSFLOW_SERVICE_URL=//{your-ip-address}:3007/forms-flow-service.js
-#MF_FORMSFLOW_THEME_URL=//{your-ip-address}:3008/forms-flow-theme.js
 
 #++++++++++++++--- MF Variables to get MicroFrontend Components Created - STOP ---+++++++++++++++++++++++#
 

diff --git a/forms-flow-web-root-config/src/index.ejs b/forms-flow-web-root-config/src/index.ejs
@@ -16,16 +16,18 @@
   <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/assets/dmn-js-decision-table-controls.css">
   <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/assets/dmn-js-literal-expression.css">
   <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/assets/dmn-font/css/dmn.css">
+  <link rel="stylesheet" href="https://forms-flow-microfrontends.aot-technologies.com/[email protected]/forms-flow-theme.min.css">
+
 
   <!-- required styles from cdn -->
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
-  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/formio.full.min.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <script src="https://cdn.form.io/flatpickr/flatpickr.min.js"></script>
   <link rel="stylesheet" href="https://cdn.form.io/flatpickr/flatpickr.min.css">
   <script src="https://npmcdn.com/flatpickr/dist/l10n/ar.js"></script>
+
   <!--
     Remove this if you only support browsers that support async/await.
     This is needed by babel to share largeish helper code for compiling async/await in older
@@ -71,8 +73,7 @@
               "@formsflow/nav": "<%= process.env.MF_FORMSFLOW_NAV_URL %>",
               "@formsflow/formsflow-web": "<%= process.env.MF_FORMSFLOW_WEB_URL %>",
               "@formsflow/admin":"<%=process.env.MF_FORMSFLOW_ADMIN_URL %>",
-              "@formsflow/service":"<%= process.env.MF_FORMSFLOW_SERVICE_URL %>",
-              "@formsflow/theme":"<%= process.env.MF_FORMSFLOW_THEME_URL %>"
+              "@formsflow/service":"<%= process.env.MF_FORMSFLOW_SERVICE_URL %>"
           }
         }
       </script>
@@ -118,7 +119,6 @@
   </noscript>
   <script>
     System.import('@formsflow/root-config');
-    System.import('@formsflow/theme');
   </script>
   <import-map-overrides-full show-when-local-storage="devtools" dev-libs></import-map-overrides-full>
 </body>

diff --git a/forms-flow-web/src/assets/styles/base.scss b/forms-flow-web/src/assets/styles/base.scss
@@ -1,5 +1,7 @@
+@import "../../variables.scss";
+
 .text-blue {
-  color: var(--color-primary-dkr);
+  color: $primary-500;
 }
 
 .click-element {
@@ -14,24 +16,24 @@
   font-weight: 300;
   content: attr(dat-title);
   padding: 4px 8px;
-  color: var(--color-white);
+  color: $white;
   position: absolute;
-  background-color: var(--color-black);
+  background-color: $dark;
   //left: 1rem;
   white-space: nowrap;
   z-index: 1;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
-  -moz-box-shadow: 0px 0px 4px var(--color-deep-gray);
-  -webkit-box-shadow: 0px 0px 4px var(--color-deep-gray);
-  box-shadow: 0px 0px 4px var(--color-deep-gray);
-  background-image: -moz-linear-gradient(top, var(--color-gray-200), var(--color-gray-400));
-  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, var(--color-gray-200)),color-stop(1, var(--color-gray-400)));
-  background-image: -webkit-linear-gradient(top, var(--color-gray-200), var(--color-gray-400));
-  background-image: -moz-linear-gradient(top, var(--color-gray-200), var(--color-gray-400));
-  background-image: -ms-linear-gradient(top, var(--color-gray-200), var(--color-gray-400));
-  background-image: -o-linear-gradient(top, var(--color-gray-200), var(--color-gray-400));
+  -moz-box-shadow: 0px 0px 4px $gray;
+  -webkit-box-shadow: 0px 0px 4px $gray;
+  box-shadow: 0px 0px 4px $gray;
+  background-image: -moz-linear-gradient(top, $gray-200, $gray-400);
+  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, $gray-200),color-stop(1, $gray-400));
+  background-image: -webkit-linear-gradient(top, $gray-200, $gray-400);
+  background-image: -moz-linear-gradient(top, var$gray-200, $gray-400);
+  background-image: -ms-linear-gradient(top, $gray-200, $gray-400);
+  background-image: -o-linear-gradient(top, $gray-200, $gray-400);
 }
 
 .operator-box-container{
@@ -47,15 +49,15 @@
   //  width: 45px;
   padding: 0 0 0 3px;
   padding-right: 12px;
-  background-color: var(--color-info-background);
+  background-color: $danger-200;
   outline: none;
-  color: var(--color-primary-dkr);
+  color: $primary-500;
 }
 .operator-selector select {
   display: none; /*hide original SELECT element:*/
 }
 .selection-item{
-  background-color: var(--color-white);
+  background-color: $white;
 }
 //TODO Remove this when Semantic UI css is removed. Semantic UI css override formio css tooltip
 [data-tooltip]:before {

diff --git a/forms-flow-web/src/assets/styles/layouts.scss b/forms-flow-web/src/assets/styles/layouts.scss
@@ -1,3 +1,5 @@
+@import "../../variables.scss";
+
 .react-bootstrap-table table {
   table-layout: auto !important;
   position:relative !important;
@@ -11,5 +13,5 @@
 }
 
 #app {
-  background: var(--color-white);
+  background: $white;
 }
diff --git a/forms-flow-web/src/components/Application/Application.scss b/forms-flow-web/src/components/Application/Application.scss
@@ -1,3 +1,5 @@
+@import "../../variables.scss";
+
 .div-no-application {
     margin-top: 10%;
     margin-bottom: 10%;
@@ -52,7 +54,7 @@
     .filter-list-view {
         position: absolute;
         z-index: 1000;
-        background-color: var(--color-white);
+        background-color: $white;
         top: 31px;;
         min-width: 180px;
     }

diff --git a/forms-flow-web/src/components/BPMN/bpm.scss b/forms-flow-web/src/components/BPMN/bpm.scss
@@ -1,3 +1,5 @@
+@import "../../variables.scss";
+
 .bpm-container{
   height:100%;
   position: absolute;
@@ -14,7 +16,7 @@
    cursor: grab;
  }
 .highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
-    fill: var(--color-primary-dk) !important;
+    fill: $primary-400 !important;
 }
 
 .btn_zoom{

diff --git a/forms-flow-web/src/components/Dashboard/dashboard.scss b/forms-flow-web/src/components/Dashboard/dashboard.scss
@@ -1,8 +1,10 @@
+@import "../../variables.scss";
+
 .dashboard {
    margin-top: 10px;
 
   & .line-hr {
-    border-top: 1px solid var(--color-primary-ltr);
+    border-top: 1px solid $primary-200;
   }
 
   & .card-counter {
@@ -11,17 +13,17 @@
     transition: 1s;
 
     & .white-box {
-      background: var(--color-white);
-      border: 1px solid var(--color-primary-ltr);
+      background: $white;
+      border: 1px solid $primary-400;
       padding: 25px;
       margin-bottom: 30px;
       font-size: larger;
       cursor: pointer;
 
       &.active,
       &:hover {
-        background-color: var(--color-primary-dkst) !important;
-        color: var(--color-white);
+        background-color: $primary-600 !important;
+        color: $white;
 
         & .small-title {
           font-size: 16px;
@@ -60,11 +62,11 @@
 
   & .application-title {
     margin-bottom: -5px;
-    color: var(--color-black);
+    color: $dark;
   }
 
   & .dashboard-title {
-    color: var(--color-black);
+    color: $dark;
   }
 
   & .dashboard-icon-style {
@@ -81,21 +83,21 @@
   }
 
   & .react-daterange-picker__wrapper {
-    color: var(--color-black);
+    color: $dark;
     padding: 5px;
-    border: 1px solid var(--color-black);
-    background: var(--color-white);
+    border: 1px solid $dark;
+    background: $white;
 
     & input {
-      color:  var(--color-primary-dkst);
+      color:  $primary-600;
     }
 
     & select {
       -webkit-appearance: none;
       -moz-appearance: none;
       text-indent: 1px;
       text-overflow: "";
-      color:  var(--color-primary-dkst);
+      color:  $primary-600;
     }
 
     & .react-daterange-picker__range-divider {
@@ -111,7 +113,7 @@
       align-self: center;
       flex-direction: row;
       flex-wrap: wrap;
-      border: 1px solid var(--color-black);
+      border: 1px solid $dark;
       padding: 30px;
       border-radius: 10px;
 
@@ -185,7 +187,7 @@
   width: 80px;
   height: 35px;
   border-radius: 3px;
-  border-color: var(--color-primary-ltst);
+  border-color: $primary-100;
 }
 
 .dashboard-sort{

diff --git a/forms-flow-web/src/components/Form/Item/Submission/Item/View.js b/forms-flow-web/src/components/Form/Item/Submission/Item/View.js
@@ -56,7 +56,7 @@ const View = React.memo((props) => {
       <div className="d-flex py-2 form-title">
         <h3 className="task-head text-truncate"> {form.title}</h3>
         {showPrintButton && form?._id ? (
-          <div className="btn-right d-flex flex-row">
+          <div className="ms-auto float-auto d-flex flex-row">
             <DownloadPDFButton
               form_id={form._id}
               submission_id={updatedSubmission._id}