Add platform icons to publish progress bars

src/components/PublishModal.tsx

@@ -11,6 +11,7 @@ import {
   Select,
   Row,
   Col,
+  Flex,
   Progress,
   Typography,
   Empty,
@@ -364,38 +365,50 @@ export function PublishModal({
       <div>
         {/* Progress bars */}
         <div style={{ marginBottom: token.marginLG }}>
-          {hasModrinth && (
-            <div style={{ marginBottom: token.marginSM }}>
-              <Text>Modrinth: </Text>
-              <Progress
-                percent={Math.round(
-                  (progress.modrinth.done /
-                    Math.max(progress.modrinth.total, 1)) *
-                    100,
-                )}
-                format={() =>
-                  `${progress.modrinth.done} / ${progress.modrinth.total}`
-                }
-                style={{ width: "80%" }}
-              />
-            </div>
-          )}
-          {hasCurseforge && (
-            <div>
-              <Text>CurseForge: </Text>
-              <Progress
-                percent={Math.round(
-                  (progress.curseforge.done /
-                    Math.max(progress.curseforge.total, 1)) *
-                    100,
-                )}
-                format={() =>
-                  `${progress.curseforge.done} / ${progress.curseforge.total}`
-                }
-                style={{ width: "80%" }}
-              />
-            </div>
-          )}
+          <Flex vertical gap={token.marginSM}>
+            {hasModrinth && (
+              <Flex align="center" gap={token.marginXS}>
+                <img
+                  src="/platform/modrinth.svg"
+                  alt="Modrinth"
+                  style={{ width: 30, height: 30, flexShrink: 0 }}
+                />
+                <Text style={{ width: 80, flexShrink: 0, fontFamily: "Inter", fontWeight: "bold" }}>Modrinth</Text>
+                <Progress
+                  percent={Math.round(
+                    (progress.modrinth.done /
+                      Math.max(progress.modrinth.total, 1)) *
+                      100,
+                  )}
+                  format={() =>
+                    `${progress.modrinth.done} / ${progress.modrinth.total}`
+                  }
+                  style={{ flex: 1 }}
+                />
+              </Flex>
+            )}
+            {hasCurseforge && (
+              <Flex align="center" gap={token.marginXS}>
+                <img
+                  src="/platform/curseforge.svg"
+                  alt="CurseForge"
+                  style={{ width: 30, height: 30, flexShrink: 0 }}
+                />
+                <Text style={{ width: 80, flexShrink: 0, fontFamily: "Inter", fontWeight: "bold" }}>CurseForge</Text>
+                <Progress
+                  percent={Math.round(
+                    (progress.curseforge.done /
+                      Math.max(progress.curseforge.total, 1)) *
+                      100,
+                  )}
+                  format={() =>
+                    `${progress.curseforge.done} / ${progress.curseforge.total}`
+                  }
+                  style={{ flex: 1 }}
+                />
+              </Flex>
+            )}
+          </Flex>
         </div>
 
         {/* Result */}