Merge pull request #323 from GTBitsOfGood/Tian/map_provider_UI

provider UI updated according to figma

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 {

src/components/collapsible/index.tsx

@@ -8,21 +8,25 @@ 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 {
     return (props as Managed).label !== undefined;
 }
 
 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) => {
             <div ref={contentRef}
                 className={`content ${isOpen ? 'open' : ''}`}
                 style={{ height: isOpen ? `fit-content` : '0px' }}>
-                <div className="container">{props.children}</div>
+                <div className="container" style={props.containerStyle}>{props.children}</div>
             </div>
         </div >
     )

src/components/dashboard/index.tsx

@@ -83,6 +83,7 @@ function ProviderEntry({ provider, setLoading, resetIndex, firestore, selectItem
                 </div>
             </div>
         }
+        defaultState={false}
     >
         <Container>
             <ProviderInfo item={provider} categories={categories} />

src/components/map/index.tsx

@@ -1021,13 +1021,15 @@ const Map = (props) => {
                                     }}
                                 >
                                     {showInfo ? (
-                                            <Button
+                                        <div style={{display: "flex", flexDirection: "row", alignItems: "center",}}>
+                                            <a
                                                 onClick={() => setShowInfo(false)}
-                                                style={{ display: 'flex', alignItems: 'center', fontFamily: 'Inter, sans-serif', fontWeight: '700', backgroundColor: '#ffffff', border: 'none' }}
+                                                style={{ cursor: "pointer", marginRight: "10px", marginLeft: "10px",}}
                                             >
-                                                <img src={backArrow} alt="Back" style={{ width: '24px', height: '24px', marginRight: '8px' }} />
-                                                Back
-                                            </Button>
+                                                <img src={backArrow} alt="Back" style={{ width: '80%', height: '80%', marginBottom: '8px' }} />      
+                                            </a>                                          
+                                            <h4 style={{fontWeight: "bold",}}>{providers[selectedIndex].facilityName}</h4>
+                                            </div>
                                         ) : (
                                             <InputGroup className="mb-3">
                                                 <InputGroup.Text id="search-addon" className="search">
@@ -1157,21 +1159,9 @@ const Map = (props) => {
                                                 <div className="padder d-flex flex-column" style={{ height: "calc(200vh - 70px)", overflowY: 'scroll' }}>
                                                     <div className="content d-flex flex-column">
                                                         <ProviderInfo item={activeProviders[selectedIndex]} categories={categories} />
-                                                        <div className="mt-2"> 
-                                                            <ProgressBar current={300} total={600} buttonLink={"google.com"} buttonLabel={"Donate Now"} />
-                                                        </div>
-                                                        <div className="mt-2"> 
-                                                            <DonutChart data={data} buttonLink={"https://google.com"} buttonLabel={"Donate Now"} />
-                                                        </div>
-                                                        <div className="mt-2"> 
-                                                            <LineChart title={"Total donations per month in 2023"} data={data2} />
-                                                        </div>
-                                                        <div className="mt-2">
-                                                            <LineChart title={"Total donations per month in 2023"} data={data2} />
-                                                        </div>
                                                         <div className="mt-2">
 
-                                                            <Collapsible label={"Graph"}>
+                                                            <Collapsible label={"Graph"} containerStyle={{placeItems: "flex-start"}}>
                                                                 <ChartComponentForm/>
                                                             </Collapsible>
                                                         </div>

src/components/map/mapStyles.css

@@ -121,5 +121,4 @@
 }
 .astext:hover {
     color: black !important
-}
-
+}

src/components/subcomponents/ProviderInfo.tsx

@@ -1,13 +1,15 @@
 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";
 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 (
         <Container fluid className="provider-info-container">
             <Row className="mb-3">
-                <Col md={5} className="modal-image-col">
-                    <Card>
+                    <Card style={{width: "100%"}}>
                         <LazyLoad debounce={false} offsetVertical={500}>
-                            <Card.Img src={image} />
+                            <Card.Img style={{maxHeight: "60vh", objectFit: "cover"}} src={image} />
                         </LazyLoad>
                     </Card>
-                </Col>
-                <Col md={7}>
+            </Row>
+            {/* Sample components that in the future should be added dynamically
+            based on the response from firebase */}
+            <Collapsible
+                label={"General Info"}
+                style={{
+                    maxWidth: "1000px",
+                    marginLeft: "auto",
+                    marginRight: "auto",
+                }}
+                containerStyle={{placeItems: "flex-start",}}
+                    >
+            <Row className="info-rows" style={{ justifyContent: "flex-start", maxWidth: "100%"}}>
+            <Col md={12}>
                     <div className="description-box">
-                        <h3>{props.item.facilityName}</h3>
                         {props.item.description !== undefined && (
-                            <ReadMoreAndLess
-                                charLimit={250}
-                                readMoreText="Read more"
-                                readLessText="Read less"
+                            <p
+                            style={{
+                                color: "rgba(148, 142, 142, 0.9)",
+                                fontFamily: "Inter",
+                                fontWeight: "500",
+                                fontSize: "16px",
+                                lineHeight: "19px"
+                                }}
                             >
-                                {`${props.item.description} `}
-                            </ReadMoreAndLess>
+                                {props.item.description}
+                            </p>
                         )}
                     </div>
                 </Col>
-            </Row>
-            <Row className="info-rows">
-                <Col md={7}>
+                <Col md={12}>
+                    <div style={infoStyle}>
+                        <IoPhonePortraitOutline size={20} style={iconStyle} />
+                        <div>
+                            {" "}
+                            {props.item.phoneNum &&
+                                props.item.phoneNum.join(", ")}
+                        </div>
+                    </div>
+                    <div style={infoStyle}>
+                        {props.item.website && props.item.website[0] && (
+                            <>
+                            {props.item.website[0].startsWith("http") ? (<>
+                                <SlGlobe size={20} style={iconStyle} />
+                                <div>
+                                    <a
+                                        href={props.item.website[0]}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                    >
+                                        p{props.item.website[0]}
+                                    </a>
+                                </div>
+                            </>) : (<>
+                                <SlGlobe size={20} style={iconStyle} />
+                                <div>
+                                    <a
+                                        href={'//' + props.item.website[0]}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                    >
+                                        {props.item.website[0]}
+                                    </a>
+                                </div></>)}
+
+                            </>
+                        )} 
+                    </div>
                     <div style={infoStyle}>
-                        <FaMapMarkerAlt style={iconStyle} />
+                        <TbPlaystationCircle size={20} style={iconStyle} />
                         <div>
                             {" "}
                             {props.item.address
@@ -218,50 +270,14 @@ const ProviderInfo = (props) => {
                         </div>
                     </div>
                     <div style={infoStyle}>
-                        <FaPhone style={iconStyle} />
-                        <div>
-                            {" "}
-                            {props.item.phoneNum &&
-                                props.item.phoneNum.join(", ")}
-                        </div>
-                    </div>
-                    <div style={infoStyle}>
-                        {props.item.website && props.item.website[0] && (
-                            <>
-                                <FaGlobe style={iconStyle} />
-                                <div>
-                                    <a
-                                        href={props.item.website[0]}
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                    >
-                                        Visit Website
-                                    </a>
-                                </div>
-                            </>
-                        )}
-                    </div>
-                    <div style={infoStyle}>
-                        <FaRegClock style={iconStyle} />
+                        <FaRegClock size={20} style={iconStyle} />
                         <div className="modal-hours-container">
                             {props.item.hours && calculateHours(props)}
                         </div>
                     </div>
                 </Col>
-                <Col md={5}>
-                    <Card>
-                        <a
-                            href={`https://maps.google.com/?q=${props.item.address.toString()}`}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                        >
-                            <Card.Img src={streetView} alt="Google Map" />
-                        </a>
-                    </Card>
-                </Col>
             </Row>
-            {/* Sample components that in the future should be added dynamically
-            based on the response from firebase */}
+                    </Collapsible>
             <Row className="info-rows">
                 <Col md={12}>
                     <Collapsible

src/components/subcomponents/chartcomponents/ChartComponentForm.tsx

@@ -547,14 +547,6 @@ const ChartComponentForm = () => {
             <div className="footer">
                 <button id="delete">Delete</button>
             </div>
-            {/*
-                TO BE REMOVED
-                Used to see chartState state as you fill in form
-            */}
-            <div>
-                <h4>Current Data:</h4>
-                <pre>{JSON.stringify(chartState, null, 2)}</pre>
-            </div>
         </div>
     );
 };

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;