Fix styles

vtm9 · vtm9 · commit 6530747d6b0e · 2025-11-03T11:19:13.000+01:00
diff --git a/services/app/apps/codebattle/assets/css/landing.scss b/services/app/apps/codebattle/assets/css/landing.scss
@@ -1,6 +1,6 @@
-@import 'fonts';
-@import 'variables';
-@import '~bootstrap/scss/bootstrap';
+@import "fonts";
+@import "variables";
+@import "bootstrap/scss/bootstrap";
 
 .btn:hover {
   text-decoration: if($link-hover-decoration == underline, none, null);
@@ -55,7 +55,7 @@ h2 {
 }
 
 .bg-codebattle {
-  background-image: url('../static/images/landing/bg-codebattle.svg');
+  background-image: url("../static/images/landing/bg-codebattle.svg");
   background-repeat: no-repeat;
   background-size: 70%;
   background-position: right;
@@ -115,7 +115,7 @@ h2 {
 }
 
 p {
-  font-family: 'Montserrat', sans-serif;
+  font-family: "Montserrat", sans-serif;
 }
 
 .lang-icons {
diff --git a/services/app/apps/codebattle/assets/js/app.js b/services/app/apps/codebattle/assets/js/app.js
@@ -21,6 +21,7 @@ import "@fortawesome/fontawesome-free/js/all";
 // import '../css/style.scss';
 import "bootstrap";
 
+import "@vitejs/plugin-react/preamble";
 import { inspect } from "@xstate/inspect";
 import NProgress from "nprogress";
 import { Socket } from "phoenix";
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/SeasonProfilePanel.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/SeasonProfilePanel.jsx
@@ -1,24 +1,24 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
 
-import axios from 'axios';
-import cn from 'classnames';
-import { camelizeKeys } from 'humps';
-import { useDispatch, useSelector } from 'react-redux';
+import axios from "axios";
+import cn from "classnames";
+import { camelizeKeys } from "humps";
+import { useDispatch, useSelector } from "react-redux";
 
-import { loadNearbyUsers } from '@/middlewares/Users';
+import { loadNearbyUsers } from "@/middlewares/Users";
 import {
   selectDefaultAvatarUrl,
   currentUserIsAdminSelector,
   userByIdSelector,
-} from '@/selectors';
+} from "@/selectors";
 
-import i18n from '../../../i18n';
-import { actions } from '../../slices';
+import i18n from "../../../i18n";
+import { actions } from "../../slices";
 
-import CodebattleLeagueDescription from './CodebattleLeagueDescription';
-import TournamentListItem, { activeIcon } from './TournamentListItem';
+import CodebattleLeagueDescription from "./CodebattleLeagueDescription";
+import TournamentListItem, { activeIcon } from "./TournamentListItem";
 
-const contestDatesText = 'Season: Oct 16 - Dec 21';
+const contestDatesText = "Season: Oct 16 - Dec 21";
 
 const OpponentInfo = ({ id }) => {
   const user = useSelector(userByIdSelector(id));
@@ -29,34 +29,33 @@ const OpponentInfo = ({ id }) => {
         <UserLogo user={user} size="25px" />
         <span
           title={user?.name}
-          className={cn('text-white text-truncate ml-2', {
-            'cb-text-skeleton w-100': !user,
+          className={cn("text-white text-truncate ml-2", {
+            "cb-text-skeleton w-100": !user,
           })}
-          style={{ maxWidth: '70px' }}
+          style={{ maxWidth: "70px" }}
         >
           {user?.name}
         </span>
       </div>
       <div className="d-flex flex-column text-center py-1 w-100">
         <a href="/hall_of_fame" className="stat-item py-1 w-100">
           <span
-            className={cn('stat-value d-block cb-text-danger', {
-              'd-inline cb-text-skeleton w-25 mx-auto': !user,
+            className={cn("stat-value d-block cb-text-danger", {
+              "d-inline cb-text-skeleton w-25 mx-auto": !user,
             })}
           >
-            #
-            {user ? user.rank : ''}
+            #{user ? user.rank : ""}
           </span>
           <span className="stat-label text-uppercase">Place</span>
         </a>
       </div>
       <div className="d-flex flex-column text-center py-1 w-100">
         <span
-          className={cn('stat-value d-block cb-text-danger', {
-            'd-inline cb-text-skeleton w-25 mx-auto': !user,
+          className={cn("stat-value d-block cb-text-danger", {
+            "d-inline cb-text-skeleton w-25 mx-auto": !user,
           })}
         >
-          {user ? user.points : ''}
+          {user ? user.points : ""}
         </span>
         <span className="stat-label text-uppercase">Points</span>
       </div>
@@ -72,7 +71,7 @@ const SeasonNearbyUsers = ({ user, nearbyUsers }) => {
     if (user.points) {
       const abortController = new AbortController();
 
-      const onSuccess = payload => {
+      const onSuccess = (payload) => {
         if (!abortController.signal.aborted) {
           dispatch(actions.setNearbyUsers(payload.data));
           dispatch(actions.updateUsers(payload.data));
@@ -110,14 +109,14 @@ const SeasonNearbyUsers = ({ user, nearbyUsers }) => {
             <OpponentInfo />
           </>
         ) : (
-          nearbyUsers.map(id => <OpponentInfo id={id} />)
+          nearbyUsers.map((id) => <OpponentInfo id={id} />)
         )}
       </div>
     </div>
   );
 };
 
-const UserLogo = ({ user, size = '70px' }) => {
+const UserLogo = ({ user, size = "70px" }) => {
   const [userInfo, setUserInfo] = useState();
   const defaultAvatarUrl = useSelector(selectDefaultAvatarUrl);
   const avatarUrl = user?.avatarUrl || userInfo?.avatarUrl || defaultAvatarUrl;
@@ -131,7 +130,7 @@ const UserLogo = ({ user, size = '70px' }) => {
         .get(`/api/v1/user/${userId}/stats`, {
           signal: controller.signal,
         })
-        .then(response => {
+        .then((response) => {
           if (!controller.signal.aborted) {
             setUserInfo(camelizeKeys(response.data.user));
           }
@@ -178,7 +177,7 @@ const SeasonProfilePanel = ({
                     </span>
                   </div>
                   <div className="d-flex flex-wrap">
-                    {liveTournaments.map(tournament => (
+                    {liveTournaments.map((tournament) => (
                       <TournamentListItem
                         isAdmin={isAdmin}
                         key={tournament.id}
@@ -197,7 +196,7 @@ const SeasonProfilePanel = ({
                     </span>
                   </div>
                   <div className="d-flex flex-wrap">
-                    {seasonTournaments.map(tournament => (
+                    {seasonTournaments.map((tournament) => (
                       <TournamentListItem
                         isAdmin={isAdmin}
                         key={tournament.id}
@@ -217,21 +216,21 @@ const SeasonProfilePanel = ({
               type="button"
               className="btn btn-secondary cb-btn-secondary mx-0 mx-md-2 mx-lg-2 w-100 cb-rounded text-nowrap"
             >
-              {i18n.t('Contests History')}
+              {i18n.t("Contests History")}
             </a>
             <a
               href="/schedule#my"
               type="button"
               className="btn btn-secondary cb-btn-secondary mx-0 mx-md-2 mx-lg-2 w-100 cb-rounded text-nowrap"
             >
-              {i18n.t('My Tournaments')}
+              {i18n.t("My Tournaments")}
             </a>
             <a
               href="/tournaments"
               type="button"
               className="btn btn-secondary cb-btn-secondary mx-0 mx-md-2 mx-lg-2 w-100 cb-rounded text-nowrap"
             >
-              {i18n.t('Create a Tournament')}
+              {i18n.t("Create a Tournament")}
             </a>
           </div>
         </div>
@@ -243,7 +242,7 @@ const SeasonProfilePanel = ({
             <span className="clan-tag mt-2">{user.name}</span>
             <span className="h1 clan-title m-0 text-white text-uppercase">
               Clan
-              {': '}
+              {": "}
               {user.clanId ? (
                 user.clan
               ) : (
@@ -264,8 +263,7 @@ const SeasonProfilePanel = ({
             <a href="/hall_of_fame" className="stat-item py-1 w-100">
               {user.points ? (
                 <span className="stat-value d-block cb-text-success">
-                  #
-                  {user.rank}
+                  #{user.rank}
                 </span>
               ) : (
                 <span className="stat-value d-block cb-text-danger">#0</span>
@@ -290,7 +288,7 @@ const SeasonProfilePanel = ({
             href="/hall_of_fame"
             className="text-uppercase stat-label cb-rounded"
           >
-            {i18n.t('View Hall of Fame')}
+            {i18n.t("View Hall of Fame")}
           </a>
         </div>
         {controls}
diff --git a/services/app/apps/codebattle/lib/codebattle_web/templates/layout/app.html.heex b/services/app/apps/codebattle/lib/codebattle_web/templates/layout/app.html.heex
@@ -36,17 +36,9 @@
     <meta content="#ffffff" name="theme-color" />
     <%= render_tags_all(assigns[:meta_tags] || %{}) %>
     <meta name="csrf-token" content={csrf_token_value()} />
-    <link rel="stylesheet" href={CodebattleWeb.Vite.asset_path("styles.css")} />
     <%= if CodebattleWeb.Vite.dev?() do %>
+      <link rel="stylesheet" href="http://localhost:8080/assets/css/style.scss" />
       <script type="module" src="http://localhost:8080/@vite/client"></script>
-      <!-- React Fast Refresh preamble -->
-      <script type="module">
-        import RefreshRuntime from "http://localhost:8080/@react-refresh";
-        RefreshRuntime.injectIntoGlobalHook(window);
-        window.$RefreshReg$ = () => {};
-        window.$RefreshSig$ = () => (type) => type;
-        window.__vite_plugin_react_preamble_installed__ = true;
-      </script>
       <script type="module" src="http://localhost:8080/assets/js/app.js"></script>
     <% else %>
       <link rel="stylesheet" href={CodebattleWeb.Vite.asset_path("app.css")} />
diff --git a/services/app/apps/codebattle/lib/codebattle_web/templates/layout/landing.html.heex b/services/app/apps/codebattle/lib/codebattle_web/templates/layout/landing.html.heex
@@ -51,6 +51,20 @@
       src={Routes.static_path(@conn, "/assets/landing.js")}
     >
     </script>
+
+    <%= if CodebattleWeb.Vite.dev?() do %>
+      <link rel="stylesheet" href="http://localhost:8080/assets/css/landing.scss" />
+      <script type="module" src="http://localhost:8080/@vite/client"></script>
+      <script type="module" src="http://localhost:8080/assets/js/landing.js"></script>
+    <% else %>
+      <link rel="stylesheet" href={CodebattleWeb.Vite.asset_path("app.css")} />
+      <%= for href <- CodebattleWeb.Vite.css_paths("app.js") do %>
+        <link rel="stylesheet" href={href} />
+      <% end %>
+      <script type="module" src={CodebattleWeb.Vite.asset_path("app.js")}></script>
+    <% end %>
+
+
     <title><%= Application.get_env(:codebattle, :app_title) %></title>
     <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport" />
     <script async="" defer="" src="https://buttons.github.io/buttons.js">
diff --git a/services/app/apps/codebattle/vite.config.js b/services/app/apps/codebattle/vite.config.js
@@ -37,6 +37,7 @@ const input = {
   cssbattle: path.resolve(__dirname, "assets/js/iframes/cssbattle/index.js"),
   landing: path.resolve(__dirname, "assets/js/landing.js"),
   external: path.resolve(__dirname, "assets/js/external.js"),
+  styles: path.resolve(__dirname, "assets/css/style.scss"),
   // broadcast_editor: path.resolve(
   //   __dirname,
   //   "assets/js/widgets/pages/broadcast-editor/index.js",
