small adjustments

mutebg · Jul 25, 2022 · 6136de8 · 6136de8 · vercel · Jul 25, 2022
1 parent 5471e89
commit 6136de8
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 54 deletions.
diff --git a/components/cover/cover.tsx b/components/cover/cover.tsx
@@ -40,6 +40,7 @@ const moreMenu = (
 
 const StyledCover = styled.div<{ url: string }>`
   background-size: cover;
+  background-position: center;
   ${(props) =>
     getOverlayCssFromTheme(
       (value) => ({ backgroundImage: ` ${value}, url(${props.url})` }),

diff --git a/components/header/header.tsx b/components/header/header.tsx
@@ -22,6 +22,7 @@ import {
   IndeterminateProgressIndicator,
   IconFilledMenu,
   Drawer,
+  Hidden,
 } from "newskit";
 import Link from "next/link";
 import { HideMobile, HideDesktop } from "../hide";
@@ -213,7 +214,10 @@ const UserSettings = ({ themeOnChange, themeName }: HeaderProps) => {
         >
           <HideMobile>
             <Switch
-              label="Toggle theme"
+              label={
+                // @ts-ignore
+                <Hidden md>Toggle theme</Hidden>
+              }
               onChange={themeOnChange}
               checked={themeName === "light"}
               overrides={{

diff --git a/components/search-modal/search-modal.tsx b/components/search-modal/search-modal.tsx
@@ -9,6 +9,7 @@ import {
   GridLayout,
   IconFilledSearch,
 } from "newskit";
+import Link from "next/link";
 import React from "react";
 
 import axios from "axios";
@@ -84,9 +85,9 @@ export const SearchModal = ({
       </form>
       <Menu vertical overrides={{ spaceInline: "space000" }}>
         {searchResults.map(({ id, name }) => (
-          <MenuItem key={id} href={`/?id=${id}`}>
-            {name}
-          </MenuItem>
+          <Link key={id} href={`/?id=${id}`}>
+            <MenuItem href={`/?id=${id}`}>{name}</MenuItem>
+          </Link>
         ))}
       </Menu>
     </Modal>

diff --git a/pages/album.tsx b/pages/album.tsx
@@ -1,8 +1,7 @@
 import type { NextPage, NextPageContext } from "next";
-import { GridLayout, Slider, TextBlock } from "newskit";
+import { GridLayout, InlineMessage, Slider, TextBlock } from "newskit";
 import { Cover } from "../components/cover";
 import { Songs } from "../components/songs";
-import { CardList } from "../components/card-list";
 import { Section } from "../components/section";
 import axios from "axios";
 import DeezerClient from "../services/deezer";
@@ -61,18 +60,11 @@ const Album: NextPage<Props> = ({
   return (
     <GridLayout rowGap="space100">
       <Cover {...info} />
-      <Section title="Songs">
-        {songs.length ? (
+      {songs.length > 0 && (
+        <Section title="Songs">
           <Songs songs={songs} />
-        ) : (
-          <TextBlock
-            stylePreset="inkBase"
-            typographyPreset="editorialHeadline020"
-          >
-            No songs
-          </TextBlock>
-        )}
-      </Section>
+        </Section>
+      )}
     </GridLayout>
   );
 };

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,5 +1,5 @@
 import type { NextPage, NextPageContext } from "next";
-import { GridLayout, Slider, TextBlock } from "newskit";
+import { GridLayout, TextBlock, InlineMessage } from "newskit";
 import { Cover } from "../components/cover";
 import { Songs } from "../components/songs";
 import { CardList } from "../components/card-list";
@@ -100,42 +100,23 @@ const Home: NextPage<Props> = ({
   return (
     <GridLayout rowGap="space100">
       <Cover {...info} />
-      <Section title="Songs">
-        {topSongs.length ? (
+      {topSongs.length > 0 && (
+        <Section title="Songs">
           <Songs songs={topSongs} />
-        ) : (
-          <TextBlock
-            stylePreset="inkBase"
-            typographyPreset="editorialHeadline020"
-          >
-            No songs
-          </TextBlock>
-        )}
-      </Section>
-      <Section title="Albums">
-        {albums.length ? (
+        </Section>
+      )}
+
+      {albums.length > 0 && (
+        <Section title="Albums">
           <CardList list={albums.map((k) => ({ ...k, sub: k.year }))} />
-        ) : (
-          <TextBlock
-            stylePreset="inkBase"
-            typographyPreset="editorialHeadline020"
-          >
-            No albums
-          </TextBlock>
-        )}
-      </Section>
-      <Section title="Singles">
-        {singles.length ? (
+        </Section>
+      )}
+
+      {singles.length > 0 && (
+        <Section title="Singles">
           <CardList list={singles.map((k) => ({ ...k, sub: k.year }))} />
-        ) : (
-          <TextBlock
-            stylePreset="inkBase"
-            typographyPreset="editorialHeadline020"
-          >
-            No singles
-          </TextBlock>
-        )}
-      </Section>
+        </Section>
+      )}
     </GridLayout>
   );
 };

diff --git a/theme/defaults.ts b/theme/defaults.ts
@@ -17,16 +17,22 @@ export default {
     stylePreset: "inkBase",
   },
   menu: {
-    spaceInline: "space050",
+    spaceInline: { xs: "space000", lg: "space050" },
   },
   menuItem: {
     horizontal: {
       minHeight: "sizing080",
       stylePreset: "menuItemHorizontal",
       transitionPreset: "backgroundColorChange",
       spaceInline: "space030",
-      spaceInset: "spaceInsetSquish030",
-      typographyPreset: "utilitySubheading040",
+      spaceInset: {
+        xs: "spaceInsetSquish010",
+        lg: "spaceInsetSquish030",
+      },
+      typographyPreset: {
+        xs: "utilitySubheading020",
+        lg: "utilitySubheading040",
+      },
     },
     vertical: {
       spaceInline: "space000",