style fixes

2023-02-22 12:58:23 +05:00
parent 443532b484
commit 031bd771f9
25 changed files with 139 additions and 58 deletions
@@ -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>
@@ -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>
-        <button onClick={() => history.goBack()} className="button-secondary">
+        <div className="line"></div>
+        <button onClick={() => history.goBack()} className="button button-type-small">
          {t("popup-main-select")}
        </button>
      </div>
@@ -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>
-            <p className="card-location">{currentLang === "ru" ? item.location.ru : item.location.en}</p>
+            <h2 className="caption-name">{currentLang === "ru" ? item.title_full.ru : item.title_full.en}</h2>
+            <h2 className="card-location">{currentLang === "ru" ? item.location.ru : item.location.en}</h2>
          </div>
        </div>
        <div className="card-description-block">
@@ -2,6 +2,11 @@
  width: 312px;
 }

+.calendar-title {
+  margin-top: 0;
+  margin-bottom: 32px;
+}
+
 .weekday-table {
  user-select: none;
  background: transparent;
@@ -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
@@ -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>
          </>
@@ -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" }}
@@ -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"
@@ -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}
@@ -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;
@@ -68,38 +68,41 @@ export const User: React.FC<any> = ({
            </motion.span>
          </div>
          {isSidebarWide && (
-            <AnimatePresence>
-              {!isControl && (
+            <div className="control-elements">
+              <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={"hidden"}
-                  animate={"show"}
-                  exit={"hidden"}
-                  className="user-control-caption"
+                  initial={false}
+                  variants={animationButton}
+                  animate={isSidebarWide ? "show" : "hidden"}
+                  className="icon-container"
                >
-                  <div className="control-circle"></div>
-                  <span className="user-control-caption">Управление</span>
+                  <motion.img
+                    initial={false}
+                    transition={transition}
+                    variants={iconAnimation}
+                    animate={expand ? "open" : "closed"}
+                    src={chevronDown}
+                    className="arrow-caption"
+                  ></motion.img>
                </motion.div>
              )}
-            </AnimatePresence>
-          )}
-          {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>
          )}
+
        </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>