Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitffac6b4

Browse files
committed
update styles
Signed-off-by: shmck <shawn.j.mckay@gmail.com>
1 parent6f4fc38 commitffac6b4

File tree

15 files changed

+85
-131
lines changed

15 files changed

+85
-131
lines changed

‎web-app/src/components/BetaBadge/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Theme } from '../../styles/theme'
55

66
conststyles={
77
betaBadge:(theme:Theme)=>({
8-
backgroundColor:theme['$color-brand1-9'],// '#6a67ce',
8+
backgroundColor:theme['$color-brand1-9'],
99
color:theme['$color-white'],
1010
}),
1111
}

‎web-app/src/components/Divider.tsx

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎web-app/src/containers/SelectTutorial/SelectTutorialForm.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import TutorialFile from './forms/TutorialFile'
88
conststyles={
99
formWrapper:{
1010
padding:'1rem',
11-
width:'100wvw',
11+
width:'100vw',
1212
height:'auto',
1313
},
1414
}

‎web-app/src/containers/SelectTutorial/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const styles = {
99
page:{
1010
position:'relative'as'relative',
1111
height:'auto',
12-
width:'vw',
12+
width:'100vw',
1313
},
1414
selectPage:{
1515
padding:'1rem',

‎web-app/src/containers/Start/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ const styles = {
1010
position:'relative'as'relative',
1111
display:'flex'as'flex',
1212
flexDirection:'column'as'column',
13-
width:'100%',
14-
height:window.innerHeight,
13+
width:'100vw',
14+
height:'100vh',
1515
},
1616
header:{
1717
flex:1,

‎web-app/src/containers/Tutorial/components/CompletedBanner.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
import*asReactfrom'react'
22
import{css,jsx}from'@emotion/core'
33
import{Button,Icon}from'@alifd/next'
4+
import{Theme}from'../../../styles/theme'
45

56
conststyles={
6-
banner:{
7+
banner:(theme:Theme)=>({
78
height:'auto',
8-
width:'100%',
9-
backgroundColor:'rgb(85, 132, 255)',
10-
color:'white',
9+
width:'100vw',
10+
backgroundColor:theme['$color-brand1-9'],
11+
color:theme['$color-white'],
1112
padding:'0.5rem 1rem',
12-
},
13+
}),
1314
header:{
1415
position:'relative'as'relative',
15-
width:'100%',
16+
width:'100vw',
1617
},
1718
headerMessage:{
1819
marginLeft:'0.5rem',

‎web-app/src/containers/Tutorial/components/Hints.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as React from 'react'
22
import{css,jsx}from'@emotion/core'
33
importMarkdownfrom'../../../components/Markdown'
44
importButtonfrom'../../../components/Button'
5+
import{Theme}from'../../../styles/theme'
56

67
conststyles={
78
hints:{
@@ -10,13 +11,11 @@ const styles = {
1011
hintList:{
1112
marginBottom:'0.5rem',
1213
},
13-
hint:{
14+
hint:(theme:Theme)=>({
1415
marginBottom:'0.5rem',
15-
backgroundColor:'rgba(255,229,100,0.3)',
16-
borderLeft:'#ffe564',
17-
borderRadius:'2px',
16+
backgroundColor:theme['$color-warning-1'],
1817
padding:'0 0.5rem',
19-
},
18+
}),
2019
}
2120

2221
interfaceProps{

‎web-app/src/containers/Tutorial/components/Level.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,15 @@ import * as T from 'typings'
33
import{css,jsx}from'@emotion/core'
44
importContentfrom'./Content'
55
importStepsfrom'./Steps'
6+
import{Theme}from'../../../styles/theme'
67

78
conststyles={
8-
page:{
9-
backgroundColor:'white',
9+
page:(theme:Theme)=>({
10+
backgroundColor:theme['$color-white'],
1011
position:'relative'as'relative',
1112
height:'auto',
12-
width:'100%',
13-
},
13+
width:'100vw',
14+
}),
1415
content:{
1516
display:'flex'as'flex',
1617
flexDirection:'column'as'column',

‎web-app/src/containers/Tutorial/components/SideMenu.tsx

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import*asReactfrom'react'
22
import{Menu,Icon,Drawer}from'@alifd/next'
3+
import{useTheme}from'emotion-theming'
4+
import{Theme}from'../../../styles/theme'
35

46
const{ Item, Divider}=Menu
57

@@ -11,10 +13,10 @@ const styles = {
1113
margin:0,
1214
height:'100%',
1315
},
14-
active:{
15-
color:'white',
16-
backgroundColor:'rgb(85, 132, 255)',
17-
},
16+
active:(theme:Theme)=>({
17+
color:theme['$color-white'],
18+
backgroundColor:theme['$color-brand1-9'],
19+
}),
1820
itemText:{
1921
marginLeft:'0.5rem',
2022
},
@@ -31,6 +33,7 @@ const SideMenu = (props: Props) => {
3133
constonMenuClose=()=>{
3234
props.toggleVisible(false)
3335
}
36+
consttheme:Theme=useTheme()
3437
return(
3538
<Drawer
3639
bodyStyle={styles.drawer}
@@ -44,7 +47,7 @@ const SideMenu = (props: Props) => {
4447
<Item
4548
key="level"
4649
disabled={props.page==='level'}
47-
style={props.page==='level' ?styles.active :{}}
50+
style={props.page==='level' ?styles.active(theme) :{}}
4851
onClick={()=>{
4952
onMenuClose()
5053
props.setPage('level')
@@ -56,7 +59,7 @@ const SideMenu = (props: Props) => {
5659
<Item
5760
key="review"
5861
disabled={props.page==='review'}
59-
style={props.page==='review' ?styles.active :{}}
62+
style={props.page==='review' ?styles.active(theme) :{}}
6063
onClick={()=>{
6164
onMenuClose()
6265
props.setPage('review')
@@ -69,7 +72,7 @@ const SideMenu = (props: Props) => {
6972
<Item
7073
key="about"
7174
disabled={props.page==='about'}
72-
style={props.page==='about' ?styles.active :{}}
75+
style={props.page==='about' ?styles.active(theme) :{}}
7376
onClick={()=>{
7477
onMenuClose()
7578
props.setPage('about')
Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,22 @@
11
import*asReactfrom'react'
22
import{Progress}from'@alifd/next'
33
importuseMediafrom'use-media'
4+
import{useTheme}from'emotion-theming'
5+
import{Theme}from'../../../styles/theme'
46

57
conststyles={
6-
progress:{
8+
progress:(theme:Theme)=>({
79
display:'flex'as'flex',
810
justifyContent:'flex-end'as'flex-end',
911
alignItems:'center'as'center',
1012
width:'10rem',
11-
color:'white',
12-
},
13-
text:{color:'white'},
13+
color:theme['$color-white'],
14+
}),
15+
text:(theme:Theme)=>({
16+
color:theme['$color-white'],
17+
marginRight:'0.5rem',
18+
fontSize:'80%',
19+
}),
1420
}
1521

1622
interfaceProps{
@@ -19,30 +25,27 @@ interface Props {
1925
}
2026

2127
constStepProgress=(props:Props)=>{
22-
constText=(
23-
<spanstyle={styles.text}>
24-
{props.current} of{props.max}
25-
</span>
26-
)
27-
28+
consttheme:Theme=useTheme()
2829
constisWide=useMedia({minWidth:'340px'})
2930

31+
constText=`${props.current} of${props.max}`
32+
3033
if(isWide){
3134
return(
3235
<Progress
3336
state="success"
3437
progressive
3538
percent={(props.current/props.max)*100}
3639
shape="line"
37-
color="rgb(85, 132, 255)"
40+
color={theme['$color-brand1-9']}
3841
css={styles.progress}
3942
textRender={()=>{
4043
returnText
4144
}}
4245
/>
4346
)
4447
}
45-
return<divcss={{marginRight:'0.5rem',fontSize:'80%'}}>{Text}</div>
48+
return<divcss={styles.text}>{Text}</div>
4649
}
4750

4851
exportdefaultStepProgress

‎web-app/src/containers/Tutorial/components/TestStatusIcon.tsx

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,36 @@
11
import*asReactfrom'react'
2+
import{useTheme}from'emotion-theming'
23
importIconfrom'../../../components/Icon'
4+
import{Theme}from'../../../styles/theme'
35

46
interfaceProps{
57
size:'small'|'xs'
68
status:'COMPLETE'|'ACTIVE'|'INCOMPLETE'|'FAIL'
79
}
810

911
conststyles={
10-
complete:{
12+
complete:(theme:Theme)=>({
1113
icon:'success-filling',
12-
color:'#37B809',
13-
},
14-
active:{
14+
color:theme['$color-success-3'],
15+
}),
16+
active:(theme:Theme)=>({
1517
icon:'success-filling',
16-
color:'lightgrey',
17-
},
18-
fail:{
18+
color:theme['$color-disabled-1'],
19+
}),
20+
fail:(theme:Theme)=>({
1921
icon:'warning',
20-
color:'#ff9300',
21-
},
22-
incomplete:{
22+
color:theme['$color-warning-3'],
23+
}),
24+
incomplete:(theme:Theme)=>({
2325
icon:'lock',
24-
color:'lightgrey',
25-
},
26+
color:theme['$color-disabled-1'],
27+
}),
2628
}
2729

2830
constTestStatusIcon=(props:Props)=>{
29-
//@ts-ignore
30-
conststyle:{icon:string;color:string}=styles[props.status.toLowerCase()]
31+
consttheme:Theme=useTheme()
32+
//@ts-ignore(
33+
conststyle:{icon:string;color:string}=styles[props.status.toLowerCase()](theme)
3134
return<Icontype={style.icon}size={props.size}style={{color:style.color}}/>
3235
}
3336

‎web-app/src/containers/Tutorial/containers/About.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
11
import*asReactfrom'react'
22
importMarkdownfrom'../../../components/Markdown'
3+
import{Theme}from'../../../styles/theme'
34

45
conststyles={
56
container:{
67
display:'flex'as'flex',
78
flexDirection:'column'as'column',
89
},
9-
header:{
10+
header:(theme:Theme)=>({
1011
display:'flex'as'flex',
1112
alignItems:'center',
1213
justifyContent:'space-between',
1314
height:'2rem',
14-
backgroundColor:'#EBEBEB',
15+
backgroundColor:theme['$color-fill1-2'],
1516
fontSize:'1rem',
1617
lineHeight:'1rem',
1718
padding:'10px 0.4rem',
18-
},
19+
}),
1920
content:{
2021
padding:'0.5rem',
2122
},

‎web-app/src/containers/Tutorial/containers/Review.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import * as T from 'typings'
33
import{Switch}from'@alifd/next'
44
importStepsfrom'../components/Steps'
55
importContentfrom'../components/Content'
6+
import{Theme}from'../../../styles/theme'
67

78
interfaceProps{
89
levels:T.LevelUI[]
@@ -14,16 +15,16 @@ const styles = {
1415
display:'flex'as'flex',
1516
flexDirection:'column'as'column',
1617
},
17-
header:{
18+
header:(theme:Theme)=>({
1819
display:'flex'as'flex',
1920
alignItems:'center',
2021
justifyContent:'space-between',
2122
height:'2rem',
22-
backgroundColor:'#EBEBEB',
23+
backgroundColor:theme['$color-fill1-2'],
2324
fontSize:'1rem',
2425
lineHeight:'1rem',
2526
padding:'10px 0.4rem',
26-
},
27+
}),
2728
title:{
2829
marginLeft:'0.5rem',
2930
},

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp