From 70ac949bea08faaf301da0922c20b49a61d6ff59 Mon Sep 17 00:00:00 2001
From: Noah <hi@noahflk.com>
Date: Thu, 8 Sep 2022 00:40:50 +0200
Subject: [PATCH] Move hidden label to toggle on events page (#4261)

Co-authored-by: Alex van Andel <me@alexvanandel.com>
---
 apps/web/pages/v2/event-types/index.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/web/pages/v2/event-types/index.tsx b/apps/web/pages/v2/event-types/index.tsx
index 20e73d2980..b8528980c7 100644
--- a/apps/web/pages/v2/event-types/index.tsx
+++ b/apps/web/pages/v2/event-types/index.tsx
@@ -73,11 +73,6 @@ const Item = ({ type, group, readOnly }: { type: EventType; group: EventTypeGrou
           <small
             className="hidden font-normal leading-4 text-gray-600 sm:inline"
             data-testid={"event-type-slug-" + type.id}>{`/${group.profile.slug}/${type.slug}`}</small>
-          {type.hidden && (
-            <span className="rtl:mr-2inline items-center rounded-sm bg-yellow-100 px-1.5 py-0.5 text-xs font-medium text-yellow-800 ltr:ml-2">
-              {t("hidden") as string}
-            </span>
-          )}
           {readOnly && (
             <span className="rtl:mr-2inline items-center rounded-sm bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-800 ltr:ml-2">
               {t("readonly") as string}
@@ -264,9 +259,14 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                       )}
                       <div
                         className={classNames(
-                          "flex justify-between space-x-2 rtl:space-x-reverse ",
+                          "flex items-center justify-between space-x-2 rtl:space-x-reverse ",
                           type.$disabled && "pointer-events-none cursor-not-allowed"
                         )}>
+                        {type.hidden && (
+                          <Badge variant="gray" size="lg">
+                            {t("hidden")}
+                          </Badge>
+                        )}
                         <Tooltip content={t("show_eventtype_on_profile") as string}>
                           <div className="self-center pr-2">
                             <Switch