fix: Tweaks around icons

thedevs-network · Jul 9, 2020 · af0bad2 · af0bad2
1 parent 18ebdad
commit af0bad2
Show file tree

Hide file tree

Showing 16 changed files with 127 additions and 138 deletions.
diff --git a/source/Options/Footer.tsx b/source/Options/Footer.tsx
@@ -9,7 +9,7 @@ import Icon from '../components/Icon';
 const Footer: React.FC = () => {
   return (
     <>
-      <footer tw="py-4 mt-16">
+      <footer tw="sm:mt-6 xl:mt-16 lg:mt-10 md:mt-8 py-4 mt-4">
         <div tw="flex items-center text-gray-800">
           <span tw="block w-1/3 mr-2 border border-gray-200" />
           <a
@@ -23,26 +23,11 @@ const Footer: React.FC = () => {
             tw="flex flex-col items-center justify-center"
           >
             <div tw="flex items-center mt-1">
-              <Icon
-                tw="w-4 h-4 mx-1 text-yellow-500 fill-current"
-                name="star-yellow"
-              />
-              <Icon
-                tw="w-4 h-4 mx-1 text-yellow-500 fill-current"
-                name="star-yellow"
-              />
-              <Icon
-                tw="w-4 h-4 mx-1 text-yellow-500 fill-current"
-                name="star-yellow"
-              />
-              <Icon
-                tw="w-4 h-4 mx-1 text-yellow-500 fill-current"
-                name="star-yellow"
-              />
-              <Icon
-                tw="w-4 h-4 mx-1 text-gray-400 fill-current"
-                name="star-white"
-              />
+              <Icon tw="mr-1 text-yellow-500 fill-current" name="star-yellow" />
+              <Icon tw="mr-1 text-yellow-500 fill-current" name="star-yellow" />
+              <Icon tw="mr-1 text-yellow-500 fill-current" name="star-yellow" />
+              <Icon tw="mr-1 text-yellow-500 fill-current" name="star-yellow" />
+              <Icon tw="text-gray-400 fill-current" name="star-white" />
             </div>
             <p tw="mb-0 mt-1">Rate on Store</p>
           </a>
@@ -54,23 +39,23 @@ const Footer: React.FC = () => {
             href="https://kutt.it"
             target="blank"
             rel="nofollow noopener noreferrer"
-            tw="w-1/3 p-1 cursor-pointer"
+            tw="w-1/3 p-1 cursor-pointer hover:text-gray-800"
           >
             Kutt.it
           </a>
           <a
             href="https://github.com/thedevs-network/kutt-extension/issues/new"
             target="blank"
             rel="nofollow noopener noreferrer"
-            tw="w-1/3 py-1 px-2 cursor-pointer"
+            tw="w-2/3 p-1 cursor-pointer hover:text-gray-800"
           >
             Report an issue
           </a>
           <a
             href="https://github.com/thedevs-network/kutt-extension"
             target="blank"
             rel="nofollow noopener noreferrer"
-            tw="w-1/3 p-1 cursor-pointer"
+            tw="w-1/3 p-1 cursor-pointer hover:text-gray-800"
           >
             GitHub
           </a>

diff --git a/source/Options/Form.tsx b/source/Options/Form.tsx
@@ -272,7 +272,7 @@ const Form: React.FC = () => {
             <span tw="block w-10 h-6 bg-gray-400 rounded-full shadow-inner" />
             <span
               css={[
-                tw`focus-within:shadow-outline absolute inset-y-0 left-0 block w-4 h-4 mt-1 ml-1 transition-transform duration-300 ease-in-out rounded-full shadow`,
+                tw`absolute inset-y-0 left-0 block w-4 h-4 mt-1 ml-1 transition-transform duration-300 ease-in-out rounded-full shadow`,
 
                 !formStateValues.history
                   ? tw`bg-white`
@@ -297,7 +297,7 @@ const Form: React.FC = () => {
             <span tw="block w-10 h-6 bg-gray-400 rounded-full shadow-inner" />
             <span
               css={[
-                tw`focus-within:shadow-outline absolute inset-y-0 left-0 block w-4 h-4 mt-1 ml-1 transition-transform duration-300 ease-in-out rounded-full shadow`,
+                tw`absolute inset-y-0 left-0 block w-4 h-4 mt-1 ml-1 transition-transform duration-300 ease-in-out rounded-full shadow`,
 
                 !formStateValues.advanced
                   ? tw`bg-white`

diff --git a/source/Popup/Form.tsx b/source/Popup/Form.tsx
@@ -93,7 +93,7 @@ const Form: React.FC<Props> = ({handleFormSubmit}) => {
 
   return (
     <>
-      <div tw="flex flex-col w-full max-w-sm p-4 mx-auto bg-white border border-gray-200 shadow select-none">
+      <div tw="flex flex-col w-full max-w-sm p-4 mx-auto bg-white select-none">
         <div tw="flex flex-col mb-4">
           <label
             {...labelProps('domain')}
@@ -128,7 +128,7 @@ const Form: React.FC<Props> = ({handleFormSubmit}) => {
         <div tw="flex flex-col mb-3 relative">
           <label
             {...labelProps('customurl')}
-            tw="sm:text-sm block text-xs tracking-wide cursor-pointer text-gray-600 absolute top-0 bottom-0 left-0 right-0"
+            tw="sm:text-sm block text-xs tracking-wide cursor-text text-gray-600 absolute top-0 bottom-0 left-0 right-0"
           >
             <span>{hostDomain}/</span>
           </label>
@@ -163,17 +163,31 @@ const Form: React.FC<Props> = ({handleFormSubmit}) => {
         <div tw="flex flex-col mb-3 relative">
           <label
             {...labelProps('password')}
-            tw="sm:text-sm absolute top-0 bottom-0 left-0 right-0 z-10 block text-xs tracking-wide text-gray-600 cursor-pointer"
+            tw="sm:text-sm cursor-text absolute top-0 bottom-0 left-0 right-0 z-10 block text-xs tracking-wide text-gray-600"
           >
             <span>Password</span>
           </label>
 
           <div tw="relative">
-            <div tw="absolute top-0 right-0 flex w-10 mt-6 border border-transparent">
+            <div
+              css={[
+                tw`absolute top-0 right-0 flex w-10 mt-6 border border-transparent`,
+
+                css`
+                  margin-top: 1.75rem;
+                `,
+              ]}
+            >
               <Icon
-                tw="z-10 flex items-center justify-center w-full h-full text-gray-600 rounded-tl rounded-bl cursor-pointer"
                 onClick={(): void => setShowPassword(!showPassword)}
                 name={!showPassword ? 'eye-closed' : 'eye'}
+                css={[
+                  tw`z-10 flex items-center justify-center w-full h-full rounded-tl rounded-bl cursor-pointer`,
+
+                  css`
+                    color: rgb(187, 187, 187);
+                  `,
+                ]}
               />
             </div>
 

diff --git a/source/Popup/Header.tsx b/source/Popup/Header.tsx
@@ -18,29 +18,12 @@ import {
 
 import Icon from '../components/Icon';
 
-const StyledIconsHolder = styled.div`
-  ${tw`flex`}
+const StyledIcon = styled(Icon)`
+  ${tw`hover:opacity-75 bg-transparent shadow-none`}
 
-  .icon {
-    ${tw`hover:opacity-75 bg-transparent shadow-none`}
-
-    height: 34px;
-    width: 34px;
-  }
-
-  .refresh__icon {
-    svg {
-      stroke: rgb(187, 187, 187);
-      stroke-width: 2.5;
-    }
-  }
-
-  .settings__icon {
-    svg {
-      fill: rgb(187, 187, 187);
-      stroke: none;
-    }
-  }
+  height: 34px;
+  width: 34px;
+  color: rgb(187, 187, 187);
 `;
 
 const Header: React.FC = () => {
@@ -113,9 +96,9 @@ const Header: React.FC = () => {
           />
         </div>
 
-        <StyledIconsHolder>
-          <Icon
-            className="icon refresh__icon"
+        <div tw="flex">
+          <StyledIcon
+            className="icon"
             title="Refresh"
             name={
               loading
@@ -126,13 +109,13 @@ const Header: React.FC = () => {
             }
             onClick={fetchUserDomains}
           />
-          <Icon
-            className="icon settings__icon"
+          <StyledIcon
+            className="icon"
             name="settings"
             title="Settings"
             onClick={openExtOptionsPage}
           />
-        </StyledIconsHolder>
+        </div>
       </header>
     </>
   );

diff --git a/source/Popup/ResponseBody.tsx b/source/Popup/ResponseBody.tsx
@@ -15,21 +15,13 @@ export type ProcessedRequestProperties = {
 const StyledPopupBody = styled.div`
   ${tw`flex justify-center px-4 pt-4 pb-0`}
 
-  .copy__icon,
-  .check__icon {
+  .icon {
     svg {
       stroke: rgb(101, 189, 137);
       stroke-width: 2.5;
     }
   }
 
-  .qr__icon {
-    svg {
-      fill: rgb(89, 89, 89);
-      stroke: none;
-    }
-  }
-
   h1 {
     border-bottom: 1px dotted ${({theme}): string => theme.statsTotalUnderline};
     padding-bottom: 2px;
@@ -58,7 +50,7 @@ const ResponseBody: React.FC = () => {
           <>
             <Icon
               tw="my-0 ml-0 mr-2"
-              className="icon qr__icon"
+              className="icon"
               name="qrcode"
               onClick={(): void => {
                 return setQRView(!QRView);
@@ -71,18 +63,10 @@ const ResponseBody: React.FC = () => {
                   return setCopied(true);
                 }}
               >
-                <Icon
-                  tw="my-0 ml-0 mr-4"
-                  className="icon copy__icon"
-                  name="copy"
-                />
+                <Icon tw="my-0 ml-0 mr-4" className="icon" name="copy" />
               </CopyToClipboard>
             ) : (
-              <Icon
-                tw="my-0 ml-0 mr-4"
-                className="icon check__icon"
-                name="tick"
-              />
+              <Icon tw="my-0 ml-0 mr-4" className="icon" name="tick" />
             )}
             <CopyToClipboard
               text={message}

diff --git a/source/components/Icon/Copy.tsx b/source/components/Icon/Copy.tsx
@@ -3,18 +3,17 @@ import React from 'react';
 const Copy: React.FC = () => {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
+      width={20}
+      height={20}
+      viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
+      strokeWidth={1.5}
       strokeLinecap="round"
       strokeLinejoin="round"
-      strokeWidth="2"
-      className="feather feather-copy"
-      viewBox="0 0 24 24"
+      className="copy_svg__feather copy_svg__feather-copy"
     >
-      <rect width="13" height="13" x="9" y="9" rx="2" ry="2" />
+      <rect x={9} y={9} width={13} height={13} rx={2} ry={2} />
       <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
     </svg>
   );

diff --git a/source/components/Icon/Cross.tsx b/source/components/Icon/Cross.tsx
@@ -3,18 +3,17 @@ import React from 'react';
 const Cross: React.FC = () => {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="48"
-      height="48"
+      width={20}
+      height={20}
+      viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth={2}
+      strokeWidth={1.5}
       strokeLinecap="round"
       strokeLinejoin="round"
-      viewBox="0 0 24 24"
+      className="x_svg__feather x_svg__feather-x"
     >
-      <path d="M18 6L6 18" />
-      <path d="M6 6L18 18" />
+      <path d="M18 6L6 18M6 6l12 12" />
     </svg>
   );
 };

diff --git a/source/components/Icon/Eye.tsx b/source/components/Icon/Eye.tsx
@@ -3,8 +3,9 @@ import React from 'react';
 const Eye: React.FC = () => {
   return (
     <svg
-      width={24}
-      height={24}
+      width={16}
+      height={16}
+      viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
       strokeWidth={2}

diff --git a/source/components/Icon/EyeClosed.tsx b/source/components/Icon/EyeClosed.tsx
@@ -3,8 +3,9 @@ import React from 'react';
 const EyeClosed: React.FC = () => {
   return (
     <svg
-      width={24}
-      height={24}
+      width={16}
+      height={16}
+      viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
       strokeWidth={2}

diff --git a/source/components/Icon/QRCode.tsx b/source/components/Icon/QRCode.tsx
@@ -3,15 +3,17 @@ import React from 'react';
 const QRCode: React.FC = () => {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="32"
-      height="32"
-      fill="currentColor"
-      className="jam jam-qr-code"
-      preserveAspectRatio="xMinYMin"
-      viewBox="-2 -2 24 24"
+      width={20}
+      height={20}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="maximize_svg__feather maximize_svg__feather-maximize"
     >
-      <path d="M13 18h3a2 2 0 002-2v-3a1 1 0 012 0v3a4 4 0 01-4 4H4a4 4 0 01-4-4v-3a1 1 0 012 0v3a2 2 0 002 2h3a1 1 0 010 2h6a1 1 0 010-2zM2 7a1 1 0 11-2 0V4a4 4 0 014-4h3a1 1 0 110 2H4a2 2 0 00-2 2v3zm16 0V4a2 2 0 00-2-2h-3a1 1 0 010-2h3a4 4 0 014 4v3a1 1 0 01-2 0z" />
+      <path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3" />
     </svg>
   );
 };

diff --git a/source/components/Icon/Refresh.tsx b/source/components/Icon/Refresh.tsx
@@ -3,19 +3,17 @@ import React from 'react';
 const Refresh: React.FC = () => {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
+      width={20}
+      height={20}
+      viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
+      strokeWidth={1.5}
       strokeLinecap="round"
       strokeLinejoin="round"
-      strokeWidth="2"
-      className="feather feather-refresh-ccw"
-      viewBox="0 0 24 24"
+      className="refresh-ccw_svg__feather refresh-ccw_svg__feather-refresh-ccw"
     >
-      <path d="M1 4L1 10 7 10" />
-      <path d="M23 20L23 14 17 14" />
+      <path d="M1 4v6h6M23 20v-6h-6" />
       <path d="M20.49 9A9 9 0 005.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 013.51 15" />
     </svg>
   );