docbrown/app/views/users/_org_admin.html.erb

<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js" async="async"></script>
  <style>
    .primary-sticky-nav-author,.primary-sticky-nav-author-element{
      border: 1px solid <%= HexComparer.new([user_colors(@organization)[:bg], user_colors(@organization)[:text]]).brightness(0.88) %> !important;
      box-shadow: 3px 4px 0px <%= HexComparer.new([user_colors(@organization)[:bg], user_colors(@organization)[:text]]).brightness(0.88) %> !important;
    }
    .primary-sticky-nav-author button{
      background-color: <%= user_colors(@organization)[:bg] %> !important;
      color: <%= user_colors(@organization)[:text] %> !important;
      <% if user_colors(@organization)[:bg].downcase == "#ffffff" %>
        border: 1px solid <%= user_colors(@organization)[:text] %> !important;
      <% end %>
    }
  </style>
<div class="settings-org-members">
  <h3>Organization Members</h3>
  <% @organization.users.each do |user| %>
    <div class="settings-org-member-row <%= "settings-org-admin-row" if user.org_admin %>">
      <a href="<%= user.path %>"><%= user.name %></a>
      <div class="settings-org-member-actions">
        <% if user.org_admin && user == current_user %>
          <button class="settings-org-member settings-org-member-admin-self">you (admin)</button>
        <% elsif user.org_admin && user != current_user %>
          <button class="settings-org-member settings-org-member-admin-other">admin</button>
          <%= form_tag "/users/remove_org_admin", onsubmit: "return confirm('Are you sure you want to take away admin status from #{user.name}?');" do %>
            <%= hidden_field_tag 'user_id', user.id %>
            <button class="settings-org-member settings-org-member-remove" title="Remove from org">revoke admin status</button>
          <% end %>
        <% else %>
          <button class="settings-org-member settings-org-member-admin-self">org member</button>
          <%= form_tag "/users/add_org_admin", onsubmit: "return confirm('Are you sure you want to give #{user.name} admin status?');" do %>
            <%= hidden_field_tag 'user_id', user.id %>
            <button class="settings-org-member settings-org-member-make-admin">make admin</button>
          <% end %>
          <%= form_tag "/users/remove_from_org", onsubmit: "return confirm('Are you sure you want remove #{user.name} from the organization?');" do %>
            <%= hidden_field_tag 'user_id', user.id %>
            <button class="settings-org-member settings-org-member-remove" title="Remove from org">remove from org</button>
          <% end %>
        <% end %>
      </div>
    </div>
  <% end %>
  <h3>Grow the team</h3>
  <h5>Invite teammates by sending them the secret and the following instructions:</h5>
  <ol style="margin-bottom: 30px">
    <li>Sign up at <a href="https://dev.to">https://dev.to</a>
    <li>Navigate to <a href="https://dev.to/settings/organization">https://dev.to/settings/organization</a>
    <li>Paste the secret code below and click <b>Join Organization</b></li>
  </ol>
  <h5>Your secret: (You should rotate this regularly)</h5>
  <input type="text" class="settings-org-secret" id="settings-org-secret" value="<%= @organization.secret %>" readonly>
  <%= form_tag "/organizations/generate_new_secret", onsubmit: "return confirm('Are you sure you want to generate a new secret? All outstanding secrets will be invalid.');" do %>
    <button class="settings-generate-new-secret">Generate New Secret</button>
  <% end %>
</div>
<h3>Organization Details</h3>
<%= form_for(@organization) do |f| %>
  <div class="field">
    <%= f.label :name %>
    <%= f.text_field :name, maxlength: 50 %>
  </div>
  <%= f.label :profile_image %>
  <div class="field">
    <% if @organization.profile_image_url.present? %>
      <span class="image-present">
        <img alt="<%= @organization.name %> profile image" src="<%= cloudinary(@organization.profile_image_url,50)%>" />
        <%= f.file_field :profile_image %>
      </span>
    <% else %>
      <%= f.file_field :profile_image %>
    <% end %>
  </div>
  <div class="field">
    <%= f.label :twitter_username, "Twitter Username" %>
    <%= f.text_field :twitter_username %>
  </div>
  <div class="field">
    <%= f.label :github_username, "Github Username"%>
    <%= f.text_field :github_username %>
  </div>
  <div class="field">
    <%= f.label :text_color_hex, "Text color (hex)"%>
    <%= f.text_field :text_color_hex, placeholder: "#ffffff", class: "jscolor {hash:true, required:false}" %>
  </div>
  <div class="field">
    <%= f.label :bg_color_hex, "Background color (hex)"%>
    <%= f.text_field :bg_color_hex, placeholder: "#000000", class: "jscolor {hash:true, required:false}" %>
  </div>
  <div class="field">
    <%= f.label :url, "Site url" %>
    <%= f.url_field :url, maxlength: 64, placeholder: "http://yoursite.com" %>
  </div>
  <div class="field">
    <%= f.label :tag_line %>
    <%= f.text_field :tag_line, maxlength: 60, placeholder: "Limit of 60 characters" %>
  </div>
  <div class="field">
    <%= f.label :summary %>
    <%= f.text_area :summary, maxlength: 250, placeholder: "Limit of 250 characters" %>
  </div>
  <div class="field">
    <%= f.label :location %>
    <%= f.text_field :location, maxlength: 64, placeholder: "Limit of 64 characters" %>
  </div>  
  <div class="field">
    <%= f.label :email, "Support Email" %>
    <%= f.text_field :email, maxlength: 64, placeholder: "Limit of 64 characters" %>
  </div> 
  <div class="field">
    <%= f.label :company_size, "Organization Size" %>
    <%= f.text_field :company_size, maxlength: 10, placeholder: "Enter a number" %>
  </div>   
  <div class="field">
    <%= f.label :story, "Our Story" %>
    <%= f.text_area :story, maxlength: 640, placeholder: "Limit of 640 characters" %>
  </div>
  <div class="field">
    <%= f.label :tech_stack, "Our Stack" %>
    <%= f.text_area :tech_stack, maxlength: 640, placeholder: "Limit of 640 characters" %>
  </div>      
  <h2>Call-to-action box</h2>
  <h4 style="margin-top:-25px">Customizable text that appears to the right of every post for your organization</h4>
  <h4 style="margin-top:-15px">See an example from the <a href="https://dev.to/devteam/the-dev-badge-is-available-on-font-awesome-2ihe" target="_blank">DEV Team</a>.</h4>
  <div class="field">
    <%= f.label "Body text (Limited markdown — bold/italic/etc)" %>
    <%= f.text_area :cta_body_markdown, maxlength: 256, placeholder: "**This is an example**

_italic_ and **bold** is okay. Links, and headers etc. will not show up.

256 character limit." %>
  </div>
  <div class="field">
    <%= f.label "Link Text" %>
    <%= f.text_field :cta_button_text, maxlength: 20, placeholder: "Limit of 20 characters" %>
  </div>
  <div class="field">
    <%= f.label "Link Text" %>
    <%= f.text_field :cta_button_url, placeholder: "https://example.com" %>
  </div>
  <div class="field">
    <label></label>
    <%= f.submit "SUBMIT", class: "cta" %>
  </div>
<% end %>