refactor: history page enhancements

2026-02-03 05:43:24 +00:00 · 2026-01-04 01:23:41 +05:30
parent 2a5f54573e
commit a5bdd3a242
9 changed files with 204 additions and 124 deletions
--- a/source/History/History.module.scss
+++ b/source/History/History.module.scss
@@ -1,21 +1,36 @@
@use '../styles/variables' as *;

 .historyPage {
-  min-height: 100vh;
-  background-color: $gray-200;
+  height: 100vh;
+  overflow: hidden;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
 }

 .historyContent {
-  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
  padding: 2rem 1.5rem;
+  max-width: 1400px;
+  margin: 0 auto;
 }

 .errorMessage {
-  font-size: 1.25rem;
+  text-align: center;
+  font-size: 1rem;
  font-weight: $medium;
-  color: $gray-800;
+  color: $gray-600;
+  padding: 2rem;
+  background-color: $white;
+  border-radius: $radius-lg;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  margin-top: 1.5rem;
 }

 .loaderContainer {
-  height: 2.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 10rem;
+  margin-top: 1.5rem;
 }
--- a/source/History/History.tsx
+++ b/source/History/History.tsx
@@ -132,7 +132,7 @@ function History() {
    <BodyWrapper>
      <div id="history" className={styles.historyPage}>
        <div className={styles.historyContent}>
-          <Header />
+          <Header subtitle="Recent Links" />

          {/* eslint-disable-next-line no-nested-ternary */}
          {!requestStatusState.loading ? (
--- a/source/History/Modal.module.scss
+++ b/source/History/Modal.module.scss
@@ -9,49 +9,55 @@
  justify-content: center;
  width: 100%;
  height: 100%;
-  background-color: rgba(50, 50, 50, 0.8);
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
  z-index: 1000;
 }

 .modalContent {
-  padding: 3rem 4rem;
+  padding: 2.5rem 3rem;
  text-align: center;
  background-color: $white;
-  border-radius: 8px;
+  border-radius: $radius-lg;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
 }

 .qrCodeWrapper {
  display: flex;
  justify-content: center;
+  padding: 1rem;
+  background-color: $white;
+  border-radius: $radius-md;
 }

 .buttonWrapper {
  display: flex;
  justify-content: center;
-  margin-top: 2.5rem;
+  margin-top: 1.5rem;
 }

 .closeButton {
-  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
-  padding: 0 2rem;
-  margin: 0 1rem;
-  overflow: hidden;
+  padding: 0 1.5rem;
  font-size: 0.875rem;
-  line-height: 1;
-  text-align: center;
-  color: black;
+  font-weight: $medium;
+  color: $white;
  cursor: pointer;
-  border-radius: 100px;
+  border-radius: $radius-md;
  border: none;
-  transition: all 0.4s ease-out;
-  background: linear-gradient(to right, rgb(224, 224, 224), rgb(189, 189, 189));
-  box-shadow: rgba(160, 160, 160, 0.5) 0px 5px 6px;
+  background: $primary-gradient;
+  box-shadow: 0 4px 6px -1px rgba(126, 87, 194, 0.3);
+  transition: transform $transition-fast, box-shadow $transition-fast;

  &:hover {
-    opacity: 0.9;
+    transform: translateY(-1px);
+    box-shadow: 0 6px 10px -1px rgba(126, 87, 194, 0.4);
+  }
+
+  &:active {
+    transform: translateY(0);
  }
 }
--- a/source/History/Modal.tsx
+++ b/source/History/Modal.tsx
@@ -11,8 +11,14 @@ type Props = {
 function Modal({link, setModalView}: Props) {
  return (
    <>
-      <div className={styles.modalOverlay}>
-        <div className={styles.modalContent}>
+      <div
+        className={styles.modalOverlay}
+        onClick={(): void => setModalView(false)}
+      >
+        <div
+          className={styles.modalContent}
+          onClick={(e): void => e.stopPropagation()}
+        >
          <div className={styles.qrCodeWrapper}>
            <QRCodeSVG size={196} value={link} />
          </div>
--- a/source/History/Table.module.scss
+++ b/source/History/Table.module.scss
@@ -5,58 +5,56 @@
  flex-direction: column;
  align-items: center;
  width: 100%;
-  min-height: 100vh;
-  margin-top: 1.25rem;
-  margin-bottom: 0.75rem;
-  flex: 0 0 auto;
+  flex: 1;
+  min-height: 0;
+  margin-top: 1.5rem;
 }

 .tableWrapper {
  display: flex;
  flex-direction: column;
-  margin-left: 0;
-  margin-right: 0;
-  width: 1200px;
-  max-width: 95%;
+  width: 100%;
+  max-width: 1200px;
+  flex: 1;
+  min-height: 0;
 }

 .tableHeader {
  display: flex;
  align-items: center;
-  justify-content: center;
+  justify-content: space-between;
+  margin-bottom: 1rem;
 }

 .tableTitle {
-  margin-left: 0;
-  margin-right: 0;
-  font-size: 1.25rem;
-  margin-bottom: 1.25rem;
+  font-size: 0.875rem;
+  font-weight: $medium;
+  color: $gray-600;
+  margin: 0;
 }

 .table {
  display: flex;
  flex-direction: column;
-  flex: auto;
+  flex: 1;
+  min-height: 0;
  background-color: $white;
-  border-radius: 12px;
-  box-shadow: rgba(50, 50, 50, 0.2) 0px 6px 30px;
+  border-radius: $radius-lg;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
 }

 .thead {
  display: flex;
  flex-direction: column;
-  flex: auto;
-  background-color: rgb(241, 241, 241);
-  border-top-right-radius: 12px;
-  border-top-left-radius: 12px;
+  background-color: $gray-200;
 }

 .theadRow {
  display: flex;
  justify-content: space-between;
-  flex: auto;
  padding: 0 1.5rem;
-  border-bottom: 1px solid rgb(234, 234, 234);
+  border-bottom: 1px solid $gray-300;
 }

 .th {
@@ -64,8 +62,12 @@
  display: flex;
  align-items: center;
  justify-content: flex-start;
-  padding: 1rem 0;
-  font-size: 1rem;
+  padding: 0.875rem 0;
+  font-size: 0.75rem;
+  font-weight: $semibold;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: $gray-600;
  line-height: normal;
 }

@@ -80,15 +82,23 @@
 .tbody {
  display: flex;
  flex-direction: column;
-  flex: auto;
+  overflow-y: auto;
 }

 .tr {
  display: flex;
  justify-content: space-between;
-  flex: auto;
-  padding: 0 1.25rem;
-  border-bottom: 1px solid rgb(234, 234, 234);
+  padding: 0 1.5rem;
+  border-bottom: 1px solid $gray-200;
+  transition: background-color $transition-fast;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover {
+    background-color: rgba($gray-200, 0.3);
+  }
 }

 .td {
@@ -103,6 +113,7 @@
  overflow: hidden;
  white-space: nowrap;
  flex: 2 2 0px;
+  padding-right: 1rem;

  &::after {
    content: '';
@@ -110,8 +121,13 @@
    right: 0px;
    top: 0px;
    height: 100%;
-    width: 56px;
-    background: linear-gradient(to left, white, white, transparent);
+    width: 48px;
+    background: linear-gradient(to left, $white, $white, transparent);
+    pointer-events: none;
+  }
+
+  .tr:hover &::after {
+    background: linear-gradient(to left, rgba($gray-200, 0.3), rgba($gray-200, 0.3), transparent);
  }
 }

@@ -119,7 +135,8 @@
  position: relative;
  overflow: hidden;
  white-space: nowrap;
-  flex: 1 1 23px;
+  flex: 1 1 0px;
+  padding-right: 1rem;

  &::after {
    content: '';
@@ -127,31 +144,39 @@
    right: 0px;
    top: 0px;
    height: 100%;
-    width: 56px;
-    background: linear-gradient(to left, white, white, transparent);
+    width: 48px;
+    background: linear-gradient(to left, $white, $white, transparent);
+    pointer-events: none;
+  }
+
+  .tr:hover &::after {
+    background: linear-gradient(to left, rgba($gray-200, 0.3), rgba($gray-200, 0.3), transparent);
  }
 }

 .link {
-  font-size: 1rem;
+  font-size: 0.875rem;
  line-height: normal;
  text-decoration: none;
-  color: rgb(33, 150, 243);
-  border: 1px solid transparent;
-  border-style: dotted;
-  transition: all 0.2s ease-out;
+  color: $blue-500;
+  transition: color $transition-fast;

  &:hover {
-    border-color: black;
+    color: darken($blue-500, 10%);
+    text-decoration: underline;
  }
 }

 .copiedNotification {
  position: absolute;
-  top: 0;
+  top: 0.25rem;
  left: 0;
-  font-size: 11px;
-  color: $green-900;
+  font-size: 0.625rem;
+  font-weight: $medium;
+  color: $green-500;
+  background-color: rgba($green-500, 0.1);
+  padding: 0.125rem 0.375rem;
+  border-radius: $radius-sm;
 }

 .shortUrlWrapper {
@@ -163,37 +188,40 @@
  display: flex;
  align-items: center;
  justify-content: flex-end;
+  gap: 0.5rem;
 }

 .actionIcon {
  display: flex;
  align-items: center;
  justify-content: center;
-  padding: 0;
-  margin: 0;
-  margin-right: 2px;
-  margin-left: 12px;
-  width: 26px;
-  height: 26px;
-  box-shadow: rgba(100, 100, 100, 0.1) 0px 2px 4px;
-  background-color: rgb(222, 222, 222);
-  border-radius: 100%;
+  width: 2rem;
+  height: 2rem;
+  background-color: $gray-200;
+  border-radius: $radius-full;
  border: none;
  outline: none;
  cursor: pointer;
-  transition: all 0.2s ease-out;
+  transition: transform $transition-fast, background-color $transition-fast;

  &:hover {
-    transform: translateY(-3px);
+    transform: translateY(-2px);
+    background-color: $gray-300;
  }

  svg {
-    stroke: rgb(101, 189, 137);
+    stroke: $gray-600;
    stroke-width: 2;
  }
+
+  &:first-child svg {
+    stroke: $green-500;
+  }
 }

 .emptyRow {
-  padding: 1rem;
-  color: $gray-600;
+  padding: 2rem;
+  color: $gray-500;
+  text-align: center;
+  font-size: 0.875rem;
 }
--- a/source/Options/Footer.module.scss
+++ b/source/Options/Footer.module.scss
@@ -1,26 +1,10 @@
@use '../styles/variables' as *;

 .footer {
-  margin-top: 1rem;
-  padding: 1rem 0;
+  margin-top: 1.25rem;
+  padding-top: 1rem;
  font-weight: $regular;
  font-size: 0.75rem;
-
-  @media (min-width: 640px) {
-    margin-top: 1.5rem;
-  }
-
-  @media (min-width: 768px) {
-    margin-top: 2rem;
-  }
-
-  @media (min-width: 1024px) {
-    margin-top: 2.5rem;
-  }
-
-  @media (min-width: 1280px) {
-    margin-top: 4rem;
-  }
 }

 .ratingSection {
@@ -48,6 +32,8 @@
  flex-direction: column;
  align-items: center;
  justify-content: center;
+  text-decoration: none;
+  color: inherit;
 }

 .starsContainer {
@@ -92,15 +78,18 @@
  align-items: center;
  justify-content: space-around;
  text-align: center;
-  margin: 1rem 0;
+  margin-top: 1rem;
 }

 .linkItem {
  padding: 0.25rem;
  cursor: pointer;
+  color: $gray-500;
+  text-decoration: none;
+  transition: color $transition-fast;

  &:hover {
-    color: $gray-800;
+    color: $blue-500;
  }

  &.narrow {
--- a/source/Options/Header.module.scss
+++ b/source/Options/Header.module.scss
@@ -2,20 +2,44 @@

 .header {
  display: flex;
+  flex-direction: column;
  align-items: center;
  justify-content: center;
-  padding-bottom: 1rem;
+  padding-bottom: 1.5rem;
+  margin-bottom: 0.5rem;
+  border-bottom: 1px solid $gray-200;
+}
+
+.logoContainer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  text-decoration: none;
+  transition: opacity $transition-fast;
+
+  &:hover {
+    opacity: 0.8;
+  }
 }

 .logo {
-  width: 2rem;
-  height: 2rem;
+  width: 2.5rem;
+  height: 2.5rem;
 }

 .title {
-  font-weight: $medium;
-  font-size: 1.875rem;
-  margin-left: 0.25rem;
-  text-align: center;
-  margin-bottom: 0;
+  font-weight: $semibold;
+  font-size: 1.75rem;
+  background: $primary-gradient;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin: 0;
+}
+
+.subtitle {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  color: $gray-500;
+  font-weight: $regular;
 }
--- a/source/Options/Header.tsx
+++ b/source/Options/Header.tsx
@@ -2,21 +2,30 @@ import {memo} from 'react';

 import styles from './Header.module.scss';

-function Header() {
+type Props = {
+  subtitle?: string;
+};
+
+function Header({subtitle = 'Extension Settings'}: Props) {
  return (
-    <>
-      <header className={styles.header}>
+    <header className={styles.header}>
+      <a
+        href="https://kutt.it"
+        target="_blank"
+        rel="noopener noreferrer"
+        className={styles.logoContainer}
+      >
        <img
          className={styles.logo}
-          width="32"
-          height="32"
+          width="40"
+          height="40"
          src="../assets/logo.png"
          alt="logo"
        />
-
        <h1 className={styles.title}>Kutt</h1>
-      </header>
-    </>
+      </a>
+      <p className={styles.subtitle}>{subtitle}</p>
+    </header>
  );
 }

--- a/source/Options/Options.module.scss
+++ b/source/Options/Options.module.scss
@@ -1,24 +1,27 @@
@use '../styles/variables' as *;

 .optionsPage {
-  height: 100vh;
+  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1.5rem;
-  background-color: $gray-200;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
  user-select: none;
 }

 .optionsContainer {
-  max-width: 32rem;
-  padding: 2.5rem 4rem;
-  margin: 1.5rem 3rem;
+  width: 100%;
+  max-width: 28rem;
+  padding: 2rem 2.5rem;
+  margin: 1rem;
  background-color: $white;
  height: max-content;
+  border-radius: $radius-lg;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

-  @media (min-width: 768px) {
-    border-radius: $radius-lg;
+  @media (min-width: 640px) {
+    padding: 2.5rem 3rem;
  }
 }