Rename RubyOutline in NotFound, lint fix and mobile responsiveness tw…

…eak for the new redesign banner
wnbrb · Dec 23, 2024 · a2e89ca · a2e89ca
1 parent b4d19c4
commit a2e89ca
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/app/javascript/components/pages/Home.jsx b/app/javascript/components/pages/Home.jsx
@@ -64,7 +64,7 @@ const Home = () => {
                         <h1 className="font-besley text-lg">🚧 Website Redesign in Progress 🚧</h1>
                         <p className="font-besley text-base">
                             You might spot old branding, broken links, or other inconsistencies.
-                            We're on it!
+                            We&apos;re on it!
                         </p>
                     </div>
                     <div className="hero">

diff --git a/app/javascript/components/pages/NotFound.jsx b/app/javascript/components/pages/NotFound.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Helmet } from 'react-helmet-async';
 import SharedLayout from 'components/layout/SharedLayout';
-import RubyOutline from 'components/icons/RubyOutline';
+import NewLogo from 'components/icons/NewLogo';
 
 import 'stylesheets/not_found';
 
@@ -13,7 +13,7 @@ const NotFound = () => (
 
         <SharedLayout>
             <div className="not-found-container">
-                <RubyOutline className="h-60 w-60" />
+                <NewLogo className="h-60 w-60" />
                 <div className="not-found-text-container">
                     <h1 className="title-text-lg">404</h1>
                     <p>We couldn&apos;t find the page you were looking for.</p>

diff --git a/app/javascript/stylesheets/home.scss b/app/javascript/stylesheets/home.scss
@@ -12,11 +12,14 @@
     padding: 0.5rem 1rem;
     flex-direction: column;
     font-weight: bold;
-    height: 5rem;
+    height: 10rem;
     color: #2e0880;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     position: fixed;
 
+    @media (min-width: 768px) {
+      height: 5rem;
+    }
 }
 .hero {
     @apply flex