From 9d5057fa34831ae45be5573ea2cc997f34fd07e2 Mon Sep 17 00:00:00 2001
From: abhijithvijayan <34790378+abhijithvijayan@users.noreply.github.com>
Date: Mon, 6 Jul 2020 03:43:56 +0530
Subject: [PATCH] refactor: delete unwanted files

---
 source/Options/OptionsForm.tsx                |  18 +-
 source/Popup/Form.tsx                         |  31 ++-
 source/Popup/Popup.tsx                        |  12 +-
 source/Popup/ResponseBody.tsx                 |   3 +-
 source/Popup/index.tsx                        |   4 -
 source/Popup/refactor/Header.tsx              | 142 ----------
 source/Popup/refactor/Popup.tsx               | 249 ------------------
 source/Popup/refactor/PopupBody.tsx           |  77 ------
 source/Popup/refactor/PopupForm.tsx           | 191 --------------
 source/Popup/refactor/styles.scss             | 136 ----------
 .../index.tsx => BodyWrapper.tsx}             |   0
 source/components/Input/index.tsx             | 102 -------
 source/components/Input/styles.scss           |  74 ------
 source/components/Loader.tsx                  |  25 ++
 source/components/Loader/index.tsx            |  14 -
 source/components/Loader/styles.scss          |  10 -
 source/styles/base/_components.scss           |  53 ++++
 17 files changed, 124 insertions(+), 1017 deletions(-)
 delete mode 100644 source/Popup/refactor/Header.tsx
 delete mode 100644 source/Popup/refactor/Popup.tsx
 delete mode 100644 source/Popup/refactor/PopupBody.tsx
 delete mode 100644 source/Popup/refactor/PopupForm.tsx
 delete mode 100644 source/Popup/refactor/styles.scss
 rename source/components/{BodyWrapper/index.tsx => BodyWrapper.tsx} (100%)
 delete mode 100644 source/components/Input/index.tsx
 delete mode 100644 source/components/Input/styles.scss
 create mode 100644 source/components/Loader.tsx
 delete mode 100644 source/components/Loader/index.tsx
 delete mode 100644 source/components/Loader/styles.scss

diff --git a/source/Options/OptionsForm.tsx b/source/Options/OptionsForm.tsx
index 61f98c3..b2ecff3 100644
--- a/source/Options/OptionsForm.tsx
+++ b/source/Options/OptionsForm.tsx
@@ -2,7 +2,7 @@ import React, {useEffect} from 'react';
 import 'twin.macro';
 import {
   withFormik,
-  Field,
+  // Field,
   Form,
   FormikBag,
   FormikProps,
@@ -20,7 +20,7 @@ import {isValidUrl} from '../util/tabs';
 import messageUtil from '../util/mesageUtil';
 import {ExtensionConfigProperties} from './Options';
 import {CHECK_API_KEY} from '../Background/constants';
-import {TextField, CheckBox} from '../components/Input';
+// import {TextField, CheckBox} from '../components/Input';
 import {updateExtensionSettings} from '../util/settings';
 
 export type OptionsFormValuesProperties = {
@@ -67,12 +67,12 @@ const InnerForm: React.FC<FormikProps<OptionsFormValuesProperties>> = (
   return (
     <Form onSubmit={handleSubmit} autoComplete="off" id="options__form">
       <div>
-        <Field
+        {/* <Field
           name="apikey"
           type="password"
           component={TextField}
           label="API Key"
-        />
+        /> */}
         <button
           tw="bg-white text-gray-800 font-bold rounded border-b-2 border-green-500 hover:border-green-600 hover:bg-green-500 hover:text-white shadow-md py-2 px-6 inline-flex items-center"
           type="submit"
@@ -92,23 +92,23 @@ const InnerForm: React.FC<FormikProps<OptionsFormValuesProperties>> = (
         </button>
       </div>
 
-      <Field name="history" component={CheckBox} label="Keep URLs History" />
+      {/* <Field name="history" component={CheckBox} label="Keep URLs History" /> */}
 
       <div>
-        <Field
+        {/* <Field
           name="advanced"
           component={CheckBox}
           label="Show advanced options"
-        />
+        /> */}
         <div>
-          {values.advanced && (
+          {/* {values.advanced && (
             <Field
               name="customhost"
               type="text"
               component={TextField}
               label="Custom Host"
             />
-          )}
+          )} */}
         </div>
       </div>
     </Form>
diff --git a/source/Popup/Form.tsx b/source/Popup/Form.tsx
index 5c5b1b2..0463608 100644
--- a/source/Popup/Form.tsx
+++ b/source/Popup/Form.tsx
@@ -1,5 +1,5 @@
 import {useFormState} from 'react-use-form-state';
-import tw from 'twin.macro';
+import tw, {css} from 'twin.macro';
 import React from 'react';
 
 import {useExtensionSettings} from '../contexts/extension-settings-context';
@@ -102,11 +102,18 @@ const Form: React.FC<Props> = ({handleFormSubmit}) => {
           <div tw="relative">
             <select
               {...selectProps('domain')}
-              tw="sm:text-base focus:border-indigo-400 focus:outline-none relative w-full px-2 py-2 text-sm placeholder-gray-400 border rounded"
+              css={[
+                tw`sm:text-base focus:border-indigo-400 focus:outline-none relative w-full px-2 py-2 text-sm placeholder-gray-400 bg-gray-200 border rounded`,
+              ]}
             >
               {domainOptions.map(({id, option, value, disabled = false}) => {
                 return (
-                  <option value={value} disabled={disabled} key={id}>
+                  <option
+                    tw="bg-gray-200 "
+                    value={value}
+                    disabled={disabled}
+                    key={id}
+                  >
                     {option}
                   </option>
                 );
@@ -134,7 +141,8 @@ const Form: React.FC<Props> = ({handleFormSubmit}) => {
               }}
               spellCheck="false"
               css={[
-                tw`sm:text-base focus:border-indigo-400 focus:outline-none relative w-full py-2 pl-2 pr-12 text-sm placeholder-gray-400 border rounded`,
+                tw`sm:text-base focus:border-indigo-400 focus:outline-none relative w-full py-2 pl-2 pr-12 text-sm placeholder-gray-400 bg-gray-200 border rounded`,
+
                 formStateValidity.customurl !== undefined &&
                   !formStateValidity.customurl &&
                   tw`border-red-500`,
@@ -185,7 +193,8 @@ const Form: React.FC<Props> = ({handleFormSubmit}) => {
                 handlePasswordInputChange(value.trim());
               }}
               css={[
-                tw`sm:text-base focus:border-indigo-400 focus:outline-none relative w-full py-2 pl-2 pr-12 text-sm placeholder-gray-400 border rounded`,
+                tw`sm:text-base focus:border-indigo-400 focus:outline-none relative w-full py-2 pl-2 pr-12 text-sm placeholder-gray-400 bg-gray-200 border rounded`,
+
                 formStateValidity.password !== undefined &&
                   !formStateValidity.password &&
                   tw`border-red-500`,
@@ -204,7 +213,17 @@ const Form: React.FC<Props> = ({handleFormSubmit}) => {
           onClick={(): void => {
             handleFormSubmit(formState.values);
           }}
-          tw="block w-full px-2 py-2 mt-4 mb-1 text-base font-semibold text-white bg-purple-700 rounded"
+          css={[
+            tw`block w-full px-2 py-2 mb-1 text-xs font-semibold text-white bg-purple-700 rounded`,
+
+            css`
+              background: linear-gradient(
+                to right,
+                rgb(126, 87, 194),
+                rgb(98, 0, 234)
+              );
+            `,
+          ]}
         >
           Create
         </button>
diff --git a/source/Popup/Popup.tsx b/source/Popup/Popup.tsx
index c13836d..504ce8e 100644
--- a/source/Popup/Popup.tsx
+++ b/source/Popup/Popup.tsx
@@ -1,4 +1,5 @@
 import React, {useEffect} from 'react';
+import tw, {css} from 'twin.macro';
 
 import {openExtOptionsPage, getCurrentTab, isValidUrl} from '../util/tabs';
 import {
@@ -311,7 +312,16 @@ const Popup: React.FC = () => {
 
   return (
     <BodyWrapper>
-      <div id="popup">
+      <div
+        id="popup"
+        css={[
+          tw`text-lg`,
+          css`
+            min-height: 350px;
+            min-width: 250px;
+          `,
+        ]}
+      >
         {!requestStatusState.loading ? (
           <>
             <PopupHeader />
diff --git a/source/Popup/ResponseBody.tsx b/source/Popup/ResponseBody.tsx
index 94d46ee..db47966 100644
--- a/source/Popup/ResponseBody.tsx
+++ b/source/Popup/ResponseBody.tsx
@@ -14,11 +14,10 @@ export type ProcessedRequestProperties = {
 
 const StyledH1 = styled.h1`
   border-bottom: 1px dotted ${({theme}): string => theme.statsTotalUnderline};
-  font-size: 1.602em;
   padding-bottom: 2px;
   color: rgb(41, 71, 86);
 
-  ${tw`hover:opacity-75 min-w-0 m-0 font-light cursor-pointer`}
+  ${tw`hover:opacity-75 min-w-0 m-0 text-2xl font-light cursor-pointer`}
 `;
 
 const StyledPopupBody = styled.div`
diff --git a/source/Popup/index.tsx b/source/Popup/index.tsx
index bac9172..fea4db5 100644
--- a/source/Popup/index.tsx
+++ b/source/Popup/index.tsx
@@ -4,12 +4,9 @@ import ReactDOM from 'react-dom';
 
 // Common styles
 import '../styles/main.scss';
-// ToDo: remove later
-import './refactor/styles.scss';
 
 import {ExtensionSettingsProvider} from '../contexts/extension-settings-context';
 import {RequestStatusProvider} from '../contexts/request-status-context';
-// import OtherPopup from './refactor/Popup';
 import Popup from './Popup';
 
 // eslint-disable-next-line import/no-webpack-loader-syntax, import/no-unresolved,  @typescript-eslint/no-var-requires, node/no-missing-require
@@ -21,7 +18,6 @@ ReactDOM.render(
     <ExtensionSettingsProvider>
       <RequestStatusProvider>
         <Popup />
-        {/* <OtherPopup /> */}
       </RequestStatusProvider>
     </ExtensionSettingsProvider>
   </ThemeProvider>,
diff --git a/source/Popup/refactor/Header.tsx b/source/Popup/refactor/Header.tsx
deleted file mode 100644
index 82a90b3..0000000
--- a/source/Popup/refactor/Header.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import React, {useState} from 'react';
-import 'twin.macro';
-
-import Icon from '../../components/Icon';
-import messageUtil from '../../util/mesageUtil';
-import {openExtOptionsPage} from '../../util/tabs';
-import {CHECK_API_KEY} from '../../Background/constants';
-import {updateExtensionSettings} from '../../util/settings';
-import {
-  SuccessfulApiKeyCheckProperties,
-  ApiErroredProperties,
-  GetUserSettingsBodyProperties,
-} from '../../Background';
-import {UserConfigProperties, SetPageReloadFlagProperties} from './Popup';
-
-type SetLoadingProperties = React.Dispatch<React.SetStateAction<boolean>>;
-
-type ErrorProperties = {
-  error: boolean | null;
-  message: string;
-};
-
-type SetErroredProperties = React.Dispatch<
-  React.SetStateAction<ErrorProperties>
->;
-
-async function fetchUserDomains({
-  userConfig: {
-    apikey,
-    host: {hostUrl},
-  },
-  setLoading,
-  setErrored,
-  pageReloadFlag,
-  setPageReloadFlag,
-}: {
-  userConfig: UserConfigProperties;
-  setLoading: SetLoadingProperties;
-  setErrored: SetErroredProperties;
-  pageReloadFlag: boolean;
-  setPageReloadFlag: SetPageReloadFlagProperties;
-}): Promise<void> {
-  // show loading spinner
-  setLoading(true);
-
-  const apiKeyValidationBody: GetUserSettingsBodyProperties = {
-    apikey,
-    hostUrl,
-  };
-  // request API
-  const response:
-    | SuccessfulApiKeyCheckProperties
-    | ApiErroredProperties = await messageUtil.send(
-    CHECK_API_KEY,
-    apiKeyValidationBody
-  );
-
-  // stop spinner
-  setLoading(false);
-
-  if (!response.error) {
-    // ---- success ---- //
-    setErrored({error: false, message: 'Fetching domains successful'});
-
-    // Store user account information
-    const {domains, email} = response.data;
-    await updateExtensionSettings({user: {domains, email}});
-  } else {
-    // ---- errored ---- //
-    setErrored({error: true, message: response.message});
-
-    // Delete `user` field from settings
-    await updateExtensionSettings({user: null});
-  }
-
-  // reload page
-  setPageReloadFlag(!pageReloadFlag);
-
-  setTimeout(() => {
-    // Reset status
-    setErrored({error: null, message: ''});
-  }, 1000);
-}
-
-type HeaderProperties = {
-  userConfig: UserConfigProperties;
-  pageReloadFlag: boolean;
-  setPageReloadFlag: SetPageReloadFlagProperties;
-};
-
-const Header: React.FC<HeaderProperties> = ({
-  userConfig,
-  pageReloadFlag,
-  setPageReloadFlag,
-}) => {
-  const [loading, setLoading] = useState<boolean>(false);
-  const [errored, setErrored] = useState<ErrorProperties>({
-    error: null,
-    message: '',
-  });
-
-  return (
-    <>
-      <header id="header" tw="p-4">
-        <div className="logo__holder">
-          <img src="assets/logo.png" alt="logo" />
-        </div>
-        <div className="action__buttons--holder">
-          <Icon
-            className="icon refresh__icon"
-            title="Refresh"
-            name={
-              // eslint-disable-next-line no-nested-ternary
-              loading
-                ? 'spinner'
-                : errored && errored.error !== null
-                ? (errored && !errored.error && 'tick') || 'cross'
-                : 'refresh'
-            }
-            onClick={(): Promise<void> => {
-              return fetchUserDomains({
-                userConfig,
-                setLoading,
-                setErrored,
-                pageReloadFlag,
-                setPageReloadFlag,
-              });
-            }}
-          />
-          <Icon
-            className="icon settings__icon"
-            name="settings"
-            title="Settings"
-            onClick={openExtOptionsPage}
-          />
-        </div>
-      </header>
-    </>
-  );
-};
-
-export default Header;
diff --git a/source/Popup/refactor/Popup.tsx b/source/Popup/refactor/Popup.tsx
deleted file mode 100644
index 48ba252..0000000
--- a/source/Popup/refactor/Popup.tsx
+++ /dev/null
@@ -1,249 +0,0 @@
-import React, {useEffect, useState} from 'react';
-
-import PopupBody, {ProcessedRequestProperties} from './PopupBody';
-import {Kutt, UserSettingsResponseProperties} from '../../Background';
-import {
-  getExtensionSettings,
-  migrateSettings,
-  getPreviousSettings,
-} from '../../util/settings';
-import BodyWrapper from '../../components/BodyWrapper';
-import Loader from '../../components/Loader';
-import PopupForm from './PopupForm';
-import PopupHeader from './Header';
-
-import {openExtOptionsPage, isValidUrl} from '../../util/tabs';
-
-type HostProperties = {
-  hostDomain: string;
-  hostUrl: string;
-};
-
-type DomainOptionsProperties = {
-  option: string;
-  value: string;
-  id: string;
-  disabled: boolean;
-};
-
-export type ProcessRequestProperties = React.Dispatch<
-  React.SetStateAction<{
-    error: boolean | null;
-    message: string;
-  }>
->;
-
-export type UserConfigProperties = {
-  apikey: string;
-  domainOptions: DomainOptionsProperties[];
-  host: HostProperties;
-};
-
-export type SetPageReloadFlagProperties = React.Dispatch<
-  React.SetStateAction<boolean>
->;
-
-const Popup: React.FC = () => {
-  const [loading, setLoading] = useState<boolean>(true);
-  const [pageReloadFlag, setPageReloadFlag] = useState<boolean>(false);
-  const [userConfig, setUserConfig] = useState<UserConfigProperties>({
-    apikey: '',
-    domainOptions: [],
-    host: Kutt,
-  });
-  const [requestProcessed, setRequestProcessed] = useState<
-    ProcessedRequestProperties
-  >({error: null, message: ''});
-
-  // re-renders on `pageReloadFlag` change
-  useEffect((): void => {
-    async function getUserSettings(): Promise<void> {
-      // -----------------------------------------------------------------------------//
-      // -----------------------------------------------------------------------------//
-      // -----            // ToDo: remove in next major release //              ----- //
-      // ----- Ref: https://github.com/abhijithvijayan/kutt-extension/issues/78 ----- //
-      // -----------------------------------------------------------------------------//
-      // -----------------------------------------------------------------------------//
-
-      const {
-        // old keys from extension v3.x.x
-        key = '',
-        host = '',
-        userOptions = {
-          autoCopy: false,
-          devMode: false,
-          keepHistory: false,
-          pwdForUrls: false,
-        },
-      } = await getPreviousSettings();
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const migrationSettings: any = {};
-      let performMigration = false;
-
-      if (key.trim().length > 0) {
-        // map it to `settings.apikey`
-        migrationSettings.apikey = key;
-        performMigration = true;
-      }
-      if (host.trim().length > 0 && userOptions.devMode) {
-        // map `host` to `settings.customhost`
-        migrationSettings.customhost = host;
-        // set `advanced` to true
-        migrationSettings.advanced = true;
-        performMigration = true;
-      }
-      if (userOptions.keepHistory) {
-        // set `settings.history` to true
-        migrationSettings.history = true;
-        performMigration = true;
-      }
-      if (performMigration) {
-        // perform migration
-        await migrateSettings(migrationSettings);
-      }
-
-      // -----------------------------------------------------------------------------//
-      // -----------------------------------------------------------------------------//
-      // -----------------------------------------------------------------------------//
-      // -----------------------------------------------------------------------------//
-      // -----------------------------------------------------------------------------//
-      // -----------------------------------------------------------------------------//
-
-      // ToDo: set types: refer https://kutt.it/jITyIU
-      const {settings = {}} = await getExtensionSettings();
-
-      // No API Key set
-      if (
-        !Object.prototype.hasOwnProperty.call(settings, 'apikey') ||
-        settings.apikey === ''
-      ) {
-        setRequestProcessed({
-          error: true,
-          message: 'Extension requires an API Key to work',
-        });
-        setLoading(false);
-
-        // Open options page
-        setTimeout(() => {
-          return openExtOptionsPage();
-        }, 1300);
-
-        return;
-      }
-
-      let defaultHost: HostProperties = Kutt;
-
-      // If `advanced` field is true
-      if (
-        Object.prototype.hasOwnProperty.call(settings, 'advanced') &&
-        settings.advanced
-      ) {
-        // If `customhost` field is set
-        if (
-          Object.prototype.hasOwnProperty.call(settings, 'customhost') &&
-          settings.customhost.trim().length > 0 &&
-          isValidUrl(settings.customhost)
-        ) {
-          defaultHost = {
-            hostDomain: settings.customhost
-              .replace('http://', '')
-              .replace('https://', '')
-              .replace('www.', '')
-              .split(/[/?#]/)[0], // extract domain
-            hostUrl: settings.customhost.endsWith('/')
-              ? settings.customhost.slice(0, -1)
-              : settings.customhost, // slice `/` at the end
-          };
-        }
-      }
-
-      // options menu
-      const defaultOptions: DomainOptionsProperties[] = [
-        {
-          id: '',
-          option: '-- Choose Domain --',
-          value: '',
-          disabled: true,
-        },
-        {
-          id: 'default',
-          option: defaultHost.hostDomain,
-          value: defaultHost.hostUrl,
-          disabled: false,
-        },
-      ];
-
-      // `user` & `apikey` fields exist on storage
-      if (
-        Object.prototype.hasOwnProperty.call(settings, 'user') &&
-        settings.user
-      ) {
-        const {user}: {user: UserSettingsResponseProperties} = settings;
-
-        let optionsArray: DomainOptionsProperties[] = user.domains.map(
-          ({id, address, homepage, banned}) => {
-            return {
-              id,
-              option: homepage,
-              value: address,
-              disabled: banned,
-            };
-          }
-        );
-
-        // merge to beginning of array
-        optionsArray = defaultOptions.concat(optionsArray);
-
-        // update domain list
-        setUserConfig({
-          apikey: settings.apikey.trim(),
-          domainOptions: optionsArray,
-          host: defaultHost,
-        });
-      } else {
-        // no `user` but `apikey` exist on storage
-        setUserConfig({
-          apikey: settings.apikey.trim(),
-          domainOptions: defaultOptions,
-          host: defaultHost,
-        });
-      }
-
-      setLoading(false);
-    }
-
-    getUserSettings();
-  }, [pageReloadFlag]);
-
-  return (
-    <BodyWrapper>
-      <div id="popup">
-        {!loading ? (
-          <>
-            <PopupHeader
-              userConfig={userConfig}
-              pageReloadFlag={pageReloadFlag}
-              setPageReloadFlag={setPageReloadFlag}
-            />
-
-            {requestProcessed.error !== null && (
-              <PopupBody requestProcessed={requestProcessed} />
-            )}
-
-            <PopupForm
-              defaultDomainId="default"
-              userConfig={userConfig}
-              setLoading={setLoading}
-              setRequestProcessed={setRequestProcessed}
-            />
-          </>
-        ) : (
-          <Loader />
-        )}
-      </div>
-    </BodyWrapper>
-  );
-};
-
-export default Popup;
diff --git a/source/Popup/refactor/PopupBody.tsx b/source/Popup/refactor/PopupBody.tsx
deleted file mode 100644
index a39e5c3..0000000
--- a/source/Popup/refactor/PopupBody.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React, {useState, useEffect} from 'react';
-import CopyToClipboard from 'react-copy-to-clipboard';
-import QRCode from 'qrcode.react';
-
-import Icon from '../../components/Icon';
-import {removeProtocol} from '../../util/link';
-
-export type ProcessedRequestProperties = {
-  error: boolean | null;
-  message: string;
-};
-
-type PopupBodyProperties = {
-  requestProcessed: ProcessedRequestProperties;
-};
-
-const PopupBody: React.FC<PopupBodyProperties> = ({
-  requestProcessed: {message, error},
-}) => {
-  const [copied, setCopied] = useState<boolean>(false);
-  const [QRView, setQRView] = useState<boolean>(false);
-
-  // reset copy message
-  useEffect(() => {
-    setTimeout(() => {
-      setCopied(false);
-    }, 1300);
-  }, [copied]);
-
-  return (
-    <>
-      <div className="popup__body">
-        {!error ? (
-          <>
-            <Icon
-              className="icon qr__icon"
-              name="qrcode"
-              onClick={(): void => {
-                return setQRView(!QRView);
-              }}
-            />
-            {!copied ? (
-              <CopyToClipboard
-                text={message}
-                onCopy={(): void => {
-                  return setCopied(true);
-                }}
-              >
-                <Icon className="icon copy__icon" name="copy" />
-              </CopyToClipboard>
-            ) : (
-              <Icon className="icon check__icon" name="tick" />
-            )}
-            <CopyToClipboard
-              text={message}
-              onCopy={(): void => {
-                return setCopied(true);
-              }}
-            >
-              <h1 className="link">{removeProtocol(message)}</h1>
-            </CopyToClipboard>
-          </>
-        ) : (
-          <p>{message}</p>
-        )}
-      </div>
-
-      {!error && QRView && (
-        <div className="qr__holder">
-          <QRCode size={128} value={message} />
-        </div>
-      )}
-    </>
-  );
-};
-
-export default PopupBody;
diff --git a/source/Popup/refactor/PopupForm.tsx b/source/Popup/refactor/PopupForm.tsx
deleted file mode 100644
index 0bc3dfa..0000000
--- a/source/Popup/refactor/PopupForm.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-import React from 'react';
-import {
-  withFormik,
-  Field,
-  Form,
-  FormikBag,
-  FormikProps,
-  FormikErrors,
-} from 'formik';
-
-import {
-  ApiBodyProperties,
-  SuccessfulShortenStatusProperties,
-  ApiErroredProperties,
-  ShortUrlActionBodyProperties,
-} from '../../Background';
-import messageUtil from '../../util/mesageUtil';
-import {getCurrentTab, isValidUrl} from '../../util/tabs';
-import {SHORTEN_URL} from '../../Background/constants';
-import {SelectField, TextField} from '../../components/Input';
-import {ProcessRequestProperties, UserConfigProperties} from './Popup';
-
-type PopupFormValuesProperties = {
-  password: string;
-  customurl: string;
-  domain: string;
-};
-
-const InnerForm: React.FC<
-  PopupFormProperties & FormikProps<PopupFormValuesProperties>
-> = (props) => {
-  const {
-    isSubmitting,
-    handleSubmit,
-    userConfig: {
-      domainOptions,
-      host: {hostDomain},
-    },
-  } = props;
-
-  return (
-    <>
-      {!isSubmitting ? (
-        <Form
-          onSubmit={handleSubmit}
-          autoComplete="off"
-          className="popup__form"
-        >
-          <div>
-            <h4>Domain:</h4>
-            <Field
-              name="domain"
-              type="text"
-              component={SelectField}
-              options={domainOptions}
-            />
-          </div>
-          <div>
-            <h4>{hostDomain}/</h4>
-            <Field name="customurl" type="text" component={TextField} />
-          </div>
-          <div>
-            <h4>Password:</h4>
-            <Field name="password" type="password" component={TextField} />
-          </div>
-
-          <button type="submit" disabled={isSubmitting}>
-            Create
-          </button>
-        </Form>
-      ) : null}
-    </>
-  );
-};
-
-// The type of props `PopupForm` receives
-type PopupFormProperties = {
-  defaultDomainId: string;
-  userConfig: UserConfigProperties;
-  setLoading: React.Dispatch<React.SetStateAction<boolean>>;
-  setRequestProcessed: ProcessRequestProperties;
-};
-
-// Wrap our form with the withFormik HoC
-const PopupForm = withFormik<PopupFormProperties, PopupFormValuesProperties>({
-  // Transform outer props into default form values
-  mapPropsToValues: ({
-    defaultDomainId,
-    userConfig: {domainOptions},
-  }: PopupFormProperties): PopupFormValuesProperties => {
-    // find default item to select in options menu
-    const defaultItem = domainOptions.find(({id}) => {
-      return id === defaultDomainId;
-    });
-
-    return {
-      password: '',
-      customurl: '',
-      domain: defaultItem && defaultItem.value ? defaultItem.value.trim() : '', // empty string will map to disabled entry
-    };
-  },
-
-  // Custom sync validation
-  validate: (
-    values: PopupFormValuesProperties
-  ): FormikErrors<PopupFormValuesProperties> => {
-    const errors: FormikErrors<PopupFormValuesProperties> = {};
-    // ToDo: Remove special symbols from password & customurl fields
-
-    // password validation
-    if (values.password && values.password.trim().length < 3) {
-      errors.password = 'Password must be atleast 3 characters';
-    }
-    // custom url validation
-    if (values.customurl && values.customurl.trim().length < 3) {
-      errors.customurl = 'Custom URL must be atleast 3 characters';
-    }
-
-    return errors;
-  },
-
-  handleSubmit: async (
-    values: PopupFormValuesProperties,
-    {
-      props: {
-        setLoading,
-        setRequestProcessed,
-        userConfig: {
-          apikey,
-          host: {hostUrl},
-        },
-      },
-    }: FormikBag<PopupFormProperties, PopupFormValuesProperties>
-  ) => {
-    // enable loading screen
-    setLoading(true);
-
-    // Get target link to shorten
-    const tabs = await getCurrentTab();
-    const target: string | null = (tabs.length > 0 && tabs[0].url) || null;
-
-    if (!target || !isValidUrl(target)) {
-      setLoading(false);
-
-      return setRequestProcessed({error: true, message: 'Not a valid URL'});
-    }
-
-    const {customurl, password} = values;
-    const apiBody: ApiBodyProperties = {
-      apikey,
-      target,
-      ...(customurl.trim() !== '' && {customurl: customurl.trim()}), // add this key only if field is not empty
-      ...(password.trim() !== '' && {password: password.trim()}),
-      reuse: false,
-      // ToDo: restore when https://github.com/thedevs-network/kutt/issues/287 is resolved
-      // ...(domain.trim() !== '' && { domain: domain.trim() }),
-    };
-
-    const apiShortenUrlBody: ShortUrlActionBodyProperties = {
-      apiBody,
-      hostUrl,
-    };
-    // shorten url in the background
-    const response:
-      | SuccessfulShortenStatusProperties
-      | ApiErroredProperties = await messageUtil.send(
-      SHORTEN_URL,
-      apiShortenUrlBody
-    );
-
-    // disable spinner
-    setLoading(false);
-
-    if (!response.error) {
-      const {
-        data: {link},
-      } = response;
-      const trimmedLink: string = link.replace('https://', '');
-
-      // show shortened url
-      setRequestProcessed({error: false, message: trimmedLink});
-    } else {
-      // errored
-      setRequestProcessed({error: true, message: response.message});
-    }
-  },
-
-  displayName: 'PopupForm',
-})(InnerForm);
-
-export default PopupForm;
diff --git a/source/Popup/refactor/styles.scss b/source/Popup/refactor/styles.scss
deleted file mode 100644
index 721819c..0000000
--- a/source/Popup/refactor/styles.scss
+++ /dev/null
@@ -1,136 +0,0 @@
-@import "../../styles/base/fonts";
-@import "../../styles/base/reset";
-@import "../../styles/base/variables";
-@import "../../styles/base/components";
-
-body {
-  color: $black;
-}
-
-
-// #header {
-//   display: flex;
-//   justify-content: space-between;
-//   align-items: center;
-
-//   .logo__holder {
-//     img {
-//       width: 30px !important;
-//       height: 30px !important;
-//     }
-//   }
-
-//   .action__buttons--holder {
-//     display: flex;
-
-//     .icon {
-//       background-color: transparent;
-//       box-shadow: none;
-//       height: 35px;
-//       width: 35px;
-
-//       &:hover {
-//         opacity: 0.8;
-//       }
-//     }
-
-//     .refresh__icon {
-//       svg {
-//         stroke: rgb(187, 187, 187);
-//         stroke-width: 2.5;
-//       }
-//     }
-//   }
-
-//   .settings__icon {
-//     svg {
-//       fill: rgb(187, 187, 187);
-//       stroke: none;
-//     }
-//   }
-// }
-
-#popup {
-  min-height: 350px;
-  min-width: 250px;
-  font-size: 1.125em;
-
-  .popup__form {
-    padding: 15px 15px;
-
-    h4 {
-      padding: 10px 0px 5px 0px;
-      font-size: 0.9em;
-      font-weight: 500;
-      color: #294756;
-    }
-
-    button {
-      background: linear-gradient(to right, rgb(126, 87, 194), rgb(98, 0, 234));
-      margin-top: 15px;
-      margin-bottom: 5px;
-      width: 100%;
-      border-radius: 5px;
-      padding: 10px;
-      color: #fff;
-      cursor: pointer;
-    }
-
-    .error {
-      font-size: 11px;
-      padding: 2px 10px;
-    }
-  }
-
-  // .popup__body {
-  //   display: flex;
-  //   justify-content: center;
-  //   padding: 15px 15px 0px 15px;
-
-  //   p {
-  //     padding-top: 5px;
-  //     text-decoration: underline;
-  //     font-size: 1.2em;
-  //   }
-
-  //   .link {
-  //     border-bottom: 1px dotted $StatsTotalUnderline;
-  //     font-size: 1.602em;
-  //     cursor: pointer;
-  //     min-width: 0px;
-  //     padding-bottom: 2px;
-  //     color: rgb(41, 71, 86);
-  //     font-weight: 300;
-  //     margin: 0px;
-
-  //     &:hover {
-  //       opacity: 0.8;
-  //     }
-  //   }
-
-  //   .copy__icon,
-  //   .check__icon {
-  //     margin: 0px 16px 0px 0px;
-
-  //     svg {
-  //       stroke: rgb(101, 189, 137);
-  //       stroke-width: 2.5;
-  //     }
-  //   }
-
-  //   .qr__icon {
-  //     margin: 0px 8px 0px 0px;
-
-  //     svg {
-  //       fill: rgb(89, 89, 89);
-  //       stroke: none;
-  //     }
-  //   }
-  // }
-
-  // .qr__holder {
-  //   display: flex;
-  //   justify-content: center;
-  //   padding: 17px 15px 0px 15px;
-  // }
-}
\ No newline at end of file
diff --git a/source/components/BodyWrapper/index.tsx b/source/components/BodyWrapper.tsx
similarity index 100%
rename from source/components/BodyWrapper/index.tsx
rename to source/components/BodyWrapper.tsx
diff --git a/source/components/Input/index.tsx b/source/components/Input/index.tsx
deleted file mode 100644
index 50d5bfe..0000000
--- a/source/components/Input/index.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-/* eslint-disable no-nested-ternary */
-import React from 'react';
-import {FieldProps} from 'formik';
-
-import './styles.scss';
-
-type SelectFieldProperties = {
-  options: SelectFieldOptionPropeties[];
-  label: string;
-};
-
-type SelectFieldOptionPropeties = {
-  option: string;
-  value: string;
-  disabled?: boolean | undefined;
-};
-
-export const SelectField: React.FC<SelectFieldProperties & FieldProps> = ({
-  options,
-  label,
-  field,
-  form: {touched, errors},
-  ...props
-}) => {
-  return (
-    <>
-      <label htmlFor={field.name}>{label}</label>
-      <div style={{padding: '0px'}}>
-        <select {...field} {...props}>
-          {options.map(
-            (
-              {option, value, disabled = false}: SelectFieldOptionPropeties,
-              index: number
-            ) => {
-              return (
-                <option value={value} disabled={disabled} key={index}>
-                  {option}
-                </option>
-              );
-            }
-          )}
-        </select>
-      </div>
-
-      {touched[field.name] && errors[field.name] && (
-        <div className="error">{errors[field.name]}</div>
-      )}
-    </>
-  );
-};
-
-type TextFieldProperties = {
-  label: string;
-};
-
-export const TextField: React.FC<TextFieldProperties & FieldProps> = ({
-  label,
-  field,
-  form: {touched, errors},
-  ...props
-}) => {
-  return (
-    <>
-      <label htmlFor={field.name}>{label}</label>
-      <input {...field} {...props} />
-
-      {touched[field.name] && errors[field.name] && (
-        <div className="error">{errors[field.name]}</div>
-      )}
-    </>
-  );
-};
-
-type CheckBoxProperties = {
-  label: string;
-};
-
-export const CheckBox: React.FC<CheckBoxProperties & FieldProps> = ({
-  label,
-  field,
-  form,
-  ...props
-}) => {
-  return (
-    <>
-      <label
-        htmlFor={field.name}
-        className="check__box"
-        {...props}
-        onChange={(): boolean => {
-          // form.setFieldValue(field.name, !field.value);
-          return !field.value;
-        }}
-      >
-        <input type="checkbox" checked={field.value} {...field} />
-        <div className={`inner ${field.value ? 'checked' : ''}`} />
-
-        <span>{label}</span>
-      </label>
-    </>
-  );
-};
diff --git a/source/components/Input/styles.scss b/source/components/Input/styles.scss
deleted file mode 100644
index 52f55f0..0000000
--- a/source/components/Input/styles.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-input {
-    height: 35px;
-    width: 100%;
-    margin: 0px;
-    border-radius: 5px;
-    padding: 0px 10px !important;
-    background-color: #EBEBEB;
-}
-
-select {
-    height: 35px;
-    padding: 0px 10px;
-    width: 100%;
-    margin: 0px;
-    border-radius: 5px;
-    background-color: rgb(245, 245, 245);
-
-    option {
-        background-color: rgb(245, 245, 245);
-    }
-}
-
-.check__box {
-    cursor: pointer;
-    align-items: center;
-    align-self: flex-start;
-    font-size: 15px;
-    display: flex;
-    margin: 16px 0px 0px;
-    flex: 0 0 auto;
-
-
-    input[type="checkbox"] {
-        display: none;
-    }
-
-    div {
-        min-width: 0px;
-        width: 16px;
-        height: 16px;
-        align-items: center;
-        justify-content: center;
-        display: flex;
-        position: relative;
-        background-color: white;
-        cursor: pointer;
-        box-shadow: rgba(50, 50, 50, 0.4) 0px 3px 5px;
-        margin: 0px;
-        transition: color 0.3s ease-out 0s;
-        border-radius: 4px;
-
-    }
-
-    .checked {
-        &:after {
-            content: "";
-            position: absolute;
-            width: 80%;
-            height: 80%;
-            display: block;
-            border-radius: 2px;
-            background-color: #9575cd;
-            box-shadow: 0 2px 4px rgba(50, 50, 50, 0.2);
-            cursor: pointer;
-        }
-    }
-
-    span {
-        color: rgb(85, 85, 85);
-        font-weight: 400;
-        margin: 1px 0px 0px 10px;
-    }
-
-}
\ No newline at end of file
diff --git a/source/components/Loader.tsx b/source/components/Loader.tsx
new file mode 100644
index 0000000..a87c82d
--- /dev/null
+++ b/source/components/Loader.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import tw, {css} from 'twin.macro';
+
+import Icon from './Icon';
+
+const Loader: React.FC = (props) => {
+  return (
+    <div
+      css={[
+        tw`fixed flex items-center justify-center h-full`,
+
+        css`
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        `,
+      ]}
+      {...props}
+    >
+      <Icon name="spinner" />
+    </div>
+  );
+};
+
+export default Loader;
diff --git a/source/components/Loader/index.tsx b/source/components/Loader/index.tsx
deleted file mode 100644
index 9eb0ea2..0000000
--- a/source/components/Loader/index.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-
-import './styles.scss';
-import Icon from '../Icon';
-
-const Loader: React.FC = (props) => {
-  return (
-    <div id="loader" {...props}>
-      <Icon name="spinner" />
-    </div>
-  );
-};
-
-export default Loader;
diff --git a/source/components/Loader/styles.scss b/source/components/Loader/styles.scss
deleted file mode 100644
index 4139999..0000000
--- a/source/components/Loader/styles.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-#loader {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  align-items: center;
-}
\ No newline at end of file
diff --git a/source/styles/base/_components.scss b/source/styles/base/_components.scss
index ae5789b..326106f 100644
--- a/source/styles/base/_components.scss
+++ b/source/styles/base/_components.scss
@@ -52,4 +52,57 @@
   border-radius: 100px;
   transition: all 0.4s ease-out 0s;
   overflow: hidden;
+}
+
+
+.check__box {
+  cursor: pointer;
+  align-items: center;
+  align-self: flex-start;
+  font-size: 15px;
+  display: flex;
+  margin: 16px 0px 0px;
+  flex: 0 0 auto;
+
+
+  input[type="checkbox"] {
+    display: none;
+  }
+
+  div {
+    min-width: 0px;
+    width: 16px;
+    height: 16px;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    position: relative;
+    background-color: white;
+    cursor: pointer;
+    box-shadow: rgba(50, 50, 50, 0.4) 0px 3px 5px;
+    margin: 0px;
+    transition: color 0.3s ease-out 0s;
+    border-radius: 4px;
+
+  }
+
+  .checked {
+    &:after {
+      content: "";
+      position: absolute;
+      width: 80%;
+      height: 80%;
+      display: block;
+      border-radius: 2px;
+      background-color: #9575cd;
+      box-shadow: 0 2px 4px rgba(50, 50, 50, 0.2);
+      cursor: pointer;
+    }
+  }
+
+  span {
+    color: rgb(85, 85, 85);
+    font-weight: 400;
+    margin: 1px 0px 0px 10px;
+  }
 }
\ No newline at end of file