Version 1.1

.github/workflows/deploy.yml

@@ -39,6 +39,7 @@ jobs:
         push: true
         build-args: |
             NPM_BUILD_CMD=build
+            GIT_AUTH_TOKEN=${{ secrets.TOKEN_REPO }}
         tags: blotout/superset:${{ env.DOCKER_TAG }}
     - name: Comment
       uses: NejcZdovc/comment-pr@v1

Dockerfile

@@ -51,16 +51,19 @@ ARG NPM_VER=7
 RUN npm install -g npm@${NPM_VER}
 
 ARG NPM_BUILD_CMD="build"
+ARG GIT_AUTH_TOKEN
 ENV BUILD_CMD=${NPM_BUILD_CMD}
+ENV NODE_AUTH_TOKEN=${GIT_AUTH_TOKEN}
 
 # NPM ci first, as to NOT invalidate previous steps except for when package.json changes
 RUN mkdir -p /app/superset-frontend
 RUN mkdir -p /app/superset/assets
 COPY ./docker/frontend-mem-nag.sh /
 COPY ./superset-frontend/package* /app/superset-frontend/
+COPY ./superset-frontend/.npmrc /app/superset-frontend/
 RUN /frontend-mem-nag.sh \
         && cd /app/superset-frontend \
-        && npm ci
+        && npm i
 
 # Next, copy in the rest and let webpack do its thing
 COPY ./superset-frontend /app/superset-frontend

superset-frontend/.npmrc

@@ -0,0 +1,2 @@
+@blotoutio:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}

superset-frontend/src/components/Button/index.tsx

@@ -91,6 +91,8 @@ export default function Button(props: ButtonProps) {
     padding = 10;
   }
 
+  primary.base = 'rgb(255, 82, 25)';
+
   let backgroundColor = primary.light4;
   let backgroundColorHover = mix(0.1, primary.base, primary.light4);
   let backgroundColorActive = mix(0.25, primary.base, primary.light4);
@@ -104,9 +106,9 @@ export default function Button(props: ButtonProps) {
   let borderColorDisabled = 'transparent';
 
   if (buttonStyle === 'primary') {
-    backgroundColor = primary.dark1;
-    backgroundColorHover = mix(0.1, grayscale.light5, primary.dark1);
-    backgroundColorActive = mix(0.2, grayscale.dark2, primary.dark1);
+    backgroundColor = primary.base;
+    backgroundColorHover = mix(0.1, grayscale.light5, primary.base);
+    backgroundColorActive = mix(0.2, grayscale.dark2, primary.base);
     color = grayscale.light5;
     colorHover = color;
   } else if (buttonStyle === 'tertiary' || buttonStyle === 'dashed') {

superset-frontend/src/components/ListView/ListView.tsx

@@ -100,7 +100,7 @@ const BulkSelectWrapper = styled(Alert)`
   }
 
   .deselect-all {
-    color: #1985a0;
+    color: rgb(255, 82, 25);
     margin-left: ${({ theme }) => theme.gridUnit * 4}px;
   }
 

superset-frontend/src/components/Menu/SubMenu.tsx

@@ -174,6 +174,7 @@ const SubMenu: React.FunctionComponent<SubMenuProps> = props => {
                 buttonStyle={btn.buttonStyle}
                 onClick={btn.onClick}
                 data-test={btn['data-test']}
+                data-type={btn.buttonStyle}
               >
                 {btn.name}
               </Button>

superset-frontend/stylesheets/antd/index.less

@@ -28,7 +28,7 @@
 /*
   Theme variables here: https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
 */
-@primary-color: #20a7c9;
+@primary-color: rgb(255, 82, 25);
 @info-color: #66bcfe;
 @success-color: #59c189;
 @processing-color: #66bcfe;

superset/static/blotout.css → superset-frontend/stylesheets/less/blotout.less

@@ -15,12 +15,12 @@ header > nav ul {
 }
 
 header > nav .navbar-right {
-  display: block;
+  display: flex;
   padding-top: 15px !important;
   margin-bottom: -30px !important;
 }
 
-header > nav .navbar-right .btn-primary {
+header > nav .navbar-right [data-type='primary'] {
   display: none;
 }
 
@@ -76,7 +76,7 @@ header > nav .navbar-right .btn-primary {
   text-decoration: none !important;
 }
 
-.list-search-container .dropdown-toggle {
+.list-search-container button.dropdown-toggle {
   top: 20px !important;
 }
 
@@ -164,3 +164,34 @@ body > footer {
 .slice_container .filter_box .Select__multi-value__label {
   white-space: initial !important;
 }
+
+.container {
+  width: 100%;
+}
+
+.panel-primary .panel-heading {
+  padding: 15px 15px 0 43px !important;
+}
+
+.list-container .list-add-action {
+  top: -15px !important;
+}
+
+.btn-primary {
+  background-color: rgb(255, 82, 25) !important;
+  border-color: rgb(255, 82, 25) !important;
+}
+
+.btn-primary:hover {
+  background-color: rgb(202, 76, 31) !important;
+  border-color: rgb(202, 76, 31) !important;
+}
+
+.text-primary,
+.text-primary:hover {
+  color: rgb(202, 76, 31) !important;
+}
+
+.navbar-static-top {
+  display: none;
+}

superset-frontend/stylesheets/less/index.less

@@ -22,6 +22,7 @@
 @import './fonts.less';
 @import './variables.less';
 @import './cosmo/bootswatch.less';
+@import './blotout.less';
 
 html,
 body {

superset-frontend/stylesheets/less/variables.less

@@ -24,10 +24,10 @@
 /* component styles. This will allow us to more easily adjust theming   */
 /************************************************************************/
 
-@primary-color: #20a7c9;
+@primary-color: rgb(255, 82, 25);
 @indicator-color: @primary-color;
 
-@brand-primary-dark1: #1a85a0;
+@brand-primary-dark1: @primary-color;
 @brand-primary-dark2: #156378;
 @brand-primary-light1: #79cade;
 @brand-primary-light2: #a5dae9;

superset/static/blotout.js

@@ -25,11 +25,11 @@ const modifyElements = () => {
     window.location.pathname === '/annotationlayermodelview/list/' ||
     window.location.pathname.startsWith('/annotationmodelview/')) {
     modifyCheck(() => {
-        const elements = document.querySelectorAll('header nav .navbar-right .btn-primary')
+        const elements = document.querySelectorAll(`header nav .navbar-right [data-type='primary']`)
         if (elements.length === 0) {
           return false
         }
-        elements[0].style.display = 'inline-block'
+        elements[0].style.display = 'inline-flex'
         return true
       })
     return

superset/templates/superset/base.html

@@ -23,12 +23,11 @@
   {{ super() }}
   <link rel="icon" type="image/png" href="/static/assets/images/favicon.png">
   {{ css_bundle("theme") }}
-  <link media="all" rel="stylesheet" href="/static/blotout.css?v=5" />
 {% endblock %}
 
 {% block head_js %}
   {{ super() }}
-  <script src="/static/blotout.js?v=4"></script>
+  <script src="/static/blotout.js?v=6"></script>
   {{ js_bundle("theme") }}
 {% endblock %}
 

superset/templates/superset/basic.html

@@ -51,12 +51,10 @@
       {% if entry %}
         {{ css_bundle(entry) }}
       {% endif %}
-
-    <link media="all" rel="stylesheet" href="/static/blotout.css?v=5" />
     {% endblock %}
 
     {{ js_bundle("theme") }}
-    <script src="/static/blotout.js?v=4"></script>
+    <script src="/static/blotout.js?v=6"></script>
 
     <input
       type="hidden"