From 38eeed6cbf644425e9862fe7a85b1159206d41fd Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Fri, 28 Apr 2023 10:00:33 +0200
Subject: [PATCH] [Glitch] Change logo version in header based on screen size
 in web UI

Port 6028d047b9f7d14b2617f47b51f6098f686b1b4e to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../flavours/glitch/components/logo.jsx         | 11 ++++++++---
 .../glitch/features/ui/components/header.jsx    |  7 +++++--
 .../glitch/styles/components/columns.scss       | 17 +++++++++++++++--
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/logo.jsx b/app/javascript/flavours/glitch/components/logo.jsx
index ee5c22496..60e8f40b2 100644
--- a/app/javascript/flavours/glitch/components/logo.jsx
+++ b/app/javascript/flavours/glitch/components/logo.jsx
@@ -1,10 +1,15 @@
 import React from 'react';
+import logo from 'mastodon/../images/logo.svg';
 
-const Logo = () => (
-  <svg viewBox='0 0 261 66' className='logo' role='img'>
+export const WordmarkLogo = () => (
+  <svg viewBox='0 0 261 66' className='logo logo--wordmark' role='img'>
     <title>Mastodon</title>
     <use xlinkHref='#logo-symbol-wordmark' />
   </svg>
 );
 
-export default Logo;
+export const SymbolLogo = () => (
+  <img src={logo} alt='Mastodon' className='logo logo--icon' />
+);
+
+export default WordmarkLogo;
diff --git a/app/javascript/flavours/glitch/features/ui/components/header.jsx b/app/javascript/flavours/glitch/features/ui/components/header.jsx
index f7bab2487..42ed4d901 100644
--- a/app/javascript/flavours/glitch/features/ui/components/header.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/header.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Logo from 'flavours/glitch/components/logo';
+import { WordmarkLogo, SymbolLogo } from 'flavours/glitch/components/logo';
 import { Link, withRouter } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 import { registrationsOpen, me } from 'flavours/glitch/initial_state';
@@ -74,7 +74,10 @@ class Header extends React.PureComponent {
 
     return (
       <div className='ui__header'>
-        <Link to='/' className='ui__header__logo'><Logo /></Link>
+        <Link to='/' className='ui__header__logo'>
+          <WordmarkLogo />
+          <SymbolLogo />
+        </Link>
 
         <div className='ui__header__links'>
           {content}
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss
index a72afe726..f9a5720e5 100644
--- a/app/javascript/flavours/glitch/styles/components/columns.scss
+++ b/app/javascript/flavours/glitch/styles/components/columns.scss
@@ -62,10 +62,9 @@ $ui-header-height: 55px;
   height: $ui-header-height;
   position: sticky;
   top: 0;
-  z-index: 2;
+  z-index: 3;
   justify-content: space-between;
   align-items: center;
-  overflow: hidden;
 
   &__logo {
     display: inline-flex;
@@ -75,6 +74,20 @@ $ui-header-height: 55px;
       height: $ui-header-height - 30px;
       width: auto;
     }
+
+    .logo--wordmark {
+      display: none;
+    }
+
+    @media screen and (min-width: 320px) {
+      .logo--wordmark {
+        display: block;
+      }
+
+      .logo--icon {
+        display: none;
+      }
+    }
   }
 
   &__links {