TW-1550 Refactoring according to comments

madfish-solutions · Nov 4, 2024 · c4999f1 · c4999f1
1 parent ecc23d8
commit c4999f1
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 32 deletions.
diff --git a/src/app/atoms/Lines.tsx b/src/app/atoms/Lines.tsx
@@ -5,40 +5,42 @@ import clsx from 'clsx';
 import { T } from 'lib/i18n';
 
 type LinesType = 'line' | 'divider' | 'or';
-type Orientation = 'horizontal' | 'vertical';
 
 interface LinesProps {
   type?: LinesType;
   className?: string;
   style?: React.CSSProperties;
-  orientation?: Orientation;
 }
 
-export const Lines = memo<LinesProps>(({ type = 'divider', className, orientation = 'horizontal', style }) => {
-  const isHorizontal = orientation === 'horizontal';
-  const isLine = type === 'line';
-
-  return (
-    <div
-      className={clsx('flex items-center gap-2', isHorizontal ? 'w-auto' : 'h-auto flex-col', className)}
-      style={style}
-    >
-      <div
-        className={clsx('flex-1 border-lines', {
-          'border-b-0.5': isLine && isHorizontal,
-          'border-b': !isLine && isHorizontal,
-          'border-r-0.5': isLine && !isHorizontal,
-          'border-r': !isLine && !isHorizontal
-        })}
-      />
-      {type === 'or' && (
-        <>
-          <span className="text-font-small text-grey-3 font-semibold">
-            <T id="or" />
-          </span>
-          <div className="flex-1 border-b border-lines" />
-        </>
-      )}
-    </div>
-  );
-});
+const COMMON_CONTAINER_CLASS_NAME = 'flex items-center gap-2';
+const COMMON_LINE_CLASS_NAME = 'flex-1 border-lines';
+
+export const Lines = memo<LinesProps>(({ type = 'divider', className, style }) => (
+  <div className={clsx('w-auto', COMMON_CONTAINER_CLASS_NAME, className)} style={style}>
+    <div className={clsx(COMMON_LINE_CLASS_NAME, type === 'line' ? 'border-b-0.5' : 'border-b')} />
+    {type === 'or' && (
+      <>
+        <OrLabel />
+        <div className={clsx(COMMON_LINE_CLASS_NAME, 'border-b')} />
+      </>
+    )}
+  </div>
+));
+
+export const VerticalLines = memo<LinesProps>(({ type = 'divider', className, style }) => (
+  <div className={clsx('h-auto flex-col', COMMON_CONTAINER_CLASS_NAME, className)} style={style}>
+    <div className={clsx(COMMON_LINE_CLASS_NAME, type === 'line' ? 'border-r-0.5' : 'border-r')} />
+    {type === 'or' && (
+      <>
+        <OrLabel />
+        <div className={clsx(COMMON_LINE_CLASS_NAME, 'border-r')} />
+      </>
+    )}
+  </div>
+));
+
+const OrLabel = memo(() => (
+  <span className="text-font-small text-grey-3 font-semibold">
+    <T id="or" />
+  </span>
+));
diff --git a/src/app/templates/About/About.tsx b/src/app/templates/About/About.tsx
@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 
-import { Lines } from 'app/atoms';
+import { VerticalLines } from 'app/atoms/Lines';
 import { Logo } from 'app/atoms/Logo';
 import { SettingsCell } from 'app/atoms/SettingsCell';
 import { SettingsCellGroup } from 'app/atoms/SettingsCellGroup';
@@ -111,7 +111,7 @@ export const About = memo(() => {
                 {/* `branch` is equal to `version` in releases */}
                 {branch && branch !== version && (
                   <>
-                    <Lines orientation="vertical" className="py-0.5" />
+                    <VerticalLines className="py-0.5" />
                     <span>
                       <T id="branchName" substitutions={branch} />
                     </span>