remake app ohome setup /notworking
This commit is contained in:
53
src/styles/componentBlueprints.js
Normal file
53
src/styles/componentBlueprints.js
Normal file
@@ -0,0 +1,53 @@
|
||||
import { View } from "react-native"
|
||||
import React from 'react'
|
||||
import styled, { css } from 'styled-components'
|
||||
//deps
|
||||
import { HiCheck } from 'react-icons/hi'
|
||||
//anims
|
||||
|
||||
import LightenDarken from '../functions'
|
||||
//standard button layout
|
||||
export const Button = styled(View)`
|
||||
box-shadow: ${({ theme }) => theme.colors.shadow};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 80px;
|
||||
height:80px;
|
||||
border-radius: 50px;
|
||||
@media ${({ theme }) => theme.mediaQueries.below768}{
|
||||
height: 65px;
|
||||
width: 65px;
|
||||
}
|
||||
`
|
||||
const CheckButtonWrapper = styled(View)`
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
height: 30px;
|
||||
min-width: 30px;
|
||||
border: 1px solid ${props => props.checked ? props.theme.colors.selected : LightenDarken(props.theme.colors.dp24, -5)};
|
||||
border-radius: 15px;
|
||||
margin: 0px 5px ;
|
||||
background-color: ${props => props.checked ? props.theme.colors.selected : props.theme.colors.buttonGrey};
|
||||
&:hover{
|
||||
background-color: ${props => props.checked ? props.theme.colors.selected : LightenDarken(props.theme.colors.buttonGrey, 5)}
|
||||
}
|
||||
`
|
||||
const IconCheck = styled(HiCheck)`
|
||||
font-size: ${({ theme }) => theme.fontSize.fontL};
|
||||
color: ${({ theme }) => theme.colors.dp00};
|
||||
`
|
||||
export const CheckButton = (props) => {
|
||||
return (
|
||||
<CheckButtonWrapper checked={props.checked} >
|
||||
<IconCheck checked={props.checked} />
|
||||
</CheckButtonWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
//load anim
|
||||
export const LoadAnimation = () => {
|
||||
return (<View style={{ backgroundColor: "red", width: 100, height: 100 }} />)
|
||||
}
|
||||
73
src/styles/globalStyles.js
Normal file
73
src/styles/globalStyles.js
Normal file
@@ -0,0 +1,73 @@
|
||||
// import { createGlobalStyle } from 'styled-components'
|
||||
// export default createGlobalStyle`
|
||||
// * {
|
||||
// padding: 0px;
|
||||
// margin: 0px;
|
||||
// font-size: 1rem;
|
||||
// font-family: sansationRegular;
|
||||
// }
|
||||
// a {
|
||||
// text-decoration:none;
|
||||
// }
|
||||
// p{
|
||||
// padding: 0px;
|
||||
// margin:0px;
|
||||
// font-size: 1.2rem;
|
||||
// color: ${({theme}) => theme.colors.textW5};
|
||||
// }
|
||||
// h1{
|
||||
// margin: 0px;
|
||||
// padding: 0px;
|
||||
// font-size: 1.8rem;
|
||||
// color: ${({theme}) => theme.colors.textW1};
|
||||
// font-weight: bold;
|
||||
// }
|
||||
// h2{
|
||||
// margin: 0px;
|
||||
// padding: 0px;
|
||||
// font-size: 1.5rem;
|
||||
// color: ${({theme}) => theme.colors.textW3};
|
||||
// font-weight: bold;
|
||||
// }
|
||||
// button{
|
||||
// padding: 0px;
|
||||
// border: none;
|
||||
// background: none;
|
||||
// }
|
||||
// input{
|
||||
// color: ${props => props.theme.colors.textW1};
|
||||
// background-color: #0000;
|
||||
// resize: none;
|
||||
// outline: none;
|
||||
// border: none;
|
||||
// }
|
||||
// textarea{
|
||||
// background-color: #0000;
|
||||
// resize: none;
|
||||
// outline: none;
|
||||
// border: none;
|
||||
// }
|
||||
// /* width */
|
||||
// ::-webkit-scrollbar {
|
||||
// width: 5px;
|
||||
// }
|
||||
|
||||
// /* Track */
|
||||
// ::-webkit-scrollbar-track {
|
||||
// opacity: 0;
|
||||
// }
|
||||
|
||||
// /* Handle */
|
||||
// ::-webkit-scrollbar-thumb {
|
||||
// background: #555;
|
||||
// }
|
||||
// ::-moz-selection { /* Code for Firefox */
|
||||
// color: white;
|
||||
// background: #7bc97eaa;
|
||||
// }
|
||||
|
||||
// ::selection {
|
||||
// color: white;
|
||||
// background: #7bc97eaa;
|
||||
// }
|
||||
// `
|
||||
106
src/styles/theme.js
Normal file
106
src/styles/theme.js
Normal file
@@ -0,0 +1,106 @@
|
||||
import LightenDarken from '../functions'
|
||||
|
||||
|
||||
let themeStyle = 'light'
|
||||
|
||||
const dp00 = themeStyle === 'dark' ? '#0C0F12' : '#f9f6ef'
|
||||
const textW0 = themeStyle === 'dark' ? '#ffffff': '#524131'
|
||||
const textB0 = themeStyle === 'dark' ? '#000000': '#ffffff'
|
||||
|
||||
const theme = {
|
||||
colors: themeStyle === 'dark' ? {
|
||||
//buttons
|
||||
buttonGrey: LightenDarken(dp00, 7), //30%,
|
||||
//standard
|
||||
primary: '#98f8b6', //primary (light: #3e897c) #005c51 52c7b8 b6fcec #98f8b6
|
||||
primaryVar: '#aaf898',
|
||||
secondary: '#F2A8DB', //secondary
|
||||
error: '#ef5350',
|
||||
selected: '#3e8362',
|
||||
itemSelected: '#253f34',
|
||||
|
||||
iconGrey: '#8a8a8a',
|
||||
|
||||
//background
|
||||
dp00: dp00, //0%
|
||||
dp01: LightenDarken(dp00, 5), //5%
|
||||
dp02: LightenDarken(dp00, 7), //7%
|
||||
dp03: LightenDarken(dp00, 8), //8%
|
||||
dp04: LightenDarken(dp00, 9), //9%
|
||||
dp06: LightenDarken(dp00, 11), //11%
|
||||
dp08: LightenDarken(dp00, 12), //12%
|
||||
dp12: LightenDarken(dp00, 14), //14%
|
||||
dp16: LightenDarken(dp00, 15), //15%
|
||||
dp24: LightenDarken(dp00, 16), //16%
|
||||
|
||||
//text
|
||||
textW0: textW0,
|
||||
textW1: LightenDarken(textW0, -5),
|
||||
textW2: LightenDarken(textW0, -10),
|
||||
textW3: LightenDarken(textW0, -15),
|
||||
textW4: LightenDarken(textW0, -20),
|
||||
textW5: LightenDarken(textW0, -25),
|
||||
|
||||
textB0: textB0,
|
||||
textB1: LightenDarken(textB0, 5),
|
||||
textB2: LightenDarken(textB0, 10),
|
||||
textB3: LightenDarken(textB0, 15),
|
||||
textB4: LightenDarken(textB0, 20),
|
||||
textB5: LightenDarken(textB0, 25),
|
||||
} :
|
||||
{
|
||||
//buttons
|
||||
buttonGrey: dp00, //30%,
|
||||
//standard
|
||||
primary: '#f28006', //primary (light: #3e897c) #005c51 52c7b8 b6fcec #98f8b6
|
||||
primaryVar: '#da5d3f',
|
||||
secondary: '#F2A8DB', //secondary
|
||||
error: '#ef5350',
|
||||
selected: '#E09A4F',
|
||||
itemSelected: '#ECC194',
|
||||
|
||||
// iconGrey: '#8a8a8a',
|
||||
iconGrey: '#da5d3f',
|
||||
|
||||
shadow: '2px 2px 5px #0001',
|
||||
//background
|
||||
dp00: dp00, //0%
|
||||
dp01: LightenDarken(dp00, -5 ), //5%
|
||||
dp02: LightenDarken(dp00, -7 ), //7%
|
||||
dp03: LightenDarken(dp00, -8 ), //8%
|
||||
dp04: LightenDarken(dp00, -9 ), //9%
|
||||
dp06: LightenDarken(dp00, -11), //11%
|
||||
dp08: LightenDarken(dp00, -12), //12%
|
||||
dp12: LightenDarken(dp00, -14), //14%
|
||||
dp16: LightenDarken(dp00, -15), //15%
|
||||
dp24: LightenDarken(dp00, -16), //16%
|
||||
|
||||
//text
|
||||
textW0: textW0,
|
||||
textW1: LightenDarken(textW0, 5),
|
||||
textW2: LightenDarken(textW0, 10),
|
||||
textW3: LightenDarken(textW0, 15),
|
||||
textW4: LightenDarken(textW0, 20),
|
||||
textW5: LightenDarken(textW0, 25),
|
||||
|
||||
textB0: textB0,
|
||||
textB1: LightenDarken(textB0, -5),
|
||||
textB2: LightenDarken(textB0, -8),
|
||||
textB3: LightenDarken(textB0, -12),
|
||||
textB4: LightenDarken(textB0, -15),
|
||||
textB5: LightenDarken(textB0, -18),
|
||||
},
|
||||
fontSizes: {
|
||||
fontS: '16px',
|
||||
fontM: '24px',
|
||||
fontL: '32px',
|
||||
fontXL: '64px',
|
||||
},
|
||||
mediaQueries: {
|
||||
"below768": "only screen and (max-width: 768px)",
|
||||
"above768": "only screen and (min-width: 768px)"
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default theme
|
||||
Reference in New Issue
Block a user