react-app: Add license and github url to footer

refs oursky#328
hochiw · Jul 29, 2022 · 90e49ba · 90e49ba
1 parent 3e06030
commit 90e49ba
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 57 deletions.
diff --git a/react-app/src/components/Footer/Footer.tsx b/react-app/src/components/Footer/Footer.tsx
@@ -16,57 +16,53 @@ const Footer: React.FC = () => {
           "text-sm",
           "leading-5",
           "font-normal",
+          "items-center",
           "text-gray-500",
           "desktop:flex",
-          "desktop:items-center",
+          "desktop:justify-between",
           "desktop:mt-5"
         )}
       >
-        <p className={cn("desktop:grow", "desktop:text-left")}>
-          <LocalizedText
-            messageID="footer.likecoin"
-            messageArgs={{ year: new Date().getFullYear() }}
-          />
-        </p>
-        <p
-          className={cn(
-            "mt-6",
-            "desktop:mt-0",
-            Config.footerLinks.tokenLinks.length <= 0 && "hidden"
-          )}
+        <div
+          className={cn("flex", "flex-col", "items-center", "desktop:flex-row")}
         >
-          <LocalizedText messageID="footer.getToken" />
-        </p>
+          <p className={cn("desktop:grow", "desktop:text-left")}>
+            <LocalizedText messageID="footer.license" />
+          </p>
+
+          <AppButton
+            theme="secondary"
+            size="small"
+            type="anchor"
+            href={Config.footerLinks.githubLink}
+            messageID="footer.github"
+            className={cn(
+              "text-sm",
+              "capitalize",
+              "leading-4",
+              "font-medium",
+              "text-app-darkgrey",
+              "m-3"
+            )}
+          />
+        </div>
         <div
           className={cn(
             "flex",
-            "justify-center",
+            "flex-col",
             "items-center",
-            "my-3",
-            "desktop:px-3"
+            "mt-3",
+            "desktop:flex-row",
+            "desktop:mt-0"
           )}
         >
-          {Config.footerLinks.tokenLinks.map((token) => (
-            <AppButton
-              key={token.name}
-              theme="secondary"
-              size="small"
-              type="anchor"
-              href={token.link}
-              className={cn(
-                "text-sm",
-                "capitalize",
-                "leading-4",
-                "font-medium",
-                "text-app-darkgrey",
-                "m-0.5"
-              )}
-            >
-              {token.name}
-            </AppButton>
-          ))}
-        </div>
-        {Config.footerLinks.contactSupport != null && (
+          <p
+            className={cn(
+              Config.footerLinks.tokenLinks.length <= 0 && "hidden"
+            )}
+          >
+            <LocalizedText messageID="footer.getToken" />
+          </p>
           <div
             className={cn(
               "flex",
@@ -76,24 +72,55 @@ const Footer: React.FC = () => {
               "desktop:px-3"
             )}
           >
-            <p className={cn("pr-3")}>
-              <LocalizedText messageID="footer.needHelp" />
-            </p>
-            <AppButton
-              messageID="footer.contactSupport"
-              theme="secondary"
-              size="small"
-              type="anchor"
-              href={Config.footerLinks.contactSupport}
+            {Config.footerLinks.tokenLinks.map((token) => (
+              <AppButton
+                key={token.name}
+                theme="secondary"
+                size="small"
+                type="anchor"
+                href={token.link}
+                className={cn(
+                  "text-sm",
+                  "capitalize",
+                  "leading-4",
+                  "font-medium",
+                  "text-app-darkgrey",
+                  "m-0.5"
+                )}
+              >
+                {token.name}
+              </AppButton>
+            ))}
+          </div>
+          {Config.footerLinks.contactSupport != null && (
+            <div
               className={cn(
-                "text-sm",
-                "leading-4",
-                "font-medium",
-                "text-app-darkgrey"
+                "flex",
+                "justify-center",
+                "items-center",
+                "my-3",
+                "desktop:px-3"
               )}
-            />
-          </div>
-        )}
+            >
+              <p className={cn("pr-3")}>
+                <LocalizedText messageID="footer.needHelp" />
+              </p>
+              <AppButton
+                messageID="footer.contactSupport"
+                theme="secondary"
+                size="small"
+                type="anchor"
+                href={Config.footerLinks.contactSupport}
+                className={cn(
+                  "text-sm",
+                  "leading-4",
+                  "font-medium",
+                  "text-app-darkgrey"
+                )}
+              />
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );

diff --git a/react-app/src/i18n/translations/en.json b/react-app/src/i18n/translations/en.json
@@ -221,7 +221,8 @@
   "auth.loginFailure": "Failed to login, please try again",
   "footer.contactSupport": "Contact Support",
   "footer.getToken": "Get Token",
-  "footer.likecoin": "© {year} LikeCoin",
+  "footer.github": "GitHub",
+  "footer.license": "Apache License",
   "footer.needHelp": "Need help?",
   "form.validation.address.invalidAddress": "Invalid address",
   "form.validation.address.invalidPrefix": "Invalid address prefix, please use address with prefix `{prefix}`",

diff --git a/react-app/src/i18n/translations/zh.json b/react-app/src/i18n/translations/zh.json
@@ -221,7 +221,8 @@
   "auth.loginFailure": "Failed to login, please try again",
   "footer.contactSupport": "Contact Support",
   "footer.getToken": "Get Token",
-  "footer.likecoin": "© {year} LikeCoin",
+  "footer.github": "GitHub",
+  "footer.license": "Apache License",
   "footer.needHelp": "Need help?",
   "form.validation.address.invalidAddress": "Invalid address",
   "form.validation.address.invalidPrefix": "Invalid address prefix, please use address with prefix `{prefix}`",