change spacing to sap-margin-tiny

kyma-project · Oct 31, 2024 · b548107 · b548107
1 parent 324344d
commit b548107
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 8 deletions.
diff --git a/src/resources/Namespaces/AllNamespacesDetails.js b/src/resources/Namespaces/AllNamespacesDetails.js
@@ -73,7 +73,7 @@ export function AllNamespacesDetails() {
             >
               {t('common.headers.monitoring-and-health')}
             </Title>
-            <div className="cluster-stats" style={spacing.sapUiTinyMargin}>
+            <div className="cluster-stats sap-margin-tiny">
               <ResourcesUsage />
               <NamespaceWorkloads />
             </div>

diff --git a/src/resources/Namespaces/YamlUpload/YamlUpload.js b/src/resources/Namespaces/YamlUpload/YamlUpload.js
@@ -70,7 +70,7 @@ function YamlUpload({
           editor.getModel().setValue(val);
         }}
       />
-      <p style={spacing.sapUiTinyMargin}>{t('upload-yaml.or-paste-here')}</p>
+      <p className="sap-margin-tiny">{t('upload-yaml.or-paste-here')}</p>
       <div
         className={'yaml-upload-modal__content'}
         style={{

diff --git a/src/shared/ResourceForm/fields/RichEditorDataField/RichEditorSection.js b/src/shared/ResourceForm/fields/RichEditorDataField/RichEditorSection.js
@@ -106,7 +106,7 @@ export function RichEditorSection({ item, onChange, onDelete, pushValue }) {
     >
       {keyInput}
       <div className="rich-editor__dropdown-wrapper">
-        <div style={spacing.sapUiTinyMargin}>{languageDropdown}</div>
+        <div className="sap-margin-tiny">{languageDropdown}</div>
       </div>
       {valueInput}
     </ResourceForm.CollapsibleSection>

diff --git a/src/shared/components/DescriptionHint/DescriptionHint.tsx b/src/shared/components/DescriptionHint/DescriptionHint.tsx
@@ -12,6 +12,7 @@ type HintButtonProps = {
   style?: CSSProperties;
   disableLinkDetection?: boolean;
   ariaTitle?: string;
+  className?: string;
 };
 
 export function HintButton({
@@ -21,6 +22,7 @@ export function HintButton({
   style,
   disableLinkDetection = false,
   ariaTitle = '',
+  className,
 }: HintButtonProps) {
   const [ID] = useState(uniqueId('id-')); //todo: migrate to useID from react after upgrade to version 18+
   const descBtnRef = useRef(null);
@@ -38,7 +40,7 @@ export function HintButton({
         ref={descBtnRef}
         icon="hint"
         design="Transparent"
-        style={style}
+        className={className}
         onClick={e => {
           e.stopPropagation();
           setShowTitleDescription(true);

diff --git a/src/shared/components/DynamicPageComponent/DynamicPageComponent.js b/src/shared/components/DynamicPageComponent/DynamicPageComponent.js
@@ -106,7 +106,7 @@ export const DynamicPageComponent = ({
           )}
           {description && (
             <HintButton
-              style={spacing.sapUiTinyMargin}
+              className="sap-margin-tiny"
               setShowTitleDescription={setShowTitleDescription}
               showTitleDescription={showTitleDescription}
               description={description}

diff --git a/src/shared/components/ResourceHealthCard/ResourceHealthCard.js b/src/shared/components/ResourceHealthCard/ResourceHealthCard.js
@@ -21,9 +21,7 @@ export function ResourceHealthCard({
           {t('common.headers.monitoring-and-health')}
         </Title>
       )}
-      <div className="cluster-stats" style={spacing.sapUiTinyMargin}>
-        {customHealthCards}
-      </div>
+      <div className="cluster-stats sap-margin-tiny">{customHealthCards}</div>
     </>
   );
 }