Changed icons to regular variant

TODO.md

@@ -22,7 +22,6 @@
 ## Mid term
 
 - [Feat] [Payload] Home as parent folders for home folders
-- [Feat] Change icons to filled one
 - [Bugs] [Timeline] Error if collectible not published?
 - [Feat] [Timeline] display source language
 - [Feat] [Timeline] Add details button in footer with credits + last updated / created

src/components/AppLayout/components/Footer.astro

@@ -52,7 +52,7 @@ const contactLabel = `${t("footer.socials.contact.title")} - ${t(
         </a>
 
         <a href="/contact" class="pressable-label" aria-label={contactLabel} title={contactLabel}>
-          <Icon name="material-symbols:mail-outline" />
+          <Icon name="material-symbols:mail" />
           <p class="font-s">{t("footer.socials.contact.title")}</p>
         </a>
       </div>

src/components/Button.astro

@@ -38,6 +38,7 @@ const { title, icon, class: className, ariaLabel, id } = Astro.props;
     place-items: center;
     place-content: center;
     gap: 1em;
+    white-space: pre;
 
     font-variation-settings: "wght" 700;
     cursor: pointer;
@@ -51,6 +52,7 @@ const { title, icon, class: className, ariaLabel, id } = Astro.props;
       & > svg {
         width: 1.2em;
         height: 1.2em;
+        flex-shrink: 0;
       }
     }
 

src/components/Metadata.astro

@@ -32,23 +32,16 @@ if (values.length === 0) return;
 
 <style>
   #container {
-    display: grid;
+    display: flex;
-    grid-template-columns: auto 1fr;
     gap: 0.5em 1em;
-
+    flex-wrap: wrap;
-    @media (max-width: 35em) {
-      grid-template-columns: 1fr;
-    }
 
     & > #values {
       display: flex;
       flex-wrap: wrap;
       gap: 6px;
-
+      place-items: center;
-      &:not(.with-border) {
+      translate: 0px 3px;
-        translate: 0px 5px;
-        line-height: 1.2;
-      }
 
       &.with-border {
         & > div,

src/components/TableOfContent/TableOfContent.astro

@@ -15,7 +15,7 @@ const { t } = await getI18n(Astro.locals.currentLocale);
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
 <div>
-  <TitleIcon title={t("pages.tableOfContent")} icon="material-symbols:list-alt-outline" />
+  <TitleIcon title={t("pages.tableOfContent")} icon="material-symbols:list-alt" />
   <ol>
     {toc.map((entry) => <TableOfContentItem entry={entry} />)}
   </ol>

src/pages/[locale]/api/pages/partial.astro

@@ -37,7 +37,7 @@ const { pretitle, title, subtitle, summary, content, credits, toc, language, sou
 const metaAttributes: Attribute[] = [
   {
     title: t("global.media.attributes.createdAt"),
-    icon: "material-symbols:calendar-add-on-outline",
+    icon: "material-symbols:calendar-add-on",
     values: [{ name: formatDate(new Date(createdAt)) }],
     withBorder: false,
   },
@@ -52,7 +52,7 @@ const metaAttributes: Attribute[] = [
 if (updatedBy) {
   metaAttributes.push({
     title: t("global.media.attributes.updatedBy"),
-    icon: "material-symbols:person-edit-outline",
+    icon: "material-symbols:person-edit",
     values: [{ name: updatedBy.username, href: getLocalizedUrl(`/recorders/${updatedBy.id}`) }],
     withBorder: true,
   });

src/pages/[locale]/audios/[id].astro

@@ -41,7 +41,7 @@ const metaAttributes = [
     ? [
         {
           title: t("global.media.attributes.filename"),
-          icon: "material-symbols:audio-file-outline",
+          icon: "material-symbols:audio-file",
           values: [{ name: filename }],
           withBorder: false,
         },
@@ -49,13 +49,13 @@ const metaAttributes = [
     : []),
   {
     title: t("global.media.attributes.filesize"),
-    icon: "material-symbols:hard-drive-outline",
+    icon: "material-symbols:hard-drive",
     values: [{ name: formatFilesize(filesize) }],
     withBorder: false,
   },
   {
     title: t("global.media.attributes.createdAt"),
-    icon: "material-symbols:calendar-add-on-outline",
+    icon: "material-symbols:calendar-add-on",
     values: [{ name: formatDate(new Date(createdAt)) }],
     withBorder: false,
   },

src/pages/[locale]/collectibles/[slug]/_components/AvailabilityInfo.astro

@@ -32,7 +32,7 @@ const title = (() => {
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
 <div id="container">
-  <TitleIcon title={title} icon={"material-symbols:shopping-cart-outline"} />
+  <TitleIcon title={title} icon="material-symbols:shopping-cart" />
   {
     urls.length > 0 && (
       <div id="values">

src/pages/[locale]/collectibles/[slug]/_components/ContentsSection/ContentsSection.astro

@@ -15,7 +15,7 @@ const { t } = await getI18n(Astro.locals.currentLocale);
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
 <div id="container">
-  <TitleIcon title={t("collectibles.contents")} icon="material-symbols:list-alt-outline" />
+  <TitleIcon title={t("collectibles.contents")} icon="material-symbols:list-alt" />
 
   <div id="contents">
     {contents.map((content) => <ContentRow content={content} />)}

src/pages/[locale]/collectibles/[slug]/_components/PageInfo.astro

@@ -21,7 +21,7 @@ const { t } = await getI18n(Astro.locals.currentLocale);
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
 <div id="container">
-  <TitleIcon title={t("collectibles.bookFormat")} icon="material-symbols:note-stack-outline" />
+  <TitleIcon title={t("collectibles.bookFormat")} icon="material-symbols:note-stack" />
 
   <div id="values">
     <p>{t("collectibles.bookFormat.pageCount", { count: pageCount })}</p>

src/pages/[locale]/collectibles/[slug]/_components/SizeInfo.astro

@@ -18,7 +18,7 @@ const { formatInches, formatMillimeters, t } = await getI18n(Astro.locals.curren
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
 <div id="size">
-  <TitleIcon title={t("collectibles.size")} icon="material-symbols:measuring-tape-outline" />
+  <TitleIcon title={t("collectibles.size")} icon="material-symbols:measuring-tape" />
 
   <div id="values">
     <div>

src/pages/[locale]/collectibles/[slug]/_components/SubitemSection.astro

@@ -15,7 +15,7 @@ const { t } = await getI18n(Astro.locals.currentLocale);
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
 <div id="container">
-  <TitleIcon title={t("collectibles.contents")} icon="material-symbols:box-outline" />
+  <TitleIcon title={t("collectibles.contents")} icon="material-symbols:box" />
 
   <div id="values">
     {subitems.map((subitem) => <CollectiblePreview collectible={subitem} />)}

src/pages/[locale]/collectibles/[slug]/_components/WeightInfo.astro

@@ -13,7 +13,7 @@ const { formatPounds, formatGrams, t } = await getI18n(Astro.locals.currentLocal
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
 <div id="container">
-  <TitleIcon title={t("collectibles.weight")} icon="material-symbols:scale-outline" />
+  <TitleIcon title={t("collectibles.weight")} icon="material-symbols:scale" />
   <p>{formatGrams(weight)}{" "}({formatPounds(weight)})</p>
 </div>
 

src/pages/[locale]/collectibles/[slug]/gallery/[index].astro

@@ -30,7 +30,7 @@ const metaAttributes = [
     ? [
         {
           title: t("global.media.attributes.filename"),
-          icon: "material-symbols:unknown-document-outline",
+          icon: "material-symbols:unknown-document",
           values: [{ name: filename }],
           withBorder: false,
         },
@@ -38,7 +38,7 @@ const metaAttributes = [
     : []),
   {
     title: t("global.media.attributes.createdAt"),
-    icon: "material-symbols:calendar-add-on-outline",
+    icon: "material-symbols:calendar-add-on",
     values: [{ name: formatDate(new Date(createdAt)) }],
     withBorder: false,
   },

src/pages/[locale]/collectibles/[slug]/index.astro

@@ -59,7 +59,7 @@ const { pretitle, title, subtitle, description } = translation;
 const metaAttributes: Attribute[] = [
   {
     title: t("global.media.attributes.createdAt"),
-    icon: "material-symbols:calendar-add-on-outline",
+    icon: "material-symbols:calendar-add-on",
     values: [{ name: formatDate(new Date(createdAt)) }],
     withBorder: false,
   },
@@ -74,7 +74,7 @@ const metaAttributes: Attribute[] = [
 if (updatedBy) {
   metaAttributes.push({
     title: t("global.media.attributes.updatedBy"),
-    icon: "material-symbols:person-edit-outline",
+    icon: "material-symbols:person-edit",
     values: [{ name: updatedBy.username, href: getLocalizedUrl(`/recorders/${updatedBy.id}`) }],
     withBorder: true,
   });
@@ -83,7 +83,7 @@ if (updatedBy) {
 const additionalAttributes = [
   {
     title: t("collectibles.nature"),
-    icon: "material-symbols:leaf-spark-outline",
+    icon: "material-symbols:leaf-spark",
     values: [
       {
         name: t(
@@ -100,7 +100,7 @@ const additionalAttributes = [
 if (releaseDate) {
   additionalAttributes.push({
     title: t("collectibles.releaseDate"),
-    icon: "material-symbols:calendar-month-outline",
+    icon: "material-symbols:calendar-month",
     values: [{ name: formatDate(new Date(releaseDate)) }],
     withBorder: false,
   });

src/pages/[locale]/images/[id].astro

@@ -25,7 +25,7 @@ const metaAttributes = [
     ? [
         {
           title: t("global.media.attributes.filename"),
-          icon: "material-symbols:unknown-document-outline",
+          icon: "material-symbols:unknown-document",
           values: [{ name: filename }],
           withBorder: false,
         },
@@ -33,7 +33,7 @@ const metaAttributes = [
     : []),
   {
     title: t("global.media.attributes.createdAt"),
-    icon: "material-symbols:calendar-add-on-outline",
+    icon: "material-symbols:calendar-add-on",
     values: [{ name: formatDate(new Date(createdAt)) }],
     withBorder: false,
   },

src/pages/[locale]/index.astro

@@ -66,13 +66,13 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
       <div class="grid">
         <div class="DEV_TODO">
           <LinkCard
-            icon="material-symbols:movie-outline"
+            icon="material-symbols:movie"
             title={t("footer.links.videos.title")}
             subtitle={t("footer.links.videos.subtitle", { count: 2115 })}
             href={getLocalizedUrl("/videos")}
           />
           <LinkCard
-            icon="material-symbols:folder-zip-outline"
+            icon="material-symbols:folder-zip"
             title={t("footer.links.webArchives.title")}
             subtitle={t("footer.links.webArchives.subtitle", { count: 20 })}
             href={getLocalizedUrl("/archives")}
@@ -80,7 +80,7 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
         </div>
 
         <LinkCard
-          icon="material-symbols:calendar-month-outline"
+          icon="material-symbols:calendar-month"
           title={t("footer.links.timeline.title")}
           subtitle={t("footer.links.timeline.subtitle", {
             eraCount: cache.config.timeline.eras.length,
@@ -90,7 +90,7 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
         />
 
         <LinkCard
-          icon="material-symbols:perm-media-outline"
+          icon="material-symbols:perm-media"
           title={t("footer.links.gallery.title")}
           subtitle={t("footer.links.gallery.subtitle", { count: 5750 })}
           href="https://gallery.accords-library.com/posts"
@@ -120,9 +120,9 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
           subtitle={t("footer.socials.github.subtitle")}
           href="https://github.com/Accords-Library"
         />
-        <div class="DEV_TODO">
+        <div>
           <LinkCard
-            icon="material-symbols:mail-outline"
+            icon="material-symbols:mail"
             title={t("footer.socials.contact.title")}
             subtitle={t("footer.socials.contact.subtitle")}
             href={getLocalizedUrl("/contact")}

src/pages/[locale]/videos/[id].astro

@@ -40,7 +40,7 @@ const metaAttributes = [
     ? [
         {
           title: t("global.media.attributes.filename"),
-          icon: "material-symbols:video-file-outline",
+          icon: "material-symbols:video-file",
           values: [{ name: filename }],
           withBorder: false,
         },
@@ -48,13 +48,13 @@ const metaAttributes = [
     : []),
   {
     title: t("global.media.attributes.filesize"),
-    icon: "material-symbols:hard-drive-outline",
+    icon: "material-symbols:hard-drive",
     values: [{ name: formatFilesize(filesize) }],
     withBorder: false,
   },
   {
     title: t("global.media.attributes.createdAt"),
-    icon: "material-symbols:calendar-add-on-outline",
+    icon: "material-symbols:calendar-add-on",
     values: [{ name: formatDate(new Date(createdAt)) }],
     withBorder: false,
   },