Our dependencies are not being cached. Not a huge deal for deployments but when we add lining to repo it will help.
Main problem here is that dependencies are getting installed each time and that step shouldn’t take place because if there are no changes then they should be used from cache.

Self-assigning since I want to fix this issue in my repos too.

Idea is to have an option to toggle between GUI and stylesheet.

it would also be lovely to have the CSS appear in an editor on the right too, as well as toggles/GUI style
@Harjot1Singh

Resources:

• https://github.com/Microsoft/monaco-editor
• https://codemirror.net
• http://www.apnapedia.com/create-html-online-editor/

Describe the bug
Font colors/font drop colors should not allow for opacity. Larivaar assist and vishraams can have opacity as they should have an inherited opaque value from the font color.

Expected behavior
Same pop up for color choice, but no opacity slider (or at the least not allow slider to affect value)

Screenshots

Linked Issues

Required by #16

shabados/presenter#487

Layout > Vertical/Horizontal padding - the vertical padding should not be affecting horizontal. Either have a button that locks horizontal to match vertical (making horizontal padding not user-modifiable and automatically matching vertical padding slider) or split the two. I would recommend adding a "lock" button (on by default) or simply having one padding slider for vertical and horizontal padding. Lock button is preferable.

Originally posted by @bhajneet in #1 (comment)

This will allow fixing NaN on slider

why does width come up as NaN initially?
_{View in Slack}

Impact high because to match them one needs to get sliders same value and can be quite annoying.

Is your feature request related to a problem? Please describe.
The justification dropdown looks like it doesn't do anything, but that's becuase it needs multiple fields in preview and height to be 100 to make sense.

Describe the solution you'd like
I'd like justification to be disabled unless height is set to 100.

Describe alternatives you've considered
No

Additional context

Gosh, we really do need to figure out a CSS linter for the future, or move away from it to CSS-in-JS
#51 (review)

Similar to shabados/presenter#546

Describe the bug
Export tab doesn't have "pane" class

Screenshots
Pane:

No Pane:

Add "ratio" option to "Preview" tab, which allows 16:9 (horizontal), 9:16 (vertical), 18:9, 21:9, and 4:3 options in the dropdown

Originally posted by @bhajneet in #1 (comment)

User should be able to export the theme directly to ShabadOS Desktop app. This depends on implementation of shabados/presenter#314

have it automatically put the generated theme file in their user folder
@bhajneet

Basically allowing manipulation of all fields in the current overlay theme files.

• layout (top, left, bottom, full screen), dropdown. if left, slider for how much of the left
• font sizes (master + primary/secondary relative sliders = 3 sliders in total, each secondary line must have some in-built font size relation to base off so .5 english = .6 punjabi or something and the secondary slider scales these appropriately)
• center align toggle
• padding sliders
• background options: full (fills to the edge), box (fills the box around the words), lines (fills bg of only the words) dropdown

Color implies color and potentially opacity (rgba). So might be best to just do these all in rgb with separate opacity for the ones that need it.

• Custom font colors for primary (gurbani) and secondary (all other) lines
• Larrivaar assist color
• Vishraam colors
• Custom shadow colors for primary and secondary
• Custom bg color

Similar to shabados/database#1769 we need to make a react component for theme switch.
These docs should help https://css-tricks.com/a-dark-mode-toggle-with-react-and-themeprovider/

For advanced users it could be used to add gradient colors to text or advanced shadow techniques etc.

The CSS in this textbox could be added to the bottom of the generated CSS overlay theme and perhaps tested in the "preview" to see if it looks correct (Advice for end-user to use chrome for testing OBS etc.)

Some component files are lowercase, some are uppercase. All should be CamelCase.

Some CSS classes are capitalised, they should all be lower case, hyphen-separated.

2 options to look at:

1. CodeSandbox GitHub App https://codesandbox.io/docs/ci
2. Vercel preview deploy https://vercel.com/features/deployment-previews

Describe the bug
It is not clear that the name of the theme name is pre-populated. The text cannot be selected. If I click "save", without clicking the input, it would look like it's going to be called "Theme Name".

Expected behavior
I expect to see a proper input box (not an underline) for text I can change. The text inside that box should already be filled with the default Overlay Date format. Clicking that text box should highlight the entire text so it can be modified or changed to a user choice theme name.

Screenshots
If applicable, add screenshots to help explain your problem.

The text doesn't scale horizontally right now because we are using "vh". Need to find a solution that will work for vertically and horizontally.

Describe the solution you'd like
Changing padding or font sizes can be animated so it looks "smoother" or less jarring

Additional context
Similar to desktop

Maybe even extend this to build presenter themes too (but let's make sure in doing this, we don't duplicate much code at all)
Posted by @Harjot1Singh #1 (review)

Describe the bug
I set the padding slider in the window tab. Changing other settings will make the padding go to 0 in the preview pane unless user "taps" or "clicks" on the circle of the slider for the window tab's padding.

Screenshots

Describe the bug
Setting width to 100 causes overlay to overflow on long lines instead of wrapping properly. This is because overlay being set to 100% with padding will be bigger than the app container div. Padding would work properly with "Auto" width instead (I think?).

Something like this but with lighter gray instead of black: https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/10x10_checkered_board_transparent.svg/500px-10x10_checkered_board_transparent.svg.png

This will allow to implement the background size option.

Don't need any background sizes for overlay/window/text if there is no way to choose a background image

Originally posted by @bhajneet in #1 (comment)

Is your feature request related to a problem? Please describe.
Interactive tutorials to help users get started. It will make it more immersive user experience

Describe the solution you'd like
Something like this: https://www.npmjs.com/package/react-interactive-tutorials

Describe alternatives you've considered
Documented steps like tutorials.shabados.com are good but sometimes you just want to get started without reading things but to still want to know somewhat.

Describe the bug
Changing horizontal padding is causing an issue with calculation for width.

Screenshots

Enabling the service worker would allow the app to work offline. Is this a good idea? Who knows.

src/components/editors/exportEditor.js saveFile function creates a document element and appends it to the DOM.

React will have no idea about this, and so it's much better to dynamically render the link, or trigger the download another way.

Exporting would be even nicer if we could type the name of the theme before creating a file name.
Originally posted by @bhajneet in #1 (comment)

Related Ability to add background image #8

Need to encode via base64 so the css file is all that's required to enable font

CSS issue

Drop color doesn't seem to work

Originally posted by @bhajneet in #1 (comment)

Screenshots

Describe the bug
Drop colors not working on exported themes

Expected

Exported

Is your feature request related to a problem? Please describe.
The secondary lines have the same line spacing, even if a different field. This makes it hard to read.

Describe the solution you'd like
Toggle the padding between items. Perhaps even differentiate between primary and secondary text padding.

Describe alternatives you've considered

• Modifying CSS by hand: too much effort
• Living with it: hard to read
• Limiting to one secondary text field: ok for most cases, but sometimes you may want both

Needs screenshot + rewording