From a2c81de751eca7f6e22cb2de3e81751b7a2694de Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 31 Jan 2023 17:47:39 -0800
Subject: [PATCH] Adjust hero position, fix typos, add styles

---
 components/AboutPage/index.scss   | 54 +++++++++++++++++++++++++------
 components/AboutPage/index.tsx    | 15 ++++++---
 components/RoadmapPage/index.scss |  9 ++----
 components/UpdatesPage/index.tsx  |  2 +-
 styles/globals.scss               | 34 +++++++++++++++++--
 5 files changed, 88 insertions(+), 26 deletions(-)

diff --git a/components/AboutPage/index.scss b/components/AboutPage/index.scss
index 5549f51c..3d073192 100644
--- a/components/AboutPage/index.scss
+++ b/components/AboutPage/index.scss
@@ -7,27 +7,62 @@
     flex-direction: column;
     position: relative;
     gap: $unit-2x;
+    z-index: 5;
 
     .Hero {
       position: absolute;
       width: 40vw;
       height: 80vh;
-      right: $unit-8x * -1;
+      right: -18vw;
       top: $unit-4x * -1;
+      z-index: 1;
       background-image: linear-gradient(
           90deg,
-          rgba(245, 245, 245, 1) 0%,
-          rgba(245, 245, 245, 0) 50%,
-          rgba(245, 245, 245, 0) 70%,
-          rgba(245, 245, 245, 1) 100%
+          rgba(245, 245, 245, 1) 5%,
+          rgba(245, 245, 245, 0.2) 50%,
+          rgba(245, 245, 245, 0.2) 70%,
+          rgba(245, 245, 245, 1) 95%
         ),
         linear-gradient(
-          rgba(245, 245, 245, 1) 0%,
-          rgba(245, 245, 245, 0) 40%,
-          rgba(245, 245, 245, 0) 78%,
-          rgba(245, 245, 245, 1) 100%
+          rgba(245, 245, 245, 1) 5%,
+          rgba(245, 245, 245, 0.4) 40%,
+          rgba(245, 245, 245, 0.4) 78%,
+          rgba(245, 245, 245, 1) 95%
         ),
         url('https://prd-game-a-granbluefantasy.akamaized.net/assets_en/img/sp/top/bg/bg_23.jpg');
+
+      @include breakpoint(tablet) {
+        right: -14vw;
+        width: 60vw;
+      }
+
+      @include breakpoint(phone) {
+        right: $unit-2x * -1;
+        width: 80vw;
+
+        &::before {
+          content: ' ';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: linear-gradient(
+              90deg,
+              rgba(245, 245, 245, 1) 0%,
+              rgba(245, 245, 245, 0) 50%,
+              rgba(245, 245, 245, 0) 70%,
+              rgba(245, 245, 245, 1) 95%
+            ),
+            linear-gradient(
+              rgba(245, 245, 245, 1) 0%,
+              rgba(245, 245, 245, 0) 40%,
+              rgba(245, 245, 245, 0) 78%,
+              rgba(245, 245, 245, 1) 95%
+            );
+          z-index: 3;
+        }
+      }
     }
 
     p {
@@ -56,7 +91,6 @@
   }
 
   .LinkItem {
-    background: var(--dialog-bg);
     max-width: calc($width / 3 * 2);
   }
 }
diff --git a/components/AboutPage/index.tsx b/components/AboutPage/index.tsx
index f01437a4..54579976 100644
--- a/components/AboutPage/index.tsx
+++ b/components/AboutPage/index.tsx
@@ -50,7 +50,7 @@ const AboutPage: React.FC<Props> = (props: Props) => {
           enjoying the tool and want to say thanks, come hang out in Discord.
         </p>
         <p>Feedback and suggestions are greatly appreciated!</p>
-        <div className="LinkItem">
+        <div className="Discord LinkItem">
           <Link href="https://discord.gg/qyZ5hGdPC8">
             <a
               href="https://discord.gg/qyZ5hGdPC8"
@@ -109,7 +109,7 @@ const AboutPage: React.FC<Props> = (props: Props) => {
             Fireplace
           </a>{' '}
           and the granblue-tools Discord for all of their help with with bug
-          testing, feature requests, and more support. (P.S. We&apos;re
+          testing, feature requests, and moral support. (P.S. We&apos;re
           recruiting!)
         </p>
       </section>
@@ -117,8 +117,13 @@ const AboutPage: React.FC<Props> = (props: Props) => {
       <section>
         <h2>Contributing</h2>
 
+        <p>
+          If you know how to program, this app is completely open-source.
+          There&apos;s an abundance of features to build and bugs to fix, so
+          help is always greatly appreciated!
+        </p>
         <ul className="Links">
-          <li className="LinkItem">
+          <li className="Github LinkItem">
             <Link href="https://github.com/jedmund/hensei-api">
               <a
                 href="https://github.com/jedmund/hensei-api"
@@ -133,7 +138,7 @@ const AboutPage: React.FC<Props> = (props: Props) => {
               </a>
             </Link>
           </li>
-          <li className="LinkItem">
+          <li className="Github LinkItem">
             <Link href="https://github.com/jedmund/hensei-web">
               <a
                 href="https://github.com/jedmund/hensei-web"
@@ -153,7 +158,7 @@ const AboutPage: React.FC<Props> = (props: Props) => {
       <section>
         <h2>License</h2>
         <p>
-          This app is open source and licensed under{' '}
+          This app is licensed under{' '}
           <a
             href="https://choosealicense.com/licenses/agpl-3.0/"
             target="_blank"
diff --git a/components/RoadmapPage/index.scss b/components/RoadmapPage/index.scss
index 2c106d30..245d7b41 100644
--- a/components/RoadmapPage/index.scss
+++ b/components/RoadmapPage/index.scss
@@ -29,10 +29,12 @@
 
     p {
       margin-bottom: $unit;
+      font-size: $font-medium;
     }
 
     .LinkItem {
       $diameter: $unit-6x;
+      background: var(--dialog-bg);
       border: 1px solid var(--link-item-bg);
       border-radius: $card-corner;
 
@@ -78,13 +80,6 @@
     }
   }
 
-  p {
-    color: var(--text-secondary);
-
-    font-size: $font-regular;
-    line-height: 1.3;
-  }
-
   ul {
     color: var(--text-primary);
     list-style-type: none;
diff --git a/components/UpdatesPage/index.tsx b/components/UpdatesPage/index.tsx
index 434006d3..1fb2cfa8 100644
--- a/components/UpdatesPage/index.tsx
+++ b/components/UpdatesPage/index.tsx
@@ -62,7 +62,7 @@ const UpdatesPage: React.FC<Props> = (props: Props) => {
                   'unauth',
                   'jpg'
                 )}
-                <h3>No account editing</h3>
+                <h3>Accountless team 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
diff --git a/styles/globals.scss b/styles/globals.scss
index 7913fe5c..739f76e2 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -147,20 +147,47 @@ select {
 
   .LinkItem {
     $diameter: $unit-6x;
+    align-items: center;
+    background: var(--dialog-bg);
     border: 1px solid var(--link-item-bg);
     border-radius: $card-corner;
+    display: flex;
+    min-height: 82px;
+    transition: background $duration-zoom ease-in,
+      transform $duration-zoom ease-in;
 
     &:hover {
-      background-color: var(--link-item-bg);
+      background: var(--link-item-bg);
+      color: var(--text-primary);
 
-      svg {
-        fill: var(--link-item-image-color-hover);
+      .ShareIcon {
+        fill: var(--text-primary);
+        transform: translate($unit-half, calc(($unit * -1) / 2));
       }
     }
 
+    &.Github {
+      .Left svg {
+        background: white;
+        border-radius: calc($diameter / 2);
+      }
+
+      &:hover {
+        .Left svg {
+          fill: #6e5494;
+        }
+      }
+    }
+
+    &.Discord:hover .Left svg {
+      fill: #5865f2;
+    }
+
     a {
       display: flex;
+      justify-content: space-between;
       padding: $unit-2x;
+      width: 100%;
 
       &:hover {
         text-decoration: none;
@@ -183,6 +210,7 @@ select {
         fill: var(--link-item-image-color);
         width: $diameter;
         height: auto;
+        transition: fill $duration-zoom ease-in;
 
         &.ShareIcon {
           width: $unit-4x;