Styling

3 files changed, 108 insertions, 52 deletions

diff --git a/front/src/App.css b/front/src/App.css
index d58f45b..b76858b 100644
--- a/front/src/App.css
+++ b/front/src/App.css
@@ -20,3 +20,18 @@
     padding-right: 10px;
 }
 
+button {
+    margin-top: 15px;
+    font-family: "LXGW Marker Gothic", sans-serif;
+    color: var(--colorscheme-gray);
+    padding: 3px;
+    padding-left: 10px;
+    padding-right: 10px;
+    border: 2px solid var(--colorscheme-black);
+    background-color: var(--colorscheme-white);
+    cursor: pointer;
+}
+
+* {
+    background-color: var(--colorscheme-white);
+}
diff --git a/front/src/Pages/RangedWeapon.tsx b/front/src/Pages/RangedWeapon.tsx
index bcfa649..8065b9d 100644
--- a/front/src/Pages/RangedWeapon.tsx
+++ b/front/src/Pages/RangedWeapon.tsx
@@ -199,34 +199,43 @@ export function EditRangedWeaponPage() {
 
     return (
         <div className="WeaponPage">
+            <span>
+                <h1> Editing a weapon </h1>
+            </span>
             <span> 
-            <input value={Name} onChange={(val) => {
-                setName(val.target.value);
-            }} /> 
+                <input className="NameEdit" value={Name} onChange={(val) => {
+                    setName(val.target.value);
+                }} /> 
             </span>
-            <select 
-            value={WeaponType}
-            onChange={ (val) => {
-                const newWeaponType = val.target.value;
-                setWeaponType(newWeaponType);
-            }}> 
-                <option value="Light pistol"> Light pistol </option>
-                <option value="Medium pistol"> Medium pistol </option>
-                <option value="Heavy pistol"> Heavy pistol </option>
-                <option value="Very heavy pistol"> Very heavy pistol </option>
-
-                <option value="Light submachinegun"> Light submachinegun </option>
-                <option value="Medium submachinegun"> Medium submachinegun </option>
-                <option value="Heavy submachinegun"> Heavy submachinegun </option>
-
-                <option value="Assault rifle"> Assault rifle </option>
-                <option value="Heavy weapon"> Heavy weapon </option>
-                <option value="Exotic"> Exotic </option>
-
-            </select>
             <table> 
                 <tbody>
                     <tr> 
+                        <td> { GetLocalizedString("Weapon type", lang) } </td>
+                        <td> 
+                            <select 
+                            value={WeaponType}
+                            onChange={ (val) => {
+                                const newWeaponType = val.target.value;
+                                setWeaponType(newWeaponType);
+                            }}> 
+                                <option value="Light pistol"> Light pistol </option>
+                                <option value="Medium pistol"> Medium pistol </option>
+                                <option value="Heavy pistol"> Heavy pistol </option>
+                                <option value="Very heavy pistol"> Very heavy pistol </option>
+                
+                                <option value="Light submachinegun"> Light submachinegun </option>
+                                <option value="Medium submachinegun"> Medium submachinegun </option>
+                                <option value="Heavy submachinegun"> Heavy submachinegun </option>
+                
+                                <option value="Assault rifle"> Assault rifle </option>
+                                <option value="Heavy weapon"> Heavy weapon </option>
+                                <option value="Exotic"> Exotic </option>
+                
+                            </select>
+                        </td>
+                    </tr>
+
+                    <tr> 
                         <td> { GetLocalizedString("Accuracy", lang) } </td>
                         <td> 
                             <input value={Accuracy} type="number" onChange={(val) => {
@@ -345,43 +354,46 @@ export function EditRangedWeaponPage() {
                 } else {
                     UpdateRangedWeapon(id, updated, authCookie['X-AUTH-TOKEN']);
                 }
-                navigate('/weapons');
-                document.location.reload();
+                // navigate('/weapons');
+                // document.location.reload();
             }}> Update </button> 
+
             <button onClick={ () => {
                 if (id == "new") return;
                 DeleteRangedWeapon(id, authCookie['X-AUTH-TOKEN']);
-                navigate('/weapons');
-                document.location.reload();
+                // navigate('/weapons');
+                // document.location.reload();
             }}> Delete </button> 
 
-            <select 
-                value={currentLanguage}
-                onChange={ (val) => {
-                    setCurrentLanguage(val.target.value as AllowedLanguages);
-                }}> 
-                <option value="ru"> ru </option>
-                <option value="en"> en </option>
-            </select>
-
-            <div>
-                <input id="description" 
-                    value={DescriptionContents} 
+            <div className="descPanel">
+                <span> Description update </span>
+                <select 
+                    value={currentLanguage}
                     onChange={ (val) => {
-                        SetDescContents(val.target.value);
-                    }}
-                    />
-            </div>
+                        setCurrentLanguage(val.target.value as AllowedLanguages);
+                    }}> 
+                    <option value="ru"> ru </option>
+                    <option value="en"> en </option>
+                </select>
 
-            <button onClick={ () => {
-                if (id == "new") return;
-                const newDesc: Description = {
-                    Id: "",
-                    Language: currentLanguage,
-                    Contents: DescriptionContents,
-                }
-                updateWeaponDescription(id, newDesc, authCookie['X-AUTH-TOKEN']);
-            }}> Update description </button> 
+                <button onClick={ () => {
+                    if (id == "new") return;
+                    const newDesc: Description = {
+                        Id: "",
+                        Language: currentLanguage,
+                        Contents: DescriptionContents,
+                    }
+                    updateWeaponDescription(id, newDesc, authCookie['X-AUTH-TOKEN']);
+                }}> Update </button> 
+            </div>
+    
+            <textarea className="descriptionInput"
+                value={DescriptionContents} 
+                onChange={ (val) => {
+                    SetDescContents(val.target.value);
+                }}
+                />
+    
         </div>
     );
 }
@@ -414,6 +426,7 @@ async function UpdateRangedWeapon(id: string | undefined, model: RangedWeaponReq
     if (!isIdValid(id)) return;
     const uri = `${RangedWeaponsURL}/${id}`;
 
+    console.log(model);
     await axios.put(uri, model, {
         headers: {
             Authorization: `Bearer ${token}`
diff --git a/front/src/Pages/Weapons.css b/front/src/Pages/Weapons.css
index 7f29770..bc7ee0d 100644
--- a/front/src/Pages/Weapons.css
+++ b/front/src/Pages/Weapons.css
@@ -16,6 +16,13 @@ td {
     color: var(--colorscheme-gray);
 }
 
+input {
+    font-family: "Rubik Dirt", system-ui;
+    width: 99%;
+    border: 0px;
+    border-bottom: 1px solid var(--colorscheme-gray);
+}
+
 .WeaponPage {
     flex-grow: 1;
 }
@@ -27,3 +34,24 @@ td {
 .DmgInput {
     max-width: 40%;
 }
+
+.NameEdit {
+    font-size: 30px;
+    margin-bottom: 10px;
+}
+
+td > select {
+    width: 100%;
+    border: 0px;
+    background: var(--colorscheme-white);
+    font-family: "LXGW Marker Gothic", sans-serif;
+}
+
+.descPanel > * {
+    margin-right: 5px;
+}
+
+.descriptionInput {
+    height: 10rem;
+    width: 80%;
+}