Merge branch 'polish/ifql-builder' of github.com:influxdata/chronograf into polish/ifql-builder

ui/src/ifql/components/BodyBuilder.tsx

@@ -22,7 +22,9 @@ class BodyBuilder extends PureComponent<Props> {
           if (d.funcs) {
             return (
               <div className="declaration" key={b.id}>
-                <div className="variable-name">{d.name}</div>
+                <div className="variable-string">
+                  <span className="variable-name">{d.name}</span>
+                </div>
                 <ExpressionNode
                   key={b.id}
                   bodyID={b.id}
@@ -36,7 +38,9 @@ class BodyBuilder extends PureComponent<Props> {
 
           return (
             <div className="declaration" key={b.id}>
-              <div className="variable-name">{b.source}</div>
+              <div className="variable-string">
+                {this.colorVariableSyntax(b.source)}
+              </div>
             </div>
           )
         })
@@ -55,6 +59,28 @@ class BodyBuilder extends PureComponent<Props> {
     return <div className="body-builder">{_.flatten(bodybuilder)}</div>
   }
 
+  private colorVariableSyntax = (varString: string) => {
+    const split = varString.split('=')
+    const varName = split[0].substring(0, split[0].length - 1)
+    const varValue = split[1].substring(1)
+
+    const valueIsString = varValue.endsWith('"')
+
+    return (
+      <>
+        <span className="variable-name">{varName}</span>
+        {' = '}
+        <span
+          className={
+            valueIsString ? 'variable-value--string' : 'variable-value--number'
+          }
+        >
+          {varValue}
+        </span>
+      </>
+    )
+  }
+
   private get funcNames() {
     return this.props.suggestions.map(f => f.name)
   }

ui/src/ifql/components/DatabaseListItem.tsx

@@ -26,8 +26,9 @@ class DatabaseListItem extends PureComponent<Props, State> {
     return (
       <div className={this.className} onClick={this.handleChooseDatabase}>
         <div className="ifql-schema-item">
-          <span className="icon caret-right" />
+          <div className="ifql-schema-item-toggle" />
           {db}
+          <span className="ifql-schema-type">Bucket</span>
         </div>
         {this.state.isOpen && <TagList db={db} />}
       </div>

ui/src/ifql/components/FuncNode.tsx

@@ -1,4 +1,5 @@
 import React, {PureComponent, MouseEvent} from 'react'
+import uuid from 'uuid'
 import FuncArgs from 'src/ifql/components/FuncArgs'
 import {OnDeleteFuncNode, OnChangeArg, Func} from 'src/types/ifql'
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -46,7 +47,7 @@ export default class FuncNode extends PureComponent<Props, State> {
         onMouseLeave={this.handleMouseLeave}
       >
         <div className="func-node--name">{func.name}</div>
-        <div className="func-node--preview">{this.stringifyArgs}</div>
+        {this.coloredSyntaxArgs}
         {isExpanded && (
           <FuncArgs
             func={func}
@@ -61,7 +62,7 @@ export default class FuncNode extends PureComponent<Props, State> {
     )
   }
 
-  private get stringifyArgs(): string {
+  private get coloredSyntaxArgs(): JSX.Element {
     const {
       func: {args},
     } = this.props
@@ -70,15 +71,46 @@ export default class FuncNode extends PureComponent<Props, State> {
       return
     }
 
-    return args.reduce((acc, arg, i) => {
+    const coloredSyntax = args.map((arg, i): JSX.Element => {
       if (!arg.value) {
-        return acc
+        return
       }
 
-      const separator = i === 0 ? '' : ', '
+      const separator = i === 0 ? null : ', '
 
-      return `${acc}${separator}${arg.key}: ${arg.value}`
-    }, '')
+      return (
+        <React.Fragment key={uuid.v4()}>
+          {separator}
+          {arg.key}: {this.colorArgType(`${arg.value}`, arg.type)}
+        </React.Fragment>
+      )
+    })
+
+    return <div className="func-node--preview">{coloredSyntax}</div>
+  }
+
+  private colorArgType = (argument: string, type: string): JSX.Element => {
+    switch (type) {
+      case 'time':
+      case 'number':
+      case 'period':
+      case 'duration':
+      case 'array': {
+        return <span className="variable-value--number">{argument}</span>
+      }
+      case 'bool': {
+        return <span className="variable-value--boolean">{argument}</span>
+      }
+      case 'string': {
+        return <span className="variable-value--string">"{argument}"</span>
+      }
+      case 'invalid': {
+        return <span className="variable-value--invalid">{argument}</span>
+      }
+      default: {
+        return <span>{argument}</span>
+      }
+    }
   }
 
   private handleDelete = (): void => {

ui/src/ifql/components/FuncSelector.tsx

@@ -55,7 +55,7 @@ export class FuncSelector extends PureComponent<Props, State> {
               onClick={this.handleOpenList}
               tabIndex={0}
             >
-              <span className="icon fn" />
+              <span className="icon plus" />
             </button>
           )}
         </div>

ui/src/ifql/components/SchemaExplorer.tsx

@@ -23,7 +23,7 @@ class SchemaExplorer extends PureComponent {
             disabled={true}
             title="Collapse YO tree"
           >
-            <span className="icon zap" />
+            <span className="icon collapse" />
           </button>
         </div>
         <DatabaseList />

ui/src/ifql/components/TagListItem.tsx

@@ -26,8 +26,9 @@ class TagListItem extends PureComponent<Props, State> {
     return (
       <div className={this.className}>
         <div className="ifql-schema-item" onClick={this.handleClick}>
-          <span className="icon caret-right" />
+          <div className="ifql-schema-item-toggle" />
           {this.tagItemLabel}
+          <span className="ifql-schema-type">Tag Key</span>
         </div>
         {isOpen && this.renderTagValues}
       </div>
@@ -40,8 +41,8 @@ class TagListItem extends PureComponent<Props, State> {
   }
 
   private get tagItemLabel(): string {
-    const {tagKey, tagValues} = this.props
-    return `${tagKey} — ${tagValues.length}`
+    const {tagKey} = this.props
+    return `${tagKey}`
   }
 
   private get renderTagValues(): JSX.Element[] | JSX.Element {
@@ -52,7 +53,7 @@ class TagListItem extends PureComponent<Props, State> {
 
     return tagValues.map(v => {
       return (
-        <div key={v} className="ifql-schema-item readonly">
+        <div key={v} className="ifql-schema-item readonly ifql-tree-node">
           {v}
         </div>
       )
@@ -61,7 +62,7 @@ class TagListItem extends PureComponent<Props, State> {
 
   private get className(): string {
     const {isOpen} = this.state
-    return classnames('ifql-schema-tree', {expanded: isOpen})
+    return classnames('ifql-schema-tree ifql-tree-node', {expanded: isOpen})
   }
 }
 

ui/src/style/components/time-machine/ifql-builder.scss

@@ -37,14 +37,29 @@ $ifql-arg-min-width: 120px;
   }
 }
 
-.variable-name {
+.variable-string {
   @extend %ifql-node;
-  color: $c-laser;
+  color: $g11-sidewalk;
   line-height: $ifql-node-height;
   white-space: nowrap;
   background-color: $g3-castle;
   @include no-user-select();
 }
+.variable-name {
+  color: $c-pool;
+}
+.variable-value--string {
+  color: $c-honeydew
+}
+.variable-value--boolean {
+  color: $c-viridian
+}
+.variable-value--number {
+  color: $c-neutrino;
+}
+.variable-value--invalid {
+  color: $c-dreamsicle;
+}
 
 .func-node {
   @extend %ifql-node;
@@ -88,7 +103,7 @@ $ifql-arg-min-width: 120px;
 }
 
 .func-node--preview {
-  color: $g13-mist;
+  color: $g11-sidewalk;
   margin-left: 4px;
 
   .func-node:hover & {

ui/src/style/components/time-machine/ifql-explorer.scss

@@ -3,15 +3,18 @@
     ----------------------------------------------------------------------------
 */
 
-$ifql-tree-indent: 28px;
+$ifql-tree-indent: 26px;
+$ifql-tree-line: 2px;
 
 .ifql-schema-explorer {
   width: 100%;
   height: 100%;
   background-color: $g2-kevlar;
+  min-width: 200px;
 }
 
 .ifql-schema-tree {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -33,6 +36,30 @@ $ifql-tree-indent: 28px;
   font-style: italic;
 }
 
+.ifql-schema-item-toggle {
+  width: $ifql-tree-indent;
+  height: $ifql-tree-indent;
+  position: relative;
+
+  // Plus Sign
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: $g11-sidewalk;
+    width: $ifql-tree-indent / 3;
+    height: $ifql-tree-line;
+    transition: transform 0.25s ease, background-color 0.25s ease;
+  }
+  // Vertical Line
+  &:after {
+    transform: translate(-50%, -50%) rotate(90deg);
+  }
+}
+
 .ifql-schema-item {
   @include no-user-select();
   position: relative;
@@ -40,10 +67,11 @@ $ifql-tree-indent: 28px;
   display: flex;
   align-items: center;
   padding: 0 11px;
-  padding-left: $ifql-tree-indent;
+  padding-left: 0;
   font-size: 12px;
   font-weight: 600;
   color: $g11-sidewalk;
+  white-space: nowrap;
   transition: color 0.25s ease, background-color 0.25s ease;
 
   > span.icon {
@@ -51,32 +79,80 @@ $ifql-tree-indent: 28px;
     top: 50%;
     left: $ifql-tree-indent / 2;
     transform: translate(-50%, -50%);
-    transition: transform 0.25s ease;
   }
 
   &:hover {
-    color: $g15-platinum;
+    color: $g17-whisper;
     cursor: pointer;
     background-color: $g4-onyx;
+
+    .ifql-schema-item-toggle:before,
+    .ifql-schema-item-toggle:after {
+      background-color: $g17-whisper;
+    }
   }
 
   .expanded > & {
     color: $c-pool;
-    background-color: $g3-castle;
 
-    > span.icon {
-      transform: translate(-50%, -50%) rotate(90deg);
+    .ifql-schema-item-toggle:before,
+    .ifql-schema-item-toggle:after {
+      background-color: $c-pool;
+    }
+    .ifql-schema-item-toggle:before {
+      transform: translate(-50%, -50%) rotate(-90deg);
+      width: $ifql-tree-line;
+    }
+    .ifql-schema-item-toggle:after {
+      transform: translate(-50%, -50%) rotate(0deg);
+    }
+
+    &:hover {
+      color: $c-laser;
+
+      .ifql-schema-item-toggle:before,
+      .ifql-schema-item-toggle:after {
+        background-color: $c-laser;
+      }
     }
   }
 
   &.readonly,
   &.readonly:hover {
+    padding-left: $ifql-tree-indent + 8px;
     background-color: transparent;
     color: $g11-sidewalk;
     cursor: default;
   }
 }
 
+/* Tree Node Lines */
+.ifql-tree-node:before,
+.ifql-tree-node:after {
+  content: '';
+  background-color: $g4-onyx;
+  position: absolute;
+}
+
+// Vertical Line
+.ifql-tree-node:before {
+  top: 0;
+  left: $ifql-tree-indent / 2;
+  width: $ifql-tree-line;
+  height: 100%;
+}
+.ifql-tree-node:last-child:before {
+  height: $ifql-tree-indent / 2;
+}
+
+// Horizontal Line
+.ifql-tree-node:after {
+  top: $ifql-tree-indent / 2;
+  left: $ifql-tree-indent / 2;
+  width: $ifql-tree-indent / 2;
+  height: $ifql-tree-line;
+}
+
 /*
     Controls
     ----------------------------------------------------------------------------
@@ -92,3 +168,18 @@ $ifql-tree-indent: 28px;
   flex: 1 0 0;
   margin-right: 4px;
 }
+
+
+
+// Hints
+.ifql-schema-type {
+  color: $g11-sidewalk;
+  display: inline-block;
+  margin-left: 8px;
+  opacity: 0;
+  transition: opacity 0.25s ease;
+
+  .ifql-schema-item:hover  & {
+    opacity: 1;
+  }
+}

ui/src/style/fonts/icomoon.svg

@@ -23,11 +23,10 @@
 <glyph unicode="&#xe90c;" glyph-name="arrow-left" d="M678.4 678.4c7.68 0 17.92-2.56 25.6-10.24 15.36-12.8 17.92-38.4 5.12-53.76l-312.32-358.4 309.76-358.4c12.8-15.36 12.8-40.96-5.12-53.76-15.36-12.8-40.96-12.8-53.76 5.12l-332.8 384c-12.8 15.36-12.8 35.84 0 51.2l332.8 384c10.24 5.12 20.48 10.24 30.72 10.24z" />
 <glyph unicode="&#xe90d;" glyph-name="user" d="M588.8 289.28c58.88 28.16 99.84 89.6 99.84 161.28 0 99.84-79.36 179.2-179.2 179.2s-179.2-79.36-179.2-179.2c0-71.68 40.96-130.56 99.84-161.28-84.48-20.48-176.64-120.32-176.64-232.96v-145.92c0-12.8 7.68-25.6 17.92-25.6h476.16c10.24 0 17.92 10.24 17.92 25.6v145.92c0 112.64-89.6 209.92-176.64 232.96z" />
 <glyph unicode="&#xe90e;" glyph-name="graphline" d="M888.32 465.92c-17.92 0-33.28-5.12-48.64-12.8l-76.8 79.36c10.24 15.36 15.36 33.28 15.36 53.76 0 56.32-46.080 104.96-104.96 104.96s-104.96-46.080-104.96-104.96c0-33.28 15.36-64 40.96-81.92l-192-476.16c-2.56 0-7.68 0-10.24 0-20.48 0-40.96-7.68-58.88-17.92l-117.76 99.84c5.12 12.8 10.24 28.16 10.24 43.52 0 56.32-46.080 104.96-104.96 104.96s-104.96-46.080-104.96-104.96 46.080-104.96 104.96-104.96c20.48 0 40.96 7.68 58.88 17.92l117.76-99.84c-5.12-12.8-10.24-28.16-10.24-43.52 0-56.32 46.080-104.96 104.96-104.96s104.96 46.080 104.96 104.96c0 33.28-15.36 64-40.96 81.92l192 476.16c2.56 0 7.68 0 10.24 0 17.92 0 33.28 5.12 48.64 12.8l76.8-79.36c-10.24-15.36-15.36-33.28-15.36-53.76 0-56.32 46.080-104.96 104.96-104.96s104.96 46.080 104.96 104.96-48.64 104.96-104.96 104.96z" />
-<glyph unicode="&#xe90f;" glyph-name="curvy-f" d="M865.28 657.92c-43.52 61.44-104.96 92.16-166.4 81.92-79.36-12.8-143.36-89.6-176.64-207.36l-25.6-92.16h-81.92c-35.84 0-66.56-30.72-66.56-66.56s30.72-66.56 66.56-66.56h43.52l-84.48-294.4c-23.040-79.36-56.32-110.080-71.68-112.64-10.24-2.56-23.040 10.24-35.84 28.16-20.48 30.72-61.44 35.84-92.16 15.36s-35.84-61.44-15.36-92.16c38.4-53.76 89.6-84.48 140.8-84.48 7.68 0 15.36 0 23.040 2.56 79.36 12.8 143.36 89.6 176.64 207.36l94.72 330.24h81.92c35.84 0 66.56 30.72 66.56 66.56s-30.72 66.56-66.56 66.56h-43.52l15.36 56.32c23.040 79.36 56.32 110.080 71.68 112.64 10.24 2.56 23.040-10.24 35.84-28.16 20.48-30.72 61.44-35.84 92.16-15.36 33.28 20.48 38.4 61.44 17.92 92.16z" />
+<glyph unicode="&#xe90f;" glyph-name="collapse" d="M560.64 189.44c-2.56 2.56-5.12 5.12-7.68 7.68 0 0-2.56 2.56-2.56 2.56-2.56 0-2.56 2.56-5.12 2.56s-2.56 0-5.12 2.56c-2.56 0-2.56 0-5.12 2.56-2.56 0-7.68 0-10.24 0 0 0 0 0 0 0s0 0 0 0c-2.56 0-7.68 0-10.24 0s-2.56 0-5.12 0-2.56 0-5.12-2.56c-2.56 0-2.56-2.56-5.12-2.56s-2.56-2.56-5.12-2.56-5.12-5.12-7.68-7.68l-204.8-204.8c-20.48-20.48-20.48-51.2 0-71.68s51.2-20.48 71.68 0l117.76 117.76v-238.080c0-28.16 23.040-51.2 51.2-51.2s51.2 23.040 51.2 51.2v235.52l117.76-117.76c10.24-10.24 23.040-15.36 35.84-15.36s25.6 5.12 35.84 15.36c20.48 20.48 20.48 51.2 0 71.68l-202.24 204.8zM488.96 322.56c2.56-2.56 5.12-5.12 7.68-7.68 0 0 2.56-2.56 5.12-2.56s2.56-2.56 5.12-2.56c2.56 0 2.56 0 5.12-2.56 2.56 0 2.56 0 5.12-2.56 2.56 0 7.68 0 10.24 0s7.68 0 10.24 0c2.56 0 2.56 0 5.12 2.56 2.56 0 2.56 0 5.12 2.56 2.56 0 2.56 2.56 5.12 2.56 0 0 2.56 0 2.56 2.56 2.56 2.56 5.12 5.12 7.68 7.68l204.8 204.8c20.48 20.48 20.48 51.2 0 71.68s-51.2 20.48-71.68 0l-117.76-117.76v235.52c0 28.16-23.040 51.2-51.2 51.2s-51.2-23.040-51.2-51.2v-235.52l-117.76 117.76c-20.48 20.48-51.2 20.48-71.68 0s-20.48-51.2 0-71.68l202.24-204.8z" />
 <glyph unicode="&#xe910;" glyph-name="arrow-down" d="M89.6 422.4c0 7.68 2.56 17.92 10.24 25.6 12.8 15.36 38.4 17.92 53.76 5.12l358.4-309.76 358.4 309.76c15.36 12.8 40.96 12.8 53.76-5.12 12.8-15.36 12.8-40.96-5.12-53.76l-384-332.8c-15.36-12.8-35.84-12.8-51.2 0l-384 332.8c-5.12 7.68-10.24 17.92-10.24 28.16z" />
 <glyph unicode="&#xe911;" glyph-name="arrow-right" d="M345.6-166.4c-7.68 0-17.92 2.56-25.6 10.24-15.36 12.8-17.92 38.4-5.12 53.76l309.76 358.4-307.2 358.4c-12.8 15.36-12.8 40.96 5.12 53.76 15.36 12.8 40.96 12.8 53.76-5.12l332.8-384c12.8-15.36 12.8-35.84 0-51.2l-332.8-384c-10.24-5.12-20.48-10.24-30.72-10.24z" />
 <glyph unicode="&#xe912;" glyph-name="okta" d="M816.64 642.56v-286.72c69.12 10.24 125.44 71.68 125.44 143.36s-56.32 135.68-125.44 143.36zM650.24 499.2c0-71.68 53.76-133.12 125.44-143.36v286.72c-71.68-7.68-125.44-69.12-125.44-143.36zM1024 499.2c0 125.44-102.4 227.84-227.84 227.84-48.64 0-94.72-15.36-130.56-40.96-58.88 25.6-125.44 40.96-194.56 40.96-258.56 0-471.040-209.92-471.040-471.040s212.48-471.040 471.040-471.040c261.12 0 471.040 212.48 471.040 471.040 0 23.040-2.56 46.080-5.12 66.56 53.76 43.52 87.040 107.52 87.040 176.64zM471.040-133.12c-215.040 0-389.12 174.080-389.12 389.12s176.64 389.12 389.12 389.12c46.080 0 89.6-7.68 130.56-23.040-15.36-23.040-25.6-48.64-30.72-76.8-30.72 10.24-64 17.92-99.84 17.92-168.96 0-307.2-138.24-307.2-307.2s138.24-307.2 307.2-307.2c168.96 0 307.2 138.24 307.2 307.2 0 5.12 0 12.8 0 17.92 5.12 0 12.8 0 17.92 0 23.040 0 43.52 2.56 64 10.24 0-7.68 2.56-17.92 2.56-25.6 0-217.6-176.64-391.68-391.68-391.68zM796.16 314.88c-102.4 0-186.88 84.48-186.88 186.88s84.48 186.88 186.88 186.88 186.88-84.48 186.88-186.88-84.48-186.88-186.88-186.88z" />
-<glyph unicode="&#xe913;" glyph-name="fn" d="M519.68 307.2c35.84 0 64 28.16 64 64s-28.16 64-64 64h-33.28l12.8 58.88c12.8 71.68 40.96 102.4 53.76 104.96 7.68 2.56 25.6-7.68 43.52-30.72 23.040-28.16 61.44-33.28 89.6-10.24s33.28 61.44 10.24 89.6c-48.64 61.44-112.64 89.6-174.080 74.24-74.24-17.92-128-92.16-151.040-204.8l-15.36-81.92h-74.24c-35.84 0-64-28.16-64-64s28.16-64 61.44-64h51.2l-58.88-291.84c-12.8-71.68-40.96-102.4-53.76-104.96-7.68-2.56-25.6 7.68-43.52 30.72-20.48 28.16-61.44 33.28-89.6 10.24s-33.28-61.44-10.24-89.6c40.96-51.2 89.6-79.36 140.8-79.36 10.24 0 20.48 0 33.28 5.12 74.24 17.92 128 92.16 151.040 204.8l61.44 314.88h58.88zM921.6 243.2c-33.28 40.96-87.040 64-143.36 64-33.28 0-66.56-7.68-97.28-23.040-10.24 10.24-20.48 17.92-35.84 20.48-35.84 7.68-69.12-15.36-74.24-51.2l-43.52-227.84c0 0 0 0 0 0l-23.040-122.88c-7.68-35.84 15.36-69.12 51.2-74.24 35.84-7.68 69.12 15.36 74.24 51.2l38.4 204.8v2.56c10.24 48.64 61.44 94.72 110.080 94.72 17.92 0 33.28-5.12 43.52-17.92s12.8-30.72 10.24-51.2l-38.4-207.36c-7.68-35.84 15.36-69.12 51.2-74.24 5.12 0 7.68 0 12.8 0 30.72 0 56.32 20.48 64 51.2l40.96 207.36c7.68 53.76-5.12 112.64-40.96 153.6z" />
 <glyph unicode="&#xe916;" glyph-name="search" d="M993.28-99.84l-202.24 202.24c40.96 64 64 135.68 64 217.6 0 225.28-181.76 407.040-407.040 407.040s-404.48-184.32-404.48-407.040 181.76-407.040 407.040-407.040c79.36 0 153.6 23.040 217.6 64l202.24-202.24c17.92-17.92 40.96-25.6 64-25.6s46.080 7.68 64 25.6c30.72 33.28 30.72 92.16-5.12 125.44zM145.92 320c0 166.4 135.68 302.080 302.080 302.080s304.64-135.68 304.64-304.64c0-79.36-30.72-151.040-79.36-204.8-2.56-2.56-7.68-5.12-10.24-7.68s-5.12-7.68-7.68-10.24c-53.76-48.64-125.44-79.36-204.8-79.36-168.96 0-304.64 135.68-304.64 304.64z" />
 <glyph unicode="&#xe917;" glyph-name="duplicate" d="M921.6 768h-563.2c-56.32 0-102.4-46.080-102.4-102.4v-153.6h-153.6c-56.32 0-102.4-46.080-102.4-102.4v-563.2c0-56.32 46.080-102.4 102.4-102.4h563.2c56.32 0 102.4 46.080 102.4 102.4v153.6h153.6c56.32 0 102.4 46.080 102.4 102.4v563.2c0 56.32-46.080 102.4-102.4 102.4zM691.2-153.6c0-12.8-12.8-25.6-25.6-25.6h-563.2c-12.8 0-25.6 12.8-25.6 25.6v563.2c0 12.8 12.8 25.6 25.6 25.6h153.6v-332.8c0-56.32 46.080-102.4 102.4-102.4h332.8v-153.6z" />
 <glyph unicode="&#xe918;" glyph-name="checkmark" d="M345.6-87.040l-271.36 271.36c-33.28 33.28-38.4 89.6-7.68 128 35.84 38.4 94.72 38.4 130.56 2.56l168.96-168.96c5.12-5.12 12.8-5.12 15.36 0l442.88 442.88c35.84 35.84 94.72 35.84 130.56-2.56 33.28-35.84 28.16-92.16-7.68-128l-542.72-542.72c-15.36-20.48-43.52-20.48-58.88-2.56z" />

ui/src/style/fonts/icon-font.scss

@@ -30,8 +30,7 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
-  &.fn:before {content: "\e913";}
-  &.curvy-f:before {content: "\e90f";}
+  &.collapse:before {content: "\e90f";}
   &.okta:before {content: "\e912";}
   &.user-remove:before {content: "\e904";}
   &.user-add:before {content: "\e907";}