Графические фиксы

src/components/City/City.css

@@ -1,32 +1,46 @@
-.button-container {
+/* .button-container {
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
-    gap: 10px;
+  gap: 10px;
-    opacity: 0;
+  opacity: 0;
-    transform: translateY(20px);
+  transform: translateY(20px);
-    transition: opacity 0.5s ease, transform 0.5s ease;
+  transition: opacity 0.5s ease, transform 0.5s ease;
-  }
+} */
-  
-  .animated-button {
-    width: 304px;
-    height: 54px;
-    border-radius: 27px;
-    border: none;
-    font-family: 'Raleway';
-    font-weight: bold;
-    color: #FFFFFF;
-    background-color: #46A2E3;
-    transition: background-color 0.3s ease;
-  }
-  
-  .animated-button:hover {
-    background-color: #357ABF;
-  }
-  
-  .button-container.visible {
-    opacity: 1;
-    transform: translateY(0);
-  }
 
-  
+.animated-button {
-  
+  width: 304px;
+  height: 54px;
+  font-size: 20px;
+  border-radius: 27px;
+  border: none;
+  background-color: #46A2E3;
+  font-family: 'Raleway';
+  color: #FFFFFF;
+  font-weight: 97px;
+} 
+
+.animated-button:hover {
+  background-color: #398ac5;
+}
+
+.ab {
+  width: 304px;
+  height: 54px;
+  font-size: 20px;
+  border-radius: 27px;
+  border: none;
+  background-color: white;
+  font-family: 'Raleway';
+  color: #398ac5;
+  font-weight: 97px;
+} 
+
+.ab:hover {
+  background-color: #f8f8f8;
+}
+
+
+/* .button-container.visible {
+  opacity: 1;
+  transform: translateY(0);
+} */

src/components/City/City.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import axios from "axios";
+import './City.css'
 
 const City = (props) => {
   const route = props.getValue;
@@ -72,7 +73,7 @@ const City = (props) => {
           justifyContent: 'center',
           width: 304,
         }}>
-          <img src='./image 2.png' alt="#" style={{
+          <img src='./image 2.png' alt="#" draggable="false" style={{
             width: 282,
             height: 282,
           }} />
@@ -81,16 +82,17 @@ const City = (props) => {
             fontWeight: 700,
             fontSize: 30,
             color: '#000'
-          }}>Выберите город</span>
+          }}></span>
-        <select onChange={e => cityHandler(e)} value={selectedCity} id="city" name="city" style={{
+        <select onChange={e => cityHandler(e)} placeholder="Выберите город..." value={selectedCity} id="city" name="city" style={{
           height: 40,
           width: 304,
           borderRadius: '20px',
+          border: 'none',
           padding: '5px',
         }}>
           <option value="" style={{
                 maxWidth: 200,
-            }}>Select a city</option>
+            }}>Выберите город...</option>
           {filteredCityOptions.map(option => (
             <option key={option.id} value={option.name} style={{
                 maxWidth: 200,
@@ -107,46 +109,31 @@ const City = (props) => {
     gap: 10,
     }}>
     <button
+      className="animated-button"
       onClick={() => {
         route('/second')
         setUserData({selectedCity: selectedCity});
         console.log(selectedCity);
     }}
-      className="animated-button"
-      style={{
-        width: 304,
-        height: 54,
-        borderRadius: 27,
-        border: 'none',
-        backgroundColor: '#46A2E3',
-        fontFamily: 'Raleway',
-        color: '#FFFFFF',
-        fontWeight: '97px',
-      }}
     >
       Я в этом городе
     </button>
     <button
+      className="ab"
       onClick={() => window.open('https://www.aviasales.ru/?marker=15468.ydof241309826304&yclid=18373991699987824639&params=TGK1')}
-      className="animated-button"
       style={{
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
-        width: 304,
         height: 42,
-        borderRadius: 27,
         border: 'none',
-        backgroundColor: '#fff',
-        fontFamily: 'Raleway',
-        color: '#0C78FE',
-        fontWeight: '97px',
       }}
     >
       <img
         src="./icon200.png"
         alt="#"
         style={{
+          fontSize: 20,
           width: 30,
           height: 30,
           marginRight: 10,

src/components/Tinder/Tinder.css

@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap');
   .tinder-container {
     margin-top: 30%;
     height: 85vh;
@@ -9,15 +10,34 @@
     overflow: hidden;
   }
   
+  .noselect {
+    -webkit-touch-callout: none; /* iOS Safari */
+      -webkit-user-select: none; /* Safari */
+       -khtml-user-select: none; /* Konqueror HTML */
+         -moz-user-select: none; /* Old versions of Firefox */
+          -ms-user-select: none; /* Internet Explorer/Edge */
+              user-select: none; /* Non-prefixed version, currently
+                                    supported by Chrome, Edge, Opera and Firefox */
+  }
+
   .card-container {
     position: relative;
     display: flex;
     height: 100%;
     width: 300px;
     flex-direction: column;
-    background-color: #fff;
   }
   
+  .text {
+    font-family: 'Raleway';
+    font-weight: bold;
+    text-align: center;
+    color: black;
+    font-size: 20px;
+    margin: 0;
+  }
+
+
   .swipe {
     margin-top: 15%;
     display: flex;

src/components/Tinder/Tinder.js

@@ -32,6 +32,14 @@ const Tinder = (props) => {
     };
 
     return (
+        <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100vh',
+            justifyContent: 'space-around',
+            alignItems: 'center',
+            background: 'linear-gradient(180deg, #7EAFE7 0.27%, rgba(41, 134, 242, 0.38) 27.08%, rgba(41, 134, 242, 0.35) 31.77%, rgba(152, 198, 253, 0.28) 46.35%, rgba(41, 134, 242, 0.00) 100%)',
+          }}>
         <div className='tinder-container'>
             <div className='card-container'>
                 {cardInfo.map((card) => (
@@ -60,8 +68,7 @@ const Tinder = (props) => {
                                     display: 'flex',
                                     flexDirection: 'column',
                                     paddingTop: '10px',
-                                }}
+                                }}>
-                            >
                                 <div style={{
                                     height: '188px',
                                     width: '245px',
@@ -77,7 +84,7 @@ const Tinder = (props) => {
                                     height: '150px',
                                     width: '100%',
                                 }}>
-                                    <h3>{card.question}</h3>
+                                    <h3 className="noselect text">{card.question}</h3>
                                 <div style={{
                                     display: 'flex',
                                     justifyContent: 'space-between',
@@ -85,6 +92,7 @@ const Tinder = (props) => {
                                     marginRight: '3px',
                                 }}>
                                     <button
+                                    className="noselect"
                                     style={{
                                         height: '69px',
                                         width: '69px',
@@ -93,12 +101,13 @@ const Tinder = (props) => {
                                     }}
                                     onClick={() => handleDislike(card.id)}
                                 >
-                                    <img src="./dis.jpg" alt='#' style={{
+                                    <img draggable="false" src="./Dis.png" alt='#' style={{
                                         height: '100%',
                                         width: '100%',
                                     }} onClick={() => handleDislike(card.id)}/>
                                 </button>
                                 <button
+                                    className="noselect"
                                     style={{
                                         height: '69px',
                                         width: '69px',
@@ -107,7 +116,7 @@ const Tinder = (props) => {
                                     }}
                                     onClick={() => handleLike(card.id)}
                                 >
-                                    <img src="./like.jpg" alt='#' style={{
+                                    <img draggable="false" src="./Like.png" alt='#' style={{
                                         height: '100%',
                                         width: '100%',
                                     }} onClick={() => handleLike(card.id)}/>
@@ -121,6 +130,7 @@ const Tinder = (props) => {
                 ))}
             </div>
         </div>
+        </div>
     );
 }