[GEN-1680]: added new "toggle buttons" component

frontend/webapp/containers/main/actions/choose-action-body/index.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { type ActionInput } from '@/types';
 import ActionCustomFields from './custom-fields';
 import { type ActionOption } from '../choose-action-modal/action-options';
-import { DocsButton, Input, Text, TextArea, Toggle, MonitoringCheckboxes, SectionTitle } from '@/reuseable-components';
+import { DocsButton, Input, Text, TextArea, MonitoringCheckboxes, SectionTitle, ToggleButtons } from '@/reuseable-components';
 
 const FieldWrapper = styled.div`
   width: 100%;
@@ -27,34 +27,19 @@ const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ isUpdate, action
       {isUpdate && (
         <FieldWrapper>
           <FieldTitle>Status</FieldTitle>
-          <Toggle
-            title={!formData.disable ? 'Active' : 'Inactive'}
-            initialValue={!formData.disable}
-            onChange={(bool) => handleFormChange('disable', !bool)}
-          />
+          <ToggleButtons initialValue={!formData.disable} onChange={(bool) => handleFormChange('disable', !bool)} />
         </FieldWrapper>
       )}
 
-      {!isUpdate && (
-        <SectionTitle title='' description={action.docsDescription as string} actionButton={<DocsButton endpoint={action.docsEndpoint} />} />
-      )}
+      {!isUpdate && <SectionTitle title='' description={action.docsDescription as string} actionButton={<DocsButton endpoint={action.docsEndpoint} />} />}
 
       <FieldWrapper>
-        <MonitoringCheckboxes
-          allowedSignals={action.allowedSignals}
-          selectedSignals={formData.signals}
-          setSelectedSignals={(value) => handleFormChange('signals', value)}
-        />
+        <MonitoringCheckboxes allowedSignals={action.allowedSignals} selectedSignals={formData.signals} setSelectedSignals={(value) => handleFormChange('signals', value)} />
       </FieldWrapper>
 
       {!isUpdate && (
         <FieldWrapper>
-          <Input
-            title='Action name'
-            placeholder='Use a name that describes the action'
-            value={formData.name}
-            onChange={({ target: { value } }) => handleFormChange('name', value)}
-          />
+          <Input title='Action name' placeholder='Use a name that describes the action' value={formData.name} onChange={({ target: { value } }) => handleFormChange('name', value)} />
         </FieldWrapper>
       )}
 

frontend/webapp/containers/main/instrumentation-rules/choose-rule-body/index.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import RuleCustomFields from './custom-fields';
 import type { InstrumentationRuleInput } from '@/types';
 import type { RuleOption } from '../add-rule-modal/rule-options';
-import { DocsButton, Input, Text, TextArea, Toggle, SectionTitle } from '@/reuseable-components';
+import { DocsButton, Input, Text, TextArea, SectionTitle, ToggleButtons } from '@/reuseable-components';
 
 const FieldWrapper = styled.div`
   width: 100%;
@@ -27,24 +27,15 @@ const ChooseRuleBody: React.FC<Props> = ({ isUpdate, rule, formData, handleFormC
       {isUpdate && (
         <FieldWrapper>
           <FieldTitle>Status</FieldTitle>
-          <Toggle
-            title={!formData.disabled ? 'Active' : 'Inactive'}
-            initialValue={!formData.disabled}
-            onChange={(bool) => handleFormChange('disabled', !bool)}
-          />
+          <ToggleButtons initialValue={!formData.disabled} onChange={(bool) => handleFormChange('disabled', !bool)} />
         </FieldWrapper>
       )}
 
       {!isUpdate && <SectionTitle title='' description={rule.docsDescription as string} actionButton={<DocsButton endpoint={rule.docsEndpoint} />} />}
 
       {!isUpdate && (
         <FieldWrapper>
-          <Input
-            title='Rule name'
-            placeholder='Use a name that describes the rule'
-            value={formData.ruleName}
-            onChange={({ target: { value } }) => handleFormChange('ruleName', value)}
-          />
+          <Input title='Rule name' placeholder='Use a name that describes the rule' value={formData.ruleName} onChange={({ target: { value } }) => handleFormChange('ruleName', value)} />
         </FieldWrapper>
       )}
 

frontend/webapp/reuseable-components/index.ts

@@ -8,6 +8,7 @@ export * from './dropdown';
 export * from './divider';
 export * from './counter';
 export * from './toggle';
+export * from './toggle-buttons';
 export * from './checkbox';
 export * from './modal';
 export * from './modal/warning-modal';

frontend/webapp/reuseable-components/toggle-buttons/index.tsx

@@ -0,0 +1,97 @@
+import Image from 'next/image';
+import { Tooltip } from '../tooltip';
+import styled from 'styled-components';
+import React, { useEffect, useState } from 'react';
+
+interface ToggleProps {
+  activeText?: string;
+  inactiveText?: string;
+  tooltip?: string;
+  initialValue?: boolean;
+  onChange?: (value: boolean) => void;
+  disabled?: boolean;
+}
+
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+`;
+
+const BaseButton = styled.button`
+  width: 100%;
+  padding: 12px;
+  gap: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid ${({ theme }) => theme.colors.border};
+  color: ${({ theme }) => theme.colors.secondary};
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  font-size: 14px;
+  text-decoration: underline;
+  text-transform: uppercase;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
+`;
+
+const ActiveButton = styled(BaseButton)`
+  border-radius: 32px 0 0 32px;
+  background-color: ${({ theme }) => theme.colors.blank_background};
+  &.colored {
+    background-color: ${({ theme }) => theme.colors.dark_green};
+  }
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.secondary};
+  }
+  transition: background-color 0.3s;
+`;
+
+const InactiveButton = styled(BaseButton)`
+  border-radius: 0 32px 32px 0;
+  background-color: ${({ theme }) => theme.colors.blank_background};
+  &.colored {
+    background-color: ${({ theme }) => theme.colors.darker_red};
+  }
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.secondary};
+  }
+  transition: background-color 0.3s;
+`;
+
+const ToggleButtons: React.FC<ToggleProps> = ({ activeText = 'Active', inactiveText = 'Inactive', tooltip, initialValue = false, onChange, disabled }) => {
+  const [isActive, setIsActive] = useState(initialValue);
+  useEffect(() => setIsActive(initialValue), [initialValue]);
+
+  const handleToggle = (forcedBool?: boolean) => {
+    if (disabled) return;
+
+    let newValue = initialValue;
+
+    setIsActive((prev) => {
+      newValue = typeof forcedBool === 'boolean' ? forcedBool : !prev;
+      return newValue;
+    });
+
+    if (onChange) onChange(newValue);
+  };
+
+  return (
+    <Tooltip text={tooltip || ''}>
+      <Container>
+        <ActiveButton className={isActive ? 'colored' : ''} onClick={() => handleToggle(true)} disabled={disabled}>
+          <Image src='/icons/common/circled-check.svg' alt='' width={16} height={16} />
+          {activeText}
+        </ActiveButton>
+        <InactiveButton className={isActive ? '' : 'colored'} onClick={() => handleToggle(false)} disabled={disabled}>
+          <Image src='/icons/common/circled-cross.svg' alt='' width={16} height={16} />
+          {inactiveText}
+        </InactiveButton>
+      </Container>
+
+      {tooltip && <Image src='/icons/common/info.svg' alt='' width={16} height={16} style={{ margin: '0 8px' }} />}
+    </Tooltip>
+  );
+};
+
+export { ToggleButtons };

frontend/webapp/reuseable-components/toggle/index.tsx

@@ -46,28 +46,29 @@ const ToggleSwitch = styled.div<{ isActive: boolean; disabled?: boolean }>`
 
 const Toggle: React.FC<ToggleProps> = ({ title, tooltip, initialValue = false, onChange, disabled }) => {
   const [isActive, setIsActive] = useState(initialValue);
-
-  useEffect(() => {
-    setIsActive(initialValue);
-  }, [initialValue]);
+  useEffect(() => setIsActive(initialValue), [initialValue]);
 
   const handleToggle = () => {
-    if (!disabled) {
-      const newValue = !isActive;
-      setIsActive(newValue);
-      if (onChange) {
-        onChange(newValue);
-      }
-    }
+    if (disabled) return;
+
+    let newValue = initialValue;
+
+    setIsActive((prev) => {
+      newValue = !prev;
+      return newValue;
+    });
+
+    if (onChange) onChange(newValue);
   };
 
   return (
     <Tooltip text={tooltip || ''}>
       <Container disabled={disabled} onClick={handleToggle}>
         <ToggleSwitch isActive={isActive} disabled={disabled} />
         <Text size={14}>{title}</Text>
-        {tooltip && <Image src='/icons/common/info.svg' alt='' width={16} height={16} />}
       </Container>
+
+      {tooltip && <Image src='/icons/common/info.svg' alt='' width={16} height={16} />}
     </Tooltip>
   );
 };

frontend/webapp/styles/theme.ts

@@ -15,7 +15,8 @@ const colors = {
   blank_background: '#11111100',
 
   dark_red: '#802828',
-  dark_green: '#2d4323',
+  darker_red: '#611F1F',
+  dark_green: '#2D4323',
 
   warning: '#472300',
   error: '#431919',