theme file, selectable card and styles changed (#502)

* theme file, selectable card and styles changed
---------

Co-authored-by: Siva Rama Krishna <[email protected]>

Author: SambhuPega

packages/react-sdk-components/src/common.css

@@ -1,3 +1,7 @@
+.psdk-root {
+  background-color: var(--app-form-bg-color);
+}
+
 .portal-load-error {
   height: 100vh;
   width: 100vw;
@@ -37,7 +41,7 @@
 
 .logout-btn:hover {
   background: var(--app-warning-color-dark);
-  color: var(--app-form-color);
+  color: var(--app-form-bg-color);
 }
 
 .portals-list {

packages/react-sdk-components/src/components/field/RadioButtons/RadioButtons.tsx

@@ -108,7 +108,7 @@ export default function RadioButtons(props: RadioButtonsProps) {
     return (
       <div>
         <h4 style={{ marginTop: 0, marginBottom: 0 }}>{label}</h4>
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(30%, 40ch), 1fr))', gridAutoRows: '1fr', gap: '0.5rem' }}>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(200px, 100%), 1fr))', gap: '1rem' }}>
           <SelectableCard
             hideFieldLabels={hideFieldLabels}
             additionalProps={additionalProps}

packages/react-sdk-components/src/components/field/SelectableCard/SelectableCard.tsx

@@ -93,7 +93,7 @@ export default function SelectableCard(props) {
                       alt={image.alt}
                       style={{
                         width: '100%',
-                        backgroundColor: 'rgb(233, 238, 243)',
+                        backgroundColor: 'transparent',
                         aspectRatio: '16 / 9',
                         maxHeight: '100%',
                         height: '100%',

packages/react-sdk-components/src/components/infra/MultiStep/MultiStep.css

@@ -213,7 +213,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-label {
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--text-secondary-color);
   display: inline-block;
   min-width: 50px;
   vertical-align: middle;
@@ -223,7 +223,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-label-selected {
-  color: rgba(0, 0, 0, 0.87);
+  color: var(--text-primary-color);
   display: inline-block;
   min-width: 50px;
   vertical-align: middle;

packages/react-sdk-components/src/samples/Embedded/styles.css

@@ -1,19 +1,4 @@
 /* global styles*/
-
-.psdk-flow-container-top {
-  max-width: 1400px;
-  width: 50%;
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 5%;
-  margin-bottom: 5%;
-  padding: 0;
-}
-.psdk-horizontal-stepper-header-container {
-  display: none;
-  margin-bottom: 2rem;
-}
-
 #pega-part-of-page .psdk-flow-container-top {
   max-width: 1400px;
   width: 50%;
@@ -39,7 +24,3 @@
 #pega-part-of-page .MuiCardContent-root:last-child {
   padding-bottom: 0px !important;
 }
-
-#pega-part-of-page img {
-  background-color: transparent !important;
-}

packages/react-sdk-components/src/theme.ts

@@ -53,7 +53,7 @@ const lightThemeColours = {
     '--app-warning-color-dark': '#f57c00',
 
     '--app-background-color': 'whitesmoke',
-    '--app-form-color': 'white',
+    '--app-form-bg-color': 'white',
 
     /* App Navigation */
     '--app-nav-bg': '#262626' /*! default */,
@@ -75,7 +75,10 @@ const lightThemeColours = {
     '--selected-step-label-color': 'rgba(0, 0, 0, 0.87)',
     '--step-label-color': 'rgba(0, 0, 0, 0.54)',
     '--svg-color': 'invert(0%)',
-    '--secondary-button-text-color': '#ffffff'
+    '--secondary-button-text-color': '#ffffff',
+
+    '--text-primary-color': '#000',
+    '--text-secondary-color': '#c0c0c0'
   }
 };
 const darkThemeColours = {
@@ -95,7 +98,7 @@ const darkThemeColours = {
     '--app-warning-color-dark': '#c68400' /* dark amber */,
 
     '--app-background-color': '#060326' /* main dark background */,
-    '--app-form-color': '#18132c' /* slightly lighter for forms */,
+    '--app-form-bg-color': '#23273f' /* slightly lighter for forms */,
 
     /* App Navigation */
     '--app-nav-bg': '#18132c' /* navigation background */,
@@ -117,7 +120,10 @@ const darkThemeColours = {
     '--selected-step-label-color': 'rgba(0, 0, 0, 0.87)',
     '--step-label-color': 'rgba(0, 0, 0, 0.54)',
     '--svg-color': 'invert(100%)',
-    '--secondary-button-text-color': '#1a103c'
+    '--secondary-button-text-color': '#1a103c',
+
+    '--text-primary-color': '#e0e0e0',
+    '--text-secondary-color': '#c0c0c0'
   }
 };
 
@@ -247,7 +253,8 @@ const darkTheme = createTheme({
     },
     background: {
       // default: 'radial-gradient(178.62% 112% at 50% -12%, #0B0F2A 69.96%, #111951 89.19%)',
-      paper: '#18132c'
+      // paper: '#18132c'
+      paper: '#191b2c' // card-bg
     },
     text: {
       primary: '#e0e0e0', // text-light