refactor: RequiredAsterisk, Shadow & Slideup (thenewboston-blockchain…

…#2095)

* RequiredAsterisk, Shadow & Slideup

src/components/RequiredAsterisk/RequiredAsterisk.test.tsx

@@ -15,13 +15,6 @@ describe('RequiredAsterisk', () => {
     expect(screen.getByText('*')).toBeTruthy();
   });
 
-  it('renders proper default className', () => {
-    render(<RequiredAsterisk />);
-    const asterisk = screen.getByTestId('RequiredAsterisk');
-
-    expect(asterisk.className).toBe('RequiredAsterisk');
-  });
-
   it('renders with passed in className', () => {
     render(<RequiredAsterisk className="test" />);
     const asterisk = screen.getByTestId('RequiredAsterisk');

src/components/RequiredAsterisk/Style.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+import colors from 'styles/colors';
+
+export const RequiredAsterisk = styled.span`
+  color: ${colors.alert};
+  margin-left: 3px;
+`;

src/components/RequiredAsterisk/index.tsx

@@ -1,14 +1,12 @@
 import React, {memo} from 'react';
-import clsx from 'clsx';
 import {SFC} from 'types/generic';
-
-import './RequiredAsterisk.scss';
+import * as S from './Style';
 
 const RequiredAsterisk: SFC = ({className}) => {
   return (
-    <span data-testid="RequiredAsterisk" className={clsx('RequiredAsterisk', className)}>
+    <S.RequiredAsterisk data-testid="RequiredAsterisk" className={className}>
       *
-    </span>
+    </S.RequiredAsterisk>
   );
 };
 

src/components/Shadow/Style.ts

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import colors from 'styles/colors';
+
+export const Shadow = styled.div`
+  background: ${colors.palette.gray['005']};
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
+  height: 1px;
+  width: 100vw;
+`;

src/components/Shadow/index.tsx

@@ -1,9 +1,7 @@
 import React from 'react';
-import clsx from 'clsx';
 import {SFC} from 'types/generic';
+import * as S from './Style';
 
-import './Shadow.scss';
-
-const Shadow: SFC = ({className}) => <div className={clsx('Shadow', className)} />;
+const Shadow: SFC = ({className}) => <S.Shadow className={className} />;
 
 export default Shadow;

src/components/SlideUp/Style.ts

@@ -0,0 +1,36 @@
+import styled, {keyframes} from 'styled-components';
+import zIndex from 'styles/zIndex';
+import colors from 'styles/colors';
+
+export const SlideUp = styled.div`
+  bottom: 0;
+  position: absolute;
+  width: 100vw;
+  z-index: ${zIndex.slideup};
+`;
+
+export const SlideUpContent = styled.div`
+  background: ${colors.white};
+  box-shadow: 0px -3px 12px rgba(4, 34, 53, 0.25);
+  padding: 24px 30px 40px;
+`;
+
+const addOverlay = keyframes`
+    from {
+        background: rgba(0, 0, 0, 0);
+    }
+    to {
+        background: rgba(0, 0, 0, 0.3);
+    }
+}
+`;
+
+export const SlideUpOverlay = styled.div`
+  animation: ${addOverlay} 0.3s forwards;
+  height: 100vh;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  z-index: ${zIndex.slideupOverlay};
+`;

src/components/SlideUp/index.tsx

@@ -3,8 +3,7 @@ import {createPortal} from 'react-dom';
 import clsx from 'clsx';
 import {SFC} from 'types/generic';
 import {bemify} from '@thenewboston/utils';
-
-import './SlideUp.scss';
+import * as S from './Style';
 
 interface ComponentProps {
   close(): void;
@@ -13,12 +12,18 @@ interface ComponentProps {
 const SlideUp: SFC<ComponentProps> = ({children, className, close}) => {
   return createPortal(
     <>
-      <div className="SlideUp__overlay" onClick={close} role="button" tabIndex={0} data-testid="SlideUp__overlay" />
-      <div className={clsx('SlideUp', className)} data-testid="SlideUp">
-        <div className={clsx('SlideUp__content', {...bemify(className, '__content')})} data-testid="SlideUp__content">
+      <S.SlideUpOverlay
+        className={`${className}"__overlay"`}
+        onClick={close}
+        role="button"
+        tabIndex={0}
+        data-testid="SlideUp__overlay"
+      />
+      <S.SlideUp className={className} data-testid="SlideUp">
+        <S.SlideUpContent className={clsx({...bemify(className, '__content')})} data-testid="SlideUp__content">
           {children}
-        </div>
-      </div>
+        </S.SlideUpContent>
+      </S.SlideUp>
     </>,
     document.getElementById('slide-up-root')!,
   );

src/styles/colors/index.ts

@@ -28,6 +28,7 @@ const colors = {
       '900': '#1a2936',
     },
     gray: {
+      '005': '#ededed',
       '050': '#f7fafc',
       '075': '#eef2f6',
       '100': '#e3e8ee',