add dynamic toggle

src/components/Card/index.tsx

@@ -49,9 +49,9 @@ const BlueCardStyled = styled(Card)`
   width: fit-content;
 `
 
-export const BlueCard = ({ children, ...rest }: CardProps) => {
+export const BlueCard = ({ children }: CardProps) => {
   return (
-    <BlueCardStyled {...rest}>
+    <BlueCardStyled>
       <Text fontWeight={500} color="#2172E5">
         {children}
       </Text>

src/components/Header/index.tsx

@@ -44,6 +44,9 @@ const HeaderFrame = styled.div`
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   padding: 1rem;
   z-index: 2;
+
+  background-color: ${({ theme }) => theme.bg0};
+
   ${({ theme }) => theme.mediaWidth.upToMedium`
     grid-template-columns: 1fr;
     padding: 0 1rem;

src/components/Toggle/MultiToggle.stories.tsx

+import { Story } from '@storybook/react/types-6-0'
+import styled from 'styled-components'
+import React, { useState } from 'react'
+import MultiToggle from './MultiToggle'
+
+const wrapperCss = styled.main`
+  font-size: 2em;
+  margin: 3em;
+  max-width: 300px;
+`
+
+export default {
+  title: 'Toggles',
+  argTypes: {
+    width: { control: { type: 'string' } },
+  },
+  decorators: [
+    (Component: Story) => (
+      <div css={wrapperCss}>
+        <Component />
+      </div>
+    ),
+  ],
+}
+
+export const MultiToggleExample = () => {
+  const [active, setActive] = useState(0)
+
+  function doSomethingWithIndex(index: number) {
+    // here's where youd update state based on index choice
+    // switch(index){} ...
+    setActive(index)
+  }
+  return <MultiToggle toggle={doSomethingWithIndex} activeIndex={active} options={['option1', 'option2', 'option3']} />
+}

src/components/Toggle/MultiToggle.tsx

+import React from 'react'
+import styled from 'styled-components'
+
+const ToggleElement = styled.span<{ isActive?: boolean; isOnSwitch?: boolean }>`
+  width: 100%;
+  padding: 0.25rem 0.5rem;
+  border-radius: 8px;
+  background: ${({ theme, isActive }) => (isActive ? theme.bg2 : 'none')};
+  color: ${({ theme, isActive }) => (isActive ? theme.text1 : theme.text3)};
+  font-size: 1rem;
+  font-weight: 400;
+  padding: 0.35rem 0.6rem;
+  :hover {
+    user-select: initial;
+    color: ${({ theme, isActive }) => (isActive ? theme.text2 : theme.text3)};
+  }
+`
+
+const StyledToggle = styled.button<{ isActive?: boolean; activeElement?: boolean; width?: string }>`
+  display: flex;
+  width: ${({ width }) => width ?? '100%'}
+  padding: 2px;
+  background: ${({ theme }) => theme.bg0};
+  border-radius: 8px;
+  border: ${({ theme }) => '2px solid ' + theme.bg2};
+  cursor: pointer;
+  outline: none;
+`
+
+export interface ToggleProps {
+  options: string[]
+  activeIndex: number
+  toggle: (index: number) => void
+  id?: string
+  width?: string
+}
+
+export default function MultiToggle({ id, options, activeIndex, toggle, width }: ToggleProps) {
+  return (
+    <StyledToggle id={id} isActive={activeIndex === 0} width={width}>
+      {options.map((option, index) => (
+        <ToggleElement
+          key={id + '-' + index}
+          isActive={index === activeIndex}
+          isOnSwitch={true}
+          onClick={() => toggle(index)}
+        >
+          {option}
+        </ToggleElement>
+      ))}
+    </StyledToggle>
+  )
+}

src/pages/AppBody.tsx

@@ -5,7 +5,7 @@ export const BodyWrapper = styled.div`
   position: relative;
   max-width: 420px;
   width: 100%;
-  background: ${({ theme }) => theme.bg1};
+  background: ${({ theme }) => theme.bg0};
   box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
     0px 24px 32px rgba(0, 0, 0, 0.01);
   border-radius: 30px;

src/theme/index.tsx

@@ -48,6 +48,7 @@ export function colors(darkMode: boolean): Colors {
     text5: darkMode ? '#2C2F36' : '#EDEEF2',
 
     // backgrounds / greys
+    bg0: darkMode ? '#191B1F' : '#FFFFFF',
     bg1: darkMode ? '#212429' : '#FFFFFF',
     bg2: darkMode ? '#2C2F36' : '#F7F8FA',
     bg3: darkMode ? '#40444F' : '#EDEEF2',
@@ -219,17 +220,13 @@ html {
 export const ThemedGlobalStyle = createGlobalStyle`
 html {
   color: ${({ theme }) => theme.text1};
-  background-color: ${({ theme }) => theme.bg2};
+  background-color: ${({ theme }) => theme.bg1};
 }
 
 body {
   min-height: 100vh;
   background-position: 0 -30vh;
   background-repeat: no-repeat;
-  background-image: ${({ theme }) =>
-    `radial-gradient(50% 50% at 50% 50%, ${transparentize(0.9, theme.primary1)} 0%, ${transparentize(
-      1,
-      theme.bg1
-    )} 100%)`};
+
 }
 `

src/theme/styled.d.ts

@@ -14,6 +14,7 @@ export interface Colors {
   text5: Color
 
   // backgrounds / greys
+  bg0: Color
   bg1: Color
   bg2: Color
   bg3: Color

tsconfig.json

@@ -11,7 +11,7 @@
     "strict": true,
     "alwaysStrict": true,
     "strictNullChecks": true,
-    "noUnusedLocals": true,
+    "noUnusedLocals": false,
     "noFallthroughCasesInSwitch": true,
     "noImplicitAny": true,
     "noImplicitThis": true,