From d8ca1339e46a80682325ab65475b2dbb448a4c04 Mon Sep 17 00:00:00 2001
From: Subina <subina@togglecorp.com>
Date: Tue, 26 Dec 2023 16:36:17 +0545
Subject: [PATCH 1/2] Add text zoom in simplified text

---
 .../LeftPane/SimplifiedTextView/index.tsx     | 14 +++-
 .../LeftPane/SimplifiedTextView/styles.css    | 19 +++++
 app/views/EntryEdit/LeftPane/index.tsx        | 81 ++++++++++++++++---
 app/views/EntryEdit/LeftPane/styles.css       | 18 ++++-
 4 files changed, 116 insertions(+), 16 deletions(-)

diff --git a/app/views/EntryEdit/LeftPane/SimplifiedTextView/index.tsx b/app/views/EntryEdit/LeftPane/SimplifiedTextView/index.tsx
index 4c644cd819..a3ff8bb538 100644
--- a/app/views/EntryEdit/LeftPane/SimplifiedTextView/index.tsx
+++ b/app/views/EntryEdit/LeftPane/SimplifiedTextView/index.tsx
@@ -63,6 +63,7 @@ interface Props {
     assistedTaggingEnabled: boolean;
     projectId: string | undefined;
     frameworkDetails?: Framework;
+    textZoomValue?: number | undefined;
 }
 
 function SimplifiedTextView(props: Props) {
@@ -87,6 +88,7 @@ function SimplifiedTextView(props: Props) {
         disableDiscardButton,
         disableAddButton,
         frameworkDetails,
+        textZoomValue,
     } = props;
 
     const containerRef = React.useRef<HTMLDivElement>(null);
@@ -328,7 +330,17 @@ function SimplifiedTextView(props: Props) {
                 disableAddButton && styles.disabled,
             )}
         >
-            {children}
+            <div className={_cs(
+                styles.simplifiedText,
+                textZoomValue === 1 && styles.extraSmall,
+                textZoomValue === 2 && styles.small,
+                textZoomValue === 3 && styles.medium,
+                textZoomValue === 4 && styles.large,
+                textZoomValue === 5 && styles.extraLarge,
+            )}
+            >
+                {children}
+            </div>
             {(textFromProps?.length ?? 0) > charactersLoaded && (
                 <div className={styles.actions}>
                     <Button
diff --git a/app/views/EntryEdit/LeftPane/SimplifiedTextView/styles.css b/app/views/EntryEdit/LeftPane/SimplifiedTextView/styles.css
index 5b04b7b114..f56f54383a 100644
--- a/app/views/EntryEdit/LeftPane/SimplifiedTextView/styles.css
+++ b/app/views/EntryEdit/LeftPane/SimplifiedTextView/styles.css
@@ -12,6 +12,25 @@
         user-select: none;
     }
 
+    .simplified-text {
+        line-height: 1.5;
+        &.extra-small{
+            font-size: var(--dui-font-size-extra-small);
+        }
+        &.small{
+            font-size: var(--dui-font-size-small);
+        }
+        &.medium{
+            font-size: var(--dui-font-size-medium);
+        }
+        &.large{
+            font-size: var(--dui-font-size-large);
+        }
+        &.extra-large{
+            font-size: var(--dui-font-size-extra-large);
+        }
+    }
+
     .entry {
         margin: var(--dui-spacing-medium) 0;
     }
diff --git a/app/views/EntryEdit/LeftPane/index.tsx b/app/views/EntryEdit/LeftPane/index.tsx
index d58a779d65..c9b0b36f68 100644
--- a/app/views/EntryEdit/LeftPane/index.tsx
+++ b/app/views/EntryEdit/LeftPane/index.tsx
@@ -6,6 +6,10 @@ import {
     randomString,
 } from '@togglecorp/fujs';
 import { gql, useQuery } from '@apollo/client';
+import {
+    MdOutlineZoomIn,
+    MdOutlineZoomOut,
+} from 'react-icons/md';
 import {
     Tabs,
     Container,
@@ -507,6 +511,34 @@ function LeftPane(props: Props) {
         </Container>
     );
 
+    const [
+        textZoomValue,
+        setTextZoomValue,
+    ] = useState<number | undefined>(2);
+    const handleTextZoomOut = useCallback(() => {
+        setTextZoomValue((prev) => {
+            if (isNotDefined(prev)) {
+                return undefined;
+            }
+            if (prev <= 1) {
+                return 1;
+            }
+            return (prev - 1);
+        });
+    }, []);
+
+    const handleTextZoomIn = useCallback(() => {
+        setTextZoomValue((prev) => {
+            if (isNotDefined(prev)) {
+                return undefined;
+            }
+            if (prev >= 5) {
+                return 5;
+            }
+            return (prev + 1);
+        });
+    }, []);
+
     const assistedTaggingShown = !project?.isPrivate
         && isAssistedTaggingAccessible
         && frameworkDetails?.assistedTaggingEnabled
@@ -550,19 +582,41 @@ function LeftPane(props: Props) {
                         retainMount="lazy"
                     >
                         <>
-                            <Button
-                                className={styles.autoEntriesButton}
-                                name={undefined}
-                                title={!isAutoExtractionCompatible
-                                    ? 'Ooops. Looks like this source does not support Auto extraction at the moment. Please try it with a new source.'
-                                    : 'Extract entries for this source'}
-                                onClick={showAutoEntriesModal}
-                                variant="nlp-tertiary"
-                                spacing="compact"
-                                disabled={!isAutoExtractionCompatible}
-                            >
-                                NLP Extract and Classify
-                            </Button>
+                            <div className={styles.simplifiedHeader}>
+                                <Button
+                                    className={styles.autoEntriesButton}
+                                    name={undefined}
+                                    title={!isAutoExtractionCompatible
+                                        ? 'Ooops. Looks like this source does not support Auto extraction at the moment. Please try it with a new source.'
+                                        : 'Extract entries for this source'}
+                                    onClick={showAutoEntriesModal}
+                                    variant="nlp-tertiary"
+                                    spacing="compact"
+                                    disabled={!isAutoExtractionCompatible}
+                                >
+                                    NLP Extract and Classify
+                                </Button>
+                                <div className={styles.actions}>
+                                    <QuickActionButton
+                                        name={undefined}
+                                        className={styles.zoom}
+                                        variant="general"
+                                        onClick={handleTextZoomOut}
+                                        disabled={isNotDefined(textZoomValue) || textZoomValue <= 1}
+                                    >
+                                        <MdOutlineZoomOut />
+                                    </QuickActionButton>
+                                    <QuickActionButton
+                                        name={undefined}
+                                        className={styles.zoom}
+                                        variant="general"
+                                        onClick={handleTextZoomIn}
+                                        disabled={isNotDefined(textZoomValue) || textZoomValue >= 5}
+                                    >
+                                        <MdOutlineZoomIn />
+                                    </QuickActionButton>
+                                </div>
+                            </div>
                             {(leadPreview?.textExtract?.length ?? 0) > 0 ? (
                                 <SimplifiedTextView
                                     className={styles.simplifiedTextView}
@@ -583,6 +637,7 @@ function LeftPane(props: Props) {
                                     assistedTaggingEnabled={!!assistedTaggingShown}
                                     frameworkDetails={frameworkDetails}
                                     leadId={leadId}
+                                    textZoomValue={textZoomValue}
                                 />
                             ) : (
                                 <Message
diff --git a/app/views/EntryEdit/LeftPane/styles.css b/app/views/EntryEdit/LeftPane/styles.css
index 0fe8788925..05f48d5c98 100644
--- a/app/views/EntryEdit/LeftPane/styles.css
+++ b/app/views/EntryEdit/LeftPane/styles.css
@@ -33,8 +33,22 @@
         overflow: auto;
         gap: var(--dui-spacing-medium);
 
-        .auto-entries-button {
-            flex-shrink: 0;
+        .simplified-header {
+            display: flex;
+            justify-content: space-between;
+            gap: var(--dui-spacing-large);
+
+            .auto-entries-button {
+                flex-shrink: 0;
+            }
+            .actions {
+                display: flex;
+                gap: var(--dui-spacing-extra-small);
+
+                .zoom {
+                    border-radius: unset;
+                }
+            }
         }
 
         .switch {

From 7779d3147515db94ec035044e03b7bcc2d9cbcc9 Mon Sep 17 00:00:00 2001
From: Subina <subina@togglecorp.com>
Date: Thu, 28 Dec 2023 11:26:00 +0545
Subject: [PATCH 2/2] Use adders to change the font size of simplified texts

---
 .../LeftPane/SimplifiedTextView/index.tsx     |  6 +++--
 .../LeftPane/SimplifiedTextView/styles.css    | 23 +++++++++++++------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/app/views/EntryEdit/LeftPane/SimplifiedTextView/index.tsx b/app/views/EntryEdit/LeftPane/SimplifiedTextView/index.tsx
index a3ff8bb538..cae0fc88c8 100644
--- a/app/views/EntryEdit/LeftPane/SimplifiedTextView/index.tsx
+++ b/app/views/EntryEdit/LeftPane/SimplifiedTextView/index.tsx
@@ -332,11 +332,13 @@ function SimplifiedTextView(props: Props) {
         >
             <div className={_cs(
                 styles.simplifiedText,
-                textZoomValue === 1 && styles.extraSmall,
+                textZoomValue === 1 && styles.xSmall,
                 textZoomValue === 2 && styles.small,
                 textZoomValue === 3 && styles.medium,
                 textZoomValue === 4 && styles.large,
-                textZoomValue === 5 && styles.extraLarge,
+                textZoomValue === 5 && styles.xLarge,
+                textZoomValue === 6 && styles.xxLarge,
+                textZoomValue === 7 && styles.xxxLarge,
             )}
             >
                 {children}
diff --git a/app/views/EntryEdit/LeftPane/SimplifiedTextView/styles.css b/app/views/EntryEdit/LeftPane/SimplifiedTextView/styles.css
index f56f54383a..81e4f71564 100644
--- a/app/views/EntryEdit/LeftPane/SimplifiedTextView/styles.css
+++ b/app/views/EntryEdit/LeftPane/SimplifiedTextView/styles.css
@@ -14,20 +14,29 @@
 
     .simplified-text {
         line-height: 1.5;
-        &.extra-small{
-            font-size: var(--dui-font-size-extra-small);
+        --base-font-size: var(--dui-font-size-medium);
+        --diff: 2px;
+
+        &.x-small{
+            font-size: var(--base-font-size);
         }
         &.small{
-            font-size: var(--dui-font-size-small);
+            font-size: calc(var(--base-font-size) + var(--diff));
         }
         &.medium{
-            font-size: var(--dui-font-size-medium);
+            font-size: calc(var(--base-font-size) + 2 * var(--diff));
         }
         &.large{
-            font-size: var(--dui-font-size-large);
+            font-size: calc(var(--base-font-size) + 3 * var(--diff));
+        }
+        &.x-large{
+            font-size: calc(var(--base-font-size) + 4 * var(--diff));
+        }
+        &.xx-large{
+            font-size: calc(var(--base-font-size) + 5 * var(--diff));
         }
-        &.extra-large{
-            font-size: var(--dui-font-size-extra-large);
+        &.xxx-large{
+            font-size: calc(var(--base-font-size) + 6 * var(--diff));
         }
     }