fix(fonts): add Rubik font to font-face in scss

this also adjusts the storybook, dev, and production web

.storybook/webpack.config.js

@@ -32,6 +32,7 @@ module.exports = async ({ config }) => {
     use: [
       'style-loader',
       'css-loader',
+      'resolve-url-loader',
       'sass-loader',
     ],
     include: path.resolve(__dirname, '../app'),

RELEASE_PROCESS.md

@@ -2,6 +2,13 @@
 ## Release process:
 This will only work if you are internal to Qri and have the correct keys
 
+Before anything, pull master on both a windows and mac machine, run
+
+`yarn build`
+`yarn test-e2e` for mac and `yarn test-win-e2e` for windows
+
+to ensure we can build on both
+
 1) change the frontend and backend version numbers in:
   `/package.json`
   `/app/package.json`
@@ -19,12 +26,18 @@ This will only work if you are internal to Qri and have the correct keys
   - compress the app file that exists in `/release/mac`
   - rename it to match the current mac.zip file in the `/release` directory
   - replace the old zip file with the new one
-  - run `./node_modules/app-builder-bin/mac/app-builder blockmap -i release/FILENAME.zip -o release/throwaway.zip`
+  - run `./node_modules/app-builder-bin/mac/app-builder blockmap -i release/Qri\ Desktop-0.3.3-mac.zip -o release/throwaway.zip`
     - app-builder is modifying the contents of the zip, which is messing up the notarization. The -o flag indicates an output file that app-builder can futz with without ruining the integrity of the original app
   - take the updated file info from size, sha512 and blockMapSize
   - update the `/release/latest-mac.yml` with that info
   - replace `FILENAME.zip` to the release page
+13) On the windows lenova machine, click the `build_qri.bat` file on the desktop
+  - after it's build, upload it to drop box: `qri/qri Team Folder/qri builds/desktop/windows`
+  - add it to the release page
+14) Add the changelog notes to the release page
 12) change link on website to downloads:
   - in website/src/pages/download.js, line 10
     `const latestVersion = 'VERSION'`
-  - create pr, get approval, and merge
+  - create pr, get approval, and merge
+
+14) click publish on the release!

app/main.development.js

@@ -517,7 +517,6 @@ app.on('ready', () =>
 
       ipcMain.on('block-menus', (e, blockMenus) => {
         const blockableMenus = [
-          'about-qri-desktop',
           'show-all',
           'new-dataset',
           'add-dataset',

app/scss/0.4.0/chrome.scss

@@ -142,4 +142,53 @@
       }
     }
   }
+}
+
+.action-button {
+  color: #4FC7F3;
+  font-size: 16px;
+  font-weight: 300;
+  display: flex;
+  align-items: center;
+
+  .text {
+    margin-left: 10px;
+  }
+
+}
+
+.hamburger {
+  position: relative;
+
+  .hamburger-icon {
+    &:hover {
+      cursor: pointer;
+      color: #000000;
+    }
+  }
+
+  .hamburger-overlay {
+    position: absolute;
+    right: 0;
+    z-index: 99;
+    text-align: right;
+
+    .content {
+      > div {
+        cursor: pointer;
+        padding: 10px;
+        font-size: 14px;
+        white-space: nowrap;
+
+        &:hover {
+          cursor: pointer;
+          background-color: #F5F7FA;
+        }
+
+        &> * {
+          pointer-events: none;
+        }
+      }
+    }
+  }
 }

app/scss/0.4.0/dataset.scss

@@ -25,3 +25,12 @@
     margin-right: 24px;
   }
 }
+
+.title-bar {
+  display: flex;
+  justify-content: space-between;
+
+  .left {
+    flex: 0 0 
+  }
+}

app/scss/0.4.0/icons.scss

@@ -1,11 +1,14 @@
 .icon-dark {
+  transition: color .2s ease-out;
   color: #000000;
 }
 
 .icon-medium {
+  transition: color .2s ease-out;
   color: #B3B3B3;
 }
 
 .icon-light {
+  transition: color .2s ease-out;
   color: #ffffff;
 }

app/scss/0.4.0/overlay.scss

@@ -5,6 +5,14 @@
   flex-direction: column;
   box-shadow: 0px 0px 6px rgba(0,0,0,0.20);
   background: #fff;
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0s, opacity 0.3s ease-in-out;
+
+  &.visible {
+    visibility: visible;
+    opacity: 1;
+  }
 
   .title-bar {
     display: flex;
@@ -25,10 +33,6 @@
   }
 }
 
-.overlay.closed {
-  display: none;
-}
-
 .type-picker-overlay-row {
   display: flex;
   flex-direction: row;

app/scss/_variables.scss

@@ -173,7 +173,88 @@ $grid-gutter-width: 30px !default;
 //
 // Font, line-height, and color for body text, headings, and more.
 
-$font-family-sans-serif: "Rubik", "Avenir", "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif !default;
+/* rubik-300 - latin */
+@font-face {
+  font-family: 'Rubik';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Rubik Light'), local('Rubik-Light'),
+       url('../assets/fonts/rubik-v9-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+}
+/* rubik-300italic - latin */
+@font-face {
+  font-family: 'Rubik';
+  font-style: italic;
+  font-weight: 300;
+  src: local('Rubik Light Italic'), local('Rubik-LightItalic'),
+       url('../assets/fonts/rubik-v9-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+}
+/* rubik-regular - latin */
+@font-face {
+  font-family: 'Rubik';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Rubik'), local('Rubik-Regular'),
+       url('../assets/fonts/rubik-v9-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+}
+/* rubik-italic - latin */
+@font-face {
+  font-family: 'Rubik';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Rubik Italic'), local('Rubik-Italic'),
+       url('../assets/fonts/rubik-v9-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+}
+/* rubik-500 - latin */
+@font-face {
+  font-family: 'Rubik';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Rubik Medium'), local('Rubik-Medium'),
+       url('../assets/fonts/rubik-v9-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+}
+/* rubik-500italic - latin */
+@font-face {
+  font-family: 'Rubik';
+  font-style: italic;
+  font-weight: 500;
+  src: local('Rubik Medium Italic'), local('Rubik-MediumItalic'),
+       url('../assets/fonts/rubik-v9-latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+}
+/* rubik-700 - latin */
+@font-face {
+  font-family: 'Rubik';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Rubik Bold'), local('Rubik-Bold'),
+       url('../assets/fonts/rubik-v9-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+}
+/* rubik-700italic - latin */
+@font-face {
+  font-family: 'Rubik';
+  font-style: italic;
+  font-weight: 700;
+  src: local('Rubik Bold Italic'), local('Rubik-BoldItalic'),
+       url('../assets/fonts/rubik-v9-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+}
+/* rubik-900 - latin */
+@font-face {
+  font-family: 'Rubik';
+  font-style: normal;
+  font-weight: 900;
+  src: local('Rubik Black'), local('Rubik-Black'),
+       url('../assets/fonts/rubik-v9-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+}
+/* rubik-900italic - latin */
+@font-face {
+  font-family: 'Rubik';
+  font-style: italic;
+  font-weight: 900;
+  src: local('Rubik Black Italic'), local('Rubik-BlackItalic'),
+       url('../assets/fonts/rubik-v9-latin-900italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+}
+
+$font-family-sans-serif: "Avenir", "Rubik", "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif !default;
 $font-family-serif:      Georgia, "Times New Roman", Times, serif !default;
 $font-family-monospace:  "Source Code Pro", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 $font-family-base:       $font-family-sans-serif !default;

package.json

@@ -258,6 +258,7 @@
     "redux": "4.0.4",
     "redux-thunk": "2.3.0",
     "regenerator-runtime": "0.13.3",
+    "resolve-url-loader": "^3.1.1",
     "source-map-support": "0.5.16",
     "underscore": "1.9.1",
     "use-debounce": "3.1.0",

stories/5-Structure.stories.tsx

@@ -45,24 +45,24 @@ const sampleSchema: ISchema = {
   }
 }
 
-const sampleStructure = {
-  schema: sampleSchema,
-  format: 'csv',
-  length: 265000,
-  entries: 2350,
-  errors: 3,
-  depth: 2,
-  strict: false,
-  checksum: 'Qmb9Gy14GuCjrhRSjGJQpf5JkgdEdbZrV81Tz4x3ZDreY3'
-}
-
-export const structure = () => {
-  return (
-    <div style={{ display: 'flex', justifyContent:'center', alignItems: 'center' }}>
-      <Structure data={sampleStructure} />
-    </div>
-  )
-}
+// const sampleStructure = {
+//   schema: sampleSchema,
+//   format: 'csv',
+//   length: 265000,
+//   entries: 2350,
+//   errors: 3,
+//   depth: 2,
+//   strict: false,
+//   checksum: 'Qmb9Gy14GuCjrhRSjGJQpf5JkgdEdbZrV81Tz4x3ZDreY3'
+// }
+
+// export const structure = () => {
+//   return (
+//     <div style={{ display: 'flex', justifyContent:'center', alignItems: 'center' }}>
+//       <Structure data={sampleStructure} />
+//     </div>
+//   )
+// }
 
 export const schema = () => {
   const [schema, setSchema] = React.useState(sampleSchema)

webpack.config.development.js

@@ -73,6 +73,7 @@ module.exports = merge(baseConfig, {
             }
           },
           'css-loader',
+          'resolve-url-loader',
           'sass-loader'
         ]
       },
@@ -146,13 +147,13 @@ module.exports = merge(baseConfig, {
       'process.env.NODE_ENV': JSON.stringify('development'),
 
       /**
-       * compile-time flags are stored under a global __BUILD__ constant. 
+       * compile-time flags are stored under a global __BUILD__ constant.
        * Useful for allowing different behaviour between development builds and
        * release builds. These should be synted with
        *
        */
       '__BUILD__': {
-        'ENABLE_NETWORK_SECTION': JSON.stringify(true),
+        'ENABLE_NETWORK_SECTION': JSON.stringify(true)
       }
     }),
 
@@ -168,4 +169,4 @@ module.exports = merge(baseConfig, {
 
   // https://github.com/chentsulin/webpack-target-electron-renderer#how-this-module-works
   target: 'electron-renderer'
-})
+})

webpack.config.production.js

@@ -58,6 +58,7 @@ module.exports = merge(baseConfig, {
             }
           },
           'css-loader',
+          'resolve-url-loader',
           'sass-loader'
         ]
       },