weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated Font and Unit Summary

Browse Source 
- Font updated to Inter
- UI Changes to Unit Summary Component
This commit is contained in:
Dogma
2024-04-14 21:38:10 +10:00
parent dab1d4a97c
commit b4e217548e
3 changed files with 29 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/react/index.html
View File

@@ -1,14 +1,20 @@
<!doctype html> <!doctype html>
<html lang="en" class="dark"> <html lang="en" class="dark">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root" class="h-screen w-screen"></div>
<script type="module" src="/src/main.tsx"></script>
</body> <head>
</html> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root" class="h-screen w-screen"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

5
frontend/react/src/index.css
View File

@@ -6,6 +6,11 @@
* { * {
font-weight: 400; font-weight: 400;
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-style: normal;
font-variation-settings:
"slnt" 0;
} }
.z-ui-0 { .z-ui-0 {

14
frontend/react/src/ui/components/olunitsummary.tsx
View File

@@ -6,22 +6,22 @@ export function OlUnitSummary(props: {
blueprint: UnitBlueprint, blueprint: UnitBlueprint,
coalition: Coalition coalition: Coalition
}) { }) {
return <div data-coalition={props.coalition} className="relative border-l-4 flex flex-col gap-2 p-2 pt-4 items-start shadow-lg bg-white hover:bg-gray-100 dark:bg-[#243141] dark:hover:bg-gray-700 data-[coalition='blue']:border-blue-600 data-[coalition='neutral']:border-gray-400 data-[coalition='red']:border-red-500"> return <div data-coalition={props.coalition} className="relative border-l-4 flex flex-col gap-2 p-2 pt-4 pb-4 items-start shadow-lg bg-white dark:bg-olympus-600 data-[coalition='blue']:border-blue-600 data-[coalition='neutral']:border-gray-400 data-[coalition='red']:border-red-500">
<div className="flex flex-row gap-2 content-center"> <div className="flex flex-row gap-2 content-center">
<img className="object-cover h-8 ml-2 rounded-tl-md rotate-180 invert" src={"images/units/"+props.blueprint.filename} alt="" /> <img className="object-cover h-7 ml-2 rounded-tl-md rotate-180 invert" src={"images/units/"+props.blueprint.filename} alt="" />
<div className="my-auto w-full font-bold tracking-tight text-gray-900 dark:text-white">{props.blueprint.label}</div> <div className="my-auto w-full font-semibold tracking-tight text-gray-900 dark:text-white">{props.blueprint.label}</div>
</div> </div>
<div className="flex flex-col justify-between px-2 leading-normal h-fit"> <div className="flex flex-col justify-between px-2 leading-normal h-fit">
<p className="font-normal text-gray-700 dark:text-gray-400">{props.blueprint.description}</p> <p className="text-sm text-gray-700 dark:text-gray-400 mb-1">{props.blueprint.description}</p>
</div> </div>
<div className="flex flex-row gap-2 p-2"> <div className="flex flex-row gap-1 px-2">
{props.blueprint.abilities?.split(" ").map((tag) => { {props.blueprint.abilities?.split(" ").map((tag) => {
return <div key={tag} className="bg-black bg-opacity-20 dark:text-gray-400 rounded-full px-2 py-0.5 text-xs"> return <div key={tag} className="font-bold bg-olympus-800 dark:text-olympus-50 rounded-full px-2 py-0.5 text-xs">
{tag} {tag}
</div> </div>
})} })}
<div className="bg-black bg-opacity-20 dark:text-gray-400 rounded-full px-2 py-0.5 text-xs">{props.blueprint.era === "WW2" ? "WW2" : props.blueprint.era.split(" ").map((word) => { <div className="font-bold bg-olympus-800 dark:text-olympus-50 rounded-full px-2 py-0.5 text-xs">{props.blueprint.era === "WW2" ? "WW2" : props.blueprint.era.split(" ").map((word) => {
return word.charAt(0).toLocaleUpperCase(); return word.charAt(0).toLocaleUpperCase();
})}</div> })}</div>
</div> </div>