style fixes

src/App.css

@@ -4,6 +4,7 @@
   width: 100%;
 }
 
+
 .content__container {
   height: 100vh;
   width: 400px;
@@ -20,6 +21,7 @@
 }
 
 .popup {
+  border-radius: 4px;
   width: 100%;
   background: transparent;
   padding: 56px;
@@ -49,6 +51,8 @@
   border-radius: 16px;
 }
 
+
+
 @media screen and (max-width: 1440px) {
   .card-title {
     margin: 22px 0 40px 0;

src/App.tsx

@@ -47,7 +47,7 @@ const App: React.FC = () => {
       <Route exact path="/">
         <Header></Header>
         <div className="main">
-          <h3 className="card-title">{t("demo-title")}</h3>
+          <h2 className="card-title">{t("demo-title")}</h2>
           <div className="card-container">
             {cards.map((i: ICards) => (
               <Card onClick={() => handleCards(i)} key={i._id} item={i}></Card>

src/components/pages/ConnectPage/LoadingPopup/LoadingPopup.tsx

@@ -2,8 +2,13 @@ import "./LoadingPopup.css";
 import { useHistory } from "react-router-dom";
 
 import { useTranslation } from "react-i18next";
+import { useAppDispatch, useAppSelector } from "hooks/redux";
+
+
+export const LoadingPopup: React.FC<any> = ({ }) => {
+
+  const { currentCard } = useAppSelector((state) => state.cardReducer);
 
-export const LoadingPopup: React.FC<any> = ({ logo }) => {
   const history = useHistory();
   const { t } = useTranslation();
 
@@ -11,7 +16,7 @@ export const LoadingPopup: React.FC<any> = ({ logo }) => {
     <div className="popup popup-type-loader">
       <div className="loading-logo-container">
         <div className="popup-img-container">
-          <img className="popup-logo" src={logo} alt="лого" />
+          <img className="popup-logo" src={currentCard.image.logo} alt="лого" />
         </div>
         <span className="loading-caption">Пожалуйста подождите</span>
       </div>

src/components/pages/ConnectPage/PopupConnect/PopupConnect.tsx

@@ -25,11 +25,11 @@ export const PopupConnect: React.FC<any> = ({ onConnect, logo, isLoading }) => {
         <img className="popup-logo" src={logo} alt="лого" />
       </div>
       <div className="popup-button-container">
-        <button onClick={handleConnect} className="button-primary">
+        <button onClick={handleConnect} className="button button-primary">
           {t("popup-main-btn-start")}
         </button>
-        <div className="popup-line"></div>
+        <div className="line"></div>
-        <button onClick={() => history.goBack()} className="button-secondary">
+        <button onClick={() => history.goBack()} className="button button-type-small">
           {t("popup-main-select")}
         </button>
       </div>

src/components/pages/Main/Card/Card.tsx

@@ -14,8 +14,8 @@ export const Card: React.FC<any> = ({ item, onClick }) => {
         <div className="card-header">
           <img src={iconButton} className="card-icon" alt="лого" />
           <div className="card-name">
-            <p className="caption-name">{currentLang === "ru" ? item.title_full.ru : item.title_full.en}</p>
+            <h2 className="caption-name">{currentLang === "ru" ? item.title_full.ru : item.title_full.en}</h2>
-            <p className="card-location">{currentLang === "ru" ? item.location.ru : item.location.en}</p>
+            <h2 className="card-location">{currentLang === "ru" ? item.location.ru : item.location.en}</h2>
           </div>
         </div>
         <div className="card-description-block">

src/components/pages/Plan/CalendarComponent/CalendarComponent.css

@@ -2,6 +2,11 @@
   width: 312px;
 }
 
+.calendar-title {
+  margin-top: 0;
+  margin-bottom: 32px;
+}
+
 .weekday-table {
   user-select: none;
   background: transparent;

src/components/pages/Plan/CalendarComponent/CalendarComponent.tsx

@@ -85,7 +85,7 @@ export const CalendarComponent: React.FC<any> = ({ time, pickedTime }) => {
 
   return (
     <div className="calendar-container">
-      <h3 className="plan-title">Выберите дату.</h3>
+      <h3 className="title-planning calendar-title">Выберите <br></br> дату.</h3>
       <div className="calendar">
         <div className="calendar-header">
           <img

src/components/pages/Plan/PlanComponent.tsx

@@ -22,12 +22,10 @@ export const PlanComponent: React.FC<any> = () => {
 
   return (
     <div className="content-container-plan">
-      <img alt="logo" src={logo} className="plan-logo"></img>
       <div className="calendar-position">
         <AnimatePresence mode="wait">
           {isCalendar && (
             <motion.div
-              style={{ height: "560px" }}
               key={1}
               variants={popupAnimation}
               initial={"hidden"}
@@ -39,7 +37,6 @@ export const PlanComponent: React.FC<any> = () => {
           )}
           {isTimepicker && (
             <motion.div
-              style={{ height: "560px" }}
               key={2}
               variants={popupAnimation}
               initial={"hidden"}
@@ -51,7 +48,6 @@ export const PlanComponent: React.FC<any> = () => {
           )}
           {isForm && (
             <motion.div
-              style={{ height: "560px" }}
               key={3}
               variants={popupAnimation}
               initial={"hidden"}
@@ -63,7 +59,6 @@ export const PlanComponent: React.FC<any> = () => {
           )}
           {isDone && (
             <motion.div
-              style={{ height: "560px" }}
               key={4}
               variants={popupAnimation}
               initial={"hidden"}
@@ -77,7 +72,7 @@ export const PlanComponent: React.FC<any> = () => {
         {!isDone && (
           <>
             <div className="line line-calendar"></div>
-            <button className="button button-type-small">
+            <button style={{height: '32px'}} className="button button-type-small">
               На сайт жилого комплекса
             </button>
           </>

src/components/pages/Plan/TimepickerComponent/TimepickerComponent.tsx

@@ -51,7 +51,7 @@ export const TimepickerComponent: React.FC<any> = ({ time }) => {
   };
   return (
     <div className="calendar-container">
-      <h3 className="plan-title plan-title-plan">Выберите время.</h3>
+      <h3 style={{margin:"0"}} className="title-planning">Выберите <br></br> время.</h3>
       <button
         onClick={() => handleReturn()}
         style={{ width: "120px", padding: "4px 16px 4px 4px", height: "32px" }}

src/components/pages/Stream/PopupExit/PopupExit.tsx

@@ -12,9 +12,9 @@ export const PopupExit: React.FC<TSidebarPopup> = ({ setClose, onExit }) => {
     <div className="popup exit-popup-container popup">
       <div className="popup-position-container">
         <div className="mobile-users-part-header">
-          <span className="mobile-users-part-header-title exit-popup-button-title">
+          <h2 className="mobile-users-part-header-title exit-popup-button-title">
             {t("popup-control-exit-title")}
-          </span>
+          </h2>
           <button
             onClick={() => setClose()}
             className="mobile-users-part-header-close-button"

src/components/pages/Stream/PopupShare/PopupShare.tsx

@@ -24,18 +24,18 @@ export const PopupShare: React.FC<any> = ({ setClose }) => {
   return (
     <div className="share-popup-container popup">
       <div className="mobile-users-part-header share-header-popup">
-        <span className="mobile-users-part-header-title">
+        <h2 className="mobile-users-part-header-title">
           {t("popup-control-invite-title")}
-        </span>
+        </h2>
         <button
           onClick={closePopup}
           className="mobile-users-part-header-close-button"
         ></button>
       </div>
       <div className="share-popup-data-container">
-        <span className="share-popup-data-title">
+        <h3 className="share-popup-data-title">
           {t("popup-control-link")}
-        </span>
+        </h3>
         <input
           className="share-popup-data-input href"
           value={window.location.href}

src/components/pages/Stream/User/User.css

@@ -10,7 +10,6 @@
 .user {
   display: flex;
   align-items: center;
-  gap: 8px;
 }
 
 .user-name {
@@ -29,6 +28,12 @@
   flex-direction: column;
 }
 
+.control-elements {
+  gap: 8px;
+  display: flex;
+  
+}
+
 .you-caption {
   font-weight: 400;
   font-size: 12px;

src/components/pages/Stream/User/User.tsx

@@ -68,38 +68,41 @@ export const User: React.FC<any> = ({
             </motion.span>
           </div>
           {isSidebarWide && (
-            <AnimatePresence>
+            <div className="control-elements">
-              {!isControl && (
+              <AnimatePresence>
+                {!isControl && (
+                  <motion.div
+                    variants={popupAnimation}
+                    initial={"hidden"}
+                    animate={"show"}
+                    exit={"hidden"}
+                    className="user-control-caption"
+                  >
+                    <div className="control-circle"></div>
+                    <span className="user-control-caption">Управление</span>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+              {isAdmin && (
                 <motion.div
-                  variants={popupAnimation}
+                  initial={false}
-                  initial={"hidden"}
+                  variants={animationButton}
-                  animate={"show"}
+                  animate={isSidebarWide ? "show" : "hidden"}
-                  exit={"hidden"}
+                  className="icon-container"
-                  className="user-control-caption"
                 >
-                  <div className="control-circle"></div>
+                  <motion.img
-                  <span className="user-control-caption">Управление</span>
+                    initial={false}
+                    transition={transition}
+                    variants={iconAnimation}
+                    animate={expand ? "open" : "closed"}
+                    src={chevronDown}
+                    className="arrow-caption"
+                  ></motion.img>
                 </motion.div>
               )}
-            </AnimatePresence>
+            </div>
-          )}
-          {isAdmin && (
-            <motion.div
-              initial={false}
-              variants={animationButton}
-              animate={isSidebarWide ? "show" : "hidden"}
-              className="icon-container"
-            >
-              <motion.img
-                initial={false}
-                transition={transition}
-                variants={iconAnimation}
-                animate={expand ? "open" : "closed"}
-                        src={chevronDown}
-                className="arrow-caption"
-              ></motion.img>
-            </motion.div>
           )}
+
         </div>
         {expand && (
           <AnimatePresence>
@@ -112,6 +115,7 @@ export const User: React.FC<any> = ({
             >
               <div
                 onClick={() => setControl((prev) => !prev)}
+                style={{ height: "40px" }}
                 className="button button-secondary"
               >
                 <img src={isControl ? control : controlOff}></img>
@@ -120,12 +124,13 @@ export const User: React.FC<any> = ({
                 </span>
               </div>
               <div
-                style={{width: "40px", padding: "16px"}}
+                style={{ width: "40px", height: "40px", padding: "16px" }}
                 onClick={() => setMute((prev) => !prev)}
                 className="button button-teritary"
               >
                 <img
                   alt="иконка звук выкл"
+
                   src={mute ? microOn : microOff}
                   className="mic"
                 ></img>

src/fonts/fonts.css

@@ -1,4 +1,3 @@
-
 @font-face {
 	font-family: 'Inter';
 	src:
@@ -44,3 +43,12 @@
 	font-style: normal;
 }
 
+
+@font-face {
+	font-family: 'GilroyWebRegular';
+	src: url('./Gilroy_Regular.woff'),
+		url('./Gilroy_Regular.woff2');
+	font-weight: 400;
+	font-style: normal;
+
+}

src/styles/styles.css

@@ -15,35 +15,58 @@
   font-size: 15px;
   line-height: 150%;
   padding: 12px 24px;
+  border-radius: 4px;
+
 }
 
 .button-primary {
+  position: relative;
   color: #f2f2f2;
   transition: background 0.2s ease-in-out;
   background: linear-gradient(180deg, #bc75ff 0%, #798fff 100%);
   border-radius: 4px;
 }
 
+
+
 .button-primary:hover {
   transition: background 0.2 ease-in-out;
   background: linear-gradient(180deg, #798fff -41.07%, #d375ff 100%);
 }
 
 .button-secondary {
+  position: relative;
   color: #c5c7ce;
+  background: #23242A;
+
   transition: background 0.2s ease-in-out;
-  border: 10px solid;
+}
-  border-image-slice: 1;
+
-  border-width: 1px;
+.button-secondary::before {
-  border-image-source: linear-gradient(180deg, #bc75ff 0%, #798fff 100%);
+  content: "";
-  background: #23242a;
+  position: absolute;
+  inset: 0;
+  border-radius: 4px;
+  padding: 1px;
+  background: linear-gradient(180deg, #BC75FF 0%, #798FFF 100%);
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
 }
 
 .button-secondary:hover {
+  transition: background 0.2s ease-in-out;
   background: #2e3038;
   color: #f2f2f2;
+}
+
+
+
+.button-secondary:hover::before {
   transition: background 0.2s ease-in-out;
-  border-image-source: linear-gradient(180deg, #798fff -41.07%, #d375ff 100%);
+  background: linear-gradient(180deg, #798fff -41.07%, #d375ff 100%);
 }
 
 .button-teritary {
@@ -69,6 +92,7 @@
   background: #1c1d21;
   border-radius: 4px;
   padding: 8px 16px;
+  height: 32px;
 }
 
 .button-type-small:hover {
@@ -77,3 +101,33 @@
   background: #23242a;
   color: #f2f2f2;
 }
+
+
+h2 {
+  font-family: 'GilroyWebRegular';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 125%;
+  color: #F2F2F2;
+  margin: 0;
+}
+
+h3 {
+  margin: 0;
+  font-family: 'GilroyWebRegular';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 120%;
+  color: #C5C7CE;
+}
+
+.title-planning {
+  font-family: 'GilroyWebRegular';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 38px;
+  line-height: 100%;
+  color: #F2F2F2;
+}