diff --git a/source/History/History.module.scss b/source/History/History.module.scss index cecfa5e..a2bdf06 100644 --- 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; } diff --git a/source/History/History.tsx b/source/History/History.tsx index 916c242..ff8934f 100644 --- a/source/History/History.tsx +++ b/source/History/History.tsx @@ -132,7 +132,7 @@ function History() {
-
+
{/* eslint-disable-next-line no-nested-ternary */} {!requestStatusState.loading ? ( diff --git a/source/History/Modal.module.scss b/source/History/Modal.module.scss index f83d1be..4c89368 100644 --- 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); } } diff --git a/source/History/Modal.tsx b/source/History/Modal.tsx index 1284dd4..657c4a2 100644 --- a/source/History/Modal.tsx +++ b/source/History/Modal.tsx @@ -11,8 +11,14 @@ type Props = { function Modal({link, setModalView}: Props) { return ( <> -
-
+
setModalView(false)} + > +
e.stopPropagation()} + >
diff --git a/source/History/Table.module.scss b/source/History/Table.module.scss index 155a696..90ce872 100644 --- 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; } diff --git a/source/Options/Footer.module.scss b/source/Options/Footer.module.scss index 4a4df4a..33a6c0f 100644 --- 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 { diff --git a/source/Options/Header.module.scss b/source/Options/Header.module.scss index 9ba3fc8..531505f 100644 --- 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; } diff --git a/source/Options/Header.tsx b/source/Options/Header.tsx index 2c2e252..4fde886 100644 --- 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 ( - <> -
+
+ logo -

Kutt

-
- + +

{subtitle}

+
); } diff --git a/source/Options/Options.module.scss b/source/Options/Options.module.scss index 29687eb..7a25c3d 100644 --- 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; } }