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 {