Landing screen fixes (#1561)

* landing screen css changes and config updates * css version updated
egovernments · Oct 18, 2024 · 403a6b9 · 403a6b9
1 parent fd7ff74
commit 403a6b9
Show file tree

Hide file tree

Showing 7 changed files with 404 additions and 160 deletions.
diff --git a/micro-ui/web/micro-ui-internals/packages/css/package.json b/micro-ui/web/micro-ui-internals/packages/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-css",
-  "version": "1.8.2-beta.46",
+  "version": "1.8.2-beta.47",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <jagan.kumar@egov.org.in>",

diff --git a/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/sandbox.scss b/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/sandbox.scss
@@ -803,63 +803,228 @@ digit-card-text.center {
 }
 
 
-.role-main-container {
-  width: 100%;
-  max-width: 75rem; 
-  margin: 0 auto;
-  padding: 1.25rem; 
+@media (max-width: 768px) {
+  .role-action-container {
+      flex-direction: column;
+      align-items: center;
+  }
+
+  .role-card {
+      width: 100%;
+      margin-bottom: 0.625rem; 
+  }
 }
 
+
+.faq-answer{
+  .card-section-sub-text{
+    margin-left: 0.5rem;
+  }
+}
+
+
 .role-landing-container {
-  background-color: #f5f5f5;
-  padding: 1.25rem; 
-  border-radius: 0.5rem; 
-  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1); 
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem;
+}
+
+.role-landing-card {
+  max-width: 60rem;
+  width: 100%;
+  background-color: #fff;
+  padding: 2rem;
+  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); /* 4px 8px to rem */
+  border-radius: 0.5rem; /* 8px to rem */
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.header-video-section {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.role-header {
+  font-weight: 700 !important;
+  font-size: 2rem !important;
+  margin-bottom: 1.5rem;
+  color: #0b4b66 !important;
+}
+
+.role-video {
+  max-width: 100%;
+  margin-bottom: 2rem;
 }
 
 .config-section {
-  margin-bottom: 1.25rem; 
+  margin-bottom: 1.5rem;
+}
+
+.role-section-header {
+  font-size: 1.75rem !important;
+  font-weight: bold !important;
+  color: #0b4b66 !important;
+  margin-bottom: 1rem;
+}
+
+.role-paragraph {
+  font-size: 1rem !important;
+  color: #363636 !important;
+  line-height: 1.6;
+  margin-bottom: 1rem;
+}
+
+.role-list {
+  padding-left: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.role-list-item {
+  font-size: 1rem;
+  color: #363636;
+  line-height: 1.6;
+  margin-bottom: 0.75rem;
 }
 
 .role-action-container {
   display: flex;
-  justify-content: space-evenly;
+  justify-content: space-between;
+  gap: 1.5rem;
   align-items: stretch;
-  margin-top: 1.25rem; 
-  gap: 1.25rem; 
-  flex-wrap: wrap;
 }
 
 .role-card {
-  flex: 1 1 45%;
-  background-color: #fff;
-  padding: 1.25rem; 
-  border-radius: 0.5rem;
-  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1); 
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex: 1;
+  min-width: 0;
+  padding: 1.5rem;
+  background-color: #f9f9f9;
+  border-radius: 0.5rem; /* 8px to rem */
   text-align: center;
-  min-width: 18.75rem; 
+  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); /* 4px 8px to rem */
+}
+
+.icon-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 1rem;
 }
 
 .role-button {
-  margin-top: 0.625rem !important; 
-  width: 100% !important;
+  width: 20rem !important;
+  margin-top: 1rem !important;
+  align-self: center !important;
 }
 
-@media (max-width: 768px) {
-  .role-action-container {
-      flex-direction: column;
-      align-items: center;
-  }
+.role-list {
+  padding-left: 1.5rem;
+  margin-bottom: 1.5rem;
+  list-style-type: disc;
+}
 
-  .role-card {
-      width: 100%;
-      margin-bottom: 0.625rem; 
-  }
+.role-list-item {
+  font-size: 1rem;
+  color: #363636;
+  line-height: 1.6;
+  margin-bottom: 0.75rem;
 }
 
+/* Custom container for the entire landing component */
+.custom-landing-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem;
+}
 
-.faq-answer{
-  .card-section-sub-text{
-    margin-left: 0.5rem;
-  }
+/* Custom card styling for the landing page */
+.custom-landing-card {
+  max-width: 60rem; /* 800px to rem */
+  width: 100%;
+  background-color: #fff;
+  padding: 2rem;
+  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); /* 4px 8px to rem */
+  border-radius: 0.5rem; /* 8px to rem */
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+/* Custom header styling */
+.custom-landing-header {
+  font-weight: 700;
+  font-size: 2rem;
+  margin-bottom: 1.25rem;
+  color: #0b4b66;
+  text-align: center;
+}
+
+/* Custom video section */
+.custom-video-section {
+  text-align: center;
+  margin-bottom: 2rem;
+  padding: 1rem 0;
+}
+
+/* Custom section container */
+.custom-section-container {
+  margin-bottom: 1.5rem;
+}
+
+/* Custom section header */
+.custom-section-header {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #0b4b66;
+  margin-bottom: 1rem;
+  text-align: left;
+}
+
+/* Custom paragraph styling */
+.custom-section-paragraph {
+  font-size: 1rem;
+  color: #363636;
+  line-height: 1.6;
+  margin-bottom: 1rem;
+  text-align: justify;
+}
+
+/* Custom list styling for steps */
+.custom-steps-list {
+  padding-left: 1.5rem;
+  margin-bottom: 1.5rem;
+  list-style-type: disc;
+}
+
+/* Custom button container */
+.custom-continue-button-container {
+  display: flex;
+  justify-content: flex-end; /* Align the button to the right */
+  margin-top: 2rem;
+}
+
+/* Custom button styling */
+.custom-continue-button {
+  margin-top: 1rem;
+  align-self: flex-end; /* Ensure the button aligns to the right */
+}
+
+.custom-steps-list {
+  padding-left: 1.5rem;
+  margin-bottom: 1.5rem;
+  list-style-type: disc;
+}
+
+/* Styling for each step item */
+.custom-step-item {
+  margin-bottom: 0.75rem;
+  font-size: 1rem;
+  color: #363636;
+  line-height: 1.6;
 }