Skip to content

Commit

Permalink
Merge pull request #261 from Klimatbyran/staging
Browse files Browse the repository at this point in the history
Feat/new uxui phase 1
  • Loading branch information
elvbom authored Sep 29, 2023
2 parents f6074d8 + 9e6b87e commit 3146339
Show file tree
Hide file tree
Showing 182 changed files with 9,240 additions and 576 deletions.
66 changes: 37 additions & 29 deletions Theme.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,43 @@ import { ReactNode } from 'react'
import { ThemeProvider } from 'styled-components'

export const colorTheme = {
main: '#91DFC8',

rust: '#EF5E30',
rustOpaque: 'rgb(239, 94, 48, 0.6)',
red: '#EF3054',
redOpaque: 'rgba(239, 48, 84, 0.6)',
redDark: 'rgba(239, 48, 84, 0.2)',
green: '#94D3C1',
greenOpaqe: 'rgba(145, 223, 200, 0.6)',
greenDark: 'rgba(145, 223, 200, 0.2)',

orange: '#EF9917',
darkOrange: '#EF7F17',
yellow: '#EFBF17',
blue: '#91BFC8',

white: '#FFFFFF',
paperWhite: '#F9FBFF',
mint: '#D5F2E9',

lightGrey: '#B3B3B3',
grey: '#6C6C6C',
darkGrey: '#424242',
darkestGrey: '#2D2D2D',

dustyGreen: '#6BA292',
darkGreen: '#2D7B64',

gradient: 'linear-gradient(rgba(45,45,45, 1), rgba(0,0,0, 0.0))',
black: '#181818',
lightBlack: '#262626',
grey: '#939393',
offWhite: '#FFFDFA',

red: '#EF3030',
darkRed: '#8B1A1A',
darkRedOpaque: 'rgba(139, 26, 26, 0.6)',
darkDarkRed: '#450d0d',

orange: '#FF6813',
darkOrange: '#B55018',
darkOrangeOpaque: 'rgb(181, 80, 24, 0.6)',

darkYellow: '#FFA137',
lightYellow: '#FFE07A',

beige: '#FFF0D0',

lightBlue: '#81DFFF',

lightGreen: '#15D8D8',
lightGreenOpaqe: 'rgba(103, 255, 238, 0.6)',
lightGreenDark: 'rgb(0, 179, 159, 0.2)',

midGreen: '#30ACB4',
darkGreenOne: '#216675',
darkGreenTwo: '#1B3940',

gradientBlack: 'linear-gradient(#181818, #404040)',
gradientGreen: 'linear-gradient(#216675, #30ACB4)',
gradientOrange: 'linear-gradient(#EF3030, #FF6813)',
gradientRed: 'linear-gradient(#EF3030, #8B1A1A)',
}

export const spacingTheme = {
smallSpacing: '8px',
}

type Props = {
Expand Down
42 changes: 16 additions & 26 deletions components/Button.tsx
Original file line number Diff line number Diff line change
@@ -1,61 +1,51 @@
import styled from 'styled-components'
import Icon from '../public/icons/share.svg'
import { devices } from '../utils/devices'
import { Paragraph } from './Typography'

const Button = styled.button<{ icon: boolean }>`
const Button = styled.button`
height: 56px;
color: ${({ theme }) => theme.darkestGrey};
background: ${({ theme }) => theme.main};
color: ${({ theme }) => theme.black};
background: ${({ theme }) => theme.midGreen};
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
border-radius: 4px;
border: 0;
display: flex;
align-items: center;
justify-content: ${({ icon }) => (icon ? 'start' : 'center')};
padding-left: ${({ icon }) => (icon ? '20px' : '20px')};
padding-right: ${({ icon }) => (icon ? '20px' : '20px')};
justify-content: center;
padding: 20px 0;
cursor: pointer;
fill: ${({ theme }) => theme.darkestGrey};
fill: ${({ theme }) => theme.black};
width: 100%;
font-family: Borna;
@media only screen and (${devices.tablet}) {
max-width: 350px;
}
span {
font-weight: bold;
font-size: 16px;
display: block;
flex-grow: 1;
margin-left: ${({ icon }) => (icon ? '20px' : '0px')};
}
&:hover {
background: ${({ theme }) => theme.green};
background: ${({ theme }) => theme.lightGreen};
}
&:focus {
border: 2px solid ${({ theme }) => theme.white};
border: 2px solid ${({ theme }) => theme.offWhite};
}
&:disabled {
background: ${({ theme }) => theme.grey};
color: ${({ theme }) => theme.white};
fill: ${({ theme }) => theme.white};
background: ${({ theme }) => theme.lightBlack};
color: ${({ theme }) => theme.offWhite};
fill: ${({ theme }) => theme.offWhite};
}
`

type ShareButtonProps = {
handleClick?: (e: unknown) => void
text: string
shareIcon?: boolean
}

function ShareButton({ handleClick, text, shareIcon = false }: ShareButtonProps) {
function ShareButton({ handleClick, text }: ShareButtonProps) {
return (
<Button type="submit" onClick={handleClick} icon={shareIcon}>
{shareIcon && <Icon />}
<span>{text}</span>
<Button type="submit" onClick={handleClick}>
<Paragraph>{text}</Paragraph>
</Button>
)
}
Expand Down
85 changes: 66 additions & 19 deletions components/ComparisonTable.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState } from 'react'
import { useEffect, useState } from 'react'
import { useRouter } from 'next/router'

import styled from 'styled-components'
Expand All @@ -15,36 +15,61 @@ import type { ColumnDef } from '@tanstack/react-table'
import { devices } from '../utils/devices'

const StyledTable = styled.table`
width: 98%;
margin-left: 1%;
overflow-y: auto;
width: 100%;
border-collapse: collapse;
@media only screen and (${devices.mobile}) {
font-size: 0.8em;
}
.data-header {
text-align: right;
}
#first-header {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
#last-header {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.data-column {
color: ${({ theme }) => theme.darkYellow};
text-align: right;
}
`

const TableData = styled.td`
padding: 0.5rem 1rem 0.2rem 0.87rem;
padding: 1rem;
overflow: hidden;
border-bottom: 1px solid ${({ theme }) => theme.midGreen};
max-width: 150px;
@media only screen and (${devices.mobile}) {
padding: 0.3rem 0rem 0.1rem 0.87rem;
padding: 0.75rem;
max-width: 50px;
overflow: hidden;
text-overflow: ellipsis;
}
`

const TableHeader = styled.th`
padding: 1rem;
background: ${({ theme }) => theme.black};
position: sticky;
top: 0;
background: ${({ theme }) => theme.darkGrey};
padding: 1.2rem 1rem 0.6rem 0.87rem;
fontweight: bold;
font-weight: bold;
text-align: left;
`

const TableRow = styled.tr`
border-bottom: 1px solid ${({ theme }) => theme.midGreen};
:hover {
background-color: ${({ theme }) => theme.darkGrey};
cursor: pointer;
}
`
Expand All @@ -58,6 +83,20 @@ function ComparisonTable<T extends object>({ data, columns }: TableProps<T>) {
const [sorting, setSorting] = useState<SortingState>([])
const router = useRouter()

const [resizeCount, setResizeCount] = useState(0)

useEffect(() => {
const handleResize = () => {
setResizeCount((prevCount) => prevCount + 1)
}

window.addEventListener('resize', handleResize)

return () => {
window.removeEventListener('resize', handleResize)
}
}, []) // Empty dependency array ensures this effect runs once when the component mounts

const table = useReactTable({
data,
columns,
Expand All @@ -74,10 +113,22 @@ function ComparisonTable<T extends object>({ data, columns }: TableProps<T>) {
router.push(route)
}

const renderHeader = (header: Header<T, unknown>) => (
<TableHeader key={header.id} colSpan={header.colSpan}>
const renderHeader = (header: Header<T, unknown>, index: number) => (
<TableHeader
key={header.id}
colSpan={header.colSpan}
className={header.index > 1 ? 'data-header' : ''}
id={
// eslint-disable-next-line no-nested-ternary
index === 0
? 'first-header'
: index === header.headerGroup.headers.length - 1
? 'last-header'
: ''
}
>
{header.isPlaceholder ? null : (
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
<div
{...{
className: header.column.getCanSort() ? 'cursor-pointer select-none' : '',
Expand All @@ -86,27 +137,23 @@ function ComparisonTable<T extends object>({ data, columns }: TableProps<T>) {
}}
>
{flexRender(header.column.columnDef.header, header.getContext())}
{{
asc: '', // ' ↑',
desc: '', // ' ↓',
}[header.column.getIsSorted() as string] ?? null}
</div>
)}
</TableHeader>
)

return (
<StyledTable>
<StyledTable key={resizeCount}>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => renderHeader(header))}
{headerGroup.headers.map((header, index) => renderHeader(header, index))}
</tr>
))}
<tbody>
{table.getRowModel().rows.map((row) => (
<TableRow key={row.id} onClick={() => handleRowClick(row)}>
{row.getVisibleCells().map((cell) => (
<TableData key={cell.id}>
{row.getVisibleCells().map((cell, columnIndex) => (
<TableData key={cell.id} className={columnIndex > 1 ? 'data-column' : ''}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableData>
))}
Expand Down
Loading

1 comment on commit 3146339

@vercel
Copy link

@vercel vercel bot commented on 3146339 Sep 29, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.