move the custom horizontal rule to styles.ts file

Author: dantovska

redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.styles.ts

@@ -0,0 +1,24 @@
+import styled from 'styled-components'
+
+export const CustomHorizontalRule = styled.div`
+  margin: 12px 0;
+  width: 100%;
+  text-align: center;
+  position: relative;
+
+  &:before,
+  &:after {
+    content: '';
+    display: block;
+    width: 47%;
+    height: 1px;
+    background: ${({ theme }: { theme: Theme }) =>
+      theme.semantic.color.background.neutral500};
+    position: absolute;
+    top: 50%;
+  }
+
+  &:after {
+    right: 0;
+  }
+`

redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx

@@ -3,8 +3,6 @@ import { useFormik } from 'formik'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router'
 import { toNumber } from 'lodash'
-import styled from 'styled-components'
-import { Theme } from '@redis-ui/styles'
 
 import { Nullable, parseRedisUrl } from 'uiSrc/utils'
 import { AddDbType, DEFAULT_TIMEOUT } from 'uiSrc/pages/home/constants'
@@ -27,29 +25,7 @@ import { RiTooltip } from 'uiSrc/components'
 import ConnectivityOptions from './components/connectivity-options'
 import ConnectionUrl from './components/connection-url'
 import { Values } from './constants'
-
-const CustomHorizontalRule = styled.div`
-  margin: 12px 0;
-  width: 100%;
-  text-align: center;
-  position: relative;
-
-  &:before,
-  &:after {
-    content: '';
-    display: block;
-    width: 47%;
-    height: 1px;
-    background: ${({ theme }: { theme: Theme }) =>
-    theme.semantic.color.background.neutral500};
-    position: absolute;
-    top: 50%;
-  }
-
-  &:after {
-    right: 0;
-  }
-`
+import { CustomHorizontalRule } from './AddDatabaseScreen.styles'
 
 export interface Props {
   onSelectOption: (type: AddDbType, db: Nullable<Record<string, any>>) => void