Update Updates page

components/UpdatesPage/index.scss

@@ -1,41 +1,48 @@
 .Updates.PageContent {
-  .version {
+  padding-bottom: $unit-12x;
+
+  .Version {
     display: flex;
     flex-direction: column;
     gap: $unit-2x;
 
-    &.content {
+    h3,
-      .top h3 {
+    li,
+    p {
+    }
+
+    &.Content {
+      .Header h3 {
         color: var(--accent-yellow);
       }
 
-      .update {
+      .Contents {
-        display: flex;
+        display: grid;
-        flex-direction: column;
+        grid-template-columns: 1fr 1fr;
-        gap: $unit-2x;
+        gap: $unit-4x;
-      }
 
         .characters,
         .weapons,
         .summons {
           display: grid;
-        grid-template-rows: 1fr auto;
+          grid-template-rows: auto 1fr;
           gap: $unit;
 
           & > h4 {
             font-weight: $medium;
             font-size: $font-regular;
           }
-      }
 
           .items {
             display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
+            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
             gap: $unit-4x;
           }
         }
+      }
+    }
 
-    .top {
+    .Header {
       align-items: baseline;
       display: flex;
       gap: $unit-half;
@@ -54,9 +61,37 @@
       }
     }
 
+    .Contents {
+      display: flex;
+      flex-direction: column;
+      gap: $unit-4x;
+
+      &.Bare {
+        display: flex;
+        flex-direction: column;
+        color: var(--text-primary);
+        list-style-type: disc;
+        list-style-position: inside;
+        gap: $unit-half;
+
+        li {
+          font-size: 14px;
+        }
+      }
+
+      section {
+        display: flex;
+        flex-direction: column;
+        gap: $unit-2x;
+
+        h2 {
+          margin: 0;
+        }
+      }
+
       .Notes {
         display: grid;
-      grid-template-columns: repeat(3, minmax(200px, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
         gap: $unit-2x;
 
         li {
@@ -66,7 +101,7 @@
 
           h3 {
             font-weight: $bold;
-          font-size: $font-regular;
+            margin-top: $unit-half;
           }
 
           img {
@@ -77,10 +112,6 @@
             width: 100%;
           }
 
-        p {
-          color: var(--text-primary);
-          font-size: 14px;
-
           code {
             background: var(--button-bg);
             border-radius: 2px;
@@ -91,29 +122,14 @@
           }
         }
       }
-    }
 
       .Bugs {
         display: flex;
         flex-direction: column;
         list-style-type: disc;
-      list-style-position: inside;
+        gap: $unit-half;
-      gap: $unit;
+        padding-left: $unit-2x;
-
-      li {
-        font-size: $font-regular;
       }
     }
   }
-
-  .notes {
-    color: var(--text-primary);
-    list-style-type: disc;
-    list-style-position: inside;
-
-    li {
-      margin-bottom: $unit-half;
-      font-size: $font-regular;
-    }
-  }
 }

components/UpdatesPage/index.tsx

@@ -32,11 +32,12 @@ const UpdatesPage: React.FC<Props> = (props: Props) => {
   return (
     <div className="Updates PageContent">
       <h1>{common('about.segmented_control.updates')}</h1>
-      <section className="version" data-version="1.1">
+      <section className="Version" data-version="1.1">
-        <div className="top">
+        <div className="Header">
           <h3>1.1.0</h3>
           <time>2023/02/06</time>
         </div>
+        <div className="Contents">
           <section>
             <h2>New features</h2>
             <ul className="Notes">
@@ -54,6 +55,20 @@ const UpdatesPage: React.FC<Props> = (props: Props) => {
                   for items you have, or just give it your own flavor.
                 </p>
               </li>
+              <li>
+                {image(
+                  'Edit parties without an account',
+                  `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`,
+                  'unauth',
+                  'jpg'
+                )}
+                <h3>No account editing</h3>
+                <p>
+                  Now you can edit parties you create later on, even if you
+                  don&apos;t make an account. You still won&apos;t have a
+                  profile, so make sure to bookmark them!
+                </p>
+              </li>
               <li>
                 {image(
                   'Transcendence',
@@ -63,8 +78,8 @@ const UpdatesPage: React.FC<Props> = (props: Props) => {
                 )}
                 <h3>Transcendence</h3>
                 <p>
-                Now you can set the transcendence stage for Eternals and select
+                  Now you can set the transcendence stage for Eternals and
-                summons (namely, Bahamut).
+                  select summons (namely, Bahamut).
                 </p>
               </li>
               <li>
@@ -141,8 +156,8 @@ const UpdatesPage: React.FC<Props> = (props: Props) => {
                 )}
                 <h3>Redesigned navigation</h3>
                 <p>
-                The top-navigation has been slightly redesigned. Click the party
+                  The top-navigation has been slightly redesigned. Click the
-                name to copy its URL!
+                  party name to copy its URL!
                 </p>
               </li>
               <li>
@@ -154,8 +169,8 @@ const UpdatesPage: React.FC<Props> = (props: Props) => {
                 )}
                 <h3>Update toasts</h3>
                 <p>
-                The site will now show an update in the bottom-right corner when
+                  The site will now show an update in the bottom-right corner
-                new features or content is added.
+                  when new features or content is added.
                 </p>
               </li>
             </ul>
@@ -167,16 +182,20 @@ const UpdatesPage: React.FC<Props> = (props: Props) => {
                 Fixed a bug that caused users to be logged out whenever they
                 restarted their browser
               </li>
-            <li>Fixed a bug that caused Dark Opus weapons to disappear</li>
+              <li>
+                Fixed a bug that caused Dark Opus weapons to permanently
+                disappear when adding them to a party that already had one
+              </li>
             </ul>
           </section>
+        </div>
       </section>
-      <section className="content version" data-version="2022-12L">
+      <section className="Content Version" data-version="2022-12L">
-        <div className="top">
+        <div className="Header">
           <h3>2023-01 Flash Gala</h3>
           <time>2023/01/19</time>
         </div>
-        <div className="update">
+        <div className="Contents">
           <section className="characters">
             <h4>New characters</h4>
             <div className="items">
@@ -205,12 +224,12 @@ const UpdatesPage: React.FC<Props> = (props: Props) => {
           </section>
         </div>
       </section>
-      <section className="content version" data-version="2023-01U">
+      <section className="Content Version" data-version="2023-01U">
-        <div className="top">
+        <div className="Header">
           <h3>2023-01 Uncap</h3>
           <time>2023/01/06</time>
         </div>
-        <div className="update">
+        <div className="Contents">
           <section className="characters">
             <h4>Updated characters</h4>
             <div className="items">
@@ -224,24 +243,24 @@ const UpdatesPage: React.FC<Props> = (props: Props) => {
           </section>
         </div>
       </section>
-      <section className="version" data-version="1.0">
+      <section className="Version" data-version="1.0">
-        <div className="top">
+        <div className="Header">
           <h3>1.0.1</h3>
           <time>2023/01/08</time>
         </div>
-        <ul className="notes">
+        <ul className="Bare Contents">
           <li>Extra party fields: Full Auto, Clear Time, and more</li>
           <li>Support for Youtube short URLs</li>
           <li>Responsive grids and lots of other mobile fixes</li>
           <li>Many other bug fixes</li>
         </ul>
       </section>
-      <section className="content version" data-version="2022-12L">
+      <section className="Content Version" data-version="2022-12L">
-        <div className="top">
+        <div className="Header">
           <h3>2022-12 Legend Festival</h3>
           <time>2022/12/26</time>
         </div>
-        <div className="update">
+        <div className="Contents">
           <section className="characters">
             <h4>New characters</h4>
             <div className="items">
@@ -278,12 +297,12 @@ const UpdatesPage: React.FC<Props> = (props: Props) => {
           </section>
         </div>
       </section>
-      <section className="content version" data-version="2022-12F2">
+      <section className="Content Version" data-version="2022-12F2">
-        <div className="top">
+        <div className="Header">
           <h3>2022-12 Flash Gala</h3>
           <time>2022/12/26</time>
         </div>
-        <div className="update">
+        <div className="Contents">
           <section className="characters">
             <h4>New characters</h4>
             <div className="items">
@@ -312,12 +331,12 @@ const UpdatesPage: React.FC<Props> = (props: Props) => {
           </section>
         </div>
       </section>
-      <section className="version" data-version="1.0">
+      <section className="Version" data-version="1.0">
-        <div className="top">
+        <div className="Header">
           <h3>1.0.0</h3>
           <time>2022/12/26</time>
         </div>
-        <ul className="notes">
+        <ul className="Bare Contents">
           <li>First release!</li>
           <li>You can embed Youtube videos now</li>
           <li>Better clicking - right-click and open in a new tab</li>

styles/globals.scss

@@ -138,15 +138,11 @@ select {
     margin-bottom: $unit * 3;
   }
 
-  p {
+  p,
-    color: var(--text-secondary);
+  li {
-    font-size: $font-regular;
+    color: var(--text-primary);
+    font-size: 14px;
     line-height: 1.3;
-    margin-bottom: $unit;
-
-    &:last-of-type {
-      margin-bottom: 0;
-    }
   }
 
   .LinkItem {