dbeaver/pro#4405 return version update styles (#3434)

* dbeaver/pro#4405 return version update styles

* dbeaver/pro#4405 fix styles in docker instruction

webapp/packages/core-blocks/src/Link.module.css

@@ -35,4 +35,5 @@
   position: absolute;
   width: 8px;
   left: calc(100% + 4px);
+  top: 0;
 }

webapp/packages/plugin-version-update-administration/src/DockerUpdateInstructions.module.css

@@ -8,12 +8,3 @@
 .groupItem {
   white-space: pre-line;
 }
-
-.h4 {
-  margin-top: 0;
-}
-
-.ol {
-  margin: 0;
-  padding: 0;
-}

webapp/packages/plugin-version-update-administration/src/DockerUpdateInstructions.tsx

@@ -19,8 +19,10 @@ export const DockerUpdateInstructions = observer(function DockerUpdateInstructio
     <Group gap large>
       <GroupTitle>{translate('version_update_how_to_update')}</GroupTitle>
       <GroupItem className={s(style, { groupItem: true })}>
-        <h4 className={s(style, { h4: true })}>The following instructions apply only when you run CloudBeaver in a Docker container.</h4>
-        <ol className={s(style, { ol: true })}>
+        <h4 className="tw:mb-4">
+          <b>The following instructions apply only when you run CloudBeaver in a Docker container.</b>
+        </h4>
+        <ol className="tw:list-decimal tw:list-inside">
           <li>
             Stop the existing container by running the <strong>docker stop</strong> command.
           </li>

webapp/packages/plugin-version-update-administration/src/VersionInfo.module.css

@@ -6,12 +6,6 @@
  * you may not use this file except in compliance with the License.
  */
 .group {
-  list-style-position: inside;
   height: 100%;
   max-height: 300px;
 }
-
-.reactMarkdown > * {
-  margin: 0;
-  padding: 0;
-}

webapp/packages/plugin-version-update-administration/src/VersionInfo.tsx

@@ -30,7 +30,16 @@ export const VersionInfo = observer<Props>(function VersionInfo({ item }) {
         <GroupTitle>{version ? `Release notes ${version.number} - ${version.date}` : translate('version_update_version_no_info')}</GroupTitle>
         {version && (
           <GroupItem>
-            <ReactMarkdown className={s(style, { reactMarkdown: true })}>{version.releaseNotes}</ReactMarkdown>
+            <ReactMarkdown
+              components={{
+                p: ({ node, ...props }) => <p className="tw:mb-4" {...props} />,
+                ul: ({ node, ...props }) => <ul className="tw:list-disc tw:flex tw:flex-col tw:gap-4" {...props} />,
+                ol: ({ node, ...props }) => <ol className="tw:list-decimal tw:flex tw:flex-col tw:gap-4" {...props} />,
+                li: ({ node, ...props }) => <li className="tw:ml-4" {...props} />,
+              }}
+            >
+              {version.releaseNotes}
+            </ReactMarkdown>
           </GroupItem>
         )}
       </Group>

webapp/packages/plugin-version-update-administration/src/VersionSelector.module.css

@@ -12,7 +12,3 @@
 .instruction {
   white-space: pre-line;
 }
-
-.h4 {
-  margin: 0;
-}

webapp/packages/plugin-version-update-administration/src/VersionSelector.tsx

@@ -65,7 +65,9 @@ export const VersionSelector = observer<Props>(function VersionSelector({ versio
         )}
         <GroupTitle>{translate('plugin_version_update_administration_recommendations_label')}</GroupTitle>
         <GroupItem>
-          <h4 className={s(style, { h4: true })}>{translate('plugin_version_update_administration_recommendations')}</h4>
+          <h4>
+            <b>{translate('plugin_version_update_administration_recommendations')}</b>
+          </h4>
         </GroupItem>
       </Group>
       {version && <VersionInfo item={version.number} />}