[deploy] Logo updates (#10840)

* logo updates

* fix

* fix

* drop it like its hot

* no siteconfig

* um...

app/assets/stylesheets/base/main.scss

@@ -36,3 +36,48 @@ a {
   color: var(--link-brand-color);
   text-decoration: none;
 }
+
+// Logo
+.site-logo {
+  max-width: var(--max-width, 125px);
+  font-size: var(--font-size, var(--fs-base));
+  font-weight: var(--font-weight, var(--fw-medium));
+
+  display: inline-flex;
+  align-self: stretch;
+  align-items: center;
+  vertical-align: middle;
+  color: var(--base-100);
+  text-decoration: none;
+  letter-spacing: -0.01em;
+  line-height: var(--lh-tight);
+  overflow-wrap: anywhere;
+
+  @media (min-width: $breakpoint-s) {
+    --max-width: 150px;
+  }
+
+  @media (min-width: $breakpoint-m) {
+    --max-width: 175px;
+    --font-size: var(--fs-l);
+    --font-weight: var(--fw-bold);
+  }
+
+  @media (min-width: $breakpoint-l) {
+    --max-width: 200px;
+    --font-size: var(--fs-xl);
+  }
+
+  &:hover {
+    color: var(--base-80);
+    text-decoration: none;
+  }
+
+  svg {
+    max-width: 100%;
+    width: auto;
+    height: calc(var(--header-height) - var(--su-2) * 2);
+    vertical-align: middle;
+    display: inline-block;
+  }
+}

app/assets/stylesheets/components/header.scss

@@ -38,27 +38,6 @@
   }
 }
 
-// Logo
-.site-logo {
-  display: flex;
-  max-width: 20%;
-
-  .logo {
-    width: 50px;
-    height: 40px;
-    padding: 0 7px 0 9px; // TODO: we have to fix SVG for logo a little...
-    background: var(--logo-bg);
-    fill: var(--logo-color);
-    border-radius: 3px;
-  }
-
-  svg {
-    height: calc(var(--header-height));
-    width: auto;
-    padding: 0.5em;
-  }
-}
-
 // Search bar
 .crayons-header--search {
   max-width: 420px;

app/javascript/article-form/articleForm.jsx

@@ -47,7 +47,7 @@ export default class ArticleForm extends Component {
     version: PropTypes.string.isRequired,
     article: PropTypes.string.isRequired,
     organizations: PropTypes.string,
-    logoSvg: PropTypes.string.isRequired,
+    siteLogo: PropTypes.string.isRequired,
   };
 
   static defaultProps = {
@@ -56,7 +56,7 @@ export default class ArticleForm extends Component {
 
   constructor(props) {
     super(props);
-    const { article, version, logoSvg } = this.props;
+    const { article, version, siteLogo } = this.props;
     let { organizations } = this.props;
     this.article = JSON.parse(article);
     organizations = organizations ? JSON.parse(organizations) : null;
@@ -101,7 +101,7 @@ export default class ArticleForm extends Component {
       edited: false,
       updatedAt: this.article.updated_at,
       version,
-      logoSvg,
+      siteLogo,
       helpFor: null,
       helpPosition: null,
       ...previousContentState,
@@ -300,7 +300,7 @@ export default class ArticleForm extends Component {
       version,
       helpFor,
       helpPosition,
-      logoSvg,
+      siteLogo,
     } = this.state;
 
     return (
@@ -316,7 +316,7 @@ export default class ArticleForm extends Component {
           organizations={organizations}
           organizationId={organizationId}
           onToggle={this.handleOrgIdChange}
-          logoSvg={logoSvg}
+          siteLogo={siteLogo}
         />
 
         {previewShowing ? (

app/javascript/article-form/components/Header.jsx

@@ -10,16 +10,14 @@ export const Header = ({
   organizations,
   organizationId,
   onToggle,
-  logoSvg,
+  siteLogo,
 }) => {
   return (
     <div className="crayons-article-form__header">
-      <a
-        href="/"
+      <span
         className="crayons-article-form__logo"
-        aria-label="Home"
         // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{ __html: logoSvg }}
+        dangerouslySetInnerHTML={{ __html: siteLogo }}
       />
       <PageTitle
         organizations={organizations}
@@ -38,7 +36,7 @@ Header.propTypes = {
   organizations: PropTypes.string.isRequired,
   organizationId: PropTypes.string.isRequired,
   onToggle: PropTypes.string.isRequired,
-  logoSvg: PropTypes.string.isRequired,
+  siteLogo: PropTypes.string.isRequired,
 };
 
 Header.displayName = 'Header';

app/javascript/packs/articleForm.jsx

@@ -24,14 +24,14 @@ function loadForm() {
     window.csrfToken = csrfToken;
 
     const root = document.getElementById('js-article-form');
-    const { article, organizations, version, logoSvg } = root.dataset;
+    const { article, organizations, version, siteLogo } = root.dataset;
 
     render(
       <ArticleForm
         article={article}
         organizations={organizations}
         version={version}
-        logoSvg={logoSvg}
+        siteLogo={siteLogo}
       />,
       root,
       root.firstElementChild,

app/views/articles/_v2_form.html.erb

@@ -17,11 +17,13 @@
   data-article="<%= article.to_json(only: %i[id title cached_tag_list published body_markdown main_image organization_id canonical_url updated_at], methods: %i[series all_series]) %>"
   data-organizations="<%= organizations&.to_json(only: %i[id name bg_color_hex text_color_hex], methods: [:profile_image_90]) %>"
   data-version="<%= version %>"
-  data-logo-svg='<%= logo_svg %>'>
+  data-site-logo='<%= render "layouts/logo" %>'>
   <form class="crayons-article-form crayons-article-form--<%= version %>">
 
     <div class="crayons-article-form__header">
-      <a href="/" class="crayons-article-form__logo" aria-label="<%= community_name %> Home"><%= logo_svg %></a>
+      <span class="crayons-article-form__logo">
+        <%= render "layouts/logo" %>
+      </span>
 
       <div class="crayons-field__label">
         <span class="hidden s:inline-block mr-2">Write a new post</span>

app/views/layouts/_footer.html.erb

@@ -1,7 +1,7 @@
 <footer class="crayons-footer print-hidden">
   <div id="footer-container" class="crayons-layout crayons-footer__container">
     <div class="crayons-footer__info">
-      <div><a href="/" class="crayons-footer__logo" aria-label="<%= community_name %> Home"><%= logo_svg %></a></div>
+      <div><%= render "layouts/logo" %></div>
       <p><%= SiteConfig.community_description %></p>
       <div><%= render partial: "layouts/social_media" %></div>
       <%# The following copy is necessary for compatability with the Forem AGPL licence which requires instances to link back to the source. %>

app/views/layouts/_logo.html.erb

@@ -0,0 +1,9 @@
+<a href="/" class="site-logo" aria-label="<%= community_name %> Home">
+  <% if SiteConfig.logo_svg.present? %>
+    <%= logo_svg %>
+  <% else %>
+    <span class="truncate-at-2">
+      <%= community_name %>
+    </span>
+  <% end %>
+</a>

app/views/layouts/_top_bar.html.erb

@@ -2,7 +2,7 @@
 <header class="crayons-header print-hidden" role="banner">
   <a href="#articles-list" class="skip-content-link">Skip to content</a>
   <div class="crayons-header__container">
-    <a href="/" class="site-logo" aria-label="<%= community_name %> Home"><%= logo_svg %></a>
+    <%= render "layouts/logo" %>
 
     <div id="pwa-nav-buttons" class="pwa-nav-buttons">
       <button type="button" id="app-back-button">

app/views/layouts/admin.html.erb

@@ -30,7 +30,8 @@
   data-ga-tracking="<%= SiteConfig.ga_tracking_id %>">
   <header class="crayons-header" role="banner">
     <div class="crayons-header__container">
-      <a href="/" class="site-logo" aria-label="<%= community_name %> Home"><%= logo_svg %></a>
+      <%= render "layouts/logo" %>
+
       <h1 class="pl-4 fs-l">
         Admin
         <span class="color-base-40">&raquo;</span> <span class="fw-bold"><%= controller_name.titleize %></span>