Remove inline styles/scripts and CSS !important; keep assets in static files

[Rachit7168]

Summary

Audit of fossasia/eventyay-socialmedia found widespread inline style= attributes, a real inline <script> block, and many !important rules in plugin CSS. Most JS/CSS already live under socialmedia/static/socialmedia/, but presentation and one UI behavior still leak into templates.

This issue tracks cleaning that up so styling/behavior live in static CSS/JS (and Bootstrap/utility classes where appropriate).

Findings

!important (22 occurrences)

All in socialmedia/static/socialmedia/css/settings.css, including:

• Modal z-index / sizing / margins (#sm-preview-modal, #sm-workflow-guide-modal, .modal, .modal-backdrop)
• Display toggles (display: none/block !important)
• Link colors / text-decoration
• Padding overrides

Prefer higher specificity or dedicated classes instead of !important (especially when fighting Bootstrap modal defaults — scope under a plugin root like #sm-page / .sm-page first).

Inline style= (~30)

File	Approx. count	Examples
socialmedia/templates/socialmedia/templates.html	16	custom-wave inputs (width/height/padding), action row margins, muted text spacing
socialmedia/templates/socialmedia/posts.html	6	empty-state layout, icon spacing, flex CTA row, hidden validation container
socialmedia/templates/socialmedia/log.html	4	empty table cell padding, icon block, centered pagination
socialmedia/templates/socialmedia/settings.html	1	error banner margin
socialmedia/templates/socialmedia/settings_form.html	1	muted paragraph margin
socialmedia/static/socialmedia/js/settings.js	2	custom-wave inputs built in JS string HTML (same styles as templates)

Inline <script> (executable JS)

socialmedia/templates/socialmedia/settings.html — when form.errors is set, an inline block:

• expands #adv-body
• adds open on #adv-toggle
• scrolls to #sm-form-errors

Move this into settings.js (e.g. read a data attribute / config flag such as expandAdvancedOnError: true from the existing JSON config blob).

Scripts that are fine to keep

• External includes via {% static %} (settings.js, organizer.js)
• <script type="application/json" id="socialmedia-config"> (and organizer equivalent) for bootstrapping URLs/strings — good pattern; not inline logic

Related size note (optional follow-ups, not required for this issue)

• settings.js ~2157 lines
• settings.css ~1753 lines
• templates.html ~1109 lines with repeated custom-wave markup/styles

Deduping wave UI into a partial/component would reduce inline-style churn, but can be a separate PR.

Proposed approach

1. Add utility / component classes in existing CSS (or a small shared common.css):
   • .sm-wave-label-input, .sm-wave-offset-input
   • .sm-mb-* / .sm-mt-*, .sm-hidden, empty-state helpers
   • flex CTA row for posts empty state
2. Replace every style="…" in templates and JS-generated HTML with those classes (prefer Bootstrap helpers already used in Eventyay control UI when they exist).
3. Remove !important from settings.css by scoping under a plugin root and tightening selectors (avoid global .modal { z-index: … !important; } if possible — limit to plugin-owned modals).
4. Move the form-error accordion script from settings.html into settings.js.
5. Smoke-check settings, templates, posts, log, organizer account form, preview/workflow modals.

Non-goals

• Rewriting providers / sync / export logic
• Introducing a new CSS framework
• Full split of the large settings.js / settings.css files (optional later)

Acceptance criteria

• No style= attributes in socialmedia/templates/**
• No inline style= in JS-generated HTML under socialmedia/static/socialmedia/js/
• No executable inline <script> blocks in templates (JSON config blobs OK)
• No !important in socialmedia/static/socialmedia/css/ (or documented exceptions only for unavoidable Bootstrap conflicts, with scoped selectors)
• Visual/behavior unchanged on settings, templates, posts, log, and modals
• Existing external JS includes remain

Why

• Easier theming and Eventyay control UI consistency
• Avoid specificity wars from !important
• Keep templates readable; CSS/JS stay in static/ where they belong

Related

Similar cleanup tracked for HubSpot plugin: fossasia/eventyay-hubspot#77