change(ui): change alert creation page

frontend/app/components/Dashboard/components/Alerts/AlertForm/Condition.tsx

@@ -118,7 +118,7 @@ function Condition({
       </div>
       {!isThreshold && (
         <div className="flex items-center my-3">
-          <label className="w-2/6 flex-shrink-0 font-normal">{'compared to previous'}</label>
+          <label className="w-1/6 flex-shrink-0 font-normal">{'compared to previous'}</label>
           <Select
             className="w-2/6"
             placeholder="Select timeframe"

frontend/app/components/Dashboard/components/Alerts/AlertForm/NotifyHooks.tsx

@@ -49,8 +49,8 @@ function NotifyHooks({
 
       {instance.slack && (
         <div className="flex items-start my-4">
-          <label className="w-2/6 flex-shrink-0 font-normal pt-2">{'Slack'}</label>
-          <div className="w-4/6">
+          <label className="w-1/6 flex-shrink-0 font-normal pt-2">{'Slack'}</label>
+          <div className="w-2/6">
             <DropdownChips
               fluid
               selected={instance.slackInput}
@@ -65,8 +65,8 @@ function NotifyHooks({
 
       {instance.email && (
         <div className="flex items-start my-4">
-          <label className="w-2/6 flex-shrink-0 font-normal pt-2">{'Email'}</label>
-          <div className="w-4/6">
+          <label className="w-1/6 flex-shrink-0 font-normal pt-2">{'Email'}</label>
+          <div className="w-2/6">
             <DropdownChips
               textFiled
               validate={validateEmail}
@@ -81,15 +81,17 @@ function NotifyHooks({
 
       {instance.webhook && (
         <div className="flex items-start my-4">
-          <label className="w-2/6 flex-shrink-0 font-normal pt-2">{'Webhook'}</label>
-          <DropdownChips
-            fluid
-            selected={instance.webhookInput}
-            options={hooks}
-            placeholder="Select Webhook"
-            // @ts-ignore
-            onChange={(selected) => edit({ webhookInput: selected })}
-          />
+          <label className="w-1/6 flex-shrink-0 font-normal pt-2">{'Webhook'}</label>
+          <div className="w-2/6">
+            <DropdownChips
+              fluid
+              selected={instance.webhookInput}
+              options={hooks}
+              placeholder="Select Webhook"
+              // @ts-ignore
+              onChange={(selected) => edit({ webhookInput: selected })}
+            />
+          </div>
         </div>
       )}
     </div>

frontend/app/components/Dashboard/components/Alerts/AlertListItem.tsx

@@ -66,7 +66,7 @@ function AlertListItem(props: Props) {
 
   return (
     <div
-      className={cn('border-t px-3', !demo ? 'hover:bg-active-blue cursor-pointer' : '')}
+      className={cn('px-3', !demo ? 'hover:bg-active-blue cursor-pointer border-t' : '')}
       onClick={onItemClick}
     >
       <div className="grid grid-cols-12 py-4 select-none">

frontend/app/components/Dashboard/components/Alerts/AlertsSearch.tsx

@@ -29,7 +29,7 @@ function AlertsSearch({ changeSearch }: Props) {
         value={inputValue}
         name="alertsSearch"
         className="bg-white p-2 border border-borderColor-gray-light-shade rounded w-full pl-10"
-        placeholder="Filter by title or description"
+        placeholder="Filter by title or type"
         onChange={write}
       />
     </div>

frontend/app/components/Dashboard/components/Alerts/NewAlert.tsx

@@ -82,8 +82,6 @@ const NewAlert = (props: IProps) => {
     list,
   } = props;
 
-  const [expanded, setExpanded] = React.useState(false);
-
   useEffect(() => {
     if (list.size === 0) fetchList();
     props.fetchTriggerOptions();
@@ -187,26 +185,18 @@ const NewAlert = (props: IProps) => {
         id="alert-form"
       >
         <div
-          onClick={() => expanded ? null : setExpanded(!expanded)}
-          className={cn('px-6 py-4 flex justify-between items-center', {
-            'cursor-pointer hover:bg-active-blue hover:shadow-border-blue rounded': !expanded,
-          })}
+          className={cn('px-6 py-4 flex justify-between items-center',
+          )}
         >
           <h1 className="mb-0 text-2xl mr-4 min-w-fit">
-            <WidgetName name={instance.name} onUpdate={(name) => write({ target: { value: name, name: 'name' }} as any)} canEdit={expanded} />
+            <WidgetName name={instance.name} onUpdate={(name) => write({ target: { value: name, name: 'name' }} as any)} canEdit />
           </h1>
           <div
             className="text-gray-600 w-full cursor-pointer"
-            onClick={() => setExpanded(!expanded)}
           >
-            <div className="flex items-center select-none w-fit ml-auto">
-              <span className="mr-2 color-teal">{expanded ? 'Close' : 'Edit'}</span>
-              <Icon name={expanded ? 'chevron-up' : 'chevron-down'} size="16" color="teal" />
-            </div>
           </div>
         </div>
-        {expanded ? (
-          <>
+        
             <div className="px-6 pb-3 flex flex-col">
               <Section
                 index="1"
@@ -266,7 +256,7 @@ const NewAlert = (props: IProps) => {
               />
             </div>
 
-            <div className="flex items-center justify-between p-6 border-t bg-white">
+            <div className="flex items-center justify-between p-6 border-t">
               <BottomButtons 
                 loading={loading}
                 instance={instance}
@@ -274,8 +264,7 @@ const NewAlert = (props: IProps) => {
                 onDelete={onDelete}
               />
             </div>
-          </>
-        ) : null}
+         
       </Form>
 
       <div className="bg-white mt-4 border rounded">