Improve CSS styling (for now wide screens only).

src/Form.css

@@ -83,8 +83,8 @@ body {
   position: relative;
   padding: var(--padding);
   gap: 8px;
-  height: 45vh;
-  height: 45svh;
+  height: 35vh;
+  height: 35svh;
   display: grid;
   grid-area: 4 / 1 / span 6 / span 4;
   grid-template-columns: 1fr 1.5fr 0.5fr 1.3fr;
@@ -123,8 +123,10 @@ body {
   place-content: self-start center;
   background: hsl(0deg 100% 100%);
   color: black;
-  font-size: 1.3125rem;
+  font-size: 1.2125rem;
   /* font-size: 1.3125rem; */
+}
+.label {
   font-weight: bold;
 }
 .title {
@@ -144,3 +146,9 @@ input, select {
   border: 2px solid gray;
   border-radius: 4px;
 }
+textarea {
+  font-size: 16px;
+  font-size: max(16px, 1em);
+  font-family: inherit;
+  width: 92%;
+}

src/Form.jsx

@@ -274,12 +274,13 @@ function Form() {
             <div className="section_line"></div>
           </div>
           <div className="payer">
-            <div className="child">Плательщик:</div>
+            <div className="child label">Плательщик:</div>
             <div className="child">{`${payerName} ${clientId}`}</div>
-            <div className="child">Номер счета:</div>
+            <div className="child label">Номер счета:</div>
             <div className="child">
               <select
                 value={payerAccount}
+                style={{ width: '40ch' }}
                 onChange={(e) => {
                   setPayerAccount(e.target.value);
                   handleBlur();
@@ -294,9 +295,9 @@ function Form() {
                 ))}
               </select>
             </div>
-            <div className="child">ИНН:</div>
+            <div className="child label">ИНН:</div>
             <div className="child">{payerINN}</div>
-            <div className="child">Сумма:</div>
+            <div className="child label">Сумма:</div>
             <div className="child">
               <span>
                 <input
@@ -309,13 +310,13 @@ function Form() {
                 RUB
               </span>
             </div>
-            <div className="child">Телефон или электронный адрес:</div>
+            <div className="child label">Телефон или электронный адрес:</div>
             <div className="child">{payerPhoneEmail}</div>
             <div className="child"></div>
             <div className="child"></div>
-            <div className="child">Адрес места жительства:</div>
+            <div className="child label">Адрес места жительства:</div>
             <div className="child">{payerAddress}</div>
-            <div className="child">Комиссии и расходы:</div>
+            <div className="child label">Комиссии и расходы:</div>
             <div className="child">
               <select
                 value={chargesDetails}
@@ -337,7 +338,7 @@ function Form() {
           <div className="receiver_1">
             <div className="child"></div>
             <div className="child"></div>
-            <div className="child">БИК:</div>
+            <div className="child label">БИК:</div>
             <div className="child">
               <input
                 id="bnf_bank_bic"
@@ -350,22 +351,21 @@ function Form() {
                 }}
               />
             </div>
-            <div className="child">№ Корр. счета:</div>
+            <div className="child label">№ Корр. счета:</div>
             <div className="child">
               <select
                 onChange={(e) => {
                   setBNFBankAccount(e.target.value);
-                  /* handleBlur(); */
                 }}
                 value={bnfBankAccount}
-                style={{ maxWidth: '34ch' }}
+                style={{ width: '28ch' }}
               >
                 {bnfBankAccounts.map((item, ind) => (
                   <option key={`bnfBankAccount_${ind}`}>{item}</option>
                 ))}
               </select>
             </div>
-            <div className="child">Номер счета:</div>
+            <div className="child label">Номер счета:</div>
             <div className="child">
               <input
                 id="bnf_account"
@@ -378,7 +378,7 @@ function Form() {
                 }}
               />
             </div>
-            <div className="child">ИНН:</div>
+            <div className="child label">ИНН:</div>
             <div className="child">
               <input
                 id="bnf_inn"
@@ -391,7 +391,7 @@ function Form() {
                 }}
               />
             </div>
-            <div className="child">КПП (103):</div>
+            <div className="child label">КПП (103):</div>
             <div className="child">
               <input
                 id="bnf_kpp"
@@ -406,7 +406,7 @@ function Form() {
             </div>
           </div>
           <div className="receiver_2">
-            <div className="child">Наименование:</div>
+            <div className="child label">Наименование:</div>
             <div className="child">
               <input
                 id="bnf_name"
@@ -414,14 +414,14 @@ function Form() {
                 onChange={(e) => setBNFName(e.target.value)}
                 onBlur={handleBlur}
                 style={{
-                  width: '100ch',
+                  width: '91%',
                   borderColor: getBorderColor('bnf_name'),
                 }}
               />
             </div>
-            <div className="child">Банк получателя:</div>
+            <div className="child label">Банк получателя:</div>
             <div className="child">{bnfBankName}</div>
-            <div className="child">Назначение платежа:</div>
+            <div className="child label">Назначение платежа:</div>
             <div className="child">
               <textarea
                 id="payment_details"
@@ -430,29 +430,34 @@ function Form() {
                 onBlur={handleBlur}
                 style={{
                   height: '60px',
-                  width: '133ch',
                   borderColor: getBorderColor('payment_details'),
                 }}
               />
             </div>
-            <div className="child">Код вида дохода:</div>
+            <div className="child label">Код вида дохода:</div>
             <div className="child">
               <select
-                style={{ width: '102ch' }}
+                style={{ width: '60ch' }}
                 value={codePurpose}
                 onChange={(e) => {
                   setCodePurpose(e.target.value);
                   handleBlur();
                 }}
               >
-                <option>1</option>
-                <option>2</option>
-                <option>3</option>
-                <option>4</option>
-                <option>5</option>
+                <option>1 - напр., заработная плата</option>
+                <option>2 - алименты (периодические выплаты)</option>
+                <option>
+                  3 - возмещение вреда здоровью (периодические выплаты)
+                </option>
+                <option>
+                  4 - мат. помощь на рождение ребенка (единовременная выплата)
+                </option>
+                <option>
+                  5 - возмещение вреда здоровью (единовременная выплата)
+                </option>
               </select>
             </div>
-            <div className="child">Код (УИП) (22):</div>
+            <div className="child label">Код (УИП) (22):</div>
             <div className="child">
               <input
                 value={taxUINCode}

src/Messages.css

@@ -0,0 +1,17 @@
+.message_error {
+  background: rgb(2,0,36);
+  background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(255,36,36,0.9528186274509804) 0%, rgba(249,126,126,1) 100%);
+  min-width: 460px;
+  margin: 3px;
+  border-radius: 2em / 4em;
+  cursor: pointer;
+}
+
+.message_warning {
+  background: rgb(2,0,36);
+  background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(255,179,36,0.9528186274509804) 0%, rgba(249,229,126,1) 100%);
+  min-width: 460px;
+  margin: 3px;
+  cursor: pointer;
+  border-radius: 2em / 4em;
+}

src/Messages.jsx

@@ -1,21 +1,19 @@
 import errorIcon from './assets/error.svg';
 import warningIcon from './assets/warning.svg';
+import './Messages.css';
 
 function Messages(props) {
   return Object.keys(props.messages)
     ?.filter((item) => props.messages[item]?.status !== 'OK')
     .map((item, ind) => (
       <div
+        className={
+          props.messages[item].status === 'ERROR'
+            ? 'message_error'
+            : 'message_warning'
+        }
         onClick={() => props.focusField(item)}
         key={`messages_${ind}`}
-        style={{
-          backgroundColor:
-            props.messages[item].status === 'ERROR' ? '#ffcccc' : '#ffebcc',
-          width: '500px',
-          padding: '5px',
-          border: 'solid 1px',
-          cursor: 'pointer',
-        }}
       >
         <img
           style={{ height: '20px' }}

src/Payment.css

@@ -9,4 +9,7 @@
 .payment_messages {
     float: left;
     max-width: 25%;
+    height: 100vh;
+    background: rgb(2,0,36);
+    background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(255,255,255,0.9528186274509804) 0%, rgba(236,236,234,1) 100%);
 }