From 49083dc870b2a01549c3b61da53a79935215f344 Mon Sep 17 00:00:00 2001 From: shmck Date: Thu, 23 Jul 2020 19:16:12 -0700 Subject: [PATCH 1/8] add default theme variables Signed-off-by: shmck --- web-app/src/App.tsx | 6 +- web-app/src/styles/theme.tsx | 255 +++++++++++++++++++++++++++++++++++ 2 files changed, 260 insertions(+), 1 deletion(-) create mode 100644 web-app/src/styles/theme.tsx diff --git a/web-app/src/App.tsx b/web-app/src/App.tsx index 361221bf..91d7e4b0 100644 --- a/web-app/src/App.tsx +++ b/web-app/src/App.tsx @@ -3,6 +3,8 @@ import { ConfigProvider } from '@alifd/next' import enUS from '@alifd/next/lib/locale/en-us' import ErrorBoundary from './components/ErrorBoundary' import Workspace from './components/Workspace' +import { ThemeProvider } from 'emotion-theming' +import theme from './styles/theme' import Routes from './Routes' const App = () => ( @@ -10,7 +12,9 @@ const App = () => ( - + + + diff --git a/web-app/src/styles/theme.tsx b/web-app/src/styles/theme.tsx new file mode 100644 index 00000000..f58e718f --- /dev/null +++ b/web-app/src/styles/theme.tsx @@ -0,0 +1,255 @@ +// import variables from '@alifd/theme-4/variables' + +const theme = { + '$form-element-small-height': '20px', + '$form-element-medium-height': '32px', + '$form-element-large-height': '44px', + '$form-element-small-font-size': '12px', + '$form-element-medium-font-size': '12px', + '$form-element-large-font-size': '16px', + '$form-element-small-preview-height': '20px', + '$form-element-medium-preview-height': '28px', + '$form-element-large-preview-height': '40px', + '$form-element-small-preview-font-size': '12px', + '$form-element-medium-preview-font-size': '12px', + '$form-element-large-preview-font-size': '16px', + '$form-element-small-icon-size': '12px', + '$form-element-medium-icon-size': '12px', + '$form-element-large-icon-size': '16px', + '$form-element-small-corner': '35px', + '$form-element-medium-corner': '35px', + '$form-element-large-corner': '35px', + '$mask-background': '#000000', + '$mask-opacity': '.2', + '$popup-local-border-width': '1px', + '$popup-local-border-style': 'solid', + '$popup-local-border-color': '#DCDEE3', + '$popup-local-corner': '3px', + '$popup-local-shadow': 'none', + '$popup-global-border-width': '0', + '$popup-global-border-style': 'solid', + '$popup-global-border-color': '#DCDEE3', + '$popup-global-corner': '3px', + '$popup-global-shadow': '0px 2px 4px 0px rgba(0,0, 0, 0.12)', + '$color-brand1-1': '#D6F4ED', + '$color-brand1-6': '#01C1B2', + '$color-brand1-9': '#01A79A', + '$color-data1-1': '#01C1B2', + '$color-data1-2': '#5584FF', + '$color-data1-3': '#8272EC', + '$color-data1-4': '#FF445F', + '$color-data1-5': '#FF6A00', + '$color-data1-6': '#FFD74D', + '$color-data1-7': '#4DDE6D', + '$color-data1-8': '#18B1F7', + '$color-white': '#FFFFFF', + '$color-black': '#000000', + '$color-transparent': 'transparent', + '$color-success-1': '#E4FDDA', + '$color-success-2': '#CDF2BE', + '$color-success-3': '#46BC15', + '$color-success-4': '#41A716', + '$color-notice-1': '#E3F2FD', + '$color-notice-2': '#BAD9FF', + '$color-notice-3': '#4494F9', + '$color-notice-4': '#2E7DE0', + '$color-warning-1': '#FFF3E0', + '$color-warning-2': '#FFE6BD', + '$color-warning-3': '#FF9300', + '$color-warning-4': '#EB7E10', + '$color-error-1': '#FFECE4', + '$color-error-2': '#FFC8B2', + '$color-error-3': '#FF3000', + '$color-error-4': '#E72B00', + '$color-help-1': '#E3FFF8', + '$color-help-2': '#C0ECE2', + '$color-help-3': '#01C1B2', + '$color-help-4': '#01A79A', + '$color-link-1': '#5584FF', + '$color-link-2': '#5584FF', + '$color-link-3': '#3E71F7', + '$color-other-1': '#FFEB3B', + '$color-other-2': '#FCCC12', + '$color-other-3': '#EABB06', + '$color-line1-1': '#E6E7EB', + '$color-line1-2': '#DCDEE3', + '$color-line1-3': '#C4C6CF', + '$color-line1-4': '#A0A2AD', + '$color-fill1-1': '#F7F8FA', + '$color-fill1-2': '#F2F3F7', + '$color-fill1-3': '#EBECF0', + '$color-fill1-4': '#E2E4E8', + '$color-text1-1': '#CCCCCC', + '$color-text1-2': '#999999', + '$color-text1-3': '#666666', + '$color-text1-4': '#333333', + '$corner-1': '3px', + '$corner-2': '15px', + '$corner-3': '35px', + '$corner-circle': '50%', + '$corner-semicircle': '500px', + '$corner-zero': '0', + '$font-family-base': 'Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"', + '$font-lineheight-1': '1.3', + '$font-lineheight-2': '1.5', + '$font-lineheight-3': '1.7', + '$font-size-display-3': '56px', + '$font-size-display-2': '48px', + '$font-size-display-1': '36px', + '$font-size-headline': '24px', + '$font-size-title': '20px', + '$font-size-subhead': '16px', + '$font-size-body-2': '14px', + '$font-size-body-1': '12px', + '$font-size-caption': '12px', + '$font-weight-1': 'lighter', + '$font-weight-thin': '200', + '$font-weight-light': '300', + '$font-weight-2': 'normal', + '$font-weight-medium': '500', + '$font-weight-semi-bold': '600', + '$font-weight-3': 'bold', + '$font-weight-extra-bold': '800', + '$font-weight-ultra-bold': '900', + '$icon-xxs': '8px', + '$icon-xs': '12px', + '$icon-s': '16px', + '$icon-m': '20px', + '$icon-l': '24px', + '$icon-xl': '32px', + '$icon-xxl': '48px', + '$icon-xxxl': '64px', + '$icon-content-smile': '"\\e65f"', + '$icon-content-cry': '"\\e65d"', + '$icon-content-success': '"\\e60a"', + '$icon-content-warning': '"\\e60b"', + '$icon-content-prompt': '"\\e60c"', + '$icon-content-error': '"\\e60d"', + '$icon-content-help': '"\\e673"', + '$icon-content-clock': '"\\e621"', + '$icon-content-success-filling': '"\\e63a"', + '$icon-content-delete-filling': '"\\e623"', + '$icon-content-favorites-filling': '"\\e60e"', + '$icon-content-add': '"\\e655"', + '$icon-content-minus': '"\\e601"', + '$icon-content-arrow-up': '"\\e625"', + '$icon-content-arrow-down': '"\\e63d"', + '$icon-content-arrow-left': '"\\e61d"', + '$icon-content-arrow-right': '"\\e619"', + '$icon-content-arrow-double-left': '"\\e659"', + '$icon-content-arrow-double-right': '"\\e65e"', + '$icon-content-switch': '"\\e6b3"', + '$icon-content-sorting': '"\\e634"', + '$icon-content-descending': '"\\e61f"', + '$icon-content-ascending': '"\\e61e"', + '$icon-content-select': '"\\e632"', + '$icon-content-semi-select': '"\\e633"', + '$icon-content-loading': '"\\e646"', + '$icon-content-search': '"\\e656"', + '$icon-content-close': '"\\e626"', + '$icon-content-ellipsis': '"\\e654"', + '$icon-content-picture': '"\\e631"', + '$icon-content-calendar': '"\\e607"', + '$icon-content-ashbin': '"\\e639"', + '$icon-content-upload': '"\\e7ee"', + '$icon-content-download': '"\\e628"', + '$icon-content-set': '"\\e683"', + '$icon-content-edit': '"\\e63b"', + '$icon-content-refresh': '"\\e677"', + '$icon-content-filter': '"\\e627"', + '$icon-content-attachment': '"\\e665"', + '$icon-content-account': '"\\e608"', + '$icon-content-email': '"\\e605"', + '$icon-content-atm': '"\\e606"', + '$icon-content-copy': '"\\e60f"', + '$icon-content-toggle-left': '"\\e602"', + '$icon-content-toggle-right': '"\\e603"', + '$icon-content-eye': '"\\e611"', + '$icon-content-eye-close': '"\\e600"', + '$icon-content-unlock': '"\\e615"', + '$icon-content-lock': '"\\e617"', + '$icon-content-exit': '"\\e616"', + '$icon-content-chart-bar': '"\\e612"', + '$icon-content-chart-pie': '"\\e613"', + '$icon-content-form': '"\\e7fb"', + '$icon-content-detail': '"\\e7f8"', + '$icon-content-list': '"\\e7f9"', + '$icon-content-dashboard': '"\\e7fa"', + '$icon-reset': '""', + '$line-zero': '0', + '$line-1': '1px', + '$line-2': '2px', + '$line-3': '4px', + '$line-solid': 'solid', + '$line-dashed': 'dashed', + '$line-dotted': 'dotted', + '$shadow-zero': 'none', + '$shadow-1': '1px 1px 3px 0px rgba(0,0,0,0.12)', + '$shadow-1-up': '0px -1px 3px 0px rgba(0,0,0,0.12)', + '$shadow-1-right': '1px 0px 3px 0px rgba(0,0,0,0.12)', + '$shadow-1-down': '0px 1px 3px 0px rgba(0,0,0,0.12)', + '$shadow-1-left': '-1px 0px 3px 0px rgba(0,0,0,0.12)', + '$shadow-2': '2px 2px 4px 0px rgba(0,0,0,0.12)', + '$shadow-2-up': '0px -2px 4px 0px rgba(0,0,0,0.12)', + '$shadow-2-right': '2px 0px 4px 0px rgba(0,0,0,0.12)', + '$shadow-2-down': '0px 2px 4px 0px rgba(0,0,0,0.12)', + '$shadow-2-left': '-2px 0px 4px 0px rgba(0,0,0,0.12)', + '$shadow-3': '2px 2px 8px 0px rgba(0,0,0,0.12)', + '$shadow-3-up': '0px -2px 8px 0px rgba(0,0,0,0.12)', + '$shadow-3-right': '2px 0px 8px 0px rgba(0,0,0,0.12)', + '$shadow-3-down': '0px 2px 8px 0px rgba(0,0,0,0.12)', + '$shadow-3-left': '-2px 0px 8px 0px rgba(0,0,0,0.12)', + '$s-zero': '0', + '$s-1': '4px', + '$s-2': '8px', + '$s-3': '12px', + '$s-4': '16px', + '$s-5': '20px', + '$s-6': '24px', + '$s-7': '28px', + '$s-8': '32px', + '$s-9': '36px', + '$s-10': '40px', + '$s-11': '44px', + '$s-12': '48px', + '$s-13': '52px', + '$s-14': '56px', + '$s-15': '60px', + '$s-16': '64px', + '$s-17': '68px', + '$s-18': '72px', + '$s-19': '76px', + '$s-20': '80px', + '$s-21': '84px', + '$s-22': '88px', + '$s-23': '92px', + '$s-24': '96px', + '$s-25': '100px', + '$s-26': '104px', + '$s-27': '108px', + '$s-28': '112px', + '$s-29': '116px', + '$s-30': '120px', + '$s-31': '124px', + '$s-32': '128px', + '$s-33': '132px', + '$s-34': '136px', + '$s-35': '140px', + '$s-36': '144px', + '$s-37': '148px', + '$s-38': '152px', + '$s-39': '156px', + '$s-40': '160px', + '$s-41': '164px', + '$s-42': '168px', + '$s-43': '172px', + '$s-44': '176px', + '$s-45': '180px', + '$s-46': '184px', + '$s-47': '188px', + '$s-48': '192px', + '$s-49': '196px', + '$s-50': '200px', +} + +export default theme From 2d2e1ad6c8328330c586ab937409e2fa01bf14f3 Mon Sep 17 00:00:00 2001 From: shmck Date: Thu, 23 Jul 2020 22:03:07 -0700 Subject: [PATCH 2/8] setup theme Signed-off-by: shmck --- web-app/package.json | 1 - web-app/src/components/BetaBadge/index.tsx | 12 +- web-app/src/styles/index.css | 1 - web-app/src/styles/theme.tsx | 322 +++++++++++++++------ web-app/stories/utils/SideBarDecorator.tsx | 6 +- web-app/yarn.lock | 7 + 6 files changed, 247 insertions(+), 102 deletions(-) diff --git a/web-app/package.json b/web-app/package.json index dab9b3bf..bc1a3f56 100644 --- a/web-app/package.json +++ b/web-app/package.json @@ -26,7 +26,6 @@ }, "dependencies": { "@alifd/next": "^1.20.20", - "@alifd/theme-4": "^0.3.1", "@emotion/babel-preset-css-prop": "^10.0.27", "@emotion/core": "^10.0.28", "babel-jest": "^26.1.0", diff --git a/web-app/src/components/BetaBadge/index.tsx b/web-app/src/components/BetaBadge/index.tsx index 59145062..b6c4d3f3 100644 --- a/web-app/src/components/BetaBadge/index.tsx +++ b/web-app/src/components/BetaBadge/index.tsx @@ -1,11 +1,12 @@ import * as React from 'react' +import { useTheme } from 'emotion-theming' import { Badge } from '@alifd/next' const styles = { - betaBadge: { - backgroundColor: '#6a67ce', - color: '#FFFFFF', - }, + betaBadge: (theme: any) => ({ + backgroundColor: theme['$color-brand1-9'], // '#6a67ce', + color: theme['$color-white'], + }), } type Props = { @@ -13,8 +14,9 @@ type Props = { } const BetaBadge = ({ children }: Props) => { + const theme = useTheme() return ( - + {children}   ) diff --git a/web-app/src/styles/index.css b/web-app/src/styles/index.css index de51430e..802f81bc 100644 --- a/web-app/src/styles/index.css +++ b/web-app/src/styles/index.css @@ -1,5 +1,4 @@ @import 'https://github.com/~@alifd/next/dist/next.min.css'; -/* @import 'https://github.com/~@alifd/theme-4/dist/next.css'; */ @import 'https://github.com/font.css'; html { diff --git a/web-app/src/styles/theme.tsx b/web-app/src/styles/theme.tsx index f58e718f..fa9f4dcd 100644 --- a/web-app/src/styles/theme.tsx +++ b/web-app/src/styles/theme.tsx @@ -1,254 +1,388 @@ -// import variables from '@alifd/theme-4/variables' +// import variables from '@alifd/theme-1/variables' const theme = { '$form-element-small-height': '20px', - '$form-element-medium-height': '32px', - '$form-element-large-height': '44px', + + '$form-element-medium-height': '28px', + + '$form-element-large-height': '40px', + '$form-element-small-font-size': '12px', + '$form-element-medium-font-size': '12px', - '$form-element-large-font-size': '16px', + + '$form-element-large-font-size': '14px', + '$form-element-small-preview-height': '20px', + '$form-element-medium-preview-height': '28px', + '$form-element-large-preview-height': '40px', + '$form-element-small-preview-font-size': '12px', + '$form-element-medium-preview-font-size': '12px', + '$form-element-large-preview-font-size': '16px', + '$form-element-small-icon-size': '12px', + '$form-element-medium-icon-size': '12px', + '$form-element-large-icon-size': '16px', - '$form-element-small-corner': '35px', - '$form-element-medium-corner': '35px', - '$form-element-large-corner': '35px', + + '$form-element-small-corner': '30px', + + '$form-element-medium-corner': '30px', + + '$form-element-large-corner': '30px', + '$mask-background': '#000000', - '$mask-opacity': '.2', + + '$mask-opacity': '0.45', + '$popup-local-border-width': '1px', + '$popup-local-border-style': 'solid', + '$popup-local-border-color': '#DCDEE3', - '$popup-local-corner': '3px', + + '$popup-local-corner': '5px', + '$popup-local-shadow': 'none', + '$popup-global-border-width': '0', + '$popup-global-border-style': 'solid', + '$popup-global-border-color': '#DCDEE3', - '$popup-global-corner': '3px', - '$popup-global-shadow': '0px 2px 4px 0px rgba(0,0, 0, 0.12)', - '$color-brand1-1': '#D6F4ED', - '$color-brand1-6': '#01C1B2', - '$color-brand1-9': '#01A79A', - '$color-data1-1': '#01C1B2', - '$color-data1-2': '#5584FF', - '$color-data1-3': '#8272EC', + + '$popup-global-corner': '5px', + + '$popup-global-shadow': '0px 2px 6px 0px rgba(255, 106, 0, 0.3)', + + '$color-brand1-1': '#DEE8FF', + + '$color-brand1-6': '#5584FF', + + '$color-brand1-9': '#3E71F7', + + '$color-data1-1': '#00DCCD', + + '$color-data1-2': '#506FED', + + '$color-data1-3': '#AE66FC', + '$color-data1-4': '#FF445F', - '$color-data1-5': '#FF6A00', + + '$color-data1-5': '#FF934D', + '$color-data1-6': '#FFD74D', + '$color-data1-7': '#4DDE6D', + '$color-data1-8': '#18B1F7', + '$color-white': '#FFFFFF', + '$color-black': '#000000', + '$color-transparent': 'transparent', + '$color-success-1': '#E4FDDA', + '$color-success-2': '#CDF2BE', + '$color-success-3': '#46BC15', + '$color-success-4': '#41A716', + '$color-notice-1': '#E3F2FD', + '$color-notice-2': '#BAD9FF', + '$color-notice-3': '#4494F9', + '$color-notice-4': '#2E7DE0', + '$color-warning-1': '#FFF3E0', + '$color-warning-2': '#FFE6BD', + '$color-warning-3': '#FF9300', + '$color-warning-4': '#EB7E10', + '$color-error-1': '#FFECE4', + '$color-error-2': '#FFC8B2', + '$color-error-3': '#FF3000', + '$color-error-4': '#E72B00', + '$color-help-1': '#E3FFF8', + '$color-help-2': '#C0ECE2', + '$color-help-3': '#01C1B2', + '$color-help-4': '#01A79A', + '$color-link-1': '#5584FF', + '$color-link-2': '#5584FF', + '$color-link-3': '#3E71F7', + '$color-other-1': '#FFEB3B', + '$color-other-2': '#FCCC12', + '$color-other-3': '#EABB06', + '$color-line1-1': '#E6E7EB', + '$color-line1-2': '#DCDEE3', + '$color-line1-3': '#C4C6CF', + '$color-line1-4': '#A0A2AD', + '$color-fill1-1': '#F7F8FA', + '$color-fill1-2': '#F2F3F7', + '$color-fill1-3': '#EBECF0', + '$color-fill1-4': '#E2E4E8', + '$color-text1-1': '#CCCCCC', + '$color-text1-2': '#999999', + '$color-text1-3': '#666666', - '$color-text1-4': '#333333', + + '$color-text1-4': '#000000', + '$corner-1': '3px', - '$corner-2': '15px', - '$corner-3': '35px', + + '$corner-2': '6px', + + '$corner-3': '20px', + '$corner-circle': '50%', + '$corner-semicircle': '500px', + '$corner-zero': '0', + '$font-family-base': 'Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"', + '$font-lineheight-1': '1.3', + '$font-lineheight-2': '1.5', + '$font-lineheight-3': '1.7', + '$font-size-display-3': '56px', + '$font-size-display-2': '48px', + '$font-size-display-1': '36px', + '$font-size-headline': '24px', + '$font-size-title': '20px', + '$font-size-subhead': '16px', + '$font-size-body-2': '14px', + '$font-size-body-1': '12px', + '$font-size-caption': '12px', + '$font-weight-1': 'lighter', + '$font-weight-thin': '200', + '$font-weight-light': '300', + '$font-weight-2': 'normal', + '$font-weight-medium': '500', + '$font-weight-semi-bold': '600', + '$font-weight-3': 'bold', + '$font-weight-extra-bold': '800', + '$font-weight-ultra-bold': '900', + '$icon-xxs': '8px', + '$icon-xs': '12px', + '$icon-s': '16px', + '$icon-m': '20px', + '$icon-l': '24px', + '$icon-xl': '32px', + '$icon-xxl': '48px', + '$icon-xxxl': '64px', - '$icon-content-smile': '"\\e65f"', - '$icon-content-cry': '"\\e65d"', - '$icon-content-success': '"\\e60a"', - '$icon-content-warning': '"\\e60b"', - '$icon-content-prompt': '"\\e60c"', - '$icon-content-error': '"\\e60d"', - '$icon-content-help': '"\\e673"', - '$icon-content-clock': '"\\e621"', - '$icon-content-success-filling': '"\\e63a"', - '$icon-content-delete-filling': '"\\e623"', - '$icon-content-favorites-filling': '"\\e60e"', - '$icon-content-add': '"\\e655"', - '$icon-content-minus': '"\\e601"', - '$icon-content-arrow-up': '"\\e625"', - '$icon-content-arrow-down': '"\\e63d"', - '$icon-content-arrow-left': '"\\e61d"', - '$icon-content-arrow-right': '"\\e619"', - '$icon-content-arrow-double-left': '"\\e659"', - '$icon-content-arrow-double-right': '"\\e65e"', - '$icon-content-switch': '"\\e6b3"', - '$icon-content-sorting': '"\\e634"', - '$icon-content-descending': '"\\e61f"', - '$icon-content-ascending': '"\\e61e"', - '$icon-content-select': '"\\e632"', - '$icon-content-semi-select': '"\\e633"', - '$icon-content-loading': '"\\e646"', - '$icon-content-search': '"\\e656"', - '$icon-content-close': '"\\e626"', - '$icon-content-ellipsis': '"\\e654"', - '$icon-content-picture': '"\\e631"', - '$icon-content-calendar': '"\\e607"', - '$icon-content-ashbin': '"\\e639"', - '$icon-content-upload': '"\\e7ee"', - '$icon-content-download': '"\\e628"', - '$icon-content-set': '"\\e683"', - '$icon-content-edit': '"\\e63b"', - '$icon-content-refresh': '"\\e677"', - '$icon-content-filter': '"\\e627"', - '$icon-content-attachment': '"\\e665"', - '$icon-content-account': '"\\e608"', - '$icon-content-email': '"\\e605"', - '$icon-content-atm': '"\\e606"', - '$icon-content-copy': '"\\e60f"', - '$icon-content-toggle-left': '"\\e602"', - '$icon-content-toggle-right': '"\\e603"', - '$icon-content-eye': '"\\e611"', - '$icon-content-eye-close': '"\\e600"', - '$icon-content-unlock': '"\\e615"', - '$icon-content-lock': '"\\e617"', - '$icon-content-exit': '"\\e616"', - '$icon-content-chart-bar': '"\\e612"', - '$icon-content-chart-pie': '"\\e613"', - '$icon-content-form': '"\\e7fb"', - '$icon-content-detail': '"\\e7f8"', - '$icon-content-list': '"\\e7f9"', - '$icon-content-dashboard': '"\\e7fa"', - '$icon-reset': '""', + '$line-zero': '0', + '$line-1': '1px', + '$line-2': '2px', - '$line-3': '4px', + + '$line-3': '3px', + '$line-solid': 'solid', + '$line-dashed': 'dashed', + '$line-dotted': 'dotted', + '$shadow-zero': 'none', - '$shadow-1': '1px 1px 3px 0px rgba(0,0,0,0.12)', - '$shadow-1-up': '0px -1px 3px 0px rgba(0,0,0,0.12)', - '$shadow-1-right': '1px 0px 3px 0px rgba(0,0,0,0.12)', - '$shadow-1-down': '0px 1px 3px 0px rgba(0,0,0,0.12)', - '$shadow-1-left': '-1px 0px 3px 0px rgba(0,0,0,0.12)', - '$shadow-2': '2px 2px 4px 0px rgba(0,0,0,0.12)', - '$shadow-2-up': '0px -2px 4px 0px rgba(0,0,0,0.12)', - '$shadow-2-right': '2px 0px 4px 0px rgba(0,0,0,0.12)', - '$shadow-2-down': '0px 2px 4px 0px rgba(0,0,0,0.12)', - '$shadow-2-left': '-2px 0px 4px 0px rgba(0,0,0,0.12)', - '$shadow-3': '2px 2px 8px 0px rgba(0,0,0,0.12)', - '$shadow-3-up': '0px -2px 8px 0px rgba(0,0,0,0.12)', - '$shadow-3-right': '2px 0px 8px 0px rgba(0,0,0,0.12)', - '$shadow-3-down': '0px 2px 8px 0px rgba(0,0,0,0.12)', - '$shadow-3-left': '-2px 0px 8px 0px rgba(0,0,0,0.12)', + + '$shadow-1': '1px 1px 2px 0px rgba(0, 0, 0, 0.1)', + + '$shadow-1-up': '0px -1px 2px 0px rgba(0, 0, 0, 0.1)', + + '$shadow-1-right': '1px 0px 2px 0px rgba(0, 0, 0, 0.1)', + + '$shadow-1-down': '0px 1px 2px 0px rgba(0, 0, 0, 0.1)', + + '$shadow-1-left': '-1px 0px 2px 0px rgba(0, 0, 0, 0.1)', + + '$shadow-2': '2px 2px 6px 0px rgba(255, 106, 0, 0.3)', + + '$shadow-2-up': '0px -2px 6px 0px rgba(255, 106, 0, 0.3)', + + '$shadow-2-right': '2px 0px 6px 0px rgba(255, 106, 0, 0.3)', + + '$shadow-2-down': '0px 2px 6px 0px rgba(255, 106, 0, 0.3)', + + '$shadow-2-left': '-2px 0px 6px 0px rgba(255, 106, 0, 0.3)', + + '$shadow-3': '4px 4px 10px 0px rgba(0, 0, 0, 0.1)', + + '$shadow-3-up': '0px -4px 10px 0px rgba(0, 0, 0, 0.1)', + + '$shadow-3-right': '4px 0px 10px 0px rgba(0, 0, 0, 0.1)', + + '$shadow-3-down': '0px 4px 10px 0px rgba(0, 0, 0, 0.1)', + + '$shadow-3-left': '-4px 0px 10px 0px rgba(0, 0, 0, 0.1)', + '$s-zero': '0', + '$s-1': '4px', + '$s-2': '8px', + '$s-3': '12px', + '$s-4': '16px', + '$s-5': '20px', + '$s-6': '24px', + '$s-7': '28px', + '$s-8': '32px', + '$s-9': '36px', + '$s-10': '40px', + '$s-11': '44px', + '$s-12': '48px', + '$s-13': '52px', + '$s-14': '56px', + '$s-15': '60px', + '$s-16': '64px', + '$s-17': '68px', + '$s-18': '72px', + '$s-19': '76px', + '$s-20': '80px', + '$s-21': '84px', + '$s-22': '88px', + '$s-23': '92px', + '$s-24': '96px', + '$s-25': '100px', + '$s-26': '104px', + '$s-27': '108px', + '$s-28': '112px', + '$s-29': '116px', + '$s-30': '120px', + '$s-31': '124px', + '$s-32': '128px', + '$s-33': '132px', + '$s-34': '136px', + '$s-35': '140px', + '$s-36': '144px', + '$s-37': '148px', + '$s-38': '152px', + '$s-39': '156px', + '$s-40': '160px', + '$s-41': '164px', + '$s-42': '168px', + '$s-43': '172px', + '$s-44': '176px', + '$s-45': '180px', + '$s-46': '184px', + '$s-47': '188px', + '$s-48': '192px', + '$s-49': '196px', + '$s-50': '200px', } diff --git a/web-app/stories/utils/SideBarDecorator.tsx b/web-app/stories/utils/SideBarDecorator.tsx index 318a6494..86e43863 100644 --- a/web-app/stories/utils/SideBarDecorator.tsx +++ b/web-app/stories/utils/SideBarDecorator.tsx @@ -1,6 +1,8 @@ import * as React from 'react' import { css, jsx } from '@emotion/core' import { Provider } from './ProviderDecorator' +import { ThemeProvider } from 'emotion-theming' +import theme from '../../src/styles/theme' const styles = { container: { @@ -17,7 +19,9 @@ const styles = { const SideBarDecorator = (storyFn) => ( -
{storyFn()}
+ +
{storyFn()}
+ ) diff --git a/web-app/yarn.lock b/web-app/yarn.lock index 1a122fb9..8588f3cc 100644 --- a/web-app/yarn.lock +++ b/web-app/yarn.lock @@ -40,6 +40,13 @@ react-transition-group "^2.2.1" shallow-element-equals "^1.0.1" +"@alifd/theme-1@^0.3.1": + version "0.3.1" + resolved "https://registry.yarnpkg.com/@alifd/theme-1/-/theme-1-0.3.1.tgz#da3ddf986775b5c70ebf5111f5d6f11b6fac69bb" + integrity sha512-VdSsTifO5nvc0gl1yMkVv3XZsI5FNyg8Vv2+sb3C+ApIl7AL6FwKs8Ljc4AAlpfurT1Ke5tQpzgMV1ejrinAww== + dependencies: + "@alifd/next" "~1.20.4" + "@alifd/theme-4@^0.3.1": version "0.3.1" resolved "https://registry.yarnpkg.com/@alifd/theme-4/-/theme-4-0.3.1.tgz#be5f26f777a11122ab1def8d1f1333c0e7942d7e" From d59b0e130ce1e9bc343935247607bdef1d5b94af Mon Sep 17 00:00:00 2001 From: shmck Date: Thu, 23 Jul 2020 22:34:41 -0700 Subject: [PATCH 3/8] theme progress Signed-off-by: shmck --- web-app/src/components/BetaBadge/index.tsx | 5 +- web-app/src/components/Card/index.tsx | 29 --- web-app/src/components/Error/index.tsx | 15 +- .../NewUserExperience/NuxTutorial.tsx | 134 ------------ .../NewUserExperience/transition.css | 21 -- web-app/src/components/Tag/index.tsx | 18 -- web-app/src/components/TestMessage/index.tsx | 27 +-- web-app/src/components/Workspace/index.tsx | 8 +- .../containers/Tutorial/components/Step.tsx | 2 +- web-app/src/styles/theme.tsx | 193 +----------------- web-app/stories/Step.stories.tsx | 6 +- 11 files changed, 37 insertions(+), 421 deletions(-) delete mode 100644 web-app/src/components/Card/index.tsx delete mode 100644 web-app/src/components/NewUserExperience/NuxTutorial.tsx delete mode 100644 web-app/src/components/NewUserExperience/transition.css delete mode 100644 web-app/src/components/Tag/index.tsx diff --git a/web-app/src/components/BetaBadge/index.tsx b/web-app/src/components/BetaBadge/index.tsx index b6c4d3f3..494f783d 100644 --- a/web-app/src/components/BetaBadge/index.tsx +++ b/web-app/src/components/BetaBadge/index.tsx @@ -1,9 +1,10 @@ import * as React from 'react' import { useTheme } from 'emotion-theming' import { Badge } from '@alifd/next' +import { Theme } from '../../styles/theme' const styles = { - betaBadge: (theme: any) => ({ + betaBadge: (theme: Theme) => ({ backgroundColor: theme['$color-brand1-9'], // '#6a67ce', color: theme['$color-white'], }), @@ -14,7 +15,7 @@ type Props = { } const BetaBadge = ({ children }: Props) => { - const theme = useTheme() + const theme: Theme = useTheme() return ( {children}   diff --git a/web-app/src/components/Card/index.tsx b/web-app/src/components/Card/index.tsx deleted file mode 100644 index f3c2bc25..00000000 --- a/web-app/src/components/Card/index.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { Card as AlifdCard } from '@alifd/next' -import * as React from 'react' -import { css, jsx } from '@emotion/core' - -const styles = { - card: { - display: 'flex', - width: '100%', - }, -} - -interface Props { - children: React.ReactNode - onClick?: () => void - style?: React.CSSProperties -} - -const Card = (props: Props) => ( - - {props.children} - -) - -export default Card diff --git a/web-app/src/components/Error/index.tsx b/web-app/src/components/Error/index.tsx index 1c6fabea..35018526 100644 --- a/web-app/src/components/Error/index.tsx +++ b/web-app/src/components/Error/index.tsx @@ -4,22 +4,23 @@ import * as T from 'typings' import { css, jsx } from '@emotion/core' import Markdown from '../Markdown' import Button from '../../components/Button' +import { Theme } from '../../styles/theme' const styles = { - container: { + container: (theme: Theme) => ({ display: 'flex' as 'flex', flexDirection: 'column' as 'column', justifyContent: 'center' as 'center', alignItems: 'center' as 'center', - border: '0.5rem solid #FFBABA', + border: `0.5rem solid ${theme['$color-error-2']}`, padding: '1rem', - width: '100%', + width: '100vw', height: '100%', - }, - content: { + }), + content: (theme: Theme) => ({ textAlign: 'center' as 'center', - color: 'rgb(40, 40, 40);', - }, + color: theme['$color-text1-3'], + }), options: { display: 'flex' as 'flex', flexDirection: 'column' as 'column', diff --git a/web-app/src/components/NewUserExperience/NuxTutorial.tsx b/web-app/src/components/NewUserExperience/NuxTutorial.tsx deleted file mode 100644 index 68129c5f..00000000 --- a/web-app/src/components/NewUserExperience/NuxTutorial.tsx +++ /dev/null @@ -1,134 +0,0 @@ -import React from 'react' -import { Collapse, Icon } from '@alifd/next' -import ReactCSSTransitionGroup from 'react-addons-css-transition-group' -import './transition.css' - -const Panel = Collapse.Panel - -const styles = { - container: { - position: 'relative' as 'relative', - transition: 'all .35s', - }, - header: { - display: 'flex' as 'flex', - backgroundColor: '#6a67ce', - color: 'white', - padding: '0.5rem', - }, - title: { - fontSize: '1rem', - }, - toggle: { - display: 'flex' as 'flex', - alignItems: 'center' as 'center', - width: '1.5rem', - }, -} - -type NuxProps = { - onClose: () => void - onLoadSolution: () => void -} - -const NewUserExperienceTutorialCollapsible = (props: NuxProps) => { - const [expandedKeys, setExpandedKeys] = React.useState([]) - return ( - - -
-

Update the editor code and press save to to complete the list of "Tasks".

-
- - -
-

- When you press save in the editor, CodeRoad runs tests to check if you completed the current task and can - continue to the next task. -

-
-

- Progress is tracked and advanced by using Git in the background. On startup, CodeRoad launches a new local - Git repo. New tasks are loaded as new commits, and your task solution code is automatically saved as the - next Git commit. -

-
- - -

You can debug a tutorial in a number of ways:

-
-
    -
  1. - 1. Press save in the editor and use the feedback from failed test messages in the console output. The output - can be found by opening the integrated VSCode terminal, and selecting the tab "Output". Learn more about the - integrated terminal in VSCode at {' '} - - https://code.visualstudio.com/docs/editor/integrated-terminal - - . -
    2. -
    -
  2. - 2. Run the VSCode Debugger located in the left hand icon panel. To start debugging, press the green arrow - button at the top labelled "RUN AND DEBUG". Learn more about debugging with the VSCode Debugger at  - - https://code.visualstudio.com/docs/editor/debugging - - . -
    3. -
    -
  3. - 3. Run the tests in the command line (eg. `npm run test`) and use the output from the tests to debug. Feel - free to use the integrated VScode terminal noted above or another terminal with the project working - directory open. . -
    4. -
- - -

A few tips to help you if you get stuck.

-
    -
  1. - Read the tests. The tests can be found in the test directory and can be read in detail to help you - understand what's failing. -
    2. -
- - -

- Find a bug? Want to request a feature? Post an issue at{' '} - https://github.com/coderoad/coderoad-vscode -

- - - ) -} - -interface Props { - css?: React.CSSProperties - onLoadSolution: () => void -} - -const NewUserExperienceTutorial = (props: Props) => { - const [isOpen, setIsOpen] = React.useState(false) - const onToggle = () => { - setIsOpen(!isOpen) - } - return ( -
-
- {isOpen ? : } - Help -
- - {isOpen && ( - setIsOpen(false)} - /> - )} - -
- ) -} - -export default NewUserExperienceTutorial diff --git a/web-app/src/components/NewUserExperience/transition.css b/web-app/src/components/NewUserExperience/transition.css deleted file mode 100644 index b2fae318..00000000 --- a/web-app/src/components/NewUserExperience/transition.css +++ /dev/null @@ -1,21 +0,0 @@ -.slide-enter { - max-height: 0; - overflow: hidden; -} - -.slide-enter.slide-enter-active { - max-height: 100rem; - overflow: auto; - transition: max-height 500ms ease-in; -} - -.slide-leave { - max-height: 100rem; - overflow: auto; -} - -.slide-leave.slide-leave-active { - max-height: 0; - overflow: hidden; - transition: max-height 300ms ease-out; -} diff --git a/web-app/src/components/Tag/index.tsx b/web-app/src/components/Tag/index.tsx deleted file mode 100644 index b9d05b48..00000000 --- a/web-app/src/components/Tag/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import * as React from 'react' -import { css, jsx } from '@emotion/core' - -const styles = { - tag: { - padding: '3px', - backgroundColor: 'rgb(225, 236, 244)', - color: 'rgb(57, 115, 157)', - }, -} - -type Props = { - children: string -} - -const Tag = (props: Props) =>
{props.children}
- -export default Tag diff --git a/web-app/src/components/TestMessage/index.tsx b/web-app/src/components/TestMessage/index.tsx index 300382c3..27e54c0a 100644 --- a/web-app/src/components/TestMessage/index.tsx +++ b/web-app/src/components/TestMessage/index.tsx @@ -1,23 +1,25 @@ import * as React from 'react' import Icon from '../Icon' import { css, jsx } from '@emotion/core' +import { useTheme } from 'emotion-theming' +import { Theme } from '../../styles/theme' const styles = { - container: { - backgroundColor: '#fff3e0', + container: (theme: Theme) => ({ + backgroundColor: theme['$color-warning-1'], padding: '0.5rem', animationDuration: '0.3s', animationTimingFunction: 'ease-in-out', - borderTopLeftRadius: '4px', - borderTopRightRadius: '4px', - color: 'rgb(51, 51, 51)', - fontSize: '0.8rem', - }, - icon: { - color: '#ff9300', - }, + borderTopLeftRadius: theme['$corner-1'], + borderTopRightRadius: theme['$corner-1'], + color: theme['$color-text1-3'], + fontSize: theme['$font-size-caption'], + }), + icon: (theme: Theme) => ({ + color: theme['$color-warning-3'], + }), content: { - marginLeft: '0.5rem', + padding: '0 0.5rem', }, } @@ -38,9 +40,10 @@ const TestMessage = (props: Props) => { } }, [props.message]) + const theme: Theme = useTheme() return visible && props.message ? (
- + {props.message}
) : null diff --git a/web-app/src/components/Workspace/index.tsx b/web-app/src/components/Workspace/index.tsx index 660cadcb..39174b33 100644 --- a/web-app/src/components/Workspace/index.tsx +++ b/web-app/src/components/Workspace/index.tsx @@ -1,18 +1,20 @@ import * as React from 'react' import { css, jsx } from '@emotion/core' import { useWindowResize } from './resize' +import { Theme } from '../../styles/theme' interface Props { children: React.ReactElement } const styles = { - page: { + page: (theme: Theme) => ({ display: 'flex' as 'flex', position: 'relative' as 'relative', margin: 0, - backgroundColor: 'white', - }, + width: '100vw', + backgroundColor: theme['$color-white'], + }), } const Workspace = ({ children }: Props) => { diff --git a/web-app/src/containers/Tutorial/components/Step.tsx b/web-app/src/containers/Tutorial/components/Step.tsx index ebeaf9cd..5e4e3696 100644 --- a/web-app/src/containers/Tutorial/components/Step.tsx +++ b/web-app/src/containers/Tutorial/components/Step.tsx @@ -8,7 +8,7 @@ interface Props { content: string status: T.ProgressStatus subtasks?: T.SubtaskUI[] - displayAll: boolean + displayAll?: boolean } const styles = { diff --git a/web-app/src/styles/theme.tsx b/web-app/src/styles/theme.tsx index fa9f4dcd..79cf54db 100644 --- a/web-app/src/styles/theme.tsx +++ b/web-app/src/styles/theme.tsx @@ -2,388 +2,199 @@ const theme = { '$form-element-small-height': '20px', - '$form-element-medium-height': '28px', - '$form-element-large-height': '40px', - '$form-element-small-font-size': '12px', - '$form-element-medium-font-size': '12px', - '$form-element-large-font-size': '14px', - '$form-element-small-preview-height': '20px', - '$form-element-medium-preview-height': '28px', - '$form-element-large-preview-height': '40px', - '$form-element-small-preview-font-size': '12px', - '$form-element-medium-preview-font-size': '12px', - '$form-element-large-preview-font-size': '16px', - '$form-element-small-icon-size': '12px', - '$form-element-medium-icon-size': '12px', - '$form-element-large-icon-size': '16px', - '$form-element-small-corner': '30px', - '$form-element-medium-corner': '30px', - '$form-element-large-corner': '30px', - '$mask-background': '#000000', - '$mask-opacity': '0.45', - '$popup-local-border-width': '1px', - '$popup-local-border-style': 'solid', - '$popup-local-border-color': '#DCDEE3', - '$popup-local-corner': '5px', - '$popup-local-shadow': 'none', - '$popup-global-border-width': '0', - '$popup-global-border-style': 'solid', - '$popup-global-border-color': '#DCDEE3', - '$popup-global-corner': '5px', - '$popup-global-shadow': '0px 2px 6px 0px rgba(255, 106, 0, 0.3)', - '$color-brand1-1': '#DEE8FF', - '$color-brand1-6': '#5584FF', - '$color-brand1-9': '#3E71F7', - '$color-data1-1': '#00DCCD', - '$color-data1-2': '#506FED', - '$color-data1-3': '#AE66FC', - '$color-data1-4': '#FF445F', - '$color-data1-5': '#FF934D', - '$color-data1-6': '#FFD74D', - '$color-data1-7': '#4DDE6D', - '$color-data1-8': '#18B1F7', - '$color-white': '#FFFFFF', - '$color-black': '#000000', - '$color-transparent': 'transparent', - '$color-success-1': '#E4FDDA', - '$color-success-2': '#CDF2BE', - '$color-success-3': '#46BC15', - '$color-success-4': '#41A716', - '$color-notice-1': '#E3F2FD', - '$color-notice-2': '#BAD9FF', - '$color-notice-3': '#4494F9', - '$color-notice-4': '#2E7DE0', - '$color-warning-1': '#FFF3E0', - '$color-warning-2': '#FFE6BD', - '$color-warning-3': '#FF9300', - '$color-warning-4': '#EB7E10', - '$color-error-1': '#FFECE4', - '$color-error-2': '#FFC8B2', - '$color-error-3': '#FF3000', - '$color-error-4': '#E72B00', - '$color-help-1': '#E3FFF8', - '$color-help-2': '#C0ECE2', - '$color-help-3': '#01C1B2', - '$color-help-4': '#01A79A', - '$color-link-1': '#5584FF', - '$color-link-2': '#5584FF', - '$color-link-3': '#3E71F7', - '$color-other-1': '#FFEB3B', - '$color-other-2': '#FCCC12', - '$color-other-3': '#EABB06', - '$color-line1-1': '#E6E7EB', - '$color-line1-2': '#DCDEE3', - '$color-line1-3': '#C4C6CF', - '$color-line1-4': '#A0A2AD', - '$color-fill1-1': '#F7F8FA', - '$color-fill1-2': '#F2F3F7', - '$color-fill1-3': '#EBECF0', - '$color-fill1-4': '#E2E4E8', - '$color-text1-1': '#CCCCCC', - '$color-text1-2': '#999999', - '$color-text1-3': '#666666', - '$color-text1-4': '#000000', - '$corner-1': '3px', - '$corner-2': '6px', - '$corner-3': '20px', - '$corner-circle': '50%', - '$corner-semicircle': '500px', - '$corner-zero': '0', - '$font-family-base': 'Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"', - '$font-lineheight-1': '1.3', - '$font-lineheight-2': '1.5', - '$font-lineheight-3': '1.7', - '$font-size-display-3': '56px', - '$font-size-display-2': '48px', - '$font-size-display-1': '36px', - '$font-size-headline': '24px', - '$font-size-title': '20px', - '$font-size-subhead': '16px', - '$font-size-body-2': '14px', - '$font-size-body-1': '12px', - '$font-size-caption': '12px', - '$font-weight-1': 'lighter', - '$font-weight-thin': '200', - '$font-weight-light': '300', - '$font-weight-2': 'normal', - '$font-weight-medium': '500', - '$font-weight-semi-bold': '600', - '$font-weight-3': 'bold', - '$font-weight-extra-bold': '800', - '$font-weight-ultra-bold': '900', - '$icon-xxs': '8px', - '$icon-xs': '12px', - '$icon-s': '16px', - '$icon-m': '20px', - '$icon-l': '24px', - '$icon-xl': '32px', - '$icon-xxl': '48px', - '$icon-xxxl': '64px', - '$line-zero': '0', - '$line-1': '1px', - '$line-2': '2px', - '$line-3': '3px', - '$line-solid': 'solid', - '$line-dashed': 'dashed', - '$line-dotted': 'dotted', - '$shadow-zero': 'none', - '$shadow-1': '1px 1px 2px 0px rgba(0, 0, 0, 0.1)', - '$shadow-1-up': '0px -1px 2px 0px rgba(0, 0, 0, 0.1)', - '$shadow-1-right': '1px 0px 2px 0px rgba(0, 0, 0, 0.1)', - '$shadow-1-down': '0px 1px 2px 0px rgba(0, 0, 0, 0.1)', - '$shadow-1-left': '-1px 0px 2px 0px rgba(0, 0, 0, 0.1)', - '$shadow-2': '2px 2px 6px 0px rgba(255, 106, 0, 0.3)', - '$shadow-2-up': '0px -2px 6px 0px rgba(255, 106, 0, 0.3)', - '$shadow-2-right': '2px 0px 6px 0px rgba(255, 106, 0, 0.3)', - '$shadow-2-down': '0px 2px 6px 0px rgba(255, 106, 0, 0.3)', - '$shadow-2-left': '-2px 0px 6px 0px rgba(255, 106, 0, 0.3)', - '$shadow-3': '4px 4px 10px 0px rgba(0, 0, 0, 0.1)', - '$shadow-3-up': '0px -4px 10px 0px rgba(0, 0, 0, 0.1)', - '$shadow-3-right': '4px 0px 10px 0px rgba(0, 0, 0, 0.1)', - '$shadow-3-down': '0px 4px 10px 0px rgba(0, 0, 0, 0.1)', - '$shadow-3-left': '-4px 0px 10px 0px rgba(0, 0, 0, 0.1)', - '$s-zero': '0', - '$s-1': '4px', - '$s-2': '8px', - '$s-3': '12px', - '$s-4': '16px', - '$s-5': '20px', - '$s-6': '24px', - '$s-7': '28px', - '$s-8': '32px', - '$s-9': '36px', - '$s-10': '40px', - '$s-11': '44px', - '$s-12': '48px', - '$s-13': '52px', - '$s-14': '56px', - '$s-15': '60px', - '$s-16': '64px', - '$s-17': '68px', - '$s-18': '72px', - '$s-19': '76px', - '$s-20': '80px', - '$s-21': '84px', - '$s-22': '88px', - '$s-23': '92px', - '$s-24': '96px', - '$s-25': '100px', - '$s-26': '104px', - '$s-27': '108px', - '$s-28': '112px', - '$s-29': '116px', - '$s-30': '120px', - '$s-31': '124px', - '$s-32': '128px', - '$s-33': '132px', - '$s-34': '136px', - '$s-35': '140px', - '$s-36': '144px', - '$s-37': '148px', - '$s-38': '152px', - '$s-39': '156px', - '$s-40': '160px', - '$s-41': '164px', - '$s-42': '168px', - '$s-43': '172px', - '$s-44': '176px', - '$s-45': '180px', - '$s-46': '184px', - '$s-47': '188px', - '$s-48': '192px', - '$s-49': '196px', - '$s-50': '200px', } +export type Theme = typeof theme + export default theme diff --git a/web-app/stories/Step.stories.tsx b/web-app/stories/Step.stories.tsx index 0ff50789..871969b2 100644 --- a/web-app/stories/Step.stories.tsx +++ b/web-app/stories/Step.stories.tsx @@ -75,15 +75,15 @@ storiesOf('Step', module) subtasks={[ { name: 'First Test', - pass: false, + status: 'ACTIVE', }, { name: 'Second Test', - pass: true, + status: 'COMPLETE', }, { name: 'Third Test', - pass: false, + status: 'ACTIVE', }, ]} /> From 4c59200d83aa4452e44be924f150368ac44b8879 Mon Sep 17 00:00:00 2001 From: shmck Date: Thu, 23 Jul 2020 23:10:07 -0700 Subject: [PATCH 4/8] theme migration progress 2 Signed-off-by: shmck --- web-app/src/components/Markdown/index.tsx | 1 + .../src/containers/Loading/LoadingPage.tsx | 2 +- web-app/src/containers/Loading/index.tsx | 2 +- .../SelectTutorial/SelectTutorialForm.tsx | 2 +- .../SelectTutorial/TutorialOverview/index.tsx | 117 ++++++++---------- .../SelectTutorial/forms/TutorialFile.tsx | 31 +++-- .../src/containers/SelectTutorial/index.tsx | 2 +- web-app/src/styles/theme.tsx | 2 + web-app/stories/NewUserExperience.stories.tsx | 23 ---- 9 files changed, 81 insertions(+), 101 deletions(-) delete mode 100644 web-app/stories/NewUserExperience.stories.tsx diff --git a/web-app/src/components/Markdown/index.tsx b/web-app/src/components/Markdown/index.tsx index 89cff862..ac5fcf70 100644 --- a/web-app/src/components/Markdown/index.tsx +++ b/web-app/src/components/Markdown/index.tsx @@ -1,5 +1,6 @@ import MarkdownIt from 'markdown-it' import Prism from 'prismjs' +import { css, jsx, InterpolationWithTheme } from '@emotion/core' // @ts-ignore no types for package import markdownEmoji from 'markdown-it-emoji' import * as React from 'react' diff --git a/web-app/src/containers/Loading/LoadingPage.tsx b/web-app/src/containers/Loading/LoadingPage.tsx index 998869a7..d79117b0 100644 --- a/web-app/src/containers/Loading/LoadingPage.tsx +++ b/web-app/src/containers/Loading/LoadingPage.tsx @@ -15,7 +15,7 @@ const styles = { flexDirection: 'column' as 'column', alignItems: 'center', justifyContent: 'center', - width: '100%', + width: '100vw', }, } diff --git a/web-app/src/containers/Loading/index.tsx b/web-app/src/containers/Loading/index.tsx index 535946c7..1e7a9929 100644 --- a/web-app/src/containers/Loading/index.tsx +++ b/web-app/src/containers/Loading/index.tsx @@ -17,7 +17,7 @@ const styles = { alignItems: 'center' as 'center', justifyContent: 'center' as 'center', height: '100%', - width: '100%', + width: '100vw', }, processes: { padding: '0 1rem', diff --git a/web-app/src/containers/SelectTutorial/SelectTutorialForm.tsx b/web-app/src/containers/SelectTutorial/SelectTutorialForm.tsx index b65972f2..50fdaad7 100644 --- a/web-app/src/containers/SelectTutorial/SelectTutorialForm.tsx +++ b/web-app/src/containers/SelectTutorial/SelectTutorialForm.tsx @@ -8,7 +8,7 @@ import TutorialFile from './forms/TutorialFile' const styles = { formWrapper: { padding: '1rem', - width: '100%', + width: '100vw', height: 'auto', }, } diff --git a/web-app/src/containers/SelectTutorial/TutorialOverview/index.tsx b/web-app/src/containers/SelectTutorial/TutorialOverview/index.tsx index 08c5967c..7d3c5112 100644 --- a/web-app/src/containers/SelectTutorial/TutorialOverview/index.tsx +++ b/web-app/src/containers/SelectTutorial/TutorialOverview/index.tsx @@ -1,42 +1,35 @@ import * as React from 'react' import * as TT from 'typings/tutorial' -// import moment from 'moment' +import { Breadcrumb } from '@alifd/next' import Button from '../../../components/Button' import Markdown from '../../../components/Markdown' -import { Breadcrumb } from '@alifd/next' - -const footerHeight = '3rem' +import { Theme } from '../../../styles/theme' const styles = { page: { position: 'relative' as 'relative', display: 'flex' as 'flex', flexDirection: 'column' as 'column', - width: '100%', + width: '100vw', }, - nav: { - display: 'flex', - height: '2rem', - fontSize: '1rem', - lineHeight: '1rem', - alignItems: 'center', - }, - navLink: { - fontSize: '14px', + nav: (theme: Theme) => ({ + height: theme['$nav-height'], + }), + navLink: (theme: Theme) => ({ + fontSize: theme['$font-size-caption'], + lineHeight: theme['$font-lineheight-1'], color: 'white', cursor: 'pointer', - }, + }), content: { paddingBottom: '5rem', }, - header: { - color: 'white', - backgroundColor: '#0066B8', + header: (theme: Theme) => ({ + color: theme['$color-white'], + backgroundColor: theme['$color-brand1-9'], padding: '1rem 1rem 1.5rem 1rem', - }, - title: { - fontWeight: 'bold' as 'bold', - }, + }), + title: {}, description: { fontSize: '1rem', }, @@ -51,7 +44,7 @@ const styles = { levelSummary: { paddingLeft: '1.1rem', }, - footer: { + footer: (theme: Theme) => ({ position: 'fixed' as 'fixed', bottom: 0, left: 0, @@ -60,12 +53,12 @@ const styles = { flexDirection: 'row' as 'row', alignItems: 'center' as 'center', justifyContent: 'flex-end' as 'flex-end', - height: footerHeight, + height: theme['$footer-height'], padding: '1rem', paddingRight: '2rem', - backgroundColor: 'black', + backgroundColor: theme['$color-black'], width: '100%', - }, + }), } interface Props { @@ -74,50 +67,48 @@ interface Props { onClear(): void } -const Summary = (props: Props) => { - return ( -
-
-
-
- - -
- < Back to Tutorials -
- - -
- {`# ${props.tutorial.summary.title}`} - {`### ${props.tutorial.summary.description}`} - {/*
+const Summary = (props: Props) => ( +
+
+
+
+ + +
+ < Back to Tutorials +
+ + +
+ {`# ${props.tutorial.summary.title}`} + {`### ${props.tutorial.summary.description}`} + {/*
Created by {props.createdBy.name}
Last updated {moment(props.updatedAt).format('M/YYYY')}
*/} -
-
-
-

Content

- {props.tutorial.levels.map((level: TT.Level, index: number) => ( -
- {`### ${index + 1}. ${level.title}`} -
- {level.summary} -
+
+
+
+

Content

+ {props.tutorial.levels.map((level: TT.Level, index: number) => ( +
+ {`### ${index + 1}. ${level.title}`} +
+ {level.summary}
- ))} -
+
+ ))}
+
-
- {/* TODO Add back button */} - -
+
+ {/* TODO Add back button */} +
- ) -} +
+) export default Summary diff --git a/web-app/src/containers/SelectTutorial/forms/TutorialFile.tsx b/web-app/src/containers/SelectTutorial/forms/TutorialFile.tsx index da257446..e0930e64 100644 --- a/web-app/src/containers/SelectTutorial/forms/TutorialFile.tsx +++ b/web-app/src/containers/SelectTutorial/forms/TutorialFile.tsx @@ -1,6 +1,8 @@ import * as React from 'react' import * as TT from 'typings/tutorial' -import { Form } from '@alifd/next' +import { css, jsx } from '@emotion/core' +import { Icon, Form } from '@alifd/next' +import { Theme } from '../../../styles/theme' const FormItem = Form.Item @@ -9,13 +11,19 @@ interface Props { } const styles = { - uploadFileButton: { + form: { + maxWidth: '600px', + padding: '0 0.3rem', + }, + uploadLabel: (theme: Theme) => ({ padding: '0.3rem 0.5rem', - outline: '1px dotted rgb(51, 51, 51)', - borderRadius: '0.2rem', - fontWeight: 400, - fontFamily: - '-apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;', + outline: `1.5px solid ${theme['$color-line1-3']}`, + fontSize: theme['$form-element-medium-font-size'], + fontFamily: theme['$font-family-base'], + color: theme['$color-text1-3'], + }), + uploadButton: { + display: 'none', }, } @@ -39,12 +47,13 @@ const TutorialFile = (props: Props) => { } return ( -
+
- diff --git a/web-app/src/containers/SelectTutorial/index.tsx b/web-app/src/containers/SelectTutorial/index.tsx index 74315811..463952da 100644 --- a/web-app/src/containers/SelectTutorial/index.tsx +++ b/web-app/src/containers/SelectTutorial/index.tsx @@ -9,7 +9,7 @@ const styles = { page: { position: 'relative' as 'relative', height: 'auto', - width: '100%', + width: 'vw', }, selectPage: { padding: '1rem', diff --git a/web-app/src/styles/theme.tsx b/web-app/src/styles/theme.tsx index 79cf54db..51a84aa9 100644 --- a/web-app/src/styles/theme.tsx +++ b/web-app/src/styles/theme.tsx @@ -193,6 +193,8 @@ const theme = { '$s-48': '192px', '$s-49': '196px', '$s-50': '200px', + '$footer-height': '3rem', + '$nav-height': '2rem', } export type Theme = typeof theme diff --git a/web-app/stories/NewUserExperience.stories.tsx b/web-app/stories/NewUserExperience.stories.tsx deleted file mode 100644 index b3402e9a..00000000 --- a/web-app/stories/NewUserExperience.stories.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { storiesOf } from '@storybook/react' -import { action } from '@storybook/addon-actions' -import React from 'react' -import { css, jsx } from '@emotion/core' -import SideBarDecorator from './utils/SideBarDecorator' -import NewUserExperienceTutorial from '../src/components/NewUserExperience/NuxTutorial' - -const styles = { - container: { - position: 'absolute', - bottom: 0, - left: 0, - right: 0, - }, -} - -storiesOf('NewUserExperience', module) - .addDecorator(SideBarDecorator) - .add('NUXTutorial', () => ( -
- -
- )) From 6f4fc38c6039d9c9858f8521bbd7e8935aa225a7 Mon Sep 17 00:00:00 2001 From: shmck Date: Thu, 23 Jul 2020 23:14:24 -0700 Subject: [PATCH 5/8] fix hint story Signed-off-by: shmck --- web-app/src/containers/SelectTutorial/SelectTutorialForm.tsx | 2 +- web-app/stories/Step.stories.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/web-app/src/containers/SelectTutorial/SelectTutorialForm.tsx b/web-app/src/containers/SelectTutorial/SelectTutorialForm.tsx index 50fdaad7..cd1e7e51 100644 --- a/web-app/src/containers/SelectTutorial/SelectTutorialForm.tsx +++ b/web-app/src/containers/SelectTutorial/SelectTutorialForm.tsx @@ -8,7 +8,7 @@ import TutorialFile from './forms/TutorialFile' const styles = { formWrapper: { padding: '1rem', - width: '100vw', + width: '100wvw', height: 'auto', }, } diff --git a/web-app/stories/Step.stories.tsx b/web-app/stories/Step.stories.tsx index 871969b2..417d6438 100644 --- a/web-app/stories/Step.stories.tsx +++ b/web-app/stories/Step.stories.tsx @@ -91,6 +91,6 @@ storiesOf('Step', module) .add('Hints', () => ( <> - + )) From ffac6b46527ae0ac3a7f601f7063bb9a071a4d03 Mon Sep 17 00:00:00 2001 From: shmck Date: Fri, 24 Jul 2020 16:08:20 -0700 Subject: [PATCH 6/8] update styles Signed-off-by: shmck --- web-app/src/components/BetaBadge/index.tsx | 2 +- web-app/src/components/Divider.tsx | 14 ----- .../SelectTutorial/SelectTutorialForm.tsx | 2 +- .../src/containers/SelectTutorial/index.tsx | 2 +- web-app/src/containers/Start/index.tsx | 4 +- .../Tutorial/components/CompletedBanner.tsx | 13 ++--- .../containers/Tutorial/components/Hints.tsx | 9 ++-- .../containers/Tutorial/components/Level.tsx | 9 ++-- .../Tutorial/components/SideMenu.tsx | 17 +++--- .../Tutorial/components/StepProgress.tsx | 27 +++++----- .../Tutorial/components/TestStatusIcon.tsx | 31 ++++++----- .../containers/Tutorial/containers/About.tsx | 7 +-- .../containers/Tutorial/containers/Review.tsx | 7 +-- web-app/src/containers/Tutorial/index.tsx | 20 ++++--- web-app/src/styles/theme.tsx | 52 +------------------ 15 files changed, 85 insertions(+), 131 deletions(-) delete mode 100644 web-app/src/components/Divider.tsx diff --git a/web-app/src/components/BetaBadge/index.tsx b/web-app/src/components/BetaBadge/index.tsx index 494f783d..a9d3b3f1 100644 --- a/web-app/src/components/BetaBadge/index.tsx +++ b/web-app/src/components/BetaBadge/index.tsx @@ -5,7 +5,7 @@ import { Theme } from '../../styles/theme' const styles = { betaBadge: (theme: Theme) => ({ - backgroundColor: theme['$color-brand1-9'], // '#6a67ce', + backgroundColor: theme['$color-brand1-9'], color: theme['$color-white'], }), } diff --git a/web-app/src/components/Divider.tsx b/web-app/src/components/Divider.tsx deleted file mode 100644 index 2ca12ba1..00000000 --- a/web-app/src/components/Divider.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import * as React from 'react' -import { css, jsx } from '@emotion/core' - -const styles = { - divider: { - width: '100%', - backgroundColor: '#e8e8e8', - height: '0.1rem', - }, -} - -const Divider = () =>
- -export default Divider diff --git a/web-app/src/containers/SelectTutorial/SelectTutorialForm.tsx b/web-app/src/containers/SelectTutorial/SelectTutorialForm.tsx index cd1e7e51..50fdaad7 100644 --- a/web-app/src/containers/SelectTutorial/SelectTutorialForm.tsx +++ b/web-app/src/containers/SelectTutorial/SelectTutorialForm.tsx @@ -8,7 +8,7 @@ import TutorialFile from './forms/TutorialFile' const styles = { formWrapper: { padding: '1rem', - width: '100wvw', + width: '100vw', height: 'auto', }, } diff --git a/web-app/src/containers/SelectTutorial/index.tsx b/web-app/src/containers/SelectTutorial/index.tsx index 463952da..05ad476b 100644 --- a/web-app/src/containers/SelectTutorial/index.tsx +++ b/web-app/src/containers/SelectTutorial/index.tsx @@ -9,7 +9,7 @@ const styles = { page: { position: 'relative' as 'relative', height: 'auto', - width: 'vw', + width: '100vw', }, selectPage: { padding: '1rem', diff --git a/web-app/src/containers/Start/index.tsx b/web-app/src/containers/Start/index.tsx index 922bfed7..aabdd2a6 100644 --- a/web-app/src/containers/Start/index.tsx +++ b/web-app/src/containers/Start/index.tsx @@ -10,8 +10,8 @@ const styles = { position: 'relative' as 'relative', display: 'flex' as 'flex', flexDirection: 'column' as 'column', - width: '100%', - height: window.innerHeight, + width: '100vw', + height: '100vh', }, header: { flex: 1, diff --git a/web-app/src/containers/Tutorial/components/CompletedBanner.tsx b/web-app/src/containers/Tutorial/components/CompletedBanner.tsx index 31bc23ce..31afa0eb 100644 --- a/web-app/src/containers/Tutorial/components/CompletedBanner.tsx +++ b/web-app/src/containers/Tutorial/components/CompletedBanner.tsx @@ -1,18 +1,19 @@ import * as React from 'react' import { css, jsx } from '@emotion/core' import { Button, Icon } from '@alifd/next' +import { Theme } from '../../../styles/theme' const styles = { - banner: { + banner: (theme: Theme) => ({ height: 'auto', - width: '100%', - backgroundColor: 'rgb(85, 132, 255)', - color: 'white', + width: '100vw', + backgroundColor: theme['$color-brand1-9'], + color: theme['$color-white'], padding: '0.5rem 1rem', - }, + }), header: { position: 'relative' as 'relative', - width: '100%', + width: '100vw', }, headerMessage: { marginLeft: '0.5rem', diff --git a/web-app/src/containers/Tutorial/components/Hints.tsx b/web-app/src/containers/Tutorial/components/Hints.tsx index dfff3ff0..0cc085ab 100644 --- a/web-app/src/containers/Tutorial/components/Hints.tsx +++ b/web-app/src/containers/Tutorial/components/Hints.tsx @@ -2,6 +2,7 @@ import * as React from 'react' import { css, jsx } from '@emotion/core' import Markdown from '../../../components/Markdown' import Button from '../../../components/Button' +import { Theme } from '../../../styles/theme' const styles = { hints: { @@ -10,13 +11,11 @@ const styles = { hintList: { marginBottom: '0.5rem', }, - hint: { + hint: (theme: Theme) => ({ marginBottom: '0.5rem', - backgroundColor: 'rgba(255,229,100,0.3)', - borderLeft: '#ffe564', - borderRadius: '2px', + backgroundColor: theme['$color-warning-1'], padding: '0 0.5rem', - }, + }), } interface Props { diff --git a/web-app/src/containers/Tutorial/components/Level.tsx b/web-app/src/containers/Tutorial/components/Level.tsx index 452001c3..d731640f 100644 --- a/web-app/src/containers/Tutorial/components/Level.tsx +++ b/web-app/src/containers/Tutorial/components/Level.tsx @@ -3,14 +3,15 @@ import * as T from 'typings' import { css, jsx } from '@emotion/core' import Content from './Content' import Steps from './Steps' +import { Theme } from '../../../styles/theme' const styles = { - page: { - backgroundColor: 'white', + page: (theme: Theme) => ({ + backgroundColor: theme['$color-white'], position: 'relative' as 'relative', height: 'auto', - width: '100%', - }, + width: '100vw', + }), content: { display: 'flex' as 'flex', flexDirection: 'column' as 'column', diff --git a/web-app/src/containers/Tutorial/components/SideMenu.tsx b/web-app/src/containers/Tutorial/components/SideMenu.tsx index fbf21b37..68b15b05 100644 --- a/web-app/src/containers/Tutorial/components/SideMenu.tsx +++ b/web-app/src/containers/Tutorial/components/SideMenu.tsx @@ -1,5 +1,7 @@ import * as React from 'react' import { Menu, Icon, Drawer } from '@alifd/next' +import { useTheme } from 'emotion-theming' +import { Theme } from '../../../styles/theme' const { Item, Divider } = Menu @@ -11,10 +13,10 @@ const styles = { margin: 0, height: '100%', }, - active: { - color: 'white', - backgroundColor: 'rgb(85, 132, 255)', - }, + active: (theme: Theme) => ({ + color: theme['$color-white'], + backgroundColor: theme['$color-brand1-9'], + }), itemText: { marginLeft: '0.5rem', }, @@ -31,6 +33,7 @@ const SideMenu = (props: Props) => { const onMenuClose = () => { props.toggleVisible(false) } + const theme: Theme = useTheme() return ( { { onMenuClose() props.setPage('level') @@ -56,7 +59,7 @@ const SideMenu = (props: Props) => { { onMenuClose() props.setPage('review') @@ -69,7 +72,7 @@ const SideMenu = (props: Props) => { { onMenuClose() props.setPage('about') diff --git a/web-app/src/containers/Tutorial/components/StepProgress.tsx b/web-app/src/containers/Tutorial/components/StepProgress.tsx index 5cb67012..fdc7037d 100644 --- a/web-app/src/containers/Tutorial/components/StepProgress.tsx +++ b/web-app/src/containers/Tutorial/components/StepProgress.tsx @@ -1,16 +1,22 @@ import * as React from 'react' import { Progress } from '@alifd/next' import useMedia from 'use-media' +import { useTheme } from 'emotion-theming' +import { Theme } from '../../../styles/theme' const styles = { - progress: { + progress: (theme: Theme) => ({ display: 'flex' as 'flex', justifyContent: 'flex-end' as 'flex-end', alignItems: 'center' as 'center', width: '10rem', - color: 'white', - }, - text: { color: 'white' }, + color: theme['$color-white'], + }), + text: (theme: Theme) => ({ + color: theme['$color-white'], + marginRight: '0.5rem', + fontSize: '80%', + }), } interface Props { @@ -19,14 +25,11 @@ interface Props { } const StepProgress = (props: Props) => { - const Text = ( - - {props.current} of {props.max} - - ) - + const theme: Theme = useTheme() const isWide = useMedia({ minWidth: '340px' }) + const Text = `${props.current} of ${props.max}` + if (isWide) { return ( { progressive percent={(props.current / props.max) * 100} shape="line" - color="rgb(85, 132, 255)" + color={theme['$color-brand1-9']} css={styles.progress} textRender={() => { return Text @@ -42,7 +45,7 @@ const StepProgress = (props: Props) => { /> ) } - return
{Text}
+ return
{Text}
} export default StepProgress diff --git a/web-app/src/containers/Tutorial/components/TestStatusIcon.tsx b/web-app/src/containers/Tutorial/components/TestStatusIcon.tsx index c62be991..80f1a3c8 100644 --- a/web-app/src/containers/Tutorial/components/TestStatusIcon.tsx +++ b/web-app/src/containers/Tutorial/components/TestStatusIcon.tsx @@ -1,5 +1,7 @@ import * as React from 'react' +import { useTheme } from 'emotion-theming' import Icon from '../../../components/Icon' +import { Theme } from '../../../styles/theme' interface Props { size: 'small' | 'xs' @@ -7,27 +9,28 @@ interface Props { } const styles = { - complete: { + complete: (theme: Theme) => ({ icon: 'success-filling', - color: '#37B809', - }, - active: { + color: theme['$color-success-3'], + }), + active: (theme: Theme) => ({ icon: 'success-filling', - color: 'lightgrey', - }, - fail: { + color: theme['$color-disabled-1'], + }), + fail: (theme: Theme) => ({ icon: 'warning', - color: '#ff9300', - }, - incomplete: { + color: theme['$color-warning-3'], + }), + incomplete: (theme: Theme) => ({ icon: 'lock', - color: 'lightgrey', - }, + color: theme['$color-disabled-1'], + }), } const TestStatusIcon = (props: Props) => { - // @ts-ignore - const style: { icon: string; color: string } = styles[props.status.toLowerCase()] + const theme: Theme = useTheme() + // @ts-ignore( + const style: { icon: string; color: string } = styles[props.status.toLowerCase()](theme) return } diff --git a/web-app/src/containers/Tutorial/containers/About.tsx b/web-app/src/containers/Tutorial/containers/About.tsx index f28e1d96..9700d96b 100644 --- a/web-app/src/containers/Tutorial/containers/About.tsx +++ b/web-app/src/containers/Tutorial/containers/About.tsx @@ -1,21 +1,22 @@ import * as React from 'react' import Markdown from '../../../components/Markdown' +import { Theme } from '../../../styles/theme' const styles = { container: { display: 'flex' as 'flex', flexDirection: 'column' as 'column', }, - header: { + header: (theme: Theme) => ({ display: 'flex' as 'flex', alignItems: 'center', justifyContent: 'space-between', height: '2rem', - backgroundColor: '#EBEBEB', + backgroundColor: theme['$color-fill1-2'], fontSize: '1rem', lineHeight: '1rem', padding: '10px 0.4rem', - }, + }), content: { padding: '0.5rem', }, diff --git a/web-app/src/containers/Tutorial/containers/Review.tsx b/web-app/src/containers/Tutorial/containers/Review.tsx index 7a0b5ba9..ad1607a7 100644 --- a/web-app/src/containers/Tutorial/containers/Review.tsx +++ b/web-app/src/containers/Tutorial/containers/Review.tsx @@ -3,6 +3,7 @@ import * as T from 'typings' import { Switch } from '@alifd/next' import Steps from '../components/Steps' import Content from '../components/Content' +import { Theme } from '../../../styles/theme' interface Props { levels: T.LevelUI[] @@ -14,16 +15,16 @@ const styles = { display: 'flex' as 'flex', flexDirection: 'column' as 'column', }, - header: { + header: (theme: Theme) => ({ display: 'flex' as 'flex', alignItems: 'center', justifyContent: 'space-between', height: '2rem', - backgroundColor: '#EBEBEB', + backgroundColor: theme['$color-fill1-2'], fontSize: '1rem', lineHeight: '1rem', padding: '10px 0.4rem', - }, + }), title: { marginLeft: '0.5rem', }, diff --git a/web-app/src/containers/Tutorial/index.tsx b/web-app/src/containers/Tutorial/index.tsx index 1dd51469..d6e2b854 100644 --- a/web-app/src/containers/Tutorial/index.tsx +++ b/web-app/src/containers/Tutorial/index.tsx @@ -16,22 +16,27 @@ import Reset from './components/Reset' import Continue from './components/Continue' import ScrollContent from './components/ScrollContent' import CompletedBanner from './components/CompletedBanner' +import { Theme } from '../../styles/theme' +import { useTheme } from 'emotion-theming' const styles = { page: { width: '100vw', paddingBottom: '5rem', }, - header: { + header: (theme: Theme) => ({ display: 'flex' as 'flex', alignItems: 'center', justifyContent: 'flex-start', height: '2rem', - backgroundColor: '#EBEBEB', + backgroundColor: theme['$color-fill1-4'], fontSize: '1rem', lineHeight: '1rem', padding: '10px 0.4rem', - }, + }), + menuIcon: (theme: Theme) => ({ + color: theme['$color-text1-4'], + }), title: { marginLeft: '0.5rem', }, @@ -39,7 +44,7 @@ const styles = { textDecoration: 'none', color: 'inherit', }, - footer: { + footer: (theme: Theme) => ({ display: 'flex' as 'flex', flexDirection: 'row' as 'row', justifyContent: 'space-between', @@ -53,9 +58,9 @@ const styles = { bottom: 0, left: 0, right: 0, - color: 'white', + color: theme['$color-white'], zIndex: 1000, - }, + }), completeFooter: { position: 'fixed' as 'fixed', bottom: 0, @@ -93,6 +98,7 @@ interface PageProps { */ const TutorialPage = (props: PageProps) => { + const theme: Theme = useTheme() const { position, progress, processes, testStatus } = props.context const tutorial = selectors.currentTutorial(props.context) @@ -130,7 +136,7 @@ const TutorialPage = (props: PageProps) => {
setMenuVisible(!menuVisible)}> - + {tutorial.summary.title}
diff --git a/web-app/src/styles/theme.tsx b/web-app/src/styles/theme.tsx index 51a84aa9..889312ee 100644 --- a/web-app/src/styles/theme.tsx +++ b/web-app/src/styles/theme.tsx @@ -83,6 +83,7 @@ const theme = { '$color-text1-2': '#999999', '$color-text1-3': '#666666', '$color-text1-4': '#000000', + '$color-disabled-1': 'lightgrey', '$corner-1': '3px', '$corner-2': '6px', '$corner-3': '20px', @@ -142,57 +143,6 @@ const theme = { '$shadow-3-right': '4px 0px 10px 0px rgba(0, 0, 0, 0.1)', '$shadow-3-down': '0px 4px 10px 0px rgba(0, 0, 0, 0.1)', '$shadow-3-left': '-4px 0px 10px 0px rgba(0, 0, 0, 0.1)', - '$s-zero': '0', - '$s-1': '4px', - '$s-2': '8px', - '$s-3': '12px', - '$s-4': '16px', - '$s-5': '20px', - '$s-6': '24px', - '$s-7': '28px', - '$s-8': '32px', - '$s-9': '36px', - '$s-10': '40px', - '$s-11': '44px', - '$s-12': '48px', - '$s-13': '52px', - '$s-14': '56px', - '$s-15': '60px', - '$s-16': '64px', - '$s-17': '68px', - '$s-18': '72px', - '$s-19': '76px', - '$s-20': '80px', - '$s-21': '84px', - '$s-22': '88px', - '$s-23': '92px', - '$s-24': '96px', - '$s-25': '100px', - '$s-26': '104px', - '$s-27': '108px', - '$s-28': '112px', - '$s-29': '116px', - '$s-30': '120px', - '$s-31': '124px', - '$s-32': '128px', - '$s-33': '132px', - '$s-34': '136px', - '$s-35': '140px', - '$s-36': '144px', - '$s-37': '148px', - '$s-38': '152px', - '$s-39': '156px', - '$s-40': '160px', - '$s-41': '164px', - '$s-42': '168px', - '$s-43': '172px', - '$s-44': '176px', - '$s-45': '180px', - '$s-46': '184px', - '$s-47': '188px', - '$s-48': '192px', - '$s-49': '196px', - '$s-50': '200px', '$footer-height': '3rem', '$nav-height': '2rem', } From 9aa6a1b544a31d0cf2c9a55ab97cef303c7d8f08 Mon Sep 17 00:00:00 2001 From: shmck Date: Fri, 24 Jul 2020 17:15:33 -0700 Subject: [PATCH 7/8] fix width scroll issue (except review page) Signed-off-by: shmck --- src/commands.ts | 1 - web-app/.storybook/config.ts | 2 +- web-app/src/App.tsx | 8 +++--- web-app/src/components/Error/index.tsx | 3 ++- web-app/src/components/Workspace/index.tsx | 6 ++--- web-app/src/components/Workspace/resize.ts | 26 ------------------- .../src/containers/Loading/LoadingPage.tsx | 2 +- web-app/src/containers/Loading/index.tsx | 2 +- .../SelectTutorial/SelectTutorialForm.tsx | 2 +- .../SelectTutorial/TutorialOverview/index.tsx | 2 +- .../src/containers/SelectTutorial/index.tsx | 2 +- web-app/src/containers/Start/index.tsx | 9 ++++--- .../Tutorial/components/CompletedBanner.tsx | 4 +-- .../Tutorial/components/Content.tsx | 1 + .../containers/Tutorial/components/Level.tsx | 2 +- .../containers/Tutorial/containers/About.tsx | 6 +++-- .../containers/Tutorial/containers/Review.tsx | 26 +++++++++---------- web-app/src/containers/Tutorial/index.tsx | 4 ++- web-app/src/index.tsx | 2 +- web-app/src/styles/{index.css => reset.css} | 0 20 files changed, 45 insertions(+), 65 deletions(-) delete mode 100644 web-app/src/components/Workspace/resize.ts rename web-app/src/styles/{index.css => reset.css} (100%) diff --git a/src/commands.ts b/src/commands.ts index 00fde32c..613b1d0b 100644 --- a/src/commands.ts +++ b/src/commands.ts @@ -28,7 +28,6 @@ export const createCommands = ({ extensionPath, workspaceState }: CreateCommandP return { // initialize [COMMANDS.START]: async () => { - console.log('start') if (webview && webview.state.loaded) { webview.createOrShow() } else { diff --git a/web-app/.storybook/config.ts b/web-app/.storybook/config.ts index 88f910a1..a495fa19 100644 --- a/web-app/.storybook/config.ts +++ b/web-app/.storybook/config.ts @@ -1,5 +1,5 @@ import { configure } from '@storybook/react' -import '../src/styles/index.css' +import '../src/styles/reset.css' // setup acquireVsCodeApi mock // @ts-ignore diff --git a/web-app/src/App.tsx b/web-app/src/App.tsx index 91d7e4b0..617cbef8 100644 --- a/web-app/src/App.tsx +++ b/web-app/src/App.tsx @@ -10,13 +10,13 @@ import Routes from './Routes' const App = () => ( /* @ts-ignore invalid in enUS locale typings for @alifd/next@1.20.20 https://github.com/alibaba-fusion/next/commit/e3b934b */ - - + + - - + + ) diff --git a/web-app/src/components/Error/index.tsx b/web-app/src/components/Error/index.tsx index 35018526..2a9278c2 100644 --- a/web-app/src/components/Error/index.tsx +++ b/web-app/src/components/Error/index.tsx @@ -14,7 +14,8 @@ const styles = { alignItems: 'center' as 'center', border: `0.5rem solid ${theme['$color-error-2']}`, padding: '1rem', - width: '100vw', + width: '100%', + maxWidth: '100%', height: '100%', }), content: (theme: Theme) => ({ diff --git a/web-app/src/components/Workspace/index.tsx b/web-app/src/components/Workspace/index.tsx index 39174b33..468ef680 100644 --- a/web-app/src/components/Workspace/index.tsx +++ b/web-app/src/components/Workspace/index.tsx @@ -1,6 +1,5 @@ import * as React from 'react' import { css, jsx } from '@emotion/core' -import { useWindowResize } from './resize' import { Theme } from '../../styles/theme' interface Props { @@ -13,13 +12,14 @@ const styles = { position: 'relative' as 'relative', margin: 0, width: '100vw', + maxWidth: '100%', backgroundColor: theme['$color-white'], + overflow: 'auto', }), } const Workspace = ({ children }: Props) => { - const dimensions = useWindowResize() - return
{children}
+ return
{children}
} export default Workspace diff --git a/web-app/src/components/Workspace/resize.ts b/web-app/src/components/Workspace/resize.ts deleted file mode 100644 index dec5f878..00000000 --- a/web-app/src/components/Workspace/resize.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as React from 'react' - -export const useWindowResize = () => { - const resize = () => ({ - width: window.innerWidth, - height: window.innerHeight, - }) - - const [dimensions, setDimensions] = React.useState(resize()) - - // solution for windows getting off size - React.useEffect(() => { - // timeoutId for debounce mechanism - let timeoutId: any - const handleResize = () => { - if (timeoutId) { - // prevent execution of previous setTimeout - clearTimeout(timeoutId) - } - timeoutId = setTimeout(() => setDimensions(resize()), 50) - } - window.addEventListener('resize', handleResize) - return () => window.removeEventListener('resize', handleResize) - }, [window.innerWidth, window.innerHeight]) - return dimensions -} diff --git a/web-app/src/containers/Loading/LoadingPage.tsx b/web-app/src/containers/Loading/LoadingPage.tsx index d79117b0..998869a7 100644 --- a/web-app/src/containers/Loading/LoadingPage.tsx +++ b/web-app/src/containers/Loading/LoadingPage.tsx @@ -15,7 +15,7 @@ const styles = { flexDirection: 'column' as 'column', alignItems: 'center', justifyContent: 'center', - width: '100vw', + width: '100%', }, } diff --git a/web-app/src/containers/Loading/index.tsx b/web-app/src/containers/Loading/index.tsx index 1e7a9929..535946c7 100644 --- a/web-app/src/containers/Loading/index.tsx +++ b/web-app/src/containers/Loading/index.tsx @@ -17,7 +17,7 @@ const styles = { alignItems: 'center' as 'center', justifyContent: 'center' as 'center', height: '100%', - width: '100vw', + width: '100%', }, processes: { padding: '0 1rem', diff --git a/web-app/src/containers/SelectTutorial/SelectTutorialForm.tsx b/web-app/src/containers/SelectTutorial/SelectTutorialForm.tsx index 50fdaad7..b65972f2 100644 --- a/web-app/src/containers/SelectTutorial/SelectTutorialForm.tsx +++ b/web-app/src/containers/SelectTutorial/SelectTutorialForm.tsx @@ -8,7 +8,7 @@ import TutorialFile from './forms/TutorialFile' const styles = { formWrapper: { padding: '1rem', - width: '100vw', + width: '100%', height: 'auto', }, } diff --git a/web-app/src/containers/SelectTutorial/TutorialOverview/index.tsx b/web-app/src/containers/SelectTutorial/TutorialOverview/index.tsx index 7d3c5112..980bd832 100644 --- a/web-app/src/containers/SelectTutorial/TutorialOverview/index.tsx +++ b/web-app/src/containers/SelectTutorial/TutorialOverview/index.tsx @@ -10,7 +10,7 @@ const styles = { position: 'relative' as 'relative', display: 'flex' as 'flex', flexDirection: 'column' as 'column', - width: '100vw', + width: '100%', }, nav: (theme: Theme) => ({ height: theme['$nav-height'], diff --git a/web-app/src/containers/SelectTutorial/index.tsx b/web-app/src/containers/SelectTutorial/index.tsx index 05ad476b..74315811 100644 --- a/web-app/src/containers/SelectTutorial/index.tsx +++ b/web-app/src/containers/SelectTutorial/index.tsx @@ -9,7 +9,7 @@ const styles = { page: { position: 'relative' as 'relative', height: 'auto', - width: '100vw', + width: '100%', }, selectPage: { padding: '1rem', diff --git a/web-app/src/containers/Start/index.tsx b/web-app/src/containers/Start/index.tsx index aabdd2a6..4a61b839 100644 --- a/web-app/src/containers/Start/index.tsx +++ b/web-app/src/containers/Start/index.tsx @@ -4,15 +4,18 @@ import * as TT from 'typings/tutorial' import BetaBadge from '../../components/BetaBadge' import { css, jsx } from '@emotion/core' import Button from '../../components/Button' +import { Theme } from '../../styles/theme' const styles = { - page: { + page: (theme: Theme) => ({ position: 'relative' as 'relative', display: 'flex' as 'flex', flexDirection: 'column' as 'column', - width: '100vw', + width: '100%', + maxWidth: '100%', height: '100vh', - }, + backgroundColor: theme['$color-white'], + }), header: { flex: 1, display: 'flex' as 'flex', diff --git a/web-app/src/containers/Tutorial/components/CompletedBanner.tsx b/web-app/src/containers/Tutorial/components/CompletedBanner.tsx index 31afa0eb..c744fbec 100644 --- a/web-app/src/containers/Tutorial/components/CompletedBanner.tsx +++ b/web-app/src/containers/Tutorial/components/CompletedBanner.tsx @@ -6,14 +6,14 @@ import { Theme } from '../../../styles/theme' const styles = { banner: (theme: Theme) => ({ height: 'auto', - width: '100vw', + width: '100%', backgroundColor: theme['$color-brand1-9'], color: theme['$color-white'], padding: '0.5rem 1rem', }), header: { position: 'relative' as 'relative', - width: '100vw', + width: '100%', }, headerMessage: { marginLeft: '0.5rem', diff --git a/web-app/src/containers/Tutorial/components/Content.tsx b/web-app/src/containers/Tutorial/components/Content.tsx index 7b7a36d2..0e07efb9 100644 --- a/web-app/src/containers/Tutorial/components/Content.tsx +++ b/web-app/src/containers/Tutorial/components/Content.tsx @@ -5,6 +5,7 @@ const styles = { text: { padding: '0rem 1rem', paddingBottom: '1rem', + width: '100%', }, title: { fontSize: '1.2rem', diff --git a/web-app/src/containers/Tutorial/components/Level.tsx b/web-app/src/containers/Tutorial/components/Level.tsx index d731640f..7d6be3a2 100644 --- a/web-app/src/containers/Tutorial/components/Level.tsx +++ b/web-app/src/containers/Tutorial/components/Level.tsx @@ -10,7 +10,7 @@ const styles = { backgroundColor: theme['$color-white'], position: 'relative' as 'relative', height: 'auto', - width: '100vw', + width: '100%', }), content: { display: 'flex' as 'flex', diff --git a/web-app/src/containers/Tutorial/containers/About.tsx b/web-app/src/containers/Tutorial/containers/About.tsx index 9700d96b..4284983d 100644 --- a/web-app/src/containers/Tutorial/containers/About.tsx +++ b/web-app/src/containers/Tutorial/containers/About.tsx @@ -3,10 +3,12 @@ import Markdown from '../../../components/Markdown' import { Theme } from '../../../styles/theme' const styles = { - container: { + container: (theme: Theme) => ({ display: 'flex' as 'flex', flexDirection: 'column' as 'column', - }, + backgroundColor: theme['$color-white'], + height: 'auto', + }), header: (theme: Theme) => ({ display: 'flex' as 'flex', alignItems: 'center', diff --git a/web-app/src/containers/Tutorial/containers/Review.tsx b/web-app/src/containers/Tutorial/containers/Review.tsx index ad1607a7..c07bbcd5 100644 --- a/web-app/src/containers/Tutorial/containers/Review.tsx +++ b/web-app/src/containers/Tutorial/containers/Review.tsx @@ -10,11 +10,13 @@ interface Props { } const styles = { - container: { - height: 'auto', + container: (theme: Theme) => ({ display: 'flex' as 'flex', flexDirection: 'column' as 'column', - }, + height: 'auto', + backgroundColor: theme['$color-white'], + paddingBottom: '2rem', + }), header: (theme: Theme) => ({ display: 'flex' as 'flex', alignItems: 'center', @@ -33,13 +35,11 @@ const styles = { alignItems: 'center', fontSize: '70%', }, - levels: { - paddingBottom: '2rem', - }, + levels: {}, } const ReviewPage = (props: Props) => { - const [stepVisibility, setStepVisibility] = React.useState(false) + const [stepVisibility, setStepVisibility] = React.useState(true) return (
@@ -49,16 +49,14 @@ const ReviewPage = (props: Props) => { setStepVisibility(checked)} />
+
{props.levels.map((level: T.LevelUI, index: number) => ( -
-
- - {stepVisibility ? : null} -
- {/* divider */} + <> + + {stepVisibility ? : null} {index < props.levels.length - 1 ?
: null} -
+ ))}
diff --git a/web-app/src/containers/Tutorial/index.tsx b/web-app/src/containers/Tutorial/index.tsx index d6e2b854..4eae4e23 100644 --- a/web-app/src/containers/Tutorial/index.tsx +++ b/web-app/src/containers/Tutorial/index.tsx @@ -21,7 +21,9 @@ import { useTheme } from 'emotion-theming' const styles = { page: { - width: '100vw', + width: '100%', + maxWidth: '100%', + height: 'auto', paddingBottom: '5rem', }, header: (theme: Theme) => ({ diff --git a/web-app/src/index.tsx b/web-app/src/index.tsx index 50f95a64..52b9e790 100644 --- a/web-app/src/index.tsx +++ b/web-app/src/index.tsx @@ -7,7 +7,7 @@ import './mock' import App from './App' // init initial styles -import './styles/index.css' +import './styles/reset.css' // init listeners import './services/listeners' diff --git a/web-app/src/styles/index.css b/web-app/src/styles/reset.css similarity index 100% rename from web-app/src/styles/index.css rename to web-app/src/styles/reset.css From e94b95cdee7ecac303482e69ff4a6f11f2af0b74 Mon Sep 17 00:00:00 2001 From: shmck Date: Fri, 24 Jul 2020 17:21:57 -0700 Subject: [PATCH 8/8] fix footer height Signed-off-by: shmck --- .../SelectTutorial/TutorialOverview/index.tsx | 4 ++-- web-app/src/containers/Tutorial/index.tsx | 18 +++++++++--------- web-app/src/styles/theme.tsx | 2 +- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/web-app/src/containers/SelectTutorial/TutorialOverview/index.tsx b/web-app/src/containers/SelectTutorial/TutorialOverview/index.tsx index 980bd832..8abccb55 100644 --- a/web-app/src/containers/SelectTutorial/TutorialOverview/index.tsx +++ b/web-app/src/containers/SelectTutorial/TutorialOverview/index.tsx @@ -102,12 +102,12 @@ const Summary = (props: Props) => (
-
+
{/* TODO Add back button */} -
+
) diff --git a/web-app/src/containers/Tutorial/index.tsx b/web-app/src/containers/Tutorial/index.tsx index 4eae4e23..2c5ddace 100644 --- a/web-app/src/containers/Tutorial/index.tsx +++ b/web-app/src/containers/Tutorial/index.tsx @@ -51,7 +51,7 @@ const styles = { flexDirection: 'row' as 'row', justifyContent: 'space-between', alignItems: 'center', - height: '2rem', + height: theme['$footer-height'], backgroundColor: 'black', fontSize: '1rem', lineHeight: '1rem', @@ -70,21 +70,21 @@ const styles = { right: 0, zIndex: 1000, }, - processes: { + processes: (theme: Theme) => ({ padding: '0 1rem', position: 'fixed' as 'fixed', - bottom: '2rem', + bottom: theme['$footer-height'], left: 0, right: 0, top: 'auto', - }, - testMessage: { + }), + testMessage: (theme: Theme) => ({ position: 'absolute' as 'absolute', top: 'auto', - bottom: '2rem', + bottom: theme['$footer-height'], left: '5px', right: '5px', - }, + }), } interface PageProps { @@ -163,7 +163,7 @@ const TutorialPage = (props: PageProps) => { />
) : ( -
+
{/* Process Modal */} {processes.length > 0 && (
@@ -216,7 +216,7 @@ const TutorialPage = (props: PageProps) => { ) : null}
-
+ )}
diff --git a/web-app/src/styles/theme.tsx b/web-app/src/styles/theme.tsx index 889312ee..7e8bd5d6 100644 --- a/web-app/src/styles/theme.tsx +++ b/web-app/src/styles/theme.tsx @@ -143,7 +143,7 @@ const theme = { '$shadow-3-right': '4px 0px 10px 0px rgba(0, 0, 0, 0.1)', '$shadow-3-down': '0px 4px 10px 0px rgba(0, 0, 0, 0.1)', '$shadow-3-left': '-4px 0px 10px 0px rgba(0, 0, 0, 0.1)', - '$footer-height': '3rem', + '$footer-height': '2.2rem', '$nav-height': '2rem', }