Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 1298 | Rev 1508 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1298 Rev 1507
Línea 1... Línea 1...
1 
import React from 'react'
 1 
import React from 'react'
2 
import { useHistory } from 'react-router-dom'
 2 
import { useHistory } from 'react-router-dom'
3 
import { Avatar, Box } from '@mui/material'
 3 
import { Avatar, Box, styled } from '@mui/material'
4 
import styled from 'styled-components'
 - 
 
Línea 5... Línea -...
5 
 
 - 
 
6 
import { device } from '../../styles/MediaQueries'
 - 
 
7 
 
 4 
 
8 
export const StyledContainer = styled(Box)`
 5 
export const WidgetWrapper = styled(Box)(({ theme }) => ({
9 
  background-color: var(--bg-color);
 6 
  backgroundColor: theme.palette.background.default,
10 
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
 7 
  boxShadow: theme.shadows[2], // 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
11 
  height: fit-content;
 8 
  height: 'fit-content',
12 
  width: 100%;
 9 
  width: '100%',
13 
  box-sizing: border-box;
 10 
  boxSizing: 'border-box',
14 
  overflow: hidden;
 11 
  overflow: 'hidden',
15 
  position: relative;
 12 
  position: 'relative',
16 
  span {
 13 
  span: {
17 
    font-size: 0.9rem;
 14 
    fontSize: '0.9rem'
18 
  }
 15 
  },
19 
  p {
 16 
  p: {
20 
    color: var(--font-color);
 17 
    color: 'var(--font-color)',
21 
    font-size: 14px;
 18 
    fontSize: '14px',
22 
    text-align: justify;
 19 
    textAlign: 'justify',
23 
    margin-bottom: 0.5rem;
 20 
    marginBottom: '0.5rem'
24 
  }
 21 
  },
25 
  h2 {
 22 
  h2: {
26 
    font-size: 1rem;
 23 
    fontSize: '1rem'
27 
  }
 24 
  },
28 
  @media ${device.tablet} {
 25 
  [theme.breakpoints.up('sm')]: {
29 
    border-radius: var(--border-radius);
 26 
    borderRadius: 'var(--border-radius)'
30 
  }
 27 
  }
31 
`
 28 
}))
32 
 
 29 
 
33 
StyledContainer.Body = styled.div`
 30 
WidgetWrapper.Body = styled(Box)({
34 
  padding: 10px 1rem;
 31 
  padding: '10px 1rem',
35 
  display: flex;
 32 
  display: 'flex',
36 
  flex-direction: column;
 33 
  flexDirection: 'column'
37 
`
 34 
})
38 
 
 35 
 
39 
StyledContainer.Actions = styled.div`
 36 
WidgetWrapper.Actions = styled(Box)(({ theme }) => ({
40 
  display: flex;
 37 
  display: 'flex',
41 
  justify-content: space-around;
 38 
  justifyContent: 'space-around',
42 
  border-top: 1px solid rgb(211, 211, 211);
 39 
  borderTop: '1px solid rgb(211, 211, 211)',
43 
  padding: 5px;
 40 
  padding: '5px',
44 
  gap: 0.5rem;
 41 
  gap: '0.5rem',
45 
  & > button,
 - 
 
46 
  & > a {
 42 
  '> button, > a': {
47 
    align-items: center;
 43 
    alignItems: 'center',
48 
    border-radius: var(--border-radius);
 44 
    borderRadius: 'var(--border-radius)',
49 
    cursor: pointer;
 45 
    cursor: 'pointer',
50 
    display: inline-flex;
 46 
    display: 'inline-flex',
51 
    flex-direction: column;
 47 
    flexDirection: 'column',
52 
    font-size: 0.9rem;
 48 
    fontSize: '0.9rem',
53 
    padding: 5px;
 49 
    padding: '5px',
54 
    position: relative;
 50 
    position: 'relative',
55 
    &:hover {
 51 
    '&:hover': {
56 
      background-color: whitesmoke;
 - 
 
57 
    }
 - 
 
58 
    @media ${device.tablet} {
 - 
 
59 
      flex-direction: row;
 - 
 
60 
      gap: 0.5rem;
 - 
 
61 
      font-size: 1rem;
 52 
      backgroundColor: 'whitesmoke'
- 
 
 53 
    }
- 
 
 54 
  },
- 
 
 55 
  [theme.breakpoints.up('sm')]: {
- 
 
 56 
    flexDirection: 'row',
- 
 
 57 
    gap: '0.5rem',
62 
    }
 58 
    fontSize: '1rem'
63 
  }
 59 
  }
Línea 64... Línea 60...
64 
`
 60 
}))
65 
 
 61 
 
66 
const LayoutHeader = styled.div`
 62 
const LayoutHeader = styled(Box)`
67 
  display: flex;
 63 
  display: flex;
68 
  gap: 0.5rem;
 64 
  gap: 0.5rem;
69 
  padding: 10px 1rem;
 65 
  padding: 10px 1rem;
70 
  align-items: center;
 66 
  align-items: center;
71 
  justify-content: space-between;
 67 
  justify-content: space-between;
Línea 72... Línea 68...
72 
  position: relative;
 68 
  position: relative;
73 
`
 69 
`
74 
 
 70 
 
75 
const HeaderInfo = styled.div`
 71 
const HeaderInfo = styled(Box)`
76 
  align-items: center;
 72 
  align-items: center;
77 
  display: inline-flex;
 73 
  display: inline-flex;
Línea 78... Línea 74...
78 
  gap: 0.5rem;
 74 
  gap: 0.5rem;
79 
  width: fit-content;
 75 
  width: fit-content;
80 
`
 76 
`
81 
 
 77 
 
Línea 82... Línea 78...
82 
const HeaderContent = styled.div`
 78 
const HeaderContent = styled(Box)`
Línea 118... Línea 114...
118 
      {children}
 114 
      {children}
119 
    </LayoutHeader>
 115 
    </LayoutHeader>
120 
  )
 116 
  )
121 
}
 117 
}
Línea 122... Línea 118...
122 
 
 118 
 
Línea 123... Línea 119...
123 
StyledContainer.Header = Header
 119 
WidgetWrapper.Header = Header