ship review styles

Author: shakyShane

special-pages/pages/new-tab/app/activity/ActivityProvider.js

@@ -189,13 +189,17 @@ function normalizeItems(prev, data) {
 }
 
 /**
- * @param {string[]} prev
+ * @param {{ available: string[]; max: number }} prev
  * @param {ActivityData} data
- * @return {string[]}
+ * @return {{ available: string[]; max: number }}
  */
-function normalize(prev, data) {
+function normalizeKeys(prev, data) {
     const keys = data.activity.map((x) => x.url);
-    return shallowDiffers(prev, keys) ? keys : prev;
+    const next = shallowDiffers(prev, keys) ? keys : prev.available;
+    return {
+        available: next,
+        max: keys.length,
+    };
 }
 
 /**
@@ -212,7 +216,7 @@ export function shallowDiffers(a, b) {
 
 export const SignalStateContext = createContext({
     activity: signal(/** @type {NormalizedActivity} */ ({})),
-    keys: signal(/** @type {string[]} */ ([])),
+    keys: signal(/** @type {{available: string[]; max: number}} */ ({ available: [], max: 0 })),
 });
 
 export function SignalStateProvider({ children }) {
@@ -221,7 +225,7 @@ export function SignalStateProvider({ children }) {
     if (state.status !== 'ready') throw new Error('must have ready status here');
     if (!service) throw new Error('must have service here');
 
-    const keys = useSignal(normalize([], state.data));
+    const keys = useSignal(normalizeKeys({ available: [], max: 0 }, state.data));
     const activity = useSignal(
         normalizeItems(
             {
@@ -237,9 +241,8 @@ export function SignalStateProvider({ children }) {
     useSignalEffect(() => {
         if (!service) return console.warn('could not access service');
         const unsub = service.onData((evt) => {
-            const next = normalize(keys.value, evt.data);
             batch(() => {
-                keys.value = next;
+                keys.value = normalizeKeys(keys.value, evt.data);
                 activity.value = normalizeItems(activity.value, evt.data);
             });
         });

special-pages/pages/new-tab/app/activity/components/Activity.js

@@ -9,7 +9,7 @@ import { useDocumentVisibility } from '../../utils.js';
 import { useCustomizer } from '../../customizer/components/CustomizerMenu.js';
 import { usePlatformName } from '../../settings.provider.js';
 import { Heading } from '../../privacy-stats/components/PrivacyStats.js';
-import { Chevron } from '../../components/Icons.js';
+import { ChevronSmall } from '../../components/Icons.js';
 import { CompanyIcon } from '../../components/CompanyIcon.js';
 import { Trans } from '../../../../../shared/components/TranslationsProvider.js';
 import { ActivityItem } from './ActivityItem.js';
@@ -81,21 +81,24 @@ function ActivityBody({ canBurn }) {
     const { keys } = useContext(SignalStateContext);
     const { burning, exiting } = useContext(ActivityBurningSignalContext);
     const busy = useComputed(() => burning.value.length > 0 || exiting.value.length > 0);
+
     return (
-        <ul class={styles.activity} onClick={didClick} data-busy={busy}>
-            {keys.value.map((id, index) => {
-                if (canBurn && !isReducedMotion) return <BurnableItem id={id} key={id} documentVisibility={documentVisibility} />;
-                return <RemovableItem id={id} key={id} canBurn={canBurn} documentVisibility={documentVisibility} />;
-            })}
-        </ul>
+        <Fragment>
+            <ul class={styles.activity} onClick={didClick} data-busy={busy}>
+                {keys.value.available.map((id, index) => {
+                    if (canBurn && !isReducedMotion) return <BurnableItem id={id} key={id} documentVisibility={documentVisibility} />;
+                    return <RemovableItem id={id} key={id} canBurn={canBurn} documentVisibility={documentVisibility} />;
+                })}
+            </ul>
+        </Fragment>
     );
 }
 
 const BurnableItem = memo(
     /**
      * @param {object} props
      * @param {string} props.id
-     * @param {"visible" | "hidden"} props.documentVisibility
+     * @param {'visible' | 'hidden'} props.documentVisibility
      */
     function BurnableItem({ id, documentVisibility }) {
         const { activity } = useContext(SignalStateContext);
@@ -240,7 +243,7 @@ function HistoryItems({ id }) {
                                             : t('activity_show_less_history')
                                     }
                                 >
-                                    <Chevron />
+                                    <ChevronSmall />
                                 </button>
                             )}
                         </li>

special-pages/pages/new-tab/app/activity/components/Activity.module.css

@@ -1,7 +1,7 @@
 .root {
 
     --favicon-width: 32px;
-    --heading-gap: 12px;
+    --heading-gap: 8px;
 
 
     background: var(--ntp-surface-background-color);
@@ -15,10 +15,8 @@
     width: 100%;
     margin-bottom: var(--ntp-gap);
 
-    &:hover {
-        .listExpander * {
-            opacity: 1;
-        }
+    .listExpander * {
+        opacity: 1;
     }
 
     [data-theme=dark] & {
@@ -27,8 +25,9 @@
 }
 
 .activity {
-    width: 100%;
     overflow: hidden;
+    width: calc(100% + 12px);
+    margin-left: -6px;
 }
 
 .activity:not(:empty) {
@@ -53,6 +52,8 @@
 .item {
     padding-top: 16px;
     padding-bottom: 16px;
+    padding-left: 6px;
+    padding-right: 6px;
 }
 
 .burning {
@@ -65,28 +66,31 @@
 
 .heading {
     display: flex;
-    gap: 12px;
+    gap: var(--heading-gap);
     width: 100%;
 }
 
 .favicon {
     width: 32px;
     height: 32px;
+    display: block;
+    backdrop-filter: blur(24px);
     border-radius: var(--border-radius-sm);
     flex-shrink: 0;
     text-decoration: none;
     position: relative;
-
     background: var(--color-black-at-12);
-    &:hover, &:focus-visible {
-        background: var(--color-black-at-18);
-    }
+    transition: transform .2s;
+
+    border: 0.5px solid rgba(0, 0, 0, 0.09);
+    background: rgba(255, 255, 255, 0.30);
+    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 1.5px 0px rgba(0, 0, 0, 0.16);
 
     [data-theme="dark"] & {
-        background: var(--color-white-at-6);
-        &:hover, &:focus-visible {
-            background: var(--color-white-at-9);
-        }
+        border: 0.5px solid rgba(255, 255, 255, 0.09);
+        background: rgba(0, 0, 0, 0.18);
+        box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 1.5px 0px rgba(0, 0, 0, 0.16);
+        backdrop-filter: blur(24px);
     }
 
     > *:first-child {
@@ -101,16 +105,21 @@
     font-size: var(--title-3-em-font-size);
     font-weight: var(--title-3-em-font-weight);
     line-height: var(--title-3-em-line-height);
-    display: block;
     word-break: break-all;
     overflow-wrap: break-word;
-    white-space: normal;
-    padding-top: 4px;
+    white-space: nowrap;
     text-decoration: none;
     color: var(--ntp-text-normal);
+    height: 35px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
 
     &:hover, &:focus-visible {
-        text-decoration: underline;
+        color: var(--ntp-color-primary);
+        .favicon {
+            transform: scale(1.08)
+        }
     }
 }
 
@@ -119,6 +128,7 @@
     margin-left: auto;
     flex-shrink: 0;
     position: relative;
+    gap: 4px;
     top: 4px;
 }
 
@@ -140,13 +150,18 @@
 }
 
 .controlIcon {
-    border-radius: 4px;
+    border-radius: 50%;
+    background-color: var(--color-black-at-3);
     &:hover {
-        background-color: var(--color-black-at-12);
+        background-color: var(--color-black-at-6);
     }
-    [data-theme="dark"] &:hover {
+
+    [data-theme="dark"] & {
         background-color: var(--color-white-at-6);
     }
+    [data-theme="dark"] &:hover {
+        background-color: var(--color-white-at-9);
+    }
     svg {
         fill-opacity: 0.6;
     }
@@ -162,20 +177,8 @@
     padding-left: calc(var(--favicon-width) + var(--heading-gap));
     padding-right: calc(var(--favicon-width) + var(--heading-gap) * 2);
     position: relative;
-
-    &:before {
-        content: " ";
-        width: 1px;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 15px;
-        background: var(--color-black-at-12);
-    }
-    [data-theme="dark"] &:before {
-        background: var(--color-white-at-6);
-    }
 }
+
 .otherIcon {
     width: 16px;
     height: 16px;
@@ -201,7 +204,7 @@
 
 .companiesIcons {
     display: flex;
-    gap: 2px;
+    gap: 3px;
     > * {
         flex-shrink: 0;
         min-width: 0;
@@ -210,28 +213,29 @@
 .companiesText {}
 
 .history {
-    margin-top: 6px;
+    margin-top: 12px;
 }
 .historyItem {
     display: flex;
+    align-items: center;
     width: 100%;
     + .historyItem {
-        margin-top: var(--sp-1);
+        margin-top: 6px;
     }
 }
 .historyLink {
     font-size: var(--small-label-font-size);
     font-weight: var(--small-label-font-weight);
     line-height: var(--small-label-line-height);
-    color: var(--ntp-text-muted);
+    color: var(--ntp-text-normal);
     text-decoration: none;
     min-width: 0;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 
     &:hover, &:focus-visible {
-        text-decoration: underline;
+        color: var(--ntp-color-primary)
     }
 
     &:hover .time {
@@ -243,7 +247,7 @@
 .time {
     flex-shrink: 0;
     margin-left: 8px;
-    color: var(--ntp-text-muted-more);
+    color: var(--ntp-text-muted);
     font-size: var(--small-label-font-size);
     font-weight: var(--small-label-font-weight);
     line-height: var(--small-label-line-height);
@@ -264,20 +268,23 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--ntp-text-normal);
+    color: var(--color-black-at-60);
 
     &:hover {
-        background-color: var(--color-black-at-12)
+        background-color: var(--color-black-at-6);
     }
 
-    [data-theme="dark"] &:hover {
-        background-color: var(--color-white-at-6);
+    [data-theme="dark"] & {
+        color: var(--color-white-at-60);
+        &:hover {
+            background-color: var(--color-white-at-6);
+        }
     }
 
     svg {
         display: inline-block;
-        width: 10px;
-        height: 10px;
+        width: 16px;
+        height: 16px;
         position: relative;
         top: 1px;
         transform: rotate(0);

special-pages/pages/new-tab/app/activity/components/ActivityItem.js

@@ -28,19 +28,19 @@ export const ActivityItem = memo(
         return (
             <li key={url} class={cn(styles.item)} data-testid="ActivityItem">
                 <div class={styles.heading}>
-                    <a class={styles.favicon} href={url} title={title} data-url={url}>
-                        {documentVisibility === 'visible' && (
-                            <ImageWithState
-                                faviconSrc={favoriteSrc}
-                                faviconMax={faviconMax}
-                                title={title}
-                                etldPlusOne={etldPlusOne}
-                                theme={'light'}
-                                displayKind={'history-favicon'}
-                            />
-                        )}
-                    </a>
                     <a class={styles.title} href={url} data-url={url}>
+                        <span className={styles.favicon} data-url={url}>
+                            {documentVisibility === 'visible' && (
+                                <ImageWithState
+                                    faviconSrc={favoriteSrc}
+                                    faviconMax={faviconMax}
+                                    title={title}
+                                    etldPlusOne={etldPlusOne}
+                                    theme={'light'}
+                                    displayKind={'history-favicon'}
+                                />
+                            )}
+                        </span>
                         {title}
                     </a>
                     <Controls canBurn={canBurn} url={url} title={title} />