diff --git a/src/components/Venues/VenueCard.tsx b/src/components/Venues/VenueCard.tsx index 752ac95139..43da734bd6 100644 --- a/src/components/Venues/VenueCard.tsx +++ b/src/components/Venues/VenueCard.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Card, Button } from 'react-bootstrap'; import defaultImg from 'assets/images/defaultImg.png'; import PeopleIcon from 'assets/svgs/people.svg?react'; -import styles from 'screens/OrganizationVenues/OrganizationVenues.module.css'; +import styles from '../../style/app.module.css'; import { useTranslation } from 'react-i18next'; import type { InterfaceQueryVenueListItem } from 'utils/interfaces'; diff --git a/src/screens/OrganizationVenues/OrganizationVenues.module.css b/src/screens/OrganizationVenues/OrganizationVenues.module.css deleted file mode 100644 index e4ac9d7575..0000000000 --- a/src/screens/OrganizationVenues/OrganizationVenues.module.css +++ /dev/null @@ -1,879 +0,0 @@ -.navbarbg { - height: 60px; - background-color: white; - display: flex; - margin-bottom: 30px; - z-index: 1; - position: relative; - flex-direction: row; - justify-content: space-between; - box-shadow: 0px 0px 8px 2px #c8c8c8; -} - -.logo { - color: #707070; - margin-left: 0; - display: flex; - align-items: center; - text-decoration: none; -} - -.logo img { - margin-top: 0px; - margin-left: 10px; - height: 64px; - width: 70px; -} - -.logo > strong { - line-height: 1.5rem; - margin-left: -5px; - font-family: sans-serif; - font-size: 19px; - color: #707070; -} -.mainpage { - display: flex; - flex-direction: row; -} - -.sidebar:after { - background-color: #f7f7f7; - position: absolute; - width: 2px; - height: 600px; - top: 10px; - left: 94%; - display: block; -} - -.navitem { - padding-left: 27%; - padding-top: 12px; - padding-bottom: 12px; - cursor: pointer; -} - -.logintitle { - color: #707070; - font-weight: 600; - font-size: 20px; - margin-bottom: 30px; - padding-bottom: 5px; - border-bottom: 3px solid #31bb6b; - width: 15%; -} - -.logintitleadmin { - color: #707070; - font-weight: 600; - font-size: 18px; - margin-top: 50px; - margin-bottom: 40px; - padding-bottom: 5px; - border-bottom: 3px solid #31bb6b; - width: 30%; -} -.admindetails { - display: flex; - justify-content: space-between; -} -.admindetails > p { - margin-top: -12px; - margin-right: 30px; -} - -.mainpageright > hr { - margin-top: 20px; - width: 100%; - margin-left: -15px; - margin-right: -15px; - margin-bottom: 20px; -} -.justifysp { - display: flex; - justify-content: space-between; - margin-top: 20px; -} - -.addbtn { - border: 1px solid #e8e5e5; - box-shadow: 0 2px 2px #e8e5e5; - border-radius: 5px; - font-size: 16px; - height: 60%; - color: white; - outline: none; - font-weight: 600; - cursor: pointer; - transition: - transform 0.2s, - box-shadow 0.2s; -} -.flexdir { - display: flex; - flex-direction: row; - justify-content: space-between; - border: none; -} - -.form_wrapper { - margin-top: 27px; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - position: absolute; - display: flex; - flex-direction: column; - padding: 40px 30px; - background: #ffffff; - border-color: #e8e5e5; - border-width: 5px; - border-radius: 10px; - max-height: 86vh; - overflow: auto; -} - -.form_wrapper form { - display: flex; - align-items: left; - justify-content: left; - flex-direction: column; -} -.logintitleinvite { - color: #707070; - font-weight: 600; - font-size: 20px; - margin-bottom: 20px; - padding-bottom: 5px; - border-bottom: 3px solid #31bb6b; - width: 40%; -} -.titlemodal { - color: #707070; - font-weight: 600; - font-size: 20px; - margin-bottom: 20px; - padding-bottom: 5px; - border-bottom: 3px solid #31bb6b; - width: 65%; -} -.cancel > i { - margin-top: 5px; - transform: scale(1.2); - cursor: pointer; - color: #707070; -} -.modalbody { - width: 50px; -} -.greenregbtn { - margin: 1rem 0 0; - margin-top: 15px; - border: 1px solid #e8e5e5; - box-shadow: 0 2px 2px #e8e5e5; - padding: 10px 10px; - border-radius: 5px; - background-color: #31bb6b; - width: 100%; - font-size: 16px; - color: white; - outline: none; - font-weight: 600; - cursor: pointer; - transition: - transform 0.2s, - box-shadow 0.2s; - width: 100%; -} - -.datediv { - display: flex; - flex-direction: row; - margin-bottom: 15px; -} -.datebox { - width: 90%; - border-radius: 7px; - border-color: #e8e5e5; - outline: none; - box-shadow: none; - padding-top: 2px; - padding-bottom: 2px; - padding-right: 5px; - padding-left: 5px; - margin-right: 5px; - margin-left: 5px; -} -.checkboxdiv > label { - margin-right: 50px; -} -.checkboxdiv > label > input { - margin-left: 10px; -} -.loader, -.loader:after { - border-radius: 50%; - width: 10em; - height: 10em; -} -.loader { - margin: 60px auto; - margin-top: 35vh !important; - font-size: 10px; - position: relative; - text-indent: -9999em; - border-top: 1.1em solid rgba(255, 255, 255, 0.2); - border-right: 1.1em solid rgba(255, 255, 255, 0.2); - border-bottom: 1.1em solid rgba(255, 255, 255, 0.2); - border-left: 1.1em solid #febc59; - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - -webkit-animation: load8 1.1s infinite linear; - animation: load8 1.1s infinite linear; -} -@-webkit-keyframes load8 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} -@keyframes load8 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} -.dispflex { - display: flex; - align-items: center; -} -.dispflex > input { - border: none; - box-shadow: none; - margin-top: 5px; -} -.checkboxdiv { - display: flex; -} -.checkboxdiv > div { - width: 50%; -} - -@media only screen and (max-width: 600px) { - .form_wrapper { - width: 90%; - top: 45%; - } -} - -.navbarbg { - height: 60px; - background-color: white; - display: flex; - margin-bottom: 30px; - z-index: 1; - position: relative; - flex-direction: row; - justify-content: space-between; - box-shadow: 0px 0px 8px 2px #c8c8c8; -} - -.logo { - color: #707070; - margin-left: 0; - display: flex; - align-items: center; - text-decoration: none; -} - -.logo img { - margin-top: 0px; - margin-left: 10px; - height: 64px; - width: 70px; -} - -.logo > strong { - line-height: 1.5rem; - margin-left: -5px; - font-family: sans-serif; - font-size: 19px; - color: #707070; -} -.mainpage { - display: flex; - flex-direction: row; -} -.sidebar { - display: flex; - width: 100%; - justify-content: space-between; - z-index: 0; - padding-top: 10px; - margin: 0; - height: 100%; -} - -.navitem { - padding-left: 27%; - padding-top: 12px; - padding-bottom: 12px; - cursor: pointer; -} - -.logintitle { - color: #707070; - font-weight: 600; - font-size: 20px; - margin-bottom: 30px; - padding-bottom: 5px; - border-bottom: 3px solid #31bb6b; - width: 15%; -} -.searchtitle { - color: #707070; - font-weight: 600; - font-size: 20px; - margin-bottom: 20px; - padding-bottom: 5px; - border-bottom: 3px solid #31bb6b; - width: 60%; -} -.justifysp { - display: flex; - justify-content: space-between; -} -@media screen and (max-width: 575.5px) { - .justifysp { - padding-left: 55px; - display: flex; - justify-content: space-between; - width: 100%; - } - .mainpageright { - width: 98%; - } -} - -.logintitleadmin { - color: #707070; - font-weight: 600; - font-size: 18px; - margin-top: 50px; - margin-bottom: 40px; - padding-bottom: 5px; - border-bottom: 3px solid #31bb6b; - width: 40%; -} -.admindetails { - display: flex; - justify-content: space-between; -} -.admindetails > p { - margin-top: -12px; - margin-right: 30px; -} -.mainpageright > hr { - margin-top: 10px; - width: 97%; - margin-left: -15px; - margin-right: -15px; - margin-bottom: 20px; -} -.addbtnmain { - width: 60%; - margin-right: 50px; -} -.addbtn { - float: right; - width: 23%; - border: 1px solid #e8e5e5; - box-shadow: 0 2px 2px #e8e5e5; - border-radius: 5px; - background-color: #31bb6b; - height: 40px; - font-size: 16px; - color: white; - outline: none; - font-weight: 600; - cursor: pointer; - margin-left: 30px; - transition: - transform 0.2s, - box-shadow 0.2s; -} -.flexdir { - display: flex; - flex-direction: row; - justify-content: space-between; - border: none; -} - -.form_wrapper { - margin-top: 27px; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - position: absolute; - display: flex; - flex-direction: column; - padding: 40px 30px; - background: #ffffff; - border-color: #e8e5e5; - border-width: 5px; - border-radius: 10px; -} - -.form_wrapper form { - display: flex; - align-items: left; - justify-content: left; - flex-direction: column; -} -.logintitleinvite { - color: #707070; - font-weight: 600; - font-size: 20px; - margin-bottom: 20px; - padding-bottom: 5px; - border-bottom: 3px solid #31bb6b; - width: 40%; -} -.cancel > i { - margin-top: 5px; - transform: scale(1.2); - cursor: pointer; - color: #707070; -} -.modalbody { - width: 50px; -} -.greenregbtn { - margin: 1rem 0 0; - margin-top: 10px; - border: 1px solid #e8e5e5; - box-shadow: 0 2px 2px #e8e5e5; - padding: 10px 10px; - border-radius: 5px; - background-color: #31bb6b; - width: 100%; - font-size: 16px; - color: white; - outline: none; - font-weight: 600; - cursor: pointer; - transition: - transform 0.2s, - box-shadow 0.2s; - width: 100%; -} -.dropdown { - background-color: white; - border: 1px solid #31bb6b; - position: relative; - display: inline-block; - margin-top: 10px; - margin-bottom: 10px; - color: #31bb6b; -} -.input { - flex: 1; - position: relative; -} -/* .btnsContainer { - display: flex; - margin: 2.5rem 0 2.5rem 0; - width: 100%; - flex-direction: row; - justify-content: space-between; - } */ - -.btnsContainer { - display: flex; - margin: 2.5rem 0 2.5rem 0; -} - -.btnsContainer .input { - flex: 1; - position: relative; - min-width: 18rem; - width: 25rem; -} - -.btnsContainer .input button { - width: 52px; -} -.searchBtn { - margin-bottom: 10px; -} - -.inputField { - margin-top: 10px; - margin-bottom: 10px; - background-color: white; - box-shadow: 0 1px 1px #31bb6b; -} -.inputField > button { - padding-top: 10px; - padding-bottom: 10px; -} -.TableImage { - background-color: #31bb6b !important; - width: 50px !important; - height: 50px !important; - border-radius: 100% !important; - margin-right: 10px !important; -} -.tableHead { - background-color: #31bb6b !important; - color: white; - border-radius: 20px !important; - padding: 20px; - margin-top: 20px; -} - -.tableHead :nth-first-child() { - border-top-left-radius: 20px; -} - -.mainpageright > hr { - margin-top: 10px; - width: 100%; - margin-left: -15px; - margin-right: -15px; - margin-bottom: 20px; -} - -.loader, -.loader:after { - border-radius: 50%; - width: 10em; - height: 10em; -} -.loader { - margin: 60px auto; - margin-top: 35vh !important; - font-size: 10px; - position: relative; - text-indent: -9999em; - border-top: 1.1em solid rgba(255, 255, 255, 0.2); - border-right: 1.1em solid rgba(255, 255, 255, 0.2); - border-bottom: 1.1em solid rgba(255, 255, 255, 0.2); - border-left: 1.1em solid #febc59; - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - -webkit-animation: load8 1.1s infinite linear; - animation: load8 1.1s infinite linear; -} -.radio_buttons { - display: flex; - flex-direction: column; - gap: 0.5rem; - color: #707070; - font-weight: 600; - font-size: 14px; -} -.radio_buttons > input { - transform: scale(1.2); -} -.radio_buttons > label { - margin-top: -4px; - margin-left: 5px; - margin-right: 15px; -} -.preview { - display: flex; - position: relative; - width: 100%; - margin-top: 10px; - justify-content: center; -} -.preview img { - width: 400px; - height: auto; -} -.postimage { - border-radius: 0px; - width: 100%; - height: 12rem; - max-width: 100%; - max-height: 12rem; - object-fit: cover; - position: relative; - color: black; -} -.closeButtonP { - position: absolute; - top: 0px; - right: 0px; - background: transparent; - transform: scale(1.2); - cursor: pointer; - border: none; - color: #707070; - font-weight: 600; - font-size: 16px; - cursor: pointer; -} -.addbtn { - border: 1px solid #e8e5e5; - box-shadow: 0 2px 2px #e8e5e5; - border-radius: 5px; - font-size: 16px; - height: 60%; - color: white; - outline: none; - font-weight: 600; - cursor: pointer; - transition: - transform 0.2s, - box-shadow 0.2s; -} -@-webkit-keyframes load8 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} -@keyframes load8 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} -.list_box { - height: 65vh; - overflow-y: auto; - width: auto; -} - -.cards h2 { - font-size: 20px; -} -.cards > h3 { - font-size: 17px; -} -.card { - width: 100%; - height: 20rem; - margin-bottom: 2rem; -} -.postimage { - border-radius: 0px; - width: 100%; - height: 12rem; - max-width: 100%; - max-height: 12rem; - object-fit: cover; - position: relative; - color: black; -} -.preview { - display: flex; - position: relative; - width: 100%; - margin-top: 10px; - justify-content: center; -} -.preview img { - width: 400px; - height: auto; -} -.preview video { - width: 400px; - height: auto; -} -.novenueimage { - border-radius: 0px; - width: 100%; - height: 12rem; - max-height: 12rem; - object-fit: cover; - position: relative; -} -.cards:hover { - filter: brightness(0.8); -} -.cards:hover::before { - opacity: 0.5; -} -.knowMoreText { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - opacity: 0; - color: white; - padding: 10px; - font-weight: bold; - font-size: 1.5rem; - transition: opacity 0.3s ease-in-out; -} - -.cards:hover .knowMoreText { - opacity: 1; -} -.modal { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - background-color: rgba( - 0, - 0, - 0, - 0.9 - ); /* Dark grey modal background with transparency */ - z-index: 9999; -} - -.modalContent { - display: flex; - align-items: center; - justify-content: center; - background-color: #fff; - padding: 20px; - max-width: 800px; - max-height: 600px; - overflow: auto; -} - -.modalImage { - flex: 1; - margin-right: 20px; - width: 25rem; - height: 15rem; -} -.nomodalImage { - flex: 1; - margin-right: 20px; - width: 100%; - height: 15rem; -} - -.modalImage img, -.modalImage video { - border-radius: 0px; - width: 100%; - height: 25rem; - max-width: 25rem; - max-height: 15rem; - object-fit: cover; - position: relative; -} -.modalInfo { - flex: 1; -} -.title { - font-size: 16px; - color: #000; - font-weight: 600; -} -.text { - font-size: 13px; - color: #000; - font-weight: 300; -} -.closeButton { - position: relative; - bottom: 5rem; - right: 10px; - padding: 4px; - background-color: red; /* Red close button color */ - color: #fff; - border: none; - cursor: pointer; -} -.closeButtonP { - position: absolute; - top: 0px; - right: 0px; - background: transparent; - transform: scale(1.2); - cursor: pointer; - border: none; - color: #707070; - font-weight: 600; - font-size: 16px; - cursor: pointer; -} -.cards:hover::after { - opacity: 1; - mix-blend-mode: normal; -} -.cards > p { - font-size: 14px; - margin-top: 0px; - margin-bottom: 7px; -} - -.cards:last-child:nth-last-child(odd) { - grid-column: auto / span 2; -} -.cards:first-child:nth-last-child(even), -.cards:first-child:nth-last-child(even) ~ .box { - grid-column: auto / span 1; -} - -.capacityLabel { - background-color: #31bb6b !important; - color: white; - height: 22.19px; - font-size: 12px; - font-weight: bolder; - padding: 0.1rem 0.3rem; - border-radius: 0.5rem; - position: relative; - overflow: hidden; -} - -.capacityLabel svg { - margin-bottom: 3px; -} - -::-webkit-scrollbar { - width: 20px; -} - -::-webkit-scrollbar-track { - background-color: transparent; -} - -::-webkit-scrollbar-thumb { - background-color: #d6dee1; -} - -::-webkit-scrollbar-thumb { - background-color: #d6dee1; - border-radius: 20px; -} - -::-webkit-scrollbar-thumb { - background-color: #d6dee1; - border-radius: 20px; - border: 6px solid transparent; - background-clip: content-box; -} diff --git a/src/style/app.module.css b/src/style/app.module.css index 448b80bd88..cd55f8c1c0 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -38,17 +38,6 @@ font-weight: 600; } -.cards { - width: 45%; - background: #fcfcfc; - margin: 10px 20px; - padding: 20px 30px; - border-radius: 5px; - border: 1px solid #e8e8e8; - box-shadow: 0 3px 5px #c9c9c9; - margin-right: 40px; - color: #737373; -} .cards > h2 { font-size: 19px; } @@ -61,6 +50,43 @@ margin-bottom: 7px; } +.cards:hover { + filter: brightness(0.8); +} +.cards:hover::before { + opacity: 0.5; +} + +.cards:hover::after { + opacity: 1; + mix-blend-mode: normal; +} + +.cards:last-child:nth-last-child(odd) { + grid-column: auto / span 2; +} + +.cards:first-child:nth-last-child(even), +.cards:first-child:nth-last-child(even) ~ .box { + grid-column: auto / span 1; +} + +.capacityLabel { + background-color: var(--bs-primary); + color: white; + height: 22.19px; + font-size: 12px; + font-weight: bolder; + padding: 0.1rem 0.3rem; + border-radius: 0.5rem; + position: relative; + overflow: hidden; +} + +.capacityLabel svg { + margin-bottom: 3px; +} + .sidebar { z-index: 0; padding-top: 5px; @@ -198,19 +224,28 @@ color: var(--brown-color) !important; } +.dropdown:is(:focus, :focus-visible) { + outline: 2px solid var(--highlight-color, #a8c7fa); +} + .dropdownItem { background-color: white !important; color: var(--brown-color) !important; border: none !important; } +.dropdownItem:focus, +.dropdownItem:hover { + outline: 2px solid var(--highlight-color, #a8c7fa); +} + .dropdownItem:hover, .dropdownItem:focus, .dropdownItem:active { - background-color: var(--dropdown-hover-color) !important; + background-color: var(--dropdown-hover-color, #e0e0e0) !important; color: var(--brown-color) !important; outline: none !important; - box-shadow: none !important; + box-shadow: 0 0 4px var(--highlight-color, #a8c7fa); } .input { @@ -339,11 +374,19 @@ align-items: center; } +.searchButton:hover { + background-color: var(--search-button-hover-bg, #286fe0); + border-color: var(--search-button-border); +} + +.searchButton:active { + transform: scale(0.95); +} + .addButton { margin-bottom: 10px; background-color: var(--search-button-bg); border-color: var(--grey-bg-color); - color: #555555; } .addButton:hover {