From dd018f368267dbdea77c448f1e5370cd799766bd Mon Sep 17 00:00:00 2001 From: Pranav Raj S Date: Sun, 20 Oct 2019 13:34:19 +0530 Subject: [PATCH] Upgrade bourbon to ^6.0.0 (#161) --- .../dashboard/assets/images/woot-logo.svg | 26 +++++++------------ .../dashboard/assets/scss/_animations.scss | 26 +++++++++---------- .../assets/scss/_helper-classes.scss | 4 +-- .../dashboard/assets/scss/_layout.scss | 10 +++---- .../dashboard/assets/scss/_mixins.scss | 10 +++---- .../dashboard/assets/scss/_variables.scss | 3 --- app/javascript/dashboard/assets/scss/app.scss | 8 ++++-- .../assets/scss/views/settings/channel.scss | 6 ++--- .../assets/scss/views/settings/inbox.scss | 8 +++--- .../assets/scss/widgets/_billing.scss | 6 ++--- .../scss/widgets/_conversation-card.scss | 2 +- .../scss/widgets/_conversation-view.scss | 14 +++++----- .../assets/scss/widgets/_reply-box.scss | 6 ++--- .../assets/scss/widgets/_report.scss | 2 +- .../assets/scss/widgets/_search-box.scss | 4 +-- .../assets/scss/widgets/_sidemenu.scss | 9 +++---- .../assets/scss/widgets/_status-bar.scss | 2 +- .../dashboard/assets/scss/widgets/_tabs.scss | 2 +- .../assets/scss/widgets/_woot-tables.scss | 4 +-- app/javascript/packs/application.js | 2 ++ package.json | 3 ++- postcss.config.js | 11 ++++---- yarn.lock | 16 +++++++++--- 23 files changed, 94 insertions(+), 90 deletions(-) diff --git a/app/javascript/dashboard/assets/images/woot-logo.svg b/app/javascript/dashboard/assets/images/woot-logo.svg index 507854beb..1d5f2e97e 100644 --- a/app/javascript/dashboard/assets/images/woot-logo.svg +++ b/app/javascript/dashboard/assets/images/woot-logo.svg @@ -1,22 +1,16 @@ - - - Group 2 + + + logo Created with Sketch. - - - - - - chatwoot - - - - - - - β + diff --git a/app/javascript/dashboard/assets/scss/_animations.scss b/app/javascript/dashboard/assets/scss/_animations.scss index 671334bc5..bcecf78cb 100644 --- a/app/javascript/dashboard/assets/scss/_animations.scss +++ b/app/javascript/dashboard/assets/scss/_animations.scss @@ -2,10 +2,10 @@ /* Enter and leave animations can use different */ /* durations and timing functions. */ .slide-fade-enter-active { - @include transition(all .3s $ease-in-cubic); + transition: all .3s $ease-in-cubic; } .slide-fade-leave-active { - @include transition(all .3s $ease-out-cubic); + transition: all .3s $ease-out-cubic; } .slide-fade-enter, .slide-fade-leave-to { opacity: 0; @@ -20,7 +20,7 @@ } .conversations-list-enter-active, .conversations-list-leave-active { - @include transition(all .25s $ease-out-cubic); + transition: all .25s $ease-out-cubic; } .conversations-list-enter, .conversations-list-leave-to /* .conversations-list-leave-active for <2.1.8 */ { opacity: 0; @@ -28,7 +28,7 @@ } .menu-list-enter-active, .menu-list-leave-active { - @include transition(all .2s $ease-out-cubic); + transition: all .2s $ease-out-cubic; } .menu-list-enter, .menu-list-leave-to /* .conversations-list-leave-active for <2.1.8 */ { opacity: 0; @@ -36,11 +36,11 @@ } .slide-up-enter-active { - @include transition(all .3s $ease-in-cubic); + transition: all .3s $ease-in-cubic; } .slide-up-leave-active { - @include transition(all .3s $ease-out-cubic); + transition: all .3s $ease-out-cubic; } .slide-up-enter, .slide-up-leave-to @@ -50,35 +50,35 @@ } .menu-slide-enter-active, .menu-slide-leave-active { - @include transition(all .15s $ease-in-cubic); + transition: all .15s $ease-in-cubic; } .menu-slide-enter, .menu-slide-leave-to /* .slide-fade-leave-active for <2.1.8 */ { - @include transform(translateY($space-small)); + transform: translateY($space-small); opacity: 0; } .toast-fade-enter-active { - @include transition(all .3s $ease-in-sine); + transition: all .3s $ease-in-sine; } .toast-fade-leave-active { - @include transition(all .1s $ease-out-sine); + transition: all .1s $ease-out-sine; } .toast-fade-enter, .toast-fade-leave-to /* .toast-fade-leave-active for <2.1.8 */ { - @include transform(translateY(-$space-small)); + transform: translateY(-$space-small); opacity: 0; } .modal-fade-enter-active { - @include transition(all .3s $ease-in-sine); + transition: all .3s $ease-in-sine; } .modal-fade-leave-active { - @include transition(all .1s $ease-out-sine); + transition: all .1s $ease-out-sine; } .modal-fade-enter, .modal-fade-leave-to diff --git a/app/javascript/dashboard/assets/scss/_helper-classes.scss b/app/javascript/dashboard/assets/scss/_helper-classes.scss index 5e8b0900a..4a32d17d1 100644 --- a/app/javascript/dashboard/assets/scss/_helper-classes.scss +++ b/app/javascript/dashboard/assets/scss/_helper-classes.scss @@ -3,7 +3,7 @@ } .flex-center { - @include flex; + display: flex; @include flex-align(center, middle); } @@ -55,4 +55,4 @@ input, textarea { border-radius: 4px !important; -} \ No newline at end of file +} diff --git a/app/javascript/dashboard/assets/scss/_layout.scss b/app/javascript/dashboard/assets/scss/_layout.scss index 762804381..89e748f61 100644 --- a/app/javascript/dashboard/assets/scss/_layout.scss +++ b/app/javascript/dashboard/assets/scss/_layout.scss @@ -11,12 +11,11 @@ body { .app-wrapper { @include full-height; - @include flex-weight(1); width: 100%; } .app-root { @include flex; - @include flex-direction(column); + flex-direction: column; } .app-content { @include flex; @@ -30,8 +29,7 @@ body { } .view-panel { - @include flex-weight(1); - @include flex-direction(column); + flex-direction: column; @include margin($zero); @include padding($space-normal); overflow-y: scroll; @@ -68,8 +66,8 @@ body { .no-items-error-message { @include flex; @include full-height; - @include justify-content(center); - @include align-items(center); + justify-content: center; + align-items: center; flex-direction: column; img { diff --git a/app/javascript/dashboard/assets/scss/_mixins.scss b/app/javascript/dashboard/assets/scss/_mixins.scss index 249b25f9b..ea810bb36 100644 --- a/app/javascript/dashboard/assets/scss/_mixins.scss +++ b/app/javascript/dashboard/assets/scss/_mixins.scss @@ -75,17 +75,17 @@ // flex-layout @mixin space-between() { - @include display(flex); - @include justify-content(space-between); + display: flex; + justify-content: space-between; } @mixin space-between-column() { @include space-between; - @include flex-direction(column); + flex-direction: column; } @mixin space-between-row() { @include space-between; - @include flex-direction(row); + flex-direction: row; } @mixin flex-shrink() { @@ -114,7 +114,7 @@ } @mixin scroll-on-hover() { - @include transition(all .4s $ease-in-out-cubic); + transition: all .4s $ease-in-out-cubic; overflow: hidden; &:hover { diff --git a/app/javascript/dashboard/assets/scss/_variables.scss b/app/javascript/dashboard/assets/scss/_variables.scss index 6628c3018..95e75b2cc 100644 --- a/app/javascript/dashboard/assets/scss/_variables.scss +++ b/app/javascript/dashboard/assets/scss/_variables.scss @@ -38,9 +38,6 @@ $font-weight-black: 700; $nav-bar-width: 23rem; $header-height: 5.6rem; -// Woot Logo -$woot-logo-width: 20rem; -$woot-logo-height: 8rem; $woot-logo-padding: $space-large $space-large $space-large $space-large; // Colors diff --git a/app/javascript/dashboard/assets/scss/app.scss b/app/javascript/dashboard/assets/scss/app.scss index fe6ea3aff..f847bf214 100644 --- a/app/javascript/dashboard/assets/scss/app.scss +++ b/app/javascript/dashboard/assets/scss/app.scss @@ -1,9 +1,13 @@ -@import '~bourbon/app/assets/stylesheets/bourbon'; @import 'variables'; + +@import '~bourbon/core/bourbon'; @import '~spinkit/scss/spinners/7-three-bounce'; -@import url('https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css'); +@import '~ionicons/scss/ionicons'; + @import 'foundation-settings'; @import 'mixins'; @import 'helper-classes'; + @import '~foundation-sites/assets/foundation-flex'; + @import 'woot'; diff --git a/app/javascript/dashboard/assets/scss/views/settings/channel.scss b/app/javascript/dashboard/assets/scss/views/settings/channel.scss index f948dab75..37735ade0 100644 --- a/app/javascript/dashboard/assets/scss/views/settings/channel.scss +++ b/app/javascript/dashboard/assets/scss/views/settings/channel.scss @@ -1,7 +1,7 @@ .channels { margin-top: $space-medium; .inactive { - @include filter(grayscale(100%)); + filter: grayscale(100%); } .channel { @include flex; @@ -9,10 +9,10 @@ @include margin($zero); @include background-white; @include border-light; - @include flex-direction(column); + flex-direction: column; cursor: pointer; border-right-color: $color-white; - @include transition(all 0.200s ease-in); + transition: all 0.200s ease-in; &:last-child { @include border-light; diff --git a/app/javascript/dashboard/assets/scss/views/settings/inbox.scss b/app/javascript/dashboard/assets/scss/views/settings/inbox.scss index 66175b9b9..97d9ba2de 100644 --- a/app/javascript/dashboard/assets/scss/views/settings/inbox.scss +++ b/app/javascript/dashboard/assets/scss/views/settings/inbox.scss @@ -159,7 +159,7 @@ @include background-gray; .arrow { opacity: 1; - @include transform(translateX($space-small)); + transform: translateX($space-small); } } .switch { @@ -184,8 +184,8 @@ font-size: $font-size-small; color: $medium-gray; opacity: .7; - @include transform(translateX(0)); - @include transition(opacity 0.100s ease-in 0s, transform 0.200s ease-in 0.030s); + transform: translateX(0); + transition: opacity 0.100s ease-in 0s, transform 0.200s ease-in 0.030s; } } } @@ -199,7 +199,7 @@ width: 100%; @include flex; flex-direction: row; - @include justify-content(space-between); + justify-content: space-between; @include padding($space-normal $space-large); a { margin-left: $space-normal; diff --git a/app/javascript/dashboard/assets/scss/widgets/_billing.scss b/app/javascript/dashboard/assets/scss/widgets/_billing.scss index 226cd4ef1..d448ff718 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_billing.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_billing.scss @@ -26,7 +26,7 @@ @include flex-grid-column(3, $space-medium); @include padding($space-normal); @include flex; - @include flex-direction(column); + flex-direction: column; // @include thin-border($color-border-light); // @include margin(-$space-micro $zero); background: $color-white; @@ -53,13 +53,13 @@ .lock-message { @include flex; @include full-height; - @include flex-direction(column); + flex-direction: column; @include flex-align(center, middle); div { @include flex; @include full-height; - @include flex-direction(column); + flex-direction: column; @include flex-align(center, middle); img { diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss index 9fccf6c69..a3ba89bce 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss @@ -47,7 +47,7 @@ right: $space-normal; top: $space-normal; @include flex; - @include flex-direction(column); + flex-direction: column; .unread { $unread-size: $space-two - $space-micro; diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss index 2dde16e1e..2b5943140 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss @@ -1,6 +1,6 @@ .conversations-sidebar { @include flex; - @include flex-direction(column); + flex-direction: column; .chat-list__top { @include padding($space-normal $zero $space-small $zero); @@ -45,12 +45,12 @@ .current-chat { @include flex; @include full-height; - @include flex-direction(column); + flex-direction: column; @include flex-align(center, middle); div { @include flex; @include full-height; - @include flex-direction(column); + flex-direction: column; @include flex-align(center, middle); img { @include margin($space-normal); @@ -68,7 +68,7 @@ .conv-empty-state { @include flex; @include full-height; - @include flex-direction(column); + flex-direction: column; @include flex-align(center, middle); } } @@ -76,7 +76,7 @@ .conversation-panel { @include flex; @include flex-weight(1); - @include flex-direction(column); + flex-direction: column; @include margin($zero); // Firefox flexbox fix height: 100%; @@ -267,8 +267,8 @@ .image { @include flex; - @include justify-content(center); - @include align-items(flex-end); + justify-content: center; + align-items: flex-end; text-align: center; img { diff --git a/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss b/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss index a36c9f87e..681908e84 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss @@ -3,7 +3,7 @@ margin-top: 0; border-bottom: 0; @include elegant-card; - @include transition(height 2s $ease-in-out-cubic); + transition: height 2s $ease-in-out-cubic; max-height: $space-jumbo*2; .reply-box__top { @@ -82,8 +82,8 @@ .tabs-title { margin: 0; - @include transition(background .2s $ease-in-out-cubic); - @include transition(color .2s $ease-in-out-cubic); + transition: background .2s $ease-in-out-cubic; + transition: color .2s $ease-in-out-cubic; a { padding: $space-one $space-two; diff --git a/app/javascript/dashboard/assets/scss/widgets/_report.scss b/app/javascript/dashboard/assets/scss/widgets/_report.scss index f39231ae0..980edff07 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_report.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_report.scss @@ -37,7 +37,7 @@ @include padding($space-small $space-medium); .chart-container { @include flex; - @include flex-direction(column); + flex-direction: column; @include flex-align(center, middle); div { width: 100%; diff --git a/app/javascript/dashboard/assets/scss/widgets/_search-box.scss b/app/javascript/dashboard/assets/scss/widgets/_search-box.scss index d834b607e..861c56baa 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_search-box.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_search-box.scss @@ -3,7 +3,7 @@ @include flex-align($x: left, $y: middle); @include padding($space-one $space-normal); @include flex-shrink; - @include transition(all .3s $ease-in-out-quad); + transition: all .3s $ease-in-out-quad; > .icon { font-size: $font-size-medium; color: $medium-gray; @@ -12,4 +12,4 @@ @include ghost-input(); @include margin(0); } -} \ No newline at end of file +} diff --git a/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss b/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss index 6dc000c4f..20b06cfac 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss @@ -18,8 +18,7 @@ .logo { img { @include padding($woot-logo-padding); - // width: $woot-logo-width; - // height: $woot-logo-height; + max-height: 100px; } } @@ -37,7 +36,7 @@ @include flex; @include space-between-column; @include padding($space-one $space-normal $space-one $space-one); - @include flex-direction(column); + flex-direction: column; @include border-normal-top; position: relative; @@ -93,7 +92,7 @@ .current-user { @include flex; - @include flex-direction(row); + flex-direction: row; cursor: pointer; .current-user--thumbnail { @@ -104,7 +103,7 @@ .current-user--data { @include flex; - @include flex-direction(column); + flex-direction: column; .current-user--name { font-size: $font-size-small; diff --git a/app/javascript/dashboard/assets/scss/widgets/_status-bar.scss b/app/javascript/dashboard/assets/scss/widgets/_status-bar.scss index 9cac66a8b..35893d25d 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_status-bar.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_status-bar.scss @@ -1,6 +1,6 @@ .status-bar { @include flex; - @include flex-direction(column); + flex-direction: column; @include flex-align($x: center, $y: middle); background: lighten($warning-color, 36%); // @include elegant-card(); diff --git a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss index 344958116..bf16258bf 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss @@ -39,7 +39,7 @@ a { @include position(relative, 1px null null null); - @include transition(all .15s $ease-in-out-cubic); + transition: all .15s $ease-in-out-cubic; border-bottom: 2px solid transparent; color: $medium-gray; font-size: $font-size-small; diff --git a/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss b/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss index cd8b8150a..8d910d717 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss @@ -20,7 +20,7 @@ table { tr { .show-if-hover { opacity: 0; - @include transition(all .2s $ease-in-out-cubic); + transition: all .2s $ease-in-out-cubic; } &:hover { .show-if-hover { @@ -42,7 +42,7 @@ table { min-width: 20rem; @include flex; @include flex-align(left, null); - @include flex-direction(row); + flex-direction: row; } .button { @include margin($zero); diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 3430d9a8c..7bae422ee 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -1,3 +1,5 @@ +import '@babel/polyfill'; + /* eslint no-console: 0 */ /* eslint-env browser */ /* eslint-disable no-new */ diff --git a/package.json b/package.json index e754b91cb..eff9cc94b 100644 --- a/package.json +++ b/package.json @@ -11,13 +11,14 @@ "test:coverage": "jest --no-cache --collectCoverage" }, "dependencies": { + "@babel/polyfill": "^7.6.0", "@rails/webpacker": "^4.0.7", "axios": "^0.19.0", "babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-vue-jsx": "^3.7.0", "babel-preset-env": "^1.7.0", - "bourbon": "~4.2.7", + "bourbon": "^6.0.0", "chart.js": "~2.5.0", "dotenv": "^8.0.0", "emojione": "~2.2.7", diff --git a/postcss.config.js b/postcss.config.js index aa5998a80..bb452b925 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,12 +1,13 @@ +/* eslint-disable */ module.exports = { plugins: [ require('postcss-import'), require('postcss-flexbugs-fixes'), require('postcss-preset-env')({ autoprefixer: { - flexbox: 'no-2009' + flexbox: 'no-2009', }, - stage: 3 - }) - ] -} + stage: 3, + }), + ], +}; diff --git a/yarn.lock b/yarn.lock index fa8c6653d..6e133f45d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -616,6 +616,14 @@ "@babel/helper-regex" "^7.4.4" regexpu-core "^4.6.0" +"@babel/polyfill@^7.6.0": + version "7.6.0" + resolved "https://registry.yarnpkg.com/@babel/polyfill/-/polyfill-7.6.0.tgz#6d89203f8b6cd323e8d946e47774ea35dc0619cc" + integrity sha512-q5BZJI0n/B10VaQQvln1IlDK3BTBJFbADx7tv+oXDPIDZuTo37H5Adb9jhlXm/fEN4Y7/64qD9mnrJJG7rmaTw== + dependencies: + core-js "^2.6.5" + regenerator-runtime "^0.13.2" + "@babel/preset-env@^7.0.0 < 7.4.0": version "7.3.4" resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.3.4.tgz#887cf38b6d23c82f19b5135298bdb160062e33e1" @@ -2395,10 +2403,10 @@ boolbase@^1.0.0, boolbase@~1.0.0: resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e" integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24= -bourbon@~4.2.7: - version "4.2.7" - resolved "https://registry.yarnpkg.com/bourbon/-/bourbon-4.2.7.tgz#48a805dff475fbf61e002a64e1e4db68d2f82fba" - integrity sha1-SKgF3/R1+/YeACpk4eTbaNL4L7o= +bourbon@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/bourbon/-/bourbon-6.0.0.tgz#41ad318371128888261a390bebe0e9e89daaa01e" + integrity sha512-Skds0R1+GY3c1oBddh9BggYVq39Uo4ySvW33zttPk+4+nfGYpbZqwaDwENkbtV7PYhCk0ctTFkzfTNFv5365ag== brace-expansion@^1.1.7: version "1.1.11"