refactor: use the custom host for the header links

source/History/History.tsx

@@ -39,6 +39,7 @@ function History() {
     error: null,
     message: '',
   });
+  const [hostUrl, setHostUrl] = useState<string>(Kutt.hostUrl);
 
   useEffect(() => {
     async function getUrlsHistoryStats(): Promise<void> {
@@ -73,6 +74,8 @@ function History() {
         host: defaultHost,
       };
 
+      setHostUrl(defaultExtensionConfig.host.hostUrl);
+
       // extensionSettingsDispatch({
       //   type: ExtensionSettingsActionTypes.HYDRATE_EXTENSION_SETTINGS,
       //   payload: defaultExtensionConfig,
@@ -132,7 +135,7 @@ function History() {
     <BodyWrapper>
       <div id="history" className={styles.historyPage}>
         <div className={styles.historyContent}>
-          <Header subtitle="Recent Links" />
+          <Header subtitle="Recent Links" hostUrl={hostUrl} />
 
           {/* eslint-disable-next-line no-nested-ternary */}
           {!requestStatusState.loading ? (

source/Options/Header.tsx

@@ -1,16 +1,19 @@
 import {memo} from 'react';
 
+import {Kutt} from '../Background';
+
 import styles from './Header.module.scss';
 
 type Props = {
   subtitle?: string;
+  hostUrl?: string;
 };
 
-function Header({subtitle = 'Extension Settings'}: Props) {
+function Header({subtitle = 'Extension Settings', hostUrl = Kutt.hostUrl}: Props) {
   return (
     <header className={styles.header}>
       <a
-        href="https://kutt.it"
+        href={hostUrl}
         target="_blank"
         rel="noopener noreferrer"
         className={styles.logoContainer}

source/Options/Options.tsx

@@ -1,4 +1,4 @@
-import {useEffect} from 'react';
+import {useEffect, useState} from 'react';
 
 import {getExtensionSettings} from '../util/settings';
 import {
@@ -22,8 +22,9 @@ import Form from './Form';
 import styles from './Options.module.scss';
 
 function Options() {
-  const extensionSettingsDispatch = useExtensionSettings()[1];
+  const [, extensionSettingsDispatch] = useExtensionSettings();
   const [requestStatusState, requestStatusDispatch] = useRequestStatus();
+  const [hostUrl, setHostUrl] = useState<string>(Kutt.hostUrl);
 
   useEffect(() => {
     async function getSavedSettings(): Promise<void> {
@@ -56,6 +57,8 @@ function Options() {
         reuse: (settings?.reuse as boolean) || false,
       };
 
+      setHostUrl(defaultExtensionConfig.host.hostUrl);
+
       extensionSettingsDispatch({
         type: ExtensionSettingsActionTypes.HYDRATE_EXTENSION_SETTINGS,
         payload: defaultExtensionConfig,
@@ -74,7 +77,7 @@ function Options() {
       <BodyWrapper>
         <div id="options" className={styles.optionsPage}>
           <div className={styles.optionsContainer}>
-            <Header />
+            <Header hostUrl={hostUrl} />
 
             {!requestStatusState.loading ? (
               <Form />

source/Popup/Form.module.scss

@@ -61,6 +61,11 @@
   background-color: $gray-200;
   border: 1px solid transparent;
   border-radius: $radius-sm;
+  transition: border-color $transition-fast;
+
+  &:hover {
+    border-color: $gray-300;
+  }
 
   &:focus {
     outline: none;
@@ -84,11 +89,16 @@
   border: 1px solid transparent;
   border-radius: $radius-sm;
   margin-top: 1.2rem;
+  transition: border-color $transition-fast;
 
   &::placeholder {
     color: $gray-400;
   }
 
+  &:hover {
+    border-color: $gray-300;
+  }
+
   &:focus {
     outline: none;
     border-color: $indigo-400;
@@ -137,7 +147,12 @@
   height: 100%;
   border-radius: 4px 0 0 4px;
   cursor: pointer;
-  color: rgb(187, 187, 187);
+  color: $gray-400;
+  transition: color $transition-fast;
+
+  &:hover {
+    color: $gray-600;
+  }
 }
 
 .submitButton {
@@ -145,22 +160,27 @@
   align-items: center;
   justify-content: center;
   width: 100%;
-  padding: 0.25rem 0.75rem;
+  padding: 0.5rem 0.75rem;
   margin-bottom: 0.25rem;
-  font-size: 0.75rem;
+  font-size: 0.8125rem;
   font-weight: $semibold;
   text-align: center;
   color: $white;
   background: $primary-gradient;
   border: none;
-  border-radius: $radius-sm;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  border-radius: $radius-md;
+  box-shadow: 0 4px 6px -1px rgba(126, 87, 194, 0.3);
   min-height: 36px;
   cursor: pointer;
-  transition: color $transition-normal;
+  transition: transform $transition-fast, box-shadow $transition-fast;
 
   &:hover {
-    color: $gray-200;
+    transform: translateY(-1px);
+    box-shadow: 0 6px 10px -1px rgba(126, 87, 194, 0.4);
+  }
+
+  &:active {
+    transform: translateY(0);
   }
 
   &:focus {
@@ -170,6 +190,7 @@
   &:disabled {
     opacity: 0.5;
     cursor: not-allowed;
+    transform: none;
   }
 }
 

source/Popup/Header.module.scss

@@ -8,6 +8,17 @@
   user-select: none;
 }
 
+.logoLink {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  transition: opacity $transition-fast;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
 .logo {
   width: 2rem;
   height: 2rem;
@@ -15,14 +26,16 @@
 
 .actions {
   display: flex;
+  gap: 0.25rem;
 }
 
 .styledIcon {
   background-color: transparent;
   box-shadow: none;
-  color: rgb(187, 187, 187);
+  color: $gray-400;
+  transition: color $transition-fast;
 
   &:hover {
-    opacity: 0.75;
+    color: $gray-600;
   }
 }

source/Popup/Header.tsx

@@ -68,7 +68,12 @@ function Header() {
 
   return (
     <header className={styles.header}>
-      <div>
+      <a
+        href={extensionSettingsState.host.hostUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={styles.logoLink}
+      >
         <img
           className={styles.logo}
           width="32"
@@ -76,7 +81,7 @@ function Header() {
           src="../assets/logo.png"
           alt="logo"
         />
-      </div>
+      </a>
 
       <div className={styles.actions}>
         <Icon

source/Popup/ResponseBody.module.scss

@@ -7,8 +7,15 @@
   padding: 1rem 1rem 0;
 
   .icon {
+    cursor: pointer;
+    transition: opacity $transition-fast;
+
+    &:hover {
+      opacity: 0.7;
+    }
+
     svg {
-      stroke: rgb(101, 189, 137);
+      stroke: $green-500;
       stroke-width: 2;
     }
   }
@@ -27,23 +34,24 @@
 .link {
   border-bottom: 1px dotted $stats-total-underline;
   padding-bottom: 2px;
-  color: rgb(41, 71, 86);
+  color: $gray-700;
   min-width: 0;
   margin: 0;
   font-size: 1.5rem;
   font-weight: $light;
   cursor: pointer;
+  transition: color $transition-fast;
 
   &:hover {
-    opacity: 0.75;
+    color: $blue-500;
   }
 }
 
 .errorMessage {
   padding-top: 0.25rem;
-  font-size: 1.125rem;
-  color: $gray-900;
-  border-bottom: 1px dotted $gray-700;
+  font-size: 0.9375rem;
+  font-weight: $medium;
+  color: $red-500;
 }
 
 .qrCodeContainer {