We want to add Dark Mode and Light Mode options to the application's user interface. π
Use Case βπΌ
As users, we want the ability to customize the application's appearance based on our preferences and environment lighting. By introducing Dark Mode and Light Mode options, we aim to enhance the user experience and provide a visually comfortable interface for both day and night usage.
Possible Solution π‘
To implement the Dark Mode and Light Mode functionality, we can follow these steps:
Identify the core components of the user interface that need to be modified for Dark Mode and Light Mode, such as backgrounds, text colors, and button styles.
Create all default variables for theme colors.
Based on the selected mode, dynamically apply the appropriate CSS styles to the relevant components.
Consider providing a default mode based on the system settings or user preferences if no explicit selection is made.
We want to create a new BackgroundFiller atom to be used in our compositions
Use Case βπΌ
We want to have a single atom where we can put the entire background of a video with an Image or a Lottie and where we can override the style for the animations and the few differences.
βΉοΈ Once this is done, update the different templates
Implement responsive design for the SideBar component π±
Use Case βπΌ
As users, we want the SideBar component to adapt and provide a seamless user experience across different devices and screen sizes. By introducing a responsive design for the SideBar, we aim to enhance usability and ensure optimal navigation on both desktop and mobile devices.
Possible Solution π‘
Identify the breakpoints or screen sizes for responsive design.
Modify the SideBar component's CSS or styling to adapt its layout based on screen width.
Test the responsive behavior on various devices and screen resolutions.
In the app as in the remotion preview, we need to have a default font. Today, its set every time we need a font.
Use Case βπΌ
It will allow us to use the same default font everywhere, especially in the remotion preview, when you just want to see an atom, it's better with a good font.
Possible Solution π‘
Create a fontContext with by default the font 'noto-sans' and use it for the remotion preview and the app
We want to update the design of the application's navbar with responsive π
Use Case βπΌ
In order to redesign the application we want to reorganise the different pages of the application. The first step will be to separate the templates from the showcases. To do this we want to add a navbar that will allow us to have Template, Showcase, Docs and Contact.
β οΈ The purpose of this US is not to remove the current navigation but to separate it into two
Possible Solution π‘
You can take the example of what has been done on the wireframe for the new design
We want to create a new Avatar molecule to be used in our compositions
Use Case βπΌ
In many compositions a Speakers component is used which has been duplicated each time for some differences. We want to have a single Avatar molecule where we can override the style for the animations and the few differences.
Possible Solution π‘
Create a new Avatar component with a default style. This component should display an avatar atom containing an image and also a caption atom if the corresponding props are passed to the component
βΉοΈ Once this is done, update the different templates
We want to create a SideBar component to facilitate navigation within the Template and Showcase pages ππ
Use Case βπΌ
As users, we need a convenient way to navigate within the Template and Showcase sections of the application. By introducing a SideBar component, we aim to enhance the user experience and provide seamless access to different sections and subsections within these pages.
Possible Solution π‘
To implement the SideBar component for navigation within the Template and Showcase pages, we can follow these steps:
Identify the different sections and subsections within the Template and Showcase pages that should be included in the SideBar navigation. Maybe try to use a config file with only the template and the basic showcase (for the moment the settings part... is not necessary)
Create a SideBar component that displays the navigation options for these sections and subsections.
Implement functionality to handle the navigation within the Template and Showcase pages based on the user's selection in the SideBar.
Ensure that the active section or subsection in the SideBar is visually highlighted to provide feedback to the user about their current location within the page.
Consider adding additional features to the SideBar, such as collapsible sections or expandable menus, to improve usability and make it easier for users to navigate through the content.
Test the SideBar component thoroughly to ensure it functions correctly and seamlessly integrates with the Template and Showcase pages π§ͺ
From time to time on the application when we have a player that displays lotties we have the application freezing. The problem comes from the display of our lotties and maybe more precisely from the hook. We need to find out where this is coming from and fix the problem
Expected behavior π¦Ύ
The application should not freeze π€·πΌββοΈ
We want to let the user choose the font of the video. To do that we can create a font-picker atom that will allow the user to write the name of a font and then select it from a list.
Use Case βπΌ
When users want to generate a video but the default font do not work for it.
Possible Solution π‘
An atom named FontPicker that is based on the one from the remotion doc (see : https://www.remotion.dev/docs/font-picker) but that use a datalist instead of a select input. The displayed list will not only show the font named but also the font itself on the style of the option (for example : on the list you have the option Roboto styled with the font Roboto to see how it looks).
The public folder is a bit messy, there is a lot of images at the root of the folder that are used for different purposes.
The conferences folder is also messy, there is pictures at the root that could be put in folders.
Use Case βπΌ
When you want to add a default picture you just drop it at the roots of the public folder
Possible Solution π‘
Create an app folder and a default folder inside public/images/ and moves the corresponding images inside.
Create folders for conferences under public/images/conferences.
We want to create a new IconCaption atom to be used in our compositions
Use Case βπΌ
In many compositions we currently display information for conferences in the form of an icon and a corresponding caption (e.g. Devoxx). We want to have a component that displays an icon and a text.
Possible Solution π‘
We don't know yet if we want to make one atom for the icon version and another for the lottie version. We should see if it is possible to make one for both. If it is not possible, or if the atom becomes too complex, we will make two different atoms
βΉοΈ Once this is done, update the different templates
Implement React Testing Library for project testing π§ͺ
Use Case βπΌ
As developers, we want to ensure the stability and reliability of our project by implementing a robust testing framework. By introducing React Testing Library, we aim to facilitate the testing process and improve the overall quality of our codebase.
Possible Solution π‘
Install React Testing Library as a project dependency.
Create separate folders for the tests.
Integrate testing into the project's development workflow.
List all current components that need to be tested (make US π·οΈ)
We want to create a new Details molecule to be used in our compositions
Use Case βπΌ
In many compositions a Details component is used which has been duplicated each time for some differences. We want to have a single component where we can override the style for the animations and the few differences.
Possible Solution π‘
Using the atom created with #215 we can juste make a component we can just make a component that displays three IconCaption for the date, time and location. These parameters will of course be optional
βΉοΈ Once this is done, update the different templates
We want to create a new Title atom to be used in our compositions
Use Case βπΌ
In many compositions a Title component is used which has been duplicated each time for some differences. We want to have a single Title atom where we can override the style for the animations and the few differences.
Possible Solution π‘
Create a new Title component, give it a default style, a default font, make sure to take into account all title lengths (ellipsis)... The style should be overloadable for the animation part
βΉοΈ Once this is done, update the different templates