👌 Improve modal styling

vforvasile · Apr 3, 2023 · ba3c34e · ba3c34e
1 parent db69a31
commit ba3c34e
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/src/components/App.css b/src/components/App.css
@@ -1515,10 +1515,17 @@ input.checked::before {
   background-color: #822000;
 }
 
+.spell-modal-item{
+  font-size: 18px;
+  color: #242527;
+}
+
 .spell-modal-item-header{
-  font-size: 1.2rem;
+  text-transform: uppercase;
+  font-size: 12px;
   font-weight: bold;
-  margin-bottom: 10px;
+  color: #000;
+  margin-bottom: 5px;
 }
 .spell-modal-header{
   display: -webkit-flex;

diff --git a/src/components/creature/spells/SpellModal.js b/src/components/creature/spells/SpellModal.js
@@ -76,7 +76,7 @@ export default function SpellModal({
                 Components
               </div>
               <div>
-                {spellInfo.components.map((el) => (<span>{el}</span>))}
+                {spellInfo.components.map((el, index) => (<span>{`${el}${spellInfo.components.length - index === 1 ? '' : ', '}`}</span>))}
               </div>
             </div>
             <div className="spell-modal-item">