How can I change the Login Required page style?

Dev
22

I encountered this as well as i wanted to make some styling and alignment consistent with the buttons and the login required text. Here is some code that should be able to move the Login & Signup buttons inside that div if needed. Probably better ways to do it, but adapted it from this theme component for customizing private login page .

<script type="text/discourse-plugin" version="0.8">
  const { on, observes } = require('ember-addons/ember-computed-decorators');

  api.modifyClass('controller:static', {
    @on('init')
    @observes('model.path')
    setupVideo() {
      const path = this.get("model.path");
      if (path === "login") {
          
          
        Ember.run.scheduleOnce('afterRender', () =>{
            let login_div = $('.login-required')[0];

            let signup_btn_element = $('[aria-label="Sign Up"]')[0];
            let login_btn_element = $('[aria-label="Log In"]')[0];
            login_div.appendChild(signup_btn_element);
            login_div.appendChild(login_btn_element);
            
        }); 
     } 
   } 
});