diff --git a/src/assets/styles/main.css b/src/assets/styles/main.css index 6a80bbb..1b7d8a3 100644 --- a/src/assets/styles/main.css +++ b/src/assets/styles/main.css @@ -138,7 +138,9 @@ h2 { background: white; padding-top: 10px; } - +.map-list::-webkit-scrollbar { + display: none; +} /* .map-cell { border-top: solid #e0e0e0; background-color: white; @@ -220,7 +222,9 @@ h2 { padding-left: 12px; padding-right: 12px; } - +.padder::-webkit-scrollbar { + display: none; +} .point { cursor: pointer; background: white; @@ -670,12 +674,16 @@ h2 { flex-direction: row; } +.modal-image-col { + height: 50%; +} + .modal-hours-container { display: flex; flex-direction: column; font-size: 13px; padding-left: 15px; - width: 30vw; + width: 15vw; } .modal-hours-container h5 { diff --git a/src/components/collapsible/index.tsx b/src/components/collapsible/index.tsx index 2d768c8..9dfaa43 100644 --- a/src/components/collapsible/index.tsx +++ b/src/components/collapsible/index.tsx @@ -8,13 +8,17 @@ import { FaAngleDown, FaAngleUp } from "react-icons/fa"; interface Managed { style?: React.CSSProperties; titleStyle?: React.CSSProperties; + containerStyle?: React.CSSProperties; label: string; children: any; + defaultState?: boolean; } interface Unmanaged { style?: React.CSSProperties; + containerStyle?: React.CSSProperties; title: React.ReactElement; children: any; + defaultState?: boolean; } type PropTypes = Managed | Unmanaged; function isManaged(props: PropTypes): props is Managed { @@ -22,7 +26,7 @@ function isManaged(props: PropTypes): props is Managed { } const Collapsible = (props: PropTypes) => { - const [isOpen, setOpen] = useState(false) + const [isOpen, setOpen] = useState(props?.defaultState ?? true); const contentRef = useRef(null) const toogle = () => { setOpen(!isOpen) } return ( @@ -43,7 +47,7 @@ const Collapsible = (props: PropTypes) => {
-
{props.children}
+
{props.children}
) diff --git a/src/components/dashboard/index.tsx b/src/components/dashboard/index.tsx index 073334f..93832cb 100644 --- a/src/components/dashboard/index.tsx +++ b/src/components/dashboard/index.tsx @@ -83,6 +83,7 @@ function ProviderEntry({ provider, setLoading, resetIndex, firestore, selectItem } + defaultState={false} > diff --git a/src/components/map/index.tsx b/src/components/map/index.tsx index 5f76c98..7581e95 100644 --- a/src/components/map/index.tsx +++ b/src/components/map/index.tsx @@ -1021,13 +1021,15 @@ const Map = (props) => { }} > {showInfo ? ( - + Back + +

{providers[selectedIndex].facilityName}

+ ) : ( @@ -1157,21 +1159,9 @@ const Map = (props) => {
-
- -
-
- -
-
- -
-
- -
- +
diff --git a/src/components/map/mapStyles.css b/src/components/map/mapStyles.css index 61c7621..01d8375 100644 --- a/src/components/map/mapStyles.css +++ b/src/components/map/mapStyles.css @@ -121,5 +121,4 @@ } .astext:hover { color: black !important -} - +} \ No newline at end of file diff --git a/src/components/subcomponents/ProviderInfo.tsx b/src/components/subcomponents/ProviderInfo.tsx index 67bd6c0..a40b3d8 100644 --- a/src/components/subcomponents/ProviderInfo.tsx +++ b/src/components/subcomponents/ProviderInfo.tsx @@ -1,5 +1,8 @@ import React, { useState, useEffect } from "react"; -import { FaMapMarkerAlt, FaRegClock, FaPhone, FaGlobe } from "react-icons/fa"; +import { FaRegClock } from "react-icons/fa"; +import { SlGlobe } from "react-icons/sl"; +import { TbPlaystationCircle } from "react-icons/tb"; +import { IoPhonePortraitOutline } from "react-icons/io5"; import Container from "react-bootstrap/Container"; import Row from "react-bootstrap/Row"; import Col from "react-bootstrap/Col"; @@ -7,7 +10,6 @@ import Card from "react-bootstrap/Card"; import { withFirestore } from "react-redux-firebase"; import { compose } from "redux"; import { connect } from "react-redux"; -import ReadMoreAndLess from "react-read-more-less"; import LazyLoad from "react-lazy-load"; import { GOOGLE_API_KEY } from "../../config/keys"; import Linkify from "react-linkify"; @@ -144,6 +146,7 @@ const ProviderInfo = (props) => { const iconStyle = { marginRight: "20px", verticalAlign: "middle", + color: "#226DFF", }; const infoStyle = { @@ -155,32 +158,81 @@ const ProviderInfo = (props) => { return ( - - + - + - - + + {/* Sample components that in the future should be added dynamically + based on the response from firebase */} + + +
-

{props.item.facilityName}

{props.item.description !== undefined && ( - - {`${props.item.description} `} - + {props.item.description} +

)}
- - - + +
+ +
+ {" "} + {props.item.phoneNum && + props.item.phoneNum.join(", ")} +
+
+
+ {props.item.website && props.item.website[0] && ( + <> + {props.item.website[0].startsWith("http") ? (<> + + + ) : (<> + + )} + + + )} +
- +
{" "} {props.item.address @@ -218,50 +270,14 @@ const ProviderInfo = (props) => {
- -
- {" "} - {props.item.phoneNum && - props.item.phoneNum.join(", ")} -
-
-
- {props.item.website && props.item.website[0] && ( - <> - - - - )} -
-
- +
{props.item.hours && calculateHours(props)}
- - - - - - - - {/* Sample components that in the future should be added dynamically - based on the response from firebase */} + {
- {/* - TO BE REMOVED - Used to see chartState state as you fill in form - */} -
-

Current Data:

- 
{JSON.stringify(chartState, null, 2)}
-
); }; diff --git a/src/components/subcomponents/chartcomponents/styles/ChartComponentForm.css b/src/components/subcomponents/chartcomponents/styles/ChartComponentForm.css index f13b640..0e94c81 100644 --- a/src/components/subcomponents/chartcomponents/styles/ChartComponentForm.css +++ b/src/components/subcomponents/chartcomponents/styles/ChartComponentForm.css @@ -6,7 +6,7 @@ .chart-container { display: flex; flex-direction: column; - align-items: flex-start; + align-items: flex-start !important; gap: 16px; padding-left: 0; padding-right: 0;