Merge pull request #2208 from protofire/feature/proposal-details-2190

Proposal Details

app/src/App.tsx

@@ -9,7 +9,7 @@ import 'sanitize.css'
 import { Main } from './components/main'
 import { ContentWrapper } from './components/modal/common_styled'
 import { ConnectionModalNavigation, SettingsModalWrapper } from './components/modal/modal_your_connection'
-import SettingsViewContainer from './components/settings/settings_view'
+import SettingsViewContainer from './components/modal/settings/settings_view'
 import { ConnectedWeb3 } from './contexts'
 import { ApolloProviderWrapper } from './contexts/Apollo'
 import balanceReducer from './store/reducer'

app/src/components/common/card/responsive_cards/table.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import { TYPE } from '../../../../theme'
+import { CardCSS } from '../index'
+
+const CardStyled = styled.div`
+  ${CardCSS};
+  box-shadow: none;
+  width: fit-content;
+  display: flex;
+  flex-direction: row;
+  gap: 48px;
+  padding: 24px 32px;
+  justify-content: space-between;
+  //mobile
+  @media (max-width: ${props => props.theme.themeBreakPoints.xl}) {
+    flex-direction: column;
+    width: 100%;
+    gap: 10px;
+    padding: 20px;
+  }
+`
+const ItemWrapper = styled.div`
+  > div:nth-child(2) {
+    margin-top: 8px;
+    @media (max-width: ${props => props.theme.themeBreakPoints.xl}) {
+      margin-top: 0px;
+    }
+  }
+  @media (max-width: ${props => props.theme.themeBreakPoints.xl}) {
+    display: flex;
+    justify-content: space-between;
+  }
+`
+const DataWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+interface Props {
+  valueObject: any
+}
+export const Table: React.FC<Props> = (props: Props) => {
+  const { valueObject, ...restProps } = props
+
+  return (
+    <CardStyled {...restProps}>
+      {valueObject.map((item: any) => {
+        return (
+          <ItemWrapper key={item}>
+            <TYPE.bodyRegular color={'text2'}>{item[0]}</TYPE.bodyRegular>
+            <DataWrapper>
+              <TYPE.bodyMedium color={'text1'}>{item[1].text} </TYPE.bodyMedium>
+              {item[1]['icon'] !== undefined && <div style={{ marginLeft: '8px' }}> {item[1].icon}</div>}
+            </DataWrapper>
+          </ItemWrapper>
+        )
+      })}
+    </CardStyled>
+  )
+}

app/src/components/common/icons/IconArrowBack.tsx

@@ -1,7 +1,9 @@
 import React from 'react'
 import styled from 'styled-components'
 
-const Wrapper = styled.svg<{ hoverEffect: boolean }>`
+import { Colors } from '../../../theme/types'
+
+const Wrapper = styled.svg<{ hoverEffect: boolean; color?: keyof Colors }>`
   cursor: pointer;
 
   &:hover {
@@ -11,6 +13,7 @@ const Wrapper = styled.svg<{ hoverEffect: boolean }>`
   }
 
   .path {
+    fill: ${({ color, theme }) => color && (theme as any)[color]}
     transition: 0.2s fill;
   }
 `
@@ -19,13 +22,15 @@ interface Props {
   hoverEffect?: boolean
   onClick?: () => void
   style?: any
+  color?: keyof Colors
 }
 
 export const IconArrowBack = (props: Props) => {
-  const { hoverEffect = false, ...restProps } = props
+  const { color, hoverEffect = false, ...restProps } = props
 
   return (
     <Wrapper
+      color={color}
       fill="none"
       height="24"
       hoverEffect={hoverEffect}

app/src/components/common/layout/main_scroll/index.tsx

@@ -11,7 +11,8 @@ const MainScrollStyled = styled.div`
   padding-top: 64px;
   position: relative;
   z-index: 2;
-
+  padding-left: ${props => props.theme.paddings.mainPadding};
+  padding-right: ${props => props.theme.paddings.mainPadding};
   @media (min-width: ${props => props.theme.themeBreakPoints.md}) {
     overflow: auto;
     overflow-x: hidden;
@@ -26,14 +27,7 @@ const MainScrollInner = styled.div`
   margin: 0 auto;
   max-width: 100%;
   align-items: center;
-  padding-left: 10px;
-  padding-right: 10px;
   width: ${props => props.theme.themeBreakPoints.xxl};
-
-  @media (min-width: ${props => props.theme.themeBreakPoints.xl}) {
-    padding-left: ${props => props.theme.paddings.mainPadding};
-    padding-right: ${props => props.theme.paddings.mainPadding};
-  }
 `
 
 export const MainScroll: React.FC = props => {

app/src/components/common/table/responsive_table_simple/index.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import { TYPE } from '../../../../theme'
+
+const Table = styled.div`
+  width: 100%;
+  grid-template-columns: 1fr 1fr;
+  border: ${props => props.theme.borders.borderLineDisabled};
+  border-radius: 6px;
+  display: grid;
+  @media (max-width: ${props => props.theme.themeBreakPoints.xl}) {
+    grid-template-columns: 1fr;
+  }
+`
+const TableData = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 16px;
+  text-align: center;
+  margin: 0 -1px -1px 0;
+  @media (max-width: ${props => props.theme.themeBreakPoints.xl}) {
+    :not(:last-child) {
+      border-bottom: ${props => props.theme.borders.borderLineDisabled};
+    }
+  }
+
+  @media (min-width: ${props => props.theme.themeBreakPoints.xl}) {
+    &:nth-child(odd) {
+      border-width: 0px 1px 1px 0; /* top right bottom left */
+      border-style: solid;
+      border-color: ${props => props.theme.colors.verticalDivider};
+    }
+
+    &:nth-child(even) {
+      border-width: 0 0 1px 1px; /* top right bottom left */
+      border-style: solid;
+      border-color: ${props => props.theme.colors.verticalDivider};
+    }
+
+    :last-child,
+    :nth-last-child(2):nth-child(odd) {
+      border-bottom: none;
+    }
+  }
+`
+
+const TextData = styled(TYPE.bodyRegular)`
+  color: ${props => props.theme.text2};
+`
+
+interface Props {
+  outcomes: (string | number)[][]
+}
+
+export const ResponsiveTableSimple = (props: Props) => {
+  const { outcomes } = props
+
+  return (
+    <Table>
+      {outcomes.map((item: any) => {
+        return (
+          <TableData key={item}>
+            <TextData>{item[0]}</TextData>
+            <TextData>{item[1]}</TextData>
+          </TableData>
+        )
+      })}
+    </Table>
+  )
+}