From ed743b2ff9ad11f12bcd64cd94c22068995724ba Mon Sep 17 00:00:00 2001
From: Wehi <notstrangequark@gmail.com>
Date: Wed, 10 May 2023 02:02:44 +0200
Subject: [PATCH] added background to make the welcome text more visible

---
 src/ui/components/RightBar.css | 89 +++++++++++++++++-----------------
 src/ui/components/RightBar.tsx |  5 +-
 2 files changed, 48 insertions(+), 46 deletions(-)

diff --git a/src/ui/components/RightBar.css b/src/ui/components/RightBar.css
index 64609ed..e9c8e0a 100644
--- a/src/ui/components/RightBar.css
+++ b/src/ui/components/RightBar.css
@@ -1,3 +1,43 @@
+@keyframes background-pan {
+  from {
+    background-position: 0% center;
+  }
+
+  to {
+    background-position: -200% center;
+  }
+}
+
+@keyframes scale {
+  from,
+  to {
+    transform: scale(0);
+  }
+
+  50% {
+    transform: scale(1);
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(180deg);
+  }
+}
+
+.magic-text {
+  animation: background-pan 3s linear infinite;
+  background: linear-gradient(to right, #fff, #ffc920, #fff, #fff);
+  background-size: 200%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  white-space: nowrap;
+}
+
 .RightBar {
   position: absolute;
   transform: translate(0%, 0%);
@@ -61,56 +101,15 @@
 }
 
 .WelcomeMessage {
-  margin-left: 10px;
   color: white;
   writing-mode: vertical-rl;
   text-orientation: upright;
   text-transform: uppercase;
   font-weight: 600;
+  padding: 10px 0 10px 0;
 }
 
-@keyframes background-pan {
-  from {
-    background-position: 0% center;
-  }
-
-  to {
-    background-position: -200% center;
-  }
+.WelcomeDiv {
+  background-color: rgba(0, 0, 0, 0.585);
+  text-align: center;
 }
-
-@keyframes scale {
-  from,
-  to {
-    transform: scale(0);
-  }
-
-  50% {
-    transform: scale(1);
-  }
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(180deg);
-  }
-}
-
-.magic-text {
-  animation: background-pan 3s linear infinite;
-        background: linear-gradient(
-          to right,
-          #fff,
-          #ffc920,
-          #fff,
-          #fff
-        );
-        background-size: 200%;
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        white-space: nowrap;
-}
\ No newline at end of file
diff --git a/src/ui/components/RightBar.tsx b/src/ui/components/RightBar.tsx
index dd415f1..810f04e 100644
--- a/src/ui/components/RightBar.tsx
+++ b/src/ui/components/RightBar.tsx
@@ -25,7 +25,10 @@ export default class RightBar extends React.Component {
             <img src={Github} />
           </div>
           <div>
-          <span className='WelcomeMessage magic-text'>Welcome to Cultivation!</span>
+            <div className="WelcomeDiv">
+            <span className='WelcomeMessage magic-text'>Welcome to Cultivation!</span>
+
+            </div>
 
           </div>
         </div>