feat(admin): Added shoutout to admin panel (#6346)

* Added shoutout

* Added shoutout function

* Fixed test.

* Included feedback from review.

* Removed unnecessary file

admin/src/index.css

@@ -604,6 +604,25 @@ pre {
     outline: none;
 }
 
+
+.send-message {
+    position: relative;
+}
+
+.send-message input {
+    width: auto;
+}
+
+.send-message {
+}
+
+.send-message svg {
+    position: absolute;
+    right: 3px;
+    bottom: -3px;
+    left: auto !important;
+}
+
 .search-field svg {
     position: absolute;
     left: 3px;
@@ -733,3 +752,52 @@ input, button, select, optgroup, textarea {
     right: 10px;
     color: #666;
 }
+
+
+.SwitchRoot {
+    align-self: center;
+    width: 60px;
+    height: 30px;
+    background-color: black;
+    border-radius: 9999px;
+    position: relative;
+    box-shadow: 0 2px 10px var(--black-a7);
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.SwitchRoot:focus {
+    box-shadow: 0 0 0 2px black;
+}
+.SwitchRoot[data-state='checked'] {
+    background-color: var(--etherpad-color);
+}
+
+.SwitchThumb {
+    display: block;
+    width: 20px;
+    height: 20px;
+    background-color: white;
+    border-radius: 9999px;
+    box-shadow: 0 2px 2px var(--black-a7);
+    transition: transform 100ms;
+    transform: translateX(2px);
+    will-change: transform;
+}
+.SwitchThumb[data-state='checked'] {
+    transform: translateX(25px);
+}
+
+.Label {
+    color: white;
+    font-size: 15px;
+    line-height: 1;
+}
+
+.message {
+    position: relative;
+    padding: 10px;
+    border: 1px solid #e0e0e0;
+    margin: 10px 20px 10px 10px;
+    border-radius: 10px 0 10px 10px;
+    background-color: var(--etherpad-color);
+    color: white
+}