TODO: Restyle the components

[Sing-Li]

Check community.rocket.chat for styling. Restyle the existing components to the standard of community.rocket.chat

BE CAREFUL:

• keeping ALL current reactJS components responsive, when shrunk to mobile format - ti should still be highly usable
• do not add any global styling - do each components' styling in its own CSS module
  • maintain static generation, do not write components that forces SSR (with 1 exception - the client-side countup counter)
  • do restyling of ALL current component in ONE LONG PR, do not create separate PR for components

[irffanasiff]

I will work on this issue can you please assign it to me

[RonLek]

@demonicirfan you're assigned. Please set-up the project and continue.

[irffanasiff]

Can you please clear some of my doubts

• Should I remove react-bootstrap completely and use CSS only ( as some of the components are using bootstrap and others are using CSS).
• I think in some part's design can be improved should I attach the Figma file for their design here when it is ready.
• I should make it look exactly the same as community.rocket.chat page.
• Are there any deadlines for this issue.

[RonLek]

• I feel using react-bootstrap is fine since it aids in creating React components. Wdyt @Sing-Li ?
• Yes. Please attach an image/pdf/link to your Figma design where you feel the design could be improved.
• Yes that'll be the minimum requirement of this issue (along with mobile friendliness which community.rocket.chat is not atm). You can take inspirations from https://developers.google.com/ while crafting your Figma designs.
• This is a high priority issue to get future components in place so it'll be preferrable to get it resolved at the soonest.

[irffanasiff]

Ok i have started it and will try to complete it as soon as possible and i will ask doubts here thanks for the reply ✨

[Sing-Li]

• Should I remove react-bootstrap completely and use CSS only ( as some of the components are using bootstrap and others are using CSS).

Please keep react-bootstrap and KEEP USING IT, INCLUDING BOOTSTRAP DESIGN GUIDELINES / PRINCIPLES / THINKING.

So part of the tidying up work -- is to migrate those components that currently use CSS into BOOTSTRAP (if possible)

For example, current Carousel component is NOT the react-bootstrap one, that is because the effect we want cannot be achieved by the react-bootstrap carousel. We show more than one item at anytime, and it is reactive at marked points shrinking down from 4 items to 2 items when in a portrait mobile device orientation.

Hope this is clear. Please feel free to ask any further questions.

[Sing-Li]

I agree with @RonLek that we should

(1) keep this PR simple
(2) just clone community.rocket.chat on this PR (3) get it done as soon as possible

ANY enhancment, improvement, re-design should NOT be the scope of this PR - and should not delay its completion.

[irffanasiff]

I agree with @RonLek that we should

(1) keep this PR simple (2) just clone community.rocket.chat on this PR (3) get it done as soon as possible

ANY enhancment, improvement, re-design should NOT be the scope of this PR - and should not delay its completion.

I am working on the coding part, I was trying to improve the design till now, I have completed the design made some changes so that it looks a little better. I'm attaching the Figma file link. I have started working on it. It will take me around 3 days to completely code it. Please let me know if I should code this design or the one on community.rocket.chat

[Sing-Li]

Good work! I do like the new design quite a bit. Just two comments:

1. The carousel/slider should reduce from 4 to 2 going full width to mobile (not as per design of 3 to 1)

2. Please make sure you EXTEND each React component to be configurable with your new design; and not hard-code the new design directly into the components (because community.rocket.chat is just one single sample use case of RC4Community)

Thanks.

[Sing-Li]

One suggestion: when crafting the infotiles components - please try to keep them flexible and able to incorporate Icon/images in additional to text (if possible).

[irffanasiff]

Thanks for the feedback I will try to complete it as soon as possible keeping all points in mind

[irffanasiff]

@Sing-Li Sir the last section of the page in the file /components/discourserankedlist.js receiving no data.I was unable to figure it out why is it not working? Maybe there is some problem with the backend, not receiving anything in the toposts arrays... Should i code it using dummy data.

[RonLek]

@demonicirfan as mentioned in our chat, you'd need a Discourse server running with the env variables DISCOURSE_DOMAIN, DISCOURSE_API_USERNAME, DISCOURSE_API_KEY to be able to populate data. Do you have this set up? The fetchTopPosts.js file is where we fetch data on every server restart (bootstrap.js) and every 5 minutes (cron.js).

If this still persists as a blocker, please proceed using dummy data but make sure to test it out with real data from a Discourse server before raising a PR. Please let me know if you have any questions. Thanks.

[irffanasiff]

Let me try this

[irffanasiff]

The Code is complete now I am trying to clean the code because it is a mixture of CSS and bootstrap (the code does not look good to me) maybe because I used bootstrap for the first time.

I have some doubts -

1 - I am not able to get rid of the drop-down icons on the navbar(so that it looks similar to the design) i tried most of the solutions on the internet. Can I create navbar with only CSS? i tried this but could not make it work. can anyone help me with this.

2 - I used dummy data for discourserankedist.js. I was not able to set up discourse env variables.

3 - Should I make the PR after the navbar is done all other components I have completed.

[irffanasiff]

Except the Navbar all components are done i am making PR, please review it

[irffanasiff]

• I have not used any library for icons used SVG's instead.
• After this, I will try to improve the code and after it is done I will make one more pr it may take time.
• I used bootstrap for the first time so i will try to clean up the code further ( bcz u said to do it as soon as possible so i made a PR)

[Sing-Li]

@demonicirfan I have merged your initial implementation. Others can work on top of the restyled components that way.

Please continue your work on a separate PR and ping me when ready. Thanks.