Switch to Tailwind CSS

src/app.js

@@ -0,0 +1,38 @@
+import React, { useEffect } from 'react'
+import { Route, Switch, Redirect } from 'react-router-dom'
+import { connect } from 'react-redux'
+import { Scrollbars } from 'react-custom-scrollbars'
+
+import Home from './components/home'
+import Issue from './components/issue'
+import { getMaintainers } from './actions'
+import IssuePage from './components/issue-page'
+import { tailwindWrapper } from "formula_one/src/utils/tailwindWrapper"
+
+const App = ({ match  , getMaintainers }) => {
+  useEffect(() => {
+    getMaintainers()
+  }, [getMaintainers])
+
+  return (
+     <Scrollbars autoHide>
+      <div className={tailwindWrapper("py-4 md:px-9 px-4 h-[100%] font-Inter")}>
+        <span className={tailwindWrapper("flex-grow-2 text-xl text-black-500 font-semibold")}>Helpcentre</span>
+        <Switch>
+          <Route exact path={`${match.path}`} component={Home} />
+          <Route exact path={`${match.path}issues`} component={IssuePage} />
+          <Route exact path={`${match.path}issue/:id`} component={Issue} />
+          <Route render={() => <Redirect to="/404" />} />
+        </Switch>
+      </div>
+    </Scrollbars>
+  )
+}
+
+const mapDispatchToProps = dispatch => ({
+  getMaintainers: () => {
+    dispatch(getMaintainers())
+  },
+})
+
+export default connect(null, mapDispatchToProps)(App)

src/components/accordion.js

@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from 'react'
+
+import { tailwindWrapper } from "formula_one/src/utils/tailwindWrapper"
+import { themeText } from '../constants/theme'
+import { getTheme } from 'formula_one'
+import { useRef } from 'react'
+
+const AccordionItem = ({item, isOpen, toggleAccordion}) => {
+    const theme = getTheme()
+    const ref = useRef(null)
+
+    const [contentHeight, setContentHeight] = useState(0)
+    useEffect(() => {
+        if (ref.current)
+            setContentHeight(ref.current.clientHeight)
+    }, [isOpen])
+
+    return (
+        <div className={tailwindWrapper("flex flex-col text-[#787B8C]")}>
+            <div className={tailwindWrapper(`flex flex-col border-b-2 cursor-pointer`)} onClick={toggleAccordion}>
+                <div className={tailwindWrapper("flex flex-row justify-between items-center pb-2.5")}>
+                    <span className={tailwindWrapper(`text-lg ${isOpen && "text-black"}`)}>{item.title}</span>
+                    <div>{isOpen
+                        ? <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2.5} stroke="black" className={tailwindWrapper("w-7 h-8")}>
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M5 12h14" />
+                        </svg>
+                        : <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2.5} stroke="currentColor" className={tailwindWrapper("w-7 h-8 text-[#7B809A]-700")}>
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+                        </svg>}
+                    </div>
+                </div>
+                <div className={tailwindWrapper(`overflow-hidden transition-all max-h-0 duration-500`)} style={{maxHeight: isOpen ? contentHeight : 0}}>
+                    <div ref={ref}>
+                            <p className={tailwindWrapper("text-sm leading-2 font-semibold text-[#989DB1]")}>{item.data}</p>
+                            <div className={tailwindWrapper("flex justify-content gap-14 pt-2 pb-5 text-md")}>
+                                <span className={tailwindWrapper("text-[#676767]")}>Still facing problem?</span>
+                                <button className={tailwindWrapper(`${themeText[theme]} font-semibold`)}>Report</button>
+                            </div>
+                        </div>
+                    </div>
+            </div>
+        </div>
+    )
+}
+
+const Accordion = ({ faqText }) => {
+    const [openIndex, setOpenIndex] = useState(null)
+
+    const toggleAccordion = (index) => {
+        setOpenIndex((prevIndex) => (prevIndex === index ? null : index))
+    }
+  return (
+    <div className={tailwindWrapper("flex flex-col gap-7 pt-12 text-[#787B8C]")}>
+        {faqText.map((item, index) => (
+            <AccordionItem key={index} item={item} isOpen={index === openIndex} toggleAccordion={() => toggleAccordion(index)} />
+        ))}
+    </div>
+  )
+}
+
+export default Accordion

src/components/dropdown.js

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import { tailwindWrapper } from "formula_one/src/utils/tailwindWrapper"
+import { themeBorder } from '../constants/theme'
+import { getTheme } from 'formula_one'
+import { urlStatic } from '../urls'
+
+const Dropdown = ({ options, selectedOption, setOption, open, setOpen, otherContent, width, placeholder }) => {
+    const theme = getTheme()
+
+    return (
+        <div className={tailwindWrapper(`relative cursor-pointer ${width} ${!open && "border-2 border-[#F5F5F5]"} rounded-sm`)} onClick={() => {setOpen(!open)}}>
+            <div className={tailwindWrapper(`w-full p-2 pr-4 flex justify-between items-center ${open ? "border rounded-md " + themeBorder[theme] : ""}`)}>
+                <span className={tailwindWrapper(selectedOption === null ? "text-gray-400" : "text-black-400")}>
+                    {selectedOption === null ? placeholder : selectedOption}
+                </span>
+            <img src={`${urlStatic()}dropdown.svg`} alt="Dropdown" className={tailwindWrapper("w-4 h-5")} />
+            </div>
+            {open && <ul className={tailwindWrapper("absolute w-full bg-white border border-x-2 border-b-2 border-#F5F5F5")}>
+                {options && options.map((item) => (
+                    <li key={item.key} onClick={() => setOption(item.value, item.text)} className={tailwindWrapper("flex justify-content items-center text-sm px-3 py-2 hover:bg-[#00000008] gap-2")}>
+                        {item.content || otherContent()}
+                        <span className={tailwindWrapper(selectedOption === item.text ? "font-bold" : "")}>{item.text}</span>
+                    </li>
+                ))}
+            </ul>}
+        </div>)}
+
+export default Dropdown

src/components/home.js

@@ -0,0 +1,77 @@
+import React, { useState, useEffect } from 'react'
+import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
+
+import Dropdown from './dropdown'
+import { OtherApp } from './icons'
+import Accordion from './accordion'
+import SearchBar from './searchbar'
+import { getTheme } from 'formula_one'
+import { setAppList } from '../actions'
+import { faqText } from '../constants/faqText'
+import { themeBg, themeBorder } from '../constants/theme'
+import { tailwindWrapper } from "formula_one/src/utils/tailwindWrapper"
+
+const Home = ({ appList, SetAppList }) => {
+    const [selectedApp, setApp] = useState(null)
+    const [open, setOpen] = useState(false)
+    const theme = getTheme()
+
+    const options = appList.data.map((app, index) => {
+        const appData = {
+            key: index + 1,
+            value: app.nomenclature.verboseName,
+            text: app.nomenclature.verboseName,
+        }
+        if (app.assets && app.assets.favicon){
+            appData['content'] = (<img src={`/static/${app.baseUrls.static}${app.assets.favicon}`} className={tailwindWrapper("h-6 w-6 mr-2.5")} />)
+        }
+        return appData
+    })
+    options.push({ key: 0, value: 'Other', text: 'Other' })
+
+    useEffect(() => {
+        if (!appList.isLoaded)
+            SetAppList()
+    }, [appList.isLoaded, SetAppList])
+
+    return (
+        <div>
+            <div> 
+                <div className={tailwindWrapper("flex max-[400px]:flex-col gap-3 justify-between")}>
+                    <SearchBar />
+                    <Link to="/helpcentre/issues" className={tailwindWrapper("mt-auto")}>
+                        <button className={tailwindWrapper(`block ml-auto text-white text-sm h-max rounded-md px-6 py-2.5 ${themeBg[theme]}`)}>
+                        Report Issue
+                        </button>
+                    </Link>
+                </div>
+            </div>
+            <div className={tailwindWrapper("flex flex-col md:flex-row justify-between h-full mt-12 px-4")}>
+                <div className={tailwindWrapper("md:w-2/3")}>
+                    <Dropdown options={options} selectedOption={selectedApp} setOption={setApp} open={open} setOpen={setOpen} width={"w-full md:w-2/3"} otherContent={OtherApp} placeholder={"Select an App"}/>
+                    <Accordion faqText={faqText} />
+                </div>
+                <div>
+                    blogs
+                </div>
+            </div>
+        </div>
+    )
+}
+
+const mapStateToProps = (state) => {
+  return {
+    appList: state.appList,
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    SetAppList: () => {
+          dispatch(setAppList())
+    },
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Home)

src/components/icons.js

@@ -0,0 +1,65 @@
+import React from "react"
+import { tailwindWrapper } from "formula_one/src/utils/tailwindWrapper"
+import { themeText } from "../constants/theme"
+import { getTheme } from 'formula_one'
+
+export const PendingIcon = ({ isActive, fill, stroke }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill={fill || (isActive ? "red" : "none")} viewBox="0 0 24 24" strokeWidth={isActive ? "2.5" : "1.5"} stroke={stroke || (isActive ? "white" : "black")} className={tailwindWrapper("w-6 h-6")}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
+  </svg>
+)
+
+export const ResolvedIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={tailwindWrapper("w-6 h-6")}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+    </svg>
+)
+
+export const AssignedIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className={tailwindWrapper("w-6 h-5")}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
+        <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+    </svg>
+)
+
+export const OtherApp = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={tailwindWrapper("w-6 h-6 mr-2.5")}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="m21 7.5-9-5.25L2.5 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
+    </svg>
+)
+
+export const ChevronLeft = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={tailwindWrapper("w-4 h-full cursor-pointer")}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
+    </svg>
+)
+
+export const ChevronRight = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={tailwindWrapper("w-4 h-full cursor-pointer")}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+    </svg>
+)
+
+export const ChevronDoubleLeft = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={tailwindWrapper("w-4 h-full cursor-pointer")}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5" />
+    </svg>
+)
+
+export const ChevronDoubleRight = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={tailwindWrapper("w-4 h-full cursor-pointer")}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5" />
+    </svg>
+)
+
+export const ShieldIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={tailwindWrapper(`${themeText[getTheme()]} w-6 h-6 inline-block`)}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" />  
+    </svg>
+)
+
+export const DownloadIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={tailwindWrapper("w-6 h-6")}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
+    </svg>
+)