Merge pull request #920 from sachiniSam/newRecordView

Fix Expression switch styles

Author: kanushka

workspaces/ballerina/ballerina-side-panel/src/components/ModeSwitcher/styles.tsx

@@ -34,15 +34,19 @@ export const Label = styled.span<LabelProps>`
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
   
   &:first-of-type {
     left: 0;
-    width: 30%;
+    width: 40%;
   }
   
   &:last-of-type {
-    left: 30%;
-    width: 70%;
+    left: 40%;
+    width: 60%;
   }
 `;
 
@@ -67,8 +71,8 @@ export const Slider = styled.div<{ checked: boolean }>`
     content: "";
     position: absolute;
     height: calc(100% - 4px);
-    width: ${props => props.checked ? 'calc(70% - 6px)' : 'calc(35% - 2px)'};
-    left: ${props => props.checked ? 'calc(30% + 4px)' : '2px'};
+    width: ${props => props.checked ? 'calc(60% - 4px)' : 'calc(40% - 2px)'};
+    left: ${props => props.checked ? 'calc(40% + 2px)' : '2px'};
     border-radius: 1px;
     background: ${ThemeColors.SURFACE_DIM};
     transition: all 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
@@ -90,7 +94,7 @@ export const SwitchWrapper = styled.div`
   position: relative;
   display: inline-flex;
   align-items: center;
-  width: 110px;
+  width: 112px;
   height: 24px;
   margin-top: 2px;
 `;

workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/RecordConfigModal.tsx

@@ -386,10 +386,6 @@ export function ConfigureRecordPage(props: ConfigureRecordPageProps) {
         onClose();
     }
 
-    const handleCancel = () => {
-        onClose();
-    }
-
     // Debounced function to fetch diagnostics
     const fetchDiagnostics = useRef(
         debounce(async (value: string) => {
@@ -660,9 +656,6 @@ export function ConfigureRecordPage(props: ConfigureRecordPageProps) {
                             </FormContext.Provider>
                         </ExpressionEditorContainer>
                         <ButtonContainer>
-                            <Button appearance="secondary" onClick={handleCancel}>
-                                Cancel
-                            </Button>
                             <Button appearance="primary" onClick={handleSave}>
                                 Save
                             </Button>