Merge pull request #972 from egovernments/ISTE-487

Iste 487: Resolved CSS Issue of common page

frontend/micro-ui/web/micro-ui-internals/example/public/index.html

@@ -43,6 +43,44 @@
     .workbench-bredcrumb {
       display: none !important;
     }
+    .link-list {
+      list-style-type: none;
+      padding: 0;
+      display: flex; /* Adjust display for layout preference */
+      justify-content: space-between; /* Adjust spacing as needed */
+    }
+
+    .link-item {
+      display: flex;
+      align-items: center;
+      margin: 10px; /* Adjust margin as needed */
+      padding: 10px;
+      border: 1px solid #ccc; /* Adjust border if desired */
+      border-radius: 5px;
+      text-decoration: none;
+      color: #333;
+      transition: all 0.3s ease-in-out; /* Add generic transition for styling */
+    }
+
+    .link-item:hover {
+      transform: scale(1.05); /* Add scale effect on hover */
+      box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Add slight shadow on hover */
+    }
+
+    .link-item a {
+      text-decoration: none;
+      color: inherit; /* Inherit color from parent element */
+    }
+
+    .link-icon {
+      margin-right: 10px; /* Adjust margin as needed */
+      transition: transform 0.3s ease-in-out; /* Add transition for icon animation */
+    }
+
+    .link-item:hover .link-icon {
+      transform: rotate(360deg); /* Add rotation animation on hover */
+    }
+
   </style>
 </head>
 

frontend/micro-ui/web/micro-ui-internals/example/src/index.js

@@ -7,8 +7,8 @@ import { initDSSComponents } from "@egovernments/digit-ui-module-dss";
 import { initEngagementComponents } from "@egovernments/digit-ui-module-engagement";
 import { initHRMSComponents } from "@egovernments/digit-ui-module-hrms";
 import { initPGRComponents, PGRReducers } from "@egovernments/digit-ui-module-pgr";
-import {initPaymentComponents} from "@egovernments/digit-ui-module-payment";
-import "@egovernments/digit-ui-css/example/index.css";
+import { initPaymentComponents } from "@egovernments/digit-ui-module-payment";
+// import "@egovernments/digit-ui-css/example/index.css";
 
 import { pgrCustomizations } from "./pgr";
 import { UICustomizations } from "./UICustomizations";
@@ -19,7 +19,7 @@ const enabledModules = [
   "DSS",
   "HRMS",
   "PGR",
-  "Payment"
+  "Payment",
   //  "Engagement", "NDSS","QuickPayLinks", "Payment",
   // "Utilities",
   //added to check fsm

frontend/micro-ui/web/micro-ui-internals/package.json

@@ -7,7 +7,7 @@
     "example",
     "packages/react-components",
     "packages/modules/*"
-  ],
+    ],
   "author": "JaganKumar <[email protected]>",
   "license": "MIT",
   "private": true,
@@ -19,7 +19,6 @@
     "sprint": "SKIP_PREFLIGHT_CHECK=true  run-s start:script",
     "start:dev": "run-p dev:**",
     "start:script": "./scripts/create.sh",
-    "dev:css": "cd packages/css && yarn start",
     "publish:css": "cd packages/css && yarn publish --access public",
     "dev:libraries": "cd packages/libraries && yarn start",
     "dev:components": "cd packages/react-components && yarn start",
@@ -55,9 +54,9 @@
     "*.{js,css,md}": "prettier --write"
   },
   "dependencies": {
-    "lodash": "4.17.21",
-    "microbundle-crl": "0.13.11",
     "@egovernments/digit-ui-react-components": "^1.3.0",
+    "lodash": "4.17.21",
+    "microbundle-crl": "^0.13.11",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-hook-form": "6.15.8",

frontend/micro-ui/web/public/index.html

@@ -19,6 +19,43 @@
     #logo-img-container {
       display: none;
     }
+    .link-list {
+      list-style-type: none;
+      padding: 0;
+      display: flex; /* Adjust display for layout preference */
+      justify-content: space-between; /* Adjust spacing as needed */
+    }
+
+    .link-item {
+      display: flex;
+      align-items: center;
+      margin: 10px; /* Adjust margin as needed */
+      padding: 10px;
+      border: 1px solid #ccc; /* Adjust border if desired */
+      border-radius: 5px;
+      text-decoration: none;
+      color: #333;
+      transition: all 0.3s ease-in-out; /* Add generic transition for styling */
+    }
+
+    .link-item:hover {
+      transform: scale(1.05); /* Add scale effect on hover */
+      box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Add slight shadow on hover */
+    }
+
+    .link-item a {
+      text-decoration: none;
+      color: inherit; /* Inherit color from parent element */
+    }
+
+    .link-icon {
+      margin-right: 10px; /* Adjust margin as needed */
+      transition: transform 0.3s ease-in-out; /* Add transition for icon animation */
+    }
+
+    .link-item:hover .link-icon {
+      transform: rotate(360deg); /* Add rotation animation on hover */
+    }
 
     .selector-button-primary>h2 {
       margin: 0