WIP: Improve UI

packages/extension/src/components/radio-group/index.ts

@@ -1,3 +1,4 @@
 export * from "./horizontal";
 export * from "./styles";
 export * from "./types";
+export * from "./layered";

packages/extension/src/components/radio-group/layered/comp.tsx

@@ -0,0 +1,51 @@
+import React, { FunctionComponent } from "react";
+import { Skeleton } from "../../skeleton";
+import { RadioGroupProps } from "../types";
+import { LayeredStyles } from "./styles";
+
+export const LayeredHorizontalRadioGroup: FunctionComponent<
+  RadioGroupProps & {
+    isNotReady?: boolean;
+  }
+> = ({
+  style,
+  className,
+  size = "default",
+  items,
+  selectedKey,
+  itemMinWidth,
+  isNotReady = false,
+  onSelect,
+}) => {
+  return (
+    <Skeleton type="circle" isNotReady={isNotReady}>
+      <LayeredStyles.Container
+        style={style}
+        className={className}
+        size={size}
+        isNotReady={isNotReady}
+      >
+        {items.map((item) => {
+          const selected = item.key === selectedKey;
+
+          return (
+            <LayeredStyles.Button
+              key={item.key}
+              isNotReady={isNotReady}
+              type="button"
+              size={size}
+              selected={selected}
+              itemMinWidth={itemMinWidth}
+              onClick={(e) => {
+                e.preventDefault();
+                onSelect(item.key);
+              }}
+            >
+              {item.text}
+            </LayeredStyles.Button>
+          );
+        })}
+      </LayeredStyles.Container>
+    </Skeleton>
+  );
+};

packages/extension/src/components/radio-group/layered/index.ts

@@ -0,0 +1,2 @@
+export * from "./comp";
+export * from "./styles";

packages/extension/src/components/radio-group/layered/styles.ts

@@ -0,0 +1,140 @@
+import styled, { css } from "styled-components";
+import { ColorPalette } from "../../../styles";
+
+export const LayeredStyles = {
+  Container: styled.div<{
+    size: "default" | "large";
+    isNotReady: boolean;
+  }>`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+
+    background-color: ${(props) =>
+      props.theme.mode === "light"
+        ? ColorPalette.white
+        : ColorPalette["gray-600"]};
+
+    box-shadow: ${(props) =>
+      props.theme.mode === "light" && !props.isNotReady
+        ? "0px 1px 4px 0px rgba(43, 39, 55, 0.10)"
+        : "none"};
+
+    ${({ size }) => {
+      switch (size) {
+        case "large": {
+          return css`
+            height: 2.375rem;
+            border-radius: 1.1875rem;
+            padding: 0 0.15625rem;
+          `;
+        }
+        default: {
+          return css`
+            height: 1.875rem;
+            border-radius: 0.9375rem;
+            padding: 0 0.125rem;
+          `;
+        }
+      }
+    }};
+  `,
+  Button: styled.button<{
+    size: "default" | "large";
+    selected: boolean;
+    itemMinWidth?: string;
+    isNotReady: boolean;
+  }>`
+    position: relative;
+    ${({ selected, isNotReady }) => {
+      if (selected && isNotReady) {
+        return css`
+          ::after {
+            content: "";
+
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+
+            border-radius: 999999px;
+            background-color: ${(props) => {
+              return props.theme.mode === "light"
+                ? ColorPalette["skeleton-layer-1"]
+                : ColorPalette["gray-500"];
+            }};
+
+            z-index: 999999;
+          }
+        `;
+      }
+    }}
+
+    flex: ${({ itemMinWidth }) => (itemMinWidth ? undefined : 1)};
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    min-width: ${({ itemMinWidth }) => itemMinWidth};
+
+    ${({ selected }) => {
+      if (selected) {
+        return css`
+          cursor: auto;
+          background-color: ${(props) =>
+            props.theme.mode === "light"
+              ? ColorPalette["blue-50"]
+              : ColorPalette["gray-400"]};
+          color: ${(props) =>
+            props.theme.mode === "light"
+              ? ColorPalette["blue-400"]
+              : ColorPalette.white};
+          font-weight: 500;
+        `;
+      }
+      return css`
+        cursor: pointer;
+        background-color: ${(props) =>
+          props.theme.mode === "light"
+            ? ColorPalette.white
+            : ColorPalette["gray-600"]};
+        color: ${ColorPalette["gray-300"]};
+        font-weight: 400;
+      `;
+    }}
+
+    ${({ size }) => {
+      switch (size) {
+        case "large": {
+          return css`
+            height: 2.0625rem;
+            border-radius: 1.03125rem;
+            font-size: 0.75rem;
+
+            padding: 0 0.625rem;
+          `;
+        }
+        default: {
+          return css`
+            height: 1.625rem;
+            border-radius: 0.8125rem;
+            font-size: 0.75rem;
+
+            padding: 0 0.625rem;
+          `;
+        }
+      }
+    }}
+    
+    
+    white-space: nowrap;
+
+    // Remove normalized css properties.
+    border-width: 0;
+    border-style: none;
+    border-image: none;
+  `,
+};

packages/extension/src/components/skeleton/index.tsx

@@ -1,36 +1,35 @@
 import React, { FunctionComponent } from "react";
 import { ColorPalette } from "../../styles";
-import { Box, BoxProps } from "../box";
+import { Box } from "../box";
 import { ButtonRadius } from "../button";
-import {
-  CopyAddressRadius,
-  StringToggleRadius,
-} from "../../pages/main/components";
+import { CopyAddressRadius } from "../../pages/main/components";
 import { useTheme } from "styled-components";
 
 export interface SkeletonProps {
   isNotReady?: boolean;
-  type?: "default" | "button" | "stringToggle" | "copyAddress" | "circle";
+  type?: "default" | "button" | "copyAddress" | "circle";
   dummyMinWidth?: string;
   // This is for the case that the skeleton's background color.
   layer?: 0 | 1;
 }
 
-export const Skeleton: FunctionComponent<
-  SkeletonProps & Omit<BoxProps, "position">
-> = ({ isNotReady, type = "default", layer = 0, dummyMinWidth, children }) => {
+export const Skeleton: FunctionComponent<SkeletonProps> = ({
+  isNotReady,
+  type = "default",
+  layer = 0,
+  dummyMinWidth,
+  children,
+}) => {
   const theme = useTheme();
 
   const getBorderRadius = () => {
     switch (type) {
       case "button":
         return ButtonRadius;
-      case "stringToggle":
-        return StringToggleRadius;
       case "copyAddress":
         return CopyAddressRadius;
       case "circle":
-        return "50%";
+        return "999999999px";
       default:
         return undefined;
     }

packages/extension/src/pages/main/components/index.ts

@@ -2,7 +2,6 @@ export * from "./claim-all";
 export * from "./buttons";
 export * from "./buy-crypto-modal";
 export * from "./token";
-export * from "./string-toggle";
 export * from "./menu-bar";
 export * from "./copy-address";
 export * from "./copy-address-modal";