Release beta and add fairness page

frontend/src/App.tsx

@@ -6,6 +6,7 @@ import withAppInsights from './Shared/AppInsights';
 import ExplorePage from './ExplorePage/ExplorePage';
 import SearchPage from "./SearchPage/SearchPage";
 import IntroPage from "./IntroPage/IntroPage";
+import FairnessPage from "./IntroPage/FairnessPage";
 
 initializeIcons();
 
@@ -17,6 +18,7 @@ class App extends React.Component {
                     <Route exact path="/" component={ IntroPage } />
                     <Route path="/search/:id" component={SearchPage} />
                     <Route exact path="/search" component={SearchPage} />
+                    <Route exact path="/fairness" render={(props) => <FairnessPage {...props} />}  />
                     <Route path="/app/:data" render={(props) => <ExplorePage {...props} />} /> 
                     <Route exact path="/app" render={(props) => <ExplorePage {...props} />}  />
                 </Switch>

frontend/src/IntroPage/FairnessPage.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { Stack } from 'office-ui-fabric-react';
+import NavBar from '../Shared/NavBar';
+import { logEvent } from '../Shared/AppInsights';
+
+interface IProps {
+    history: any
+};
+
+export default class FairnessPage extends React.Component<IProps> {
+    constructor(props: any) {
+        super(props);
+    }
+
+
+    render() {
+        return (
+<Stack className="main" role="main">
+                <NavBar />
+                <div className="page-wrap" style={{ position: "relative", top: "80px", width: "100%", overflow: "hidden"}}>
+                    <div className="explore__banner-text-2">Before we get started:</div>
+                    <div className="explore__solid">
+                            <Stack horizontal horizontalAlign="center" verticalAlign="center" wrap>
+                                <div className="explore__disclaimer-text">
+                                 Art, culture, and heritage are sensitive subjects that require respect.
+                                 This work aims to celebrate culture and diversity and explore art in a new way.
+                                 AI has known biases and the results or artworks within this tool do not reflect 
+                                 the views of Microsoft, MIT, or the authors. We ask users to be respectfull of other's cultures and to use this tool responsibly. 
+                                 Some artworks or matches might not be approporiate for all ages, or might be culturally inappropriate.
+                                 We have released this tool as-is, and encourage users to read our <a href="https://github.com/microsoft/art/blob/master/transparency_note.md">transparency note</a> for more info. Thanks!  </div>
+                            </Stack>
+
+                            <Stack horizontalAlign="center" style={{paddingTop: "2%"}}>
+                                    <button className="explore__buttons button"  onClick={() => {
+                                        this.props.history.push("/app");
+                                        logEvent("Agree", {});
+
+                                    }}>I Understand</button>
+                            </Stack>
+                            
+                    </div>              
+                </div>
+            </Stack>
+        )
+    }
+
+}

frontend/src/Shared/BetaTools.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export const isBeta = false
+export const isBeta = true
 
 export const betaMessageDiv = <div className="explore__medium-text">
     Thank you for exploring mosaic! To explore the full application please apply to access the beta <a

frontend/src/styles/components/_explore.scss

@@ -237,6 +237,13 @@
     height: 60vh;
   }
 
+  &__background-banner-2 {
+    position: relative;
+    width: 100%;
+    height: 30vh;
+  }
+
+
   &__banner-text {
     position: absolute;
     width: 50%;
@@ -251,6 +258,36 @@
     text-shadow: 0px 0px 40px black, 0px 0px 40px black, 0px 0px 40px black;
   }
 
+  &__banner-text-2 {
+    color: black;
+    text-align: center;
+    font-family: $font-family-base;
+    font-size: 36px;
+    font-weight: bold;
+  }
+
+  &__disclaimer-text {
+    color: black;
+    left: auto;
+    @media (max-width: 1128px) {
+      height: auto;
+      margin-top: 5px !important;
+      margin-left: 5% !important;
+      margin-right: 5% !important;
+      margin-bottom: 5% !important;
+      font-size: 18px;
+    }
+    margin-top: 25px !important;
+    margin-left: 10% !important;
+    margin-right: 10% !important;
+    margin-bottom: 10% !important;
+
+    text-align: center;
+    font-family: $font-family-base;
+    font-size: 24px;
+    font-weight: normal;
+  }
+
   &__pick-image-text {
     color: black;
     left: auto;

transparency_note.md

@@ -0,0 +1,8 @@
+# AI Fairness and Transparency
+
+Art, culture, and heritage are sensitive subjects that require respect.
+This work aims to celebrate culture and diversity and explore art in a new way.
+AI has known biases and the results or artworks within this tool do not reflect 
+the views of Microsoft, MIT, or the authors. We ask users to be respectfull of other's cultures and to use this tool responsibly. 
+Some artworks or matches might not be approporiate for all ages, or might be culturally inappropriate.
+We have released this tool as-is. Thanks!