Merge pull request #342 from tallycash/settings-tab

⚙️ Add the first page for the menu/settings tab

ui/components/Shared/SharedToggleButton.tsx

@@ -0,0 +1,43 @@
+import React, { useState, ReactElement } from "react"
+import classNames from "classnames"
+
+export default function SharedToggleButton(): ReactElement {
+  const [isActive, setIsActive] = useState(false)
+
+  return (
+    <button
+      type="button"
+      className={classNames("container", { is_active: isActive })}
+      onClick={() => {
+        setIsActive(!isActive)
+      }}
+    >
+      <div className="bulb" />
+      <style jsx>
+        {`
+          .container {
+            width: 40px;
+            height: 24px;
+            border-radius: 20px;
+            background-color: var(--green-80);
+            box-sizing: border-box;
+            padding: 4px;
+            cursor: pointer;
+            display: flex;
+          }
+          .bulb {
+            width: 16px;
+            height: 16px;
+            border-radius: 20px;
+            background-color: var(--green-40);
+            transition: 0.2s ease-in-out;
+          }
+          .is_active .bulb {
+            transform: translateX(16px);
+            background-color: var(--trophy-gold);
+          }
+        `}
+      </style>
+    </button>
+  )
+}

ui/pages/Menu.tsx

@@ -1,22 +1,144 @@
-import React, { ReactElement } from "react"
+import React, { useState, ReactElement } from "react"
+import classNames from "classnames"
 import CorePage from "../components/Core/CorePage"
+import SharedButton from "../components/Shared/SharedButton"
+import SharedToggleButton from "../components/Shared/SharedToggleButton"
+
+function SettingRow(props: { title: string; action: any }): ReactElement {
+  const { title, action } = props
+
+  return (
+    <li>
+      <div className="left">{title}</div>
+      <div className="right">{action()}</div>
+      <style jsx>
+        {`
+          li {
+            height: 50px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+          }
+          .left {
+            color: var(--green-20);
+            font-size: 18px;
+            font-weight: 600;
+            line-height: 24px;
+          }
+        `}
+      </style>
+    </li>
+  )
+}
+
+function ArrowRightIcon() {
+  return (
+    <div className="icon_chevron_left">
+      <style jsx>
+        {`
+          .icon_chevron_left {
+            mask-image: url("./images/chevron_down.svg");
+            mask-size: 15px 8px;
+            width: 15px;
+            height: 8px;
+            margin-top: 2px;
+            background-color: var(--green-40);
+            transform: rotate(-90deg);
+          }
+        `}
+      </style>
+    </div>
+  )
+}
+
+const settings = {
+  general: [
+    {
+      title: "Main Currency",
+      action: () => {
+        return (
+          <SharedButton size="medium" type="secondary" icon="chevron">
+            USD
+          </SharedButton>
+        )
+      },
+    },
+    {
+      title: "Hide asset balance under $2",
+      action: SharedToggleButton,
+    },
+    {
+      title: "Use Tally as default wallet",
+      action: SharedToggleButton,
+    },
+    {
+      title: "Token list",
+      action: ArrowRightIcon,
+    },
+  ],
+  developer: [
+    {
+      title: "Show testnet networks",
+      action: SharedToggleButton,
+    },
+    {
+      title: "Contracts deployed by users",
+      action: ArrowRightIcon,
+    },
+  ],
+}
 
 export default function Menu(): ReactElement {
   return (
     <>
-      <CorePage>
-        <span className="title">Menu</span>
+      <CorePage hasTopBar={false}>
+        <section className="standard_width_padded">
+          <h1>Settings</h1>
+          <div className="icon_lock" />
+          <h3>General</h3>
+          <ul>
+            {settings.general.map((setting) => (
+              <SettingRow title={setting.title} action={setting.action} />
+            ))}
+          </ul>
+          <hr />
+          <h3>Developer</h3>
+          <ul>
+            {settings.developer.map((setting) => (
+              <SettingRow title={setting.title} action={setting.action} />
+            ))}
+          </ul>
+        </section>
       </CorePage>
       <style jsx>
         {`
-          .title {
-            width: 375px;
-            height: 46px;
-            color: #fefefc;
-            font-family: "Quincy CF";
-            font-size: 38px;
+          h1 {
+            color: #fff;
+            font-size: 22px;
+            font-weight: 500;
+            line-height: 32px;
+          }
+          .icon_lock {
+            background: url("./images/lock@2x.png");
+            background-size: cover;
+            width: 24px;
+            height: 24px;
+            position: absolute;
+            top: 16px;
+            right: 16px;
+          }
+          h3 {
+            color: var(--green-40);
+            font-size: 16px;
             font-weight: 400;
-            text-align: center;
+            line-height: 24px;
+          }
+          hr {
+            width: 100%;
+            height: 1px;
+            background-color: var(--green-80);
+            border: unset;
+            margin: 25px 0px 30px 0px;
           }
         `}
       </style>