added selectioncard css change (#107)

egovernments · Jul 31, 2024 · a6df5c1 · a6df5c1
1 parent dd7c181
commit a6df5c1
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 12 deletions.
diff --git a/react/css/CHANGELOG.md b/react/css/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## [0.0.2-beta.19] - 2024-07-31
+### Added
+- Added css change for SelectionCard
+
 ## [0.0.2-beta.15] - 2024-07-30
 ### Added
 - Added Error State for Timeline, SelectionCard Component

diff --git a/react/css/package.json b/react/css/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@egovernments/digit-ui-components-css",
- "version": "0.0.2-beta.18",
+ "version": "0.0.2-beta.19",
  "license": "MIT",
  "main": "dist/index.css",
  "author": "Jagankumar <[email protected]>",

diff --git a/react/css/src/digitv2/components/errorMessageV2.scss b/react/css/src/digitv2/components/errorMessageV2.scss
@@ -7,15 +7,35 @@
  word-break: break-word;
  cursor: default;
 
- .digit-error-icon{
-  @apply flex items-center;
-  width: theme(digitv2.spacers.spacer4);
-  height: theme(digitv2.lineHeight.lineheight2);
+ .digit-error-icon {
+ @apply flex items-center;
+ width: theme(digitv2.spacers.spacer4);
+ height: theme(digitv2.lineHeight.lineheight2);
  }
+
  .digit-error-message {
- @extend .typography.body-s;
- @apply w-full;
- margin: theme(digitv2.spacers.spacer0);
- color: theme(digitv2.lightTheme.alert-error)
+ @apply w-full;
+ font-family: theme(digitv2.fontFamily.sans);
+ font-style: theme(digitv2.fontStyle.normal);
+ font-weight: theme(digitv2.fontWeight.regular);
+ line-height: theme(digitv2.lineHeight.lineheight2);
+
+ @media (max-aspect-ratio: 9/16) {
+ /* Media query for mobile */
+ font-size: theme(digitv2.fontSize.body-s.mobile);
+ }
+
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+ /* Media query for tablets */
+ font-size: theme(digitv2.fontSize.body-s.tablet);
+ }
+
+ @media (min-aspect-ratio: 3/4) {
+ /* Media query for desktop */
+ font-size: theme(digitv2.fontSize.body-s.desktop);
+ }
+
+ margin: theme(digitv2.spacers.spacer0);
+ color: theme(digitv2.lightTheme.alert-error)
  }
 }
diff --git a/react/css/src/digitv2/components/selectionCardV2.scss b/react/css/src/digitv2/components/selectionCardV2.scss
@@ -13,6 +13,11 @@
  border-radius: theme(digitv2.spacers.spacer1);
  background-color: theme(digitv2.lightTheme.paper-secondary); 
  width: fit-content;
+
+ @media (max-width: 30rem) {
+ justify-content: center;
+ }
+
  }
 
  .selection-card.error {

diff --git a/react/example/public/index.html b/react/example/public/index.html
@@ -9,7 +9,7 @@
  rel='stylesheet' type='text/css'>
  <link
  rel="stylesheet"
- href="https://unpkg.com/@egovernments/[email protected].18/dist/index.css"
+ href="https://unpkg.com/@egovernments/[email protected].19/dist/index.css"
  />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#00bcd1" />

diff --git a/react/package.json b/react/package.json
@@ -79,7 +79,7 @@
  "@babel/plugin-syntax-jsx": "^7.24.1",
  "@babel/preset-react": "^7.24.1",
  "@egovernments/digit-ui-libraries": "1.8.2-beta.1",
- "@egovernments/digit-ui-components-css":"0.0.2-beta.18",
+ "@egovernments/digit-ui-components-css":"0.0.2-beta.19",
  "@egovernments/digit-ui-module-core": "1.8.1-beta.6",
  "@egovernments/digit-ui-module-project": "0.3.4",
  "@egovernments/digit-ui-module-sample": "0.0.1",

diff --git a/react/ui-components/package.json b/react/ui-components/package.json
@@ -51,7 +51,7 @@
  "dist"
  ],
  "dependencies": {
- "@egovernments/digit-ui-components-css": "0.0.2-beta.18",
+ "@egovernments/digit-ui-components-css": "0.0.2-beta.19",
  "@egovernments/digit-ui-libraries": "1.8.1-beta.1",
  "@egovernments/digit-ui-svg-components": "1.0.4",
  "@googlemaps/js-api-loader": "1.13.10",

diff --git a/react/ui-components/src/atoms/UploadImage.js b/react/ui-components/src/atoms/UploadImage.js
@@ -355,6 +355,7 @@ const UploadImage = ({
  width={"32px"}
  height={"32px"}
  fill={"#0B4B66"}
+ className={"cp"}
  ></SVG.Close>
  </div>
  <div className="video-stream" style={{ height: "100%" }}>