Update typography, update some components, edit styling (airswap#97)

* Update typography, update some components, edit styling; added storybook for new headings/subheadings Update logo and sidebar color * Prettier changes
clearmatics · Aug 10, 2021 · 26dfd1a · 26dfd1a
1 parent 58dd447
commit 26dfd1a
Show file tree

Hide file tree

Showing 73 changed files with 822 additions and 387 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -2,5 +2,5 @@
   "tabWidth": 2,
   "useTabs": false,
   "importOrder": ["^react", "^@", "^[a-zA-Z]", "^[./]"],
-  "importOrderSeparation": true,
+  "importOrderSeparation": true
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,17 +1,20 @@
 import { Suspense } from "react";
-import { ThemeProvider } from "styled-components/macro";
-import { Web3ReactProvider } from "@web3-react/core";
+
 import { Web3Provider } from "@ethersproject/providers";
+import { Web3ReactProvider } from "@web3-react/core";
+
+import { ThemeProvider } from "styled-components/macro";
+
+import { useAppSelector } from "./app/hooks";
+import Page from "./components/Page/Page";
+import TradeContainer from "./components/TradeContainer/TradeContainer";
+import Balances from "./features/balances/Balances";
 import { Orders } from "./features/orders/Orders";
 import { Transactions } from "./features/transactions/Transactions";
-import Balances from './features/balances/Balances';
-import GlobalStyle from './style/GlobalStyle';
-import TradeContainer from './components/TradeContainer/TradeContainer';
-import Page from './components/Page/Page';
-import { useAppSelector } from './app/hooks';
-import { selectUserSettings } from './features/userSettings/userSettingsSlice';
-import { darkTheme, lightTheme } from './style/themes';
+import { selectUserSettings } from "./features/userSettings/userSettingsSlice";
 import "./i18n/i18n";
+import GlobalStyle from "./style/GlobalStyle";
+import { darkTheme, lightTheme } from "./style/themes";
 
 function getLibrary(provider: any): Web3Provider {
   const library = new Web3Provider(provider);

diff --git a/src/app/hooks.ts b/src/app/hooks.ts
@@ -1,4 +1,5 @@
 import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
+
 import type { RootState, AppDispatch } from "./store";
 
 // Use throughout your app instead of plain `useDispatch` and `useSelector`

diff --git a/src/app/store.ts b/src/app/store.ts
@@ -1,14 +1,15 @@
 import { configureStore, ThunkAction, Action } from "@reduxjs/toolkit";
-import ordersReducer from "../features/orders/ordersSlice";
-import walletReducer from "../features/wallet/walletSlice";
-import metadataReducer from "../features/metadata/metadataSlice";
-import transactionsReducer from "../features/transactions/transactionsSlice";
-import userSettingsReducer from '../features/userSettings/userSettingsSlice';
+
 import {
   balancesReducer,
   allowancesReducer,
 } from "../features/balances/balancesSlice";
+import metadataReducer from "../features/metadata/metadataSlice";
 import { subscribeToSavedTokenChangesForLocalStoragePersisting } from "../features/metadata/metadataSubscriber";
+import ordersReducer from "../features/orders/ordersSlice";
+import transactionsReducer from "../features/transactions/transactionsSlice";
+import userSettingsReducer from "../features/userSettings/userSettingsSlice";
+import walletReducer from "../features/wallet/walletSlice";
 
 export const store = configureStore({
   reducer: {

diff --git a/src/components/Button/Button.styles.tsx b/src/components/Button/Button.styles.tsx
@@ -1,4 +1,5 @@
 import styled, { DefaultTheme } from "styled-components/macro";
+
 import { ButtonIntent, ButtonProps } from "./Button";
 
 function getButtonBackground(
@@ -28,12 +29,13 @@ export const StyledButton = styled.button<ButtonProps>`
   width: 100%;
   height: 3.5rem;
   padding: 0 1rem;
-  font-size: 1.125rem;
-  font-weight: 700;
+  font-size: 1rem;
+  font-weight: 600;
+  text-transform: uppercase;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: ${(props) => props.theme.colors.white};
+  color: ${(props) => props.theme.colors.alwaysWhite};
   background: ${(props) => getButtonBackground(props.theme, props.intent)};
   pointer-events: ${(props) => (props.disabled ? "none" : "visible")};
   cursor: ${(props) => (props.disabled ? "none" : "pointer")};

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
+import React from "react";
+
 import LoadingSpinner from "../LoadingSpinner/LoadingSpinner";
-import { StyledButton, Text } from './Button.styles';
+import { StyledButton, Text } from "./Button.styles";
 
 export type ButtonIntent = "neutral" | "primary" | "positive" | "destructive";
-type ButtonJustifyContent = "center" | "flex-start" | 'flex-end';
+type ButtonJustifyContent = "center" | "flex-start" | "flex-end";
 
 export type ButtonProps = {
   children: React.ReactNode;
@@ -50,9 +51,7 @@ export const Button = ({
       }}
       {...rest}
     >
-      <Text>
-        {children}
-      </Text>
+      <Text>{children}</Text>
       {loading && <LoadingSpinner />}
     </StyledButton>
   );

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
diff --git a/src/components/DarkModeSwitch/DarkModeSwitch.styles.tsx b/src/components/DarkModeSwitch/DarkModeSwitch.styles.tsx
@@ -1,4 +1,5 @@
 import styled from "styled-components/macro";
+
 import IconButton from "../IconButton/IconButton";
 
 export const StyledDarkModeSwitch = styled(IconButton)`

diff --git a/src/components/DarkModeSwitch/DarkModeSwitch.tsx b/src/components/DarkModeSwitch/DarkModeSwitch.tsx
@@ -1,12 +1,11 @@
-import { StyledDarkModeSwitch } from './DarkModeSwitch.styles';
+import { StyledDarkModeSwitch } from "./DarkModeSwitch.styles";
 
 type DarkModeProps = {
   className?: string;
   onClick: () => void;
 };
 
 const DarkModeSwitch = ({ className, onClick }: DarkModeProps): JSX.Element => {
-
   return (
     <StyledDarkModeSwitch
       className={className}

diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
@@ -1,10 +1,11 @@
-import React, { FC, ReactElement } from 'react';
-import { IconArrowLeft, IconArrowRight, IconDarkModeSwitch } from './icons';
-import { StyledIcon } from './Icon.styles';
+import React, { FC, ReactElement } from "react";
+
+import { StyledIcon } from "./Icon.styles";
+import { IconArrowLeft, IconArrowRight, IconDarkModeSwitch } from "./icons";
 
 type IconSet = {
   [key: string]: FC<SvgIconProps>;
-}
+};
 
 export interface SvgIconProps {
   className?: string;
@@ -13,16 +14,20 @@ export interface SvgIconProps {
 }
 
 export const icons: IconSet = {
-  'arrow-right': IconArrowRight,
-  'arrow-left': IconArrowLeft,
-  'dark-mode-switch': IconDarkModeSwitch,
-}
+  "arrow-right": IconArrowRight,
+  "arrow-left": IconArrowLeft,
+  "dark-mode-switch": IconDarkModeSwitch,
+};
 
 interface IconProps extends SvgIconProps {
   name: keyof typeof icons;
 }
 
-const Icon: FC<IconProps> = ({ name, iconSize = 1, className = '' }): ReactElement | null => {
+const Icon: FC<IconProps> = ({
+  name,
+  iconSize = 1,
+  className = "",
+}): ReactElement | null => {
   const IconComponent = icons[name];
 
   return IconComponent ? (
@@ -32,5 +37,4 @@ const Icon: FC<IconProps> = ({ name, iconSize = 1, className = '' }): ReactEleme
   ) : null;
 };
 
-
 export default Icon;
diff --git a/src/components/Icon/icons/IconArrowLeft.tsx b/src/components/Icon/icons/IconArrowLeft.tsx
@@ -1,9 +1,17 @@
-import React, { FC, ReactElement } from 'react';
-import { SvgIconProps } from '../Icon';
+import React, { FC, ReactElement } from "react";
 
-const IconArrowLeft: FC<SvgIconProps> = ({ className = '' }): ReactElement => (
+import { SvgIconProps } from "../Icon";
+
+const IconArrowLeft: FC<SvgIconProps> = ({ className = "" }): ReactElement => (
   <svg fill="none" viewBox="0 0 12 20" className={className}>
-    <path className="stroke" d="M2 18L10 10L2 2" strokeWidth="2" strokeLinecap="square" transform-origin="center" transform="scale(-1, 1)" />
+    <path
+      className="stroke"
+      d="M2 18L10 10L2 2"
+      strokeWidth="2"
+      strokeLinecap="square"
+      transform-origin="center"
+      transform="scale(-1, 1)"
+    />
   </svg>
 );
 

diff --git a/src/components/Icon/icons/IconArrowRight.tsx b/src/components/Icon/icons/IconArrowRight.tsx
@@ -1,9 +1,15 @@
-import React, { FC, ReactElement } from 'react';
-import { SvgIconProps } from '../Icon';
+import React, { FC, ReactElement } from "react";
 
-const IconArrowRight: FC<SvgIconProps> = ({ className = '' }): ReactElement => (
+import { SvgIconProps } from "../Icon";
+
+const IconArrowRight: FC<SvgIconProps> = ({ className = "" }): ReactElement => (
   <svg fill="none" viewBox="0 0 12 20" className={className}>
-    <path className="stroke" d="M2 18L10 10L2 2" strokeWidth="2" strokeLinecap="square"/>
+    <path
+      className="stroke"
+      d="M2 18L10 10L2 2"
+      strokeWidth="2"
+      strokeLinecap="square"
+    />
   </svg>
 );
 

diff --git a/src/components/Icon/icons/IconDarkModeSwitch.tsx b/src/components/Icon/icons/IconDarkModeSwitch.tsx
@@ -1,17 +1,74 @@
-import React, { FC, ReactElement } from 'react';
-import { SvgIconProps } from '../Icon';
+import React, { FC, ReactElement } from "react";
 
-const IconDarkModeSwitch: FC<SvgIconProps> = ({ className = '' }): ReactElement => (
+import { SvgIconProps } from "../Icon";
+
+const IconDarkModeSwitch: FC<SvgIconProps> = ({
+  className = "",
+}): ReactElement => (
   <svg fill="none" viewBox="0 0 26 26" className={className}>
-    <path className="stroke" d="M12.9946 18.4559C16.0076 18.4559 18.4501 16.0134 18.4501 13.0005C18.4501 9.98761 16.0076 7.54517 12.9946 7.54517C9.98158 7.54517 7.53906 9.98761 7.53906 13.0005C7.53906 16.0134 9.98158 18.4559 12.9946 18.4559Z"  strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-    <path className="stroke" d="M13 1V3.18214"  strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-    <path className="stroke" d="M13 22.822V25.0042"  strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-    <path className="stroke" d="M4.51562 4.51343L6.06506 6.06274"  strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-    <path className="stroke" d="M19.9375 19.9404L21.4869 21.4897"  strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-    <path className="stroke" d="M1 13.0024H3.18222"  strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-    <path className="stroke" d="M22.8203 13.0024H25.0025"  strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-    <path className="stroke" d="M4.51562 21.4897L6.06506 19.9404"  strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-    <path className="stroke" d="M19.9375 6.06274L21.4869 4.51343"  strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+    <path
+      className="stroke"
+      d="M12.9946 18.4559C16.0076 18.4559 18.4501 16.0134 18.4501 13.0005C18.4501 9.98761 16.0076 7.54517 12.9946 7.54517C9.98158 7.54517 7.53906 9.98761 7.53906 13.0005C7.53906 16.0134 9.98158 18.4559 12.9946 18.4559Z"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      className="stroke"
+      d="M13 1V3.18214"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      className="stroke"
+      d="M13 22.822V25.0042"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      className="stroke"
+      d="M4.51562 4.51343L6.06506 6.06274"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      className="stroke"
+      d="M19.9375 19.9404L21.4869 21.4897"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      className="stroke"
+      d="M1 13.0024H3.18222"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      className="stroke"
+      d="M22.8203 13.0024H25.0025"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      className="stroke"
+      d="M4.51562 21.4897L6.06506 19.9404"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      className="stroke"
+      d="M19.9375 6.06274L21.4869 4.51343"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
     <path d="M13 19.003V7.60107L17.0507 9.02632L18.4009 13.302L16.3756 17.5778L13 19.003Z" />
   </svg>
 );

diff --git a/src/components/Icon/icons/index.ts b/src/components/Icon/icons/index.ts
@@ -1,9 +1,5 @@
-import IconArrowRight from './IconArrowRight';
-import IconArrowLeft from './IconArrowLeft';
-import IconDarkModeSwitch from './IconDarkModeSwitch';
+import IconArrowLeft from "./IconArrowLeft";
+import IconArrowRight from "./IconArrowRight";
+import IconDarkModeSwitch from "./IconDarkModeSwitch";
 
-export {
-  IconArrowRight,
-  IconArrowLeft,
-  IconDarkModeSwitch,
-}
+export { IconArrowRight, IconArrowLeft, IconDarkModeSwitch };
diff --git a/src/components/IconButton/IconButton.styles.tsx b/src/components/IconButton/IconButton.styles.tsx
@@ -1,4 +1,5 @@
 import styled from "styled-components/macro";
+
 import Icon from "../Icon/Icon";
 
 interface StyledIconButtonProps {

diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
@@ -1,14 +1,15 @@
-import React, { FC, ReactElement } from 'react';
-import { icons } from '../Icon/Icon';
-import { StyledIcon, StyledIconButton } from './IconButton.styles';
+import React, { FC, ReactElement } from "react";
+
+import { icons } from "../Icon/Icon";
+import { StyledIcon, StyledIconButton } from "./IconButton.styles";
 
 export type IconButtonProps = {
   text?: string;
   icon: keyof typeof icons;
   iconSize?: number;
   onClick: () => void;
   className?: string;
-}
+};
 
 const IconButton: FC<IconButtonProps> = ({
   text,
@@ -18,16 +19,9 @@ const IconButton: FC<IconButtonProps> = ({
   onClick,
 }): ReactElement => {
   return (
-    <StyledIconButton
-      hasText={!!text}
-      className={className}
-      onClick={onClick}
-    >
+    <StyledIconButton hasText={!!text} className={className} onClick={onClick}>
       {text}
-      <StyledIcon
-        name={icon}
-        iconSize={iconSize}
-      />
+      <StyledIcon name={icon} iconSize={iconSize} />
     </StyledIconButton>
   );
 };

diff --git a/src/components/LoadingSpinner/LoadingSpinner.tsx b/src/components/LoadingSpinner/LoadingSpinner.tsx
@@ -1,6 +1,7 @@
-import classNames from "classnames";
 import { AiOutlineLoading } from "react-icons/ai";
 
+import classNames from "classnames";
+
 type LoadingSpinnerProps = { className?: string };
 
 const LoadingSpinner = ({ className }: LoadingSpinnerProps) => {