Fix styels

Author: vtm9

services/app/apps/codebattle/assets/js/widgets/components/InvitesContainer.jsx

@@ -8,6 +8,7 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import { unfollowUser, followUser } from '@/middlewares/Main';
 
+import fightSvg from '../../../static/images/fight.svg';
 import i18n from '../../i18n';
 import { initInvites } from '../middlewares/Invite';
 import initPresence from '../middlewares/Main';
@@ -117,7 +118,7 @@ function InvitesContainer() {
             <img
               ref={ref}
               alt="invites"
-              src="/assets/images/fight.svg"
+              src={fightSvg}
               style={{ width: '46px', height: '46px' }}
             />
             {followId && (

services/app/apps/codebattle/lib/codebattle_web/templates/layout/external.html.heex

@@ -44,13 +44,13 @@
     <link
       phx-track-static
       rel="stylesheet"
-      href={Routes.static_path(@conn, "/assets/external.css")}
+      href={CodebattleWeb.Vite.asset_path("external.css")}
     />
     <script
       defer
       phx-track-static
       type="text/javascript"
-      src={Routes.static_path(@conn, "/assets/external.js")}
+      src={CodebattleWeb.Vite.asset_path("external.js")}
     >
     </script>
   </head>

services/app/apps/codebattle/vite.config.js

@@ -62,8 +62,8 @@ const input = {
   landing: path.resolve(__dirname, "assets/js/landing.js"),
   external: path.resolve(__dirname, "assets/js/external.js"),
   styles: path.resolve(__dirname, "assets/css/style.scss"),
-  // Note: landing.css and external.css use the same styles as app.css
-  // Templates should reference app.css instead
+  landingStyles: path.resolve(__dirname, "assets/css/landing.scss"),
+  externalStyles: path.resolve(__dirname, "assets/css/external.scss"),
   // broadcast_editor: path.resolve(__dirname, "assets/js/widgets/pages/broadcast-editor/index.js"),
   // stream: path.resolve(__dirname, "assets/js/widgets/pages/broadcast-editor/stream.js"),
 };
@@ -110,6 +110,14 @@ export default defineConfig(({ command, mode }) => ({
           if (assetInfo.name === 'styles.css') {
             return 'app.css';
           }
+          // Rename landingStyles.css to landing.css
+          if (assetInfo.name === 'landingStyles.css') {
+            return 'landing.css';
+          }
+          // Rename externalStyles.css to external.css
+          if (assetInfo.name === 'externalStyles.css') {
+            return 'external.css';
+          }
           // Add hash to images for cache busting in production
           if (/\.(png|jpe?g|gif|svg|webp|ico)$/i.test(assetInfo.name)) {
             return "[name]-[hash].[ext]";