Switching back to FINN styling.

NicHaley · Feb 20, 2020 · 34fa266 · 34fa266
1 parent 5f37d6b
commit 34fa266
Show file tree

Hide file tree

Showing 9 changed files with 128 additions and 64 deletions.
diff --git a/unleash-server/public/css/unleash.css b/unleash-server/public/css/unleash.css
@@ -1,7 +0,0 @@
-.new-feature-form {
-    padding: 20px 0;
-}
-
-body {
-  font-family: HelveticaNeueLight, HelveticaNeue-Light, 'Helvetica Neue Light', HelveticaNeue, 'Helvetica Neue', Arial, Helvetica, sans-serif;
-}

diff --git a/unleash-server/public/index.html b/unleash-server/public/index.html
@@ -4,10 +4,10 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Unleash</title>
+    <title>unleash admin</title>
     <meta name="description" content="unleash">
 
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="//finncdn.no/bb/css/so/5.5.28/so.min.css">
     <link rel="stylesheet" href="css/unleash.css">
 </head>
 <body>

diff --git a/unleash-server/public/js/components/ErrorMessages.jsx b/unleash-server/public/js/components/ErrorMessages.jsx
@@ -7,15 +7,32 @@ var ErrorMessages = React.createClass({
         }
 
         var errorNodes = this.props.errors.map(function(e) {
-            return (<li key={e}>{e}</li>);
+            return (<li key={e} className="largetext">{e}</li>);
         });
 
         return (
-            <div className="alert alert-danger" role="alert">
-              <ul>{errorNodes}</ul>
+            <div className="container">
+            <div className="mod shadow mtm">
+              <div className="inner bg-red-lt">
+                <div className="bd">
+                  <div className="media centerify">
+	             <div className="imgExt">
+                        <a
+                           onClick={this.props.onClearErrors}
+                           className="icon-kryss1 linkblock sharp">
+                        </a>
+                     </div>
+	             <div className="bd">
+                        <ul>{errorNodes}</ul>
+                     </div>
+                  </div>
+                </div>
+              </div>
+            </div>
             </div>
         );
     }
 });
 
-module.exports = ErrorMessages;
+module.exports = ErrorMessages;
+
diff --git a/unleash-server/public/js/components/FeatureList.jsx b/unleash-server/public/js/components/FeatureList.jsx
@@ -28,22 +28,25 @@ var FeatureList = React.createClass({
 
         return (
             <div className="container">
-              <div className='panel panel-primary'>
-                  <div className='panel-heading'>
-                      <h3 className='panel-title'>Features</h3>
-                      <div className='text-right'>
-                          <button type="button"
-                                  className="btn btn-default btn-sm"
-                                  onClick={this.props.onNewFeature}>
-                              <span className="glyphicon glyphicon-plus"></span> New
-                          </button>
-                      </div>
-                  </div>
-
-                  <div className='panel-body'>
-                    {featureNodes}
-                  </div>
+              <div className="mod shadow mts">
+                <div className="inner">
+                   <div className="bd">
+                     <div className="line">
+                       <div className="unit r-size1of4">
+                         <h2>Features</h2>
+                       </div>
+
+                       <div className="unit r-size3of4 rightify prl ptm">
+                         <button className="" onClick={this.props.onNewFeature}>New</button>
+                       </div>
+                     </div>
+
+                     <hr />
+
+                     {featureNodes}
+                   </div>
                 </div>
+              </div>
             </div>
         );
     }

diff --git a/unleash-server/public/js/components/Menu.jsx b/unleash-server/public/js/components/Menu.jsx
@@ -2,11 +2,54 @@ var React = require('react');
 
 var Menu = React.createClass({
     render: function() { return (
-            <nav className='navbar navbar-default' role='navigation'>
-                <div className='container'>
-                    <a className='navbar-brand' href='#'>unleash admin</a>
+          <div className="topbar mbl">
+            <div className="container">
+              <div className="page">
+                <div className="nav-level1 h4">
+                  <a href="" className="homelink pln">
+                    <span className="topbar-nav-svg-home">
+                      <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53M
+                                y5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MjcuNDExIiBoZWlnaHQ9IjE2OS4z
+                                OTgiIHZpZXdCb3g9IjAgMCA1MjcuNDExIDE2OS4zOTgiPjxwYXRoIGZpbGw
+                                9IiNmZmYiIGQ9Ik00NjguNTA3IDBoLTI1Ni4xODdjLTIxLjcwNyAwLTQwLj
+                                Y5NSAxMS44MTItNTAuOTEyIDI5LjMzNy0xMC4yMTYtMTcuNTI1LTI5LjIwN
+                                C0yOS4zMzctNTAuOTExLTI5LjMzN2gtNTEuNTk1Yy0zMi40NzkgMC01OC45
+                                MDIgMjYuNDI1LTU4LjkwMiA1OC45MDV2NTEuNTg3YzAgMzIuNDgxIDI2LjQ
+                                yMyA1OC45MDYgNTguOTAyIDU4LjkwNmg0MDkuNjA1YzMyLjQ3OSAwIDU4Lj
+                                kwMy0yNi40MjUgNTguOTAzLTU4LjkwNnYtNTEuNTg3Yy4wMDEtMzIuNDgtM
+                                jYuNDIzLTU4LjkwNS01OC45MDMtNTguOTA1eiIvPjxwYXRoIGZpbGw9IiMw
+                                OWYiIGQ9Ik00NjguNTA3IDE1My4zODNjMjMuNjg3IDAgNDIuODg4LTE5LjE
+                                5OSA0Mi44ODgtNDIuODl2LTUxLjU4OGMwLTIzLjY5MS0xOS4yMDEtNDIuOD
+                                ktNDIuODg4LTQyLjg5aC0yNTYuMTg3Yy0yMy42ODYgMC00Mi44ODcgMTkuM
+                                Tk4LTQyLjg4NyA0Mi44OXY5NC40NzhoMjk5LjA3NHoiLz48cGF0aCBmaWxs
+                                PSIjMDA2IiBkPSJNMTUzLjM4NCAxNTMuMzgzdi05NC40NzhjMC0yMy42OTE
+                                tMTkuMjAxLTQyLjg5LTQyLjg4Ny00Mi44OWgtNTEuNTk1Yy0yMy42ODYgMC
+                                00Mi44ODcgMTkuMTk4LTQyLjg4NyA0Mi44OXY1MS41ODdjMCAyMy42OTEgM
+                                TkuMjAxIDQyLjg5IDQyLjg4NyA0Mi44OWg5NC40ODJ6Ii8%2BPHJlY3QgeD
+                                0iMzIwLjE1NiIgeT0iNzUuMjc1IiBmaWxsPSIjZmZmIiB3aWR0aD0iMTkuN
+                                jIxIiBoZWlnaHQ9IjUzLjIxMSIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0y
+                                NjIuOTEyIDg2LjI4MWMwLTUuNTI5IDMuODEzLTExLjAwNiAxMy4wNjktMTE
+                                uMDA2aDI4LjQyMXYxNS42MTNoLTE4LjYxMmMtMi40OTggMC0zLjI1NS45OT
+                                ItMy4yNTUgMi42NjR2Ny40NzJoMjEuODY3djE1LjYxaC0yMS44Njd2MTEuO
+                                DUyaC0xOS42MjN2LTQyLjIwNXpNMzc1LjE2NSA5MS4wOTloMTAuMzk5YzIu
+                                NDA5IDAgMy4yNDYuODMyIDMuMjQ2IDMuMjM1bC0uMDA4IDM0LjE1MmgxOS4
+                                2MzJ2LTQxLjk5NmMwLTUuNTI3LTMuODE1LTExLjAwNC0xMy4wNjktMTEuMD
+                                A0aC0zOS44MjRsLS4wMSA1M2gxOS42MzR2LTM3LjM4N3pNNDQyLjcxOSA5M
+                                S4wOTloMTAuNGMyLjQwOCAwIDMuMjQ1LjgzMiAzLjI0NSAzLjIzNWwtLjAw
+                                OSAzNC4xNTJoMTkuNjM0di00MS45OTZjMC01LjUyNy0zLjgxNS0xMS4wMDQ
+                                tMTMuMDctMTEuMDA0aC0zOS44MjNsLS4wMSA1M2gxOS42MzN2LTM3LjM4N3
+                                oiLz48L3N2Zz4%3D" width="106" height="34" />
+                    </span>
+
+                    <span
+                      className="topbar-nav-svg-caption caption showbydefault hide-lt900">
+                      unleash admin
+                   </span>
+                  </a>
                 </div>
-            </nav>
+              </div>
+            </div>
+          </div>
         );
     }
 });

diff --git a/unleash-server/public/js/components/SavedFeature.jsx b/unleash-server/public/js/components/SavedFeature.jsx
@@ -11,17 +11,16 @@ var SavedFeature = React.createClass({
 
     render: function() {
         return (
-            <div className='row'>
-                <div className='col-md-1 text-right'>
-                    <input
-                        type='checkbox'
-                        checked={this.props.feature.enabled}
-                        onChange={this.onChange} />
+            <div className='line mal'>
+                <div className='unit r-size1of6'>
+                    <input type='checkbox' checked={this.props.feature.enabled} onChange={this.onChange} />
                 </div>
-                <div
-                    className='col-md-4'
-                    title='{this.props.feature.description}'>{this.props.feature.name}</div>
-                <div className='col-md-2 col-md-offset-5'>
+
+                <div className='unit r-size2of5' title={this.props.feature.description}>
+                  {this.props.feature.name}
+                </div>
+
+                <div className='unit '>
                     {this.props.feature.strategy}
                 </div>
             </div>

diff --git a/unleash-server/public/js/components/Unleash.jsx b/unleash-server/public/js/components/Unleash.jsx
@@ -111,11 +111,17 @@ var Unleash = React.createClass({
         this.setState({unsavedFeatures: unsaved});
     },
 
+    clearErrors: function() {
+        this.setState({errors: []});
+    },
+
     render: function() {
         return (
             <div>
               <Menu />
-              <ErrorMessages errors={this.state.errors} />
+              <ErrorMessages
+                 errors={this.state.errors}
+                 onClearErrors={this.clearErrors} />
               <FeatureList
                  unsavedFeatures={this.state.unsavedFeatures}
                  savedFeatures={this.state.savedFeatures}

diff --git a/unleash-server/public/js/components/UnsavedFeature.jsx b/unleash-server/public/js/components/UnsavedFeature.jsx
@@ -3,28 +3,29 @@ var React = require('react');
 var UnsavedFeature = React.createClass({
     render: function() {
         return (
-          <div className="bg-info new-feature-form row">
-            <form className="form-inline" role="form" ref="form">
-              <div className="checkbox col-md-1 text-right">
+          <form ref="form" className="bg-blue-xlt">
+            <div className="line mal ptl pbl">
+
+              <div className="unit prl r-size1of6">
                 <input ref="enabled" type="checkbox" defaultValue={this.props.feature.enabled} />
               </div>
 
-              <div className="form-group col-md-4">
+              <div className="unit r-size2of5">
                 <input
                    type="text"
-                   className="form-control"
+                   className="mbs"
                    id="name"
                    ref="name"
                    defaultValue={this.props.feature.name}
                    placeholder="Enter name" />
 
-                  <input className="form-control"
-                         type="text"
-                         ref="description"
-                         placeholder="Enter description" />
+                <input className=""
+                   type="text"
+                   ref="description"
+                   placeholder="Enter description" />
               </div>
 
-              <div className="form-group col-md-1 col-md-offset-5">
+              <div className="unit r-size2of6 plm">
                 <select id="strategy"
                         ref="strategy"
                         className=""
@@ -33,18 +34,17 @@ var UnsavedFeature = React.createClass({
                 </select>
               </div>
 
-              <div className="form-group col-md-1">
-                <button className="btn btn-primary btn-xs" onClick={this.saveFeature}>
-                    Save
-                </button>
-
-                <button className="btn btn-xs" onClick={this.cancelFeature}>
-                  Cancel
-                </button>
-              </div>
+            <div className="unit r-size1of6 rightify">
+              <button className="primary mrs" onClick={this.saveFeature}>
+                  Save
+              </button>
 
-            </form>
+              <button className="" onClick={this.cancelFeature}>
+                Cancel
+              </button>
+            </div>
           </div>
+          </form>
         );
     },
 

diff --git a/unleash-server/server.js b/unleash-server/server.js
@@ -18,7 +18,10 @@ if(app.get('env') === 'development') {
         webpackDevMiddleware = require('webpack-dev-middleware'),
         webpackConfig        = require('./webpack.config'),
         compiler             = webpack(webpackConfig),
-        config               = { publicPath: '/js' };
+        config               = {
+            publicPath: '/js',
+            noInfo: true
+        };
 
     app.use(baseUriPath, webpackDevMiddleware(compiler, config));
 }