DmitriyB/pixelstreamingv2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

style fixes

Browse Source
This commit is contained in:
DmitriyB
2023-02-22 12:58:23 +05:00
parent 443532b484
commit 031bd771f9
25 changed files with 139 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.css
+4
View File
@@ -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
+1 -1
View File
@@ -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
+7 -2
View File
@@ -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
+3 -3
View File
@@ -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>
src/components/pages/Main/Card/Card.tsx
+2 -2
View File
@@ -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">
src/components/pages/Plan/CalendarComponent/CalendarComponent.css
+5
View File
@@ -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
+1 -1
View File
@@ -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
+1 -6
View File
@@ -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
+1 -1
View File
@@ -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
+2 -2
View File
@@ -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
+4 -4
View File
@@ -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
+6 -1
View File
@@ -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
+33 -28
View File
@@ -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>
src/fonts/Gilroy_Bold.woff
BIN
View File
Binary file not shown.
src/fonts/Gilroy_Bold.woff2
BIN
View File
Binary file not shown.
src/fonts/Gilroy_Light.woff
BIN
View File
Binary file not shown.
src/fonts/Gilroy_Light.woff2
BIN
View File
Binary file not shown.
src/fonts/Gilroy_Medium.woff
BIN
View File
Binary file not shown.
src/fonts/Gilroy_Medium.woff2
BIN
View File
Binary file not shown.
src/fonts/Gilroy_Regular.woff
BIN
View File
Binary file not shown.
src/fonts/Gilroy_Regular.woff2
BIN
View File
Binary file not shown.
src/fonts/Gilroy_SemiBold.woff
BIN
View File
Binary file not shown.
src/fonts/Gilroy_SemiBold.woff2
BIN
View File
Binary file not shown.
src/fonts/fonts.css
+9 -1
View File
@@ -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
+60 -6
View File
@@ -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;
border-image-source: linear-gradient(180deg, #bc75ff 0%, #798fff 100%);
background: #23242a;
}
.button-secondary::before {
content: "";
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;
}