refactor: delete unwanted files

thedevs-network · Jul 5, 2020 · 9d5057f · 9d5057f
1 parent 467aec7
commit 9d5057f
Show file tree

Hide file tree

Showing 17 changed files with 124 additions and 1,017 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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