From 6e8942f6989f868331dec5118e409015823435e8 Mon Sep 17 00:00:00 2001
From: umutcanbolat <hello@umutcanbolat.com>
Date: Fri, 23 Dec 2022 22:32:58 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20santa=20hat=20to?=
 =?UTF-8?q?=20the=20thunderbolt=20icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Search.js |  1 +
 src/styles/Landing.css   | 15 ---------------
 src/styles/Search.css    | 37 +++++++++++++++++++++++++++++++++++++
 3 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/src/components/Search.js b/src/components/Search.js
index 31015b1..85b1c00 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -25,6 +25,7 @@ export default function Search({ input, onChange }) {
           }}
         >
           <div className="header">
+            <img id="santa" src={require('../resources/santa.svg')} alt="Santa hat" />
             <Icon type="thunderbolt" theme="filled" />
             <h1>{'Instant Username Search'}</h1>
           </div>
diff --git a/src/styles/Landing.css b/src/styles/Landing.css
index 0a5d8c9..831cf45 100644
--- a/src/styles/Landing.css
+++ b/src/styles/Landing.css
@@ -13,15 +13,6 @@
   position: relative;
 }
 
-#santa {
-  width: 2.6rem;
-  height: 2.6rem;
-  position: absolute;
-  top: -1.2rem;
-  left: 2.45rem;
-  transform: rotate(11deg);
-}
-
 .landing .intro h2 {
   font-weight: bold;
 }
@@ -38,12 +29,6 @@
     min-width: 5rem;
     min-height: 5rem;
   }
-  #santa {
-    width: 2rem;
-    height: 2rem;
-    top: -1rem;
-    left: 1.8rem;
-  }
 }
 @media (min-width: 1200px) {
   .landing .intro p {
diff --git a/src/styles/Search.css b/src/styles/Search.css
index 9435f30..d72e8eb 100644
--- a/src/styles/Search.css
+++ b/src/styles/Search.css
@@ -19,6 +19,7 @@
 .header {
   display: flex;
   flex-direction: row;
+  position: relative;
 }
 
 .header h1 {
@@ -36,6 +37,14 @@
   font-size: 0.8rem;
 }
 
+#santa {
+  width: 2.7rem;
+  height: 2.7rem;
+  position: absolute;
+  top: -1.3rem;
+  left: 1rem;
+}
+
 @media (max-width: 360px) {
   .header {
     margin-bottom: 0.5rem;
@@ -50,6 +59,13 @@
     font-size: 0.9rem;
     height: 1.8rem !important;
   }
+  #santa {
+    width: 1.8rem;
+    height: 1.8rem;
+    position: absolute;
+    top: -1rem;
+    left: 0.6rem;
+  }
 }
 
 @media (min-width: 360px) {
@@ -66,6 +82,13 @@
     font-size: 1.05rem;
     height: 2.1rem !important;
   }
+  #santa {
+    width: 2rem;
+    height: 2rem;
+    position: absolute;
+    top: -1rem;
+    left: 0.85rem;
+  }
 }
 
 @media (min-width: 768px) {
@@ -82,6 +105,13 @@
     font-size: 1.3rem;
     height: 2.6rem !important;
   }
+  #santa {
+    width: 2.7rem;
+    height: 2.7rem;
+    position: absolute;
+    top: -1.3rem;
+    left: 1rem;
+  }
 }
 @media (min-width: 992px) {
   .header {
@@ -97,4 +127,11 @@
     font-size: 1.25rem;
     height: 2.7rem !important;
   }
+  #santa {
+    width: 2.7rem;
+    height: 2.7rem;
+    position: absolute;
+    top: -1.3rem;
+    left: 1rem;
+  }
 }